Chart.js is one of the most well-known and popular JavaScript libraries for creating interactive charts and data visualizations, in a simple and flexible way.
Its design focuses on being both easy to use and offering a wide range of options for customizing charts. It allows you to create various types of charts, such as bar, line, pie, and radar, among others.
Chart.js is Open Source and is based on HTML5 Canvas to draw the charts on the web page. For example, here is a chart created with Chart.js
Some features of Chart.js
- Support for multiple chart types: Includes line, bar, pie, radar, bubble, polar, and more.
- Interactivity: Charts are interactive by default, with features like tooltips and legends.
- Animations: Charts can be animated during rendering.
- Flexible configuration: Allows detailed customization of chart styles, colors, and behaviors.
- Scalability: Compatible with different screen sizes and devices.
For more information about Chart.js, you can visit the official Chart.js website and consult the complete documentation. We can also explore the GitHub repository to see the source code and contribute to the community.
Installing Chart.js
To start using Chart.js in our projects, we first need to install it. If we use npm, we can install Chart.js with the following command:
npm install chart.js
Alternatively, we can include Chart.js directly in our HTML via a <script> tag:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
How to Use Chart.js
Adding the Element to HTML
First, we need to add the container where Chart.js will render the chart. For these examples, we’ll do it like this
<canvas id="myChart" width="400" height="200"></canvas>
Creating a Line Chart
const ctx = document.getElementById('myChart').getContext('2d');
const myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Monthly Sales',
data: [10, 20, 15, 30, 25, 40, 35],
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
fill: true
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top'
},
tooltip: {
callbacks: {
label: function(tooltipItem) {
return `Sales: $${tooltipItem.raw}`;
}
}
}
}
}
});
Creating a Bar Chart
The following example shows how to create a bar chart.
const ctx = document.getElementById('myChart').getContext('2d');
const myBarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
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)'
],
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)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top'
},
tooltip: {
callbacks: {
label: function(tooltipItem) {
return `Votes: ${tooltipItem.raw}`;
}
}
}
},
scales: {
y: {
beginAtZero: true
}
}
}
});
Creating a Pie Chart
To represent proportional data, we can use a pie chart.
const ctx = document.getElementById('myChart').getContext('2d');
const myPieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: 'My First Dataset',
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,
plugins: {
legend: {
position: 'top'
},
tooltip: {
callbacks: {
label: function(tooltipItem) {
return `Value: ${tooltipItem.raw}`;
}
}
}
}
}
});
