Chart.js
Simple yet flexible JavaScript charting library
📈 What is Chart.js?
Chart.js is a simple yet flexible JavaScript charting library that uses HTML5 Canvas. It's perfect for creating responsive, animated charts with clean and engaging visualizations.
<!-- Include Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Canvas element -->
<canvas id="myChart" width="400" height="200"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green'],
datasets: [{
label: 'Votes',
data: [12, 19, 3, 5],
backgroundColor: ['red', 'blue', 'yellow', 'green']
}]
}
});
</script>
Output:
Chart.js Chart Types
Bar Charts
Compare data across categories
type: 'bar'Line Charts
Show trends over time
type: 'line'Pie & Doughnut
Show proportional data
type: 'pie' or 'doughnut'Radar Charts
Multi-dimensional data visualization
type: 'radar'🔹 Creating a Line Chart
Line charts are perfect for showing data trends over time:
const ctx = document.getElementById('lineChart').getContext('2d');
const lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: 'Sales',
data: [65, 59, 80, 81, 56, 55],
borderColor: 'rgb(75, 192, 192)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
tension: 0.1
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Monthly Sales Data'
}
},
scales: {
y: {
beginAtZero: true
}
}
}
});Output:
🔹 Doughnut Chart Example
Doughnut charts are great for showing parts of a whole:
const ctx = document.getElementById('doughnutChart').getContext('2d');
const doughnutChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Desktop', 'Mobile', 'Tablet'],
datasets: [{
label: 'Device Usage',
data: [55, 35, 10],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Website Traffic by Device'
}
}
}
});Output:
🔹 Mixed Chart Types
Combine different chart types in one visualization:
const ctx = document.getElementById('mixedChart').getContext('2d');
const mixedChart = new Chart(ctx, {
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
type: 'bar',
label: 'Sales',
data: [10, 20, 30, 40, 50],
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderColor: 'rgb(255, 99, 132)',
borderWidth: 1
}, {
type: 'line',
label: 'Target',
data: [25, 25, 25, 25, 25],
borderColor: 'rgb(54, 162, 235)',
backgroundColor: 'rgba(54, 162, 235, 0.2)',
tension: 0
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Sales vs Target'
}
},
scales: {
y: {
beginAtZero: true
}
}
}
});Output:
🔹 Chart.js Boilerplate Template
A complete starter template for Chart.js projects:
<!DOCTYPE html>
<html>
<head>
<title>Chart.js Dashboard</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.chart-container {
position: relative;
height: 400px;
width: 80%;
margin: 20px auto;
}
.dashboard {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
padding: 20px;
}
</style>
</head>
<body>
<h1>My Analytics Dashboard</h1>
<div class="dashboard">
<div class="chart-container">
<canvas id="chart1"></canvas>
</div>
<div class="chart-container">
<canvas id="chart2"></canvas>
</div>
</div>
<script>
// Chart 1: Bar Chart
const ctx1 = document.getElementById('chart1').getContext('2d');
const chart1 = new Chart(ctx1, {
type: 'bar',
data: {
labels: ['Product A', 'Product B', 'Product C', 'Product D'],
datasets: [{
label: 'Sales',
data: [12, 19, 3, 5],
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: 'Product Sales'
}
}
}
});
// Chart 2: Line Chart
const ctx2 = document.getElementById('chart2').getContext('2d');
const chart2 = new Chart(ctx2, {
type: 'line',
data: {
labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
datasets: [{
label: 'Revenue',
data: [1000, 1200, 800, 1500],
borderColor: 'rgba(255, 99, 132, 1)',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
tension: 0.1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: 'Weekly Revenue'
}
}
}
});
// Update charts with new data
function updateCharts() {
// Add new data point
chart1.data.datasets[0].data.push(Math.floor(Math.random() * 20));
chart1.data.labels.push('Product ' + String.fromCharCode(65 + chart1.data.labels.length));
chart1.update();
}
// Update every 5 seconds (optional)
// setInterval(updateCharts, 5000);
</script>
</body>
</html>