Introduction to Chart.js
Chart.js is a popular open-source library that allows developers to create beautiful and responsive charts in their web applications. With its simple API and comprehensive documentation, Chart.js makes it easy to integrate different types of charts such as line, bar, radar, doughnut, pie, polar area, bubble, and scatter into your projects.
Getting Started with Chart.js
To get started with Chart.js, include the library in your HTML file:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Creating a Simple Line Chart
Here is a basic example of how to create a line chart:
<canvas id="myLineChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myLineChart').getContext('2d');
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Monthly Sales',
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
Using Different Chart Types
Chart.js supports various chart types. Here are a few examples:
Doughnut Chart
<canvas id="myDoughnutChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myDoughnutChart').getContext('2d');
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: 'Color Distribution',
data: [300, 50, 100],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
legend: {
position: 'top',
},
animation: {
animateScale: true,
animateRotate: true
}
}
});
</script>
Bar Chart
<canvas id="myBarChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myBarChart').getContext('2d');
var myBarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Monthly Revenue',
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(199, 199, 199, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(199, 199, 199, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
Advanced Configuration
Chart.js allows various customizations and advanced configurations. Below are some API methods and options available for developers.
Custom Tooltips
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += Math.round(tooltipItem.yLabel * 100) / 100;
return label;
}
}
}
}
Data Labels
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
options: {
plugins: {
datalabels: {
display: true,
color: 'white'
}
}
}
Responsive Charts
options: {
responsive: true,
maintainAspectRatio: false
}
App Example using Chart.js
Here is a simple web application that showcases multiple types of charts from Chart.js:
<!DOCTYPE html>
<html>
<head>
<title>Chart.js App Example</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
</head>
<body>
<h1>Chart.js App Example</h1>
<div style="width: 50%;">
<canvas id="myLineChart"></canvas>
<canvas id="myDoughnutChart"></canvas>
<canvas id="myBarChart"></canvas>
</div>
</body>
<script>
// Line Chart
var ctxL = document.getElementById('myLineChart').getContext('2d');
var myLineChart = new Chart(ctxL, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Monthly Sales',
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
// Doughnut Chart
var ctxD = document.getElementById('myDoughnutChart').getContext('2d');
var myDoughnutChart = new Chart(ctxD, {
type: 'doughnut',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: 'Color Distribution',
data: [300, 50, 100],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
legend: {
position: 'top',
},
animation: {
animateScale: true,
animateRotate: true
}
}
});
// Bar Chart
var ctxB = document.getElementById('myBarChart').getContext('2d');
var myBarChart = new Chart(ctxB, {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Monthly Revenue',
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(199, 199, 199, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(199, 199, 199, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</html>
With the above examples, you can now create a variety of charts using Chart.js and customize them according to your project requirements. This flexibility makes Chart.js an excellent choice for data visualization in web applications.
Hash: bb74933adfea82ab055eb680635990df6fb009b2fb7767f6e04d95c30f387c2d
