JS Chart.js
Chart.js draws responsive, animated charts on top of Canvas. Eight built-in chart types cover most business dashboards.
Install & include
HTML
<canvas id="sales"></canvas> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
A bar chart in 15 lines
JS
const ctx = document.getElementById("sales");
new Chart(ctx, {
type: "bar",
data: {
labels: ["Q1", "Q2", "Q3", "Q4"],
datasets: [{
label: "Revenue",
data: [12, 19, 17, 23],
backgroundColor: "#04AA6D",
borderRadius: 6,
}],
},
options: {
responsive: true,
plugins: { legend: { display: false } },
scales: { y: { beginAtZero: true } },
},
});
The built-in chart types
| Type | Use for |
|---|---|
line | Time series, trends |
bar | Compare categories |
pie / doughnut | Parts of a whole (≤ ~6 slices) |
radar | Multi-axis comparison |
scatter | X-Y points |
bubble | X-Y plus size |
polarArea | Categorical magnitudes |
Updating data after creation
JS
chart.data.datasets[0].data = newNumbers; chart.update();
Tip: Chart.js handles responsive sizing automatically — wrap the canvas in a container with a fixed aspect ratio (or set
maintainAspectRatio: false) and let CSS handle the size.Example
Example
<!DOCTYPE html>
<html>
<body>
<p id="out"></p>
<script>
document.getElementById("out").textContent = "Hello from JS Chart.js!";
</script>
</body>
</html>
Try it Yourself »
Exercise
Push updated data and tell the chart to redraw.
chart.data.datasets[0].data = newData; chart.
();
Six letters.
Discussion
Loading…