Chart.js – JavaScript Chart Library
Chart.js is a simple and flexible JavaScript library for creating charts using the HTML5 <canvas> element. It supports line, bar, pie, radar, doughnut, polar area, bubble, and scatter charts with animations and responsive design.
Getting Started
1. Include Chart.js
You can include it via CDN:
<script src="<https://cdn.jsdelivr.net/npm/chart.js>"></script>
Or install via npm for projects:
npm install chart.js
2. HTML Canvas Element
All charts are drawn on a <canvas>:
<canvas id="myChart" width="400" height="200"></canvas>
Creating a Chart
Example: Line Chart
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line', // Chart type
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'Sales',
data: [12, 19, 3, 5, 2],
borderColor: 'blue',
backgroundColor: 'rgba(0,0,255,0.1)',
fill: true
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: true
},
title: {
display: true,
text: 'Monthly Sales Data'
}
},
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
Supported Chart Types
| Type | Description |
|---|---|
| Line | Show trends over time |
| Bar | Compare data across categories |
| Pie | Display percentages of a whole |
| Doughnut | Similar to pie with a center hole |
| Radar | Compare multiple variables visually |
| Polar Area | Like pie, shows relative data sizes |
| Bubble | Scatter chart with varying bubble sizes |
| Scatter | Plot x and y coordinates |
Customizing Charts
Colors
borderColor: 'red',
backgroundColor: 'rgba(255,0,0,0.2)'
Tooltips
options: {
plugins: {
tooltip: {
enabled: true
}
}
}
Animations
options: {
animation: {
duration: 1000,
easing: 'easeOutBounce'
}
}
Legends
options: {
plugins: {
legend: {
display: true,
position: 'top'
}
}
}
Updating Charts Dynamically
You can update chart data on the fly:
myChart.data.datasets[0].data = [5, 10, 15, 20, 25];
myChart.update();
Advantages of Chart.js
- Lightweight and easy to use
- Supports responsive design and animations
- Works well for small to medium data sets
- Open-source and actively maintained
When to Use Chart.js
- Simple dashboards
- Quick visualizations for websites
- Projects where ease of use and visual appeal are more important than deep customization