Chart.js Chart Types and Configuration
Chart.js provides various chart types, each with its specific purpose and configuration options. This chapter will detail various chart types supported by Chart.js and their configuration methods.
Chart Types Overview
Chart.js supports following main chart types:
- Line Chart - Shows data trends over time
- Bar Chart - Compares data across different categories
- Pie Chart - Shows the proportion of parts to the whole
- Doughnut Chart - Variation of pie chart with empty center
- Radar Chart - Displays multivariate data
- Polar Area Chart - Similar to pie chart but uses angle and radius
- Bubble Chart - Displays three-dimensional data
- Scatter Chart - Shows relationship between two variables
- Mixed Chart - Combines multiple chart types
1. Line Chart
Line charts are used to show data trends over time, particularly suitable for displaying continuous data.
Basic Configuration
javascript
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],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Monthly Sales Trend'
}
},
scales: {
y: {
beginAtZero: true
}
}
}
});Line Chart Configuration Options
javascript
datasets: [{
// Basic configuration
label: 'Dataset Label',
data: [65, 59, 80, 81, 56, 55],
// Line styles
borderColor: 'rgb(75, 192, 192)',
borderWidth: 2,
borderDash: [5, 5], // Dashed line
tension: 0.4, // Line curvature (0-1)
// Fill area
fill: true, // or 'start', 'end', 'origin'
backgroundColor: 'rgba(75, 192, 192, 0.2)',
// Point styles
pointBackgroundColor: 'rgb(75, 192, 192)',
pointBorderColor: '#fff',
pointBorderWidth: 2,
pointRadius: 4,
pointHoverRadius: 6,
// Show/hide
showLine: true,
spanGaps: false
}]2. Bar Chart
Bar charts are used to compare data across different categories, can be vertical or horizontal.
Vertical Bar Chart
javascript
const barChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: 'Sales',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});Horizontal Bar Chart
javascript
const horizontalBarChart = new Chart(ctx, {
type: 'bar', // In Chart.js 3.x+ use 'bar', set direction via indexAxis
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: 'Sales',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
indexAxis: 'y', // Set to horizontal bar chart
responsive: true,
scales: {
x: {
beginAtZero: true
}
}
}
});Multi-dataset Bar Chart
javascript
const multiBarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: 'Product A',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}, {
label: 'Product B',
data: [8, 15, 7, 12, 9, 6],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});3. Pie Chart
Pie charts show the proportional relationship of each part to the whole.
javascript
const pieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: 'Color Distribution',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 205, 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, 205, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Color Distribution Pie Chart'
}
}
}
});4. Doughnut Chart
Doughnut chart is a variation of pie chart with an empty center, can display more information.
javascript
const doughnutChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: 'Color Distribution',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 205, 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, 205, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1,
cutout: '50%' // Size of empty center
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Color Distribution Doughnut Chart'
}
}
}
});5. Radar Chart
Radar chart displays multivariate data, suitable for comparing different objects across multiple dimensions.
javascript
const radarChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['Speed', 'Strength', 'Skill', 'Endurance', 'Intelligence'],
datasets: [{
label: 'Player A',
data: [65, 59, 90, 81, 56],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
}, {
label: 'Player B',
data: [28, 48, 40, 19, 96],
fill: true,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(54, 162, 235)'
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Player Ability Comparison Radar Chart'
}
}
}
});6. Polar Area Chart
Polar area chart is similar to pie chart but uses angles and radius to represent data.
javascript
const polarAreaChart = new Chart(ctx, {
type: 'polarArea',
data: {
labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
datasets: [{
label: 'Color Distribution',
data: [11, 16, 7, 3, 14],
backgroundColor: [
'rgba(255, 99, 132, 0.5)',
'rgba(75, 192, 192, 0.5)',
'rgba(255, 205, 86, 0.5)',
'rgba(201, 203, 207, 0.5)',
'rgba(54, 162, 235, 0.5)'
]
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Polar Area Chart'
}
}
}
});7. Bubble Chart
Bubble chart displays three-dimensional data, X-axis, Y-axis and bubble size represent three variables respectively.
javascript
const bubbleChart = new Chart(ctx, {
type: 'bubble',
data: {
datasets: [{
label: 'Dataset 1',
data: [{
x: 20,
y: 30,
r: 15
}, {
x: 40,
y: 10,
r: 10
}],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)'
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Bubble Chart Example'
}
}
}
});8. Scatter Chart
Scatter chart displays the relationship between two variables.
javascript
const scatterChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: 'Scatter Data',
data: [{
x: 10,
y: 20
}, {
x: 15,
y: 10
}, {
x: 20,
y: 25
}],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)'
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Scatter Chart Example'
}
},
scales: {
x: {
type: 'linear',
position: 'bottom'
}
}
}
});9. Mixed Chart
Mixed chart can combine multiple chart types in one chart.
javascript
const mixedChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: 'Sales',
type: 'bar',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}, {
label: 'Growth Rate',
type: 'line',
data: [10, 15, 8, 12, 6, 9],
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
tension: 0.1,
yAxisID: 'y1'
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
type: 'linear',
display: true,
position: 'left',
},
y1: {
beginAtZero: true,
type: 'linear',
display: true,
position: 'right',
grid: {
drawOnChartArea: false,
},
}
}
}
});Complete Example
Following is a complete example displaying all chart types:
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Chart Types Example</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.chart-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 20px;
margin: 20px 0;
}
.chart-container {
position: relative;
height: 400px;
border: 1px solid #ddd;
border-radius: 8px;
padding: 10px;
}
h2 {
text-align: center;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<h1 style="text-align: center;">Chart.js Chart Types Example</h1>
<div class="chart-grid">
<!-- Line chart -->
<div>
<h2>Line Chart</h2>
<div class="chart-container">
<canvas id="lineChart"></canvas>
</div>
</div>
<!-- Bar chart -->
<div>
<h2>Bar Chart</h2>
<div class="chart-container">
<canvas id="barChart"></canvas>
</div>
</div>
<!-- Pie chart -->
<div>
<h2>Pie Chart</h2>
<div class="chart-container">
<canvas id="pieChart"></canvas>
</div>
</div>
<!-- Doughnut chart -->
<div>
<h2>Doughnut Chart</h2>
<div class="chart-container">
<canvas id="doughnutChart"></canvas>
</div>
</div>
<!-- Radar chart -->
<div>
<h2>Radar Chart</h2>
<div class="chart-container">
<canvas id="radarChart"></canvas>
</div>
</div>
<!-- Polar area chart -->
<div>
<h2>Polar Area Chart</h2>
<div class="chart-container">
<canvas id="polarAreaChart"></canvas>
</div>
</div>
</div>
</div>
<script>
// Line chart
const lineCtx = document.getElementById('lineChart').getContext('2d');
new Chart(lineCtx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: 'Sales',
data: [65, 59, 80, 81, 56, 55],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
// Bar chart
const barCtx = document.getElementById('barChart').getContext('2d');
new Chart(barCtx, {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: 'Sales',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
// Pie chart
const pieCtx = document.getElementById('pieChart').getContext('2d');
new Chart(pieCtx, {
type: 'pie',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: 'Color Distribution',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
]
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
// Doughnut chart
const doughnutCtx = document.getElementById('doughnutChart').getContext('2d');
new Chart(doughnutCtx, {
type: 'doughnut',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: 'Color Distribution',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
]
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
// Radar chart
const radarCtx = document.getElementById('radarChart').getContext('2d');
new Chart(radarCtx, {
type: 'radar',
data: {
labels: ['Speed', 'Strength', 'Skill', 'Endurance', 'Intelligence'],
datasets: [{
label: 'Player A',
data: [65, 59, 90, 81, 56],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)'
}, {
label: 'Player B',
data: [28, 48, 40, 19, 96],
fill: true,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)'
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
// Polar area chart
const polarAreaCtx = document.getElementById('polarAreaChart').getContext('2d');
new Chart(polarAreaCtx, {
type: 'polarArea',
data: {
labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
datasets: [{
label: 'Color Distribution',
data: [11, 16, 7, 3, 14],
backgroundColor: [
'rgba(255, 99, 132, 0.5)',
'rgba(75, 192, 192, 0.5)',
'rgba(255, 205, 86, 0.5)',
'rgba(201, 203, 207, 0.5)',
'rgba(54, 162, 235, 0.5)'
]
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
</script>
</body>
</html>Through this chapter's learning, you should have mastered various chart types provided by Chart.js and their configuration methods. In next chapter, we will learn how to customize chart styles and appearance.