How to use Chart.js | 11 Chart.js Examples
Last Modified: Nov. 16, 2020, 10:04 a.m.
What is Chart.js?
Chart.js is an open-source data visualization library.
HTML5 charts using JavaScript render animated charts with interactive legends and data points.
How do you use Chart.js?
Built using JavaScript, Chart.js requires the use of the HTML <canvas> element and a JS function to instantiate the chart.
Datasets, labels, background colors, and other configurations are then added to the function as needed.
What is covered in this Chart.js tutorial?
We will cover the following topics:
- Chart.js Installation
- Chart.js Integration
- Chart.js HTML
- Chart.js JS
- Chart.js Charts
- Line
- Radar
- Doughnut
- Pie
- Polar area
- Bubble
- Scatter
- Area
- Mixed
- Chart.js Configurations
- Chart title
- Chart legends
- Chart padding
Chart.js Installation - How to install Chart.js
Install Chart.js via npm or bower.
Or use the CDN to added the minified Chart.js scripts.
Chart.js npm
How to install Chart.js with npm
npm install chart.js --save
Install chart.js in the command prompt using npm.
Chart.js Bower
How to install Chart.js with bower
bower install chart.js --save
Or install Chart.js in the command prompt using bower.
Chart.js CDN
How to use the Chart.js CDN
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<!--Chart.js JS CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
...
</body>
</html>
While the documentation recommends installing Chart.js in the command prompt, add the Chart.js CDN to the <head> element for light-weight development.
The examples below use the CDN.
Integration - How to add Chart.js to an HTML document
Chart.js requires HTML and JavaScript code.
The HTML code places the chart in the document using the <canvas> element while the JavaScript function instantiates the chart.
How to add the Chart.js <canvas> element
How to display Chart.js in an HTML template
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Integration</title>
<!--Chart.js JS CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
</body>
</html>
Chart.js requires a <canvas> element containing the unique id of the chart for the data to render in the HTML template.
This is the only HTML code required.
How to instantiate Chart.js
How to add the Chart.js JavaScript function
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Integration</title>
<!--Chart.js JS CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
});
</script>
</body>
</html>
Then create the script that creates the chart.
The type, data, and configuration options will be added within the function.
Charts - 11 Chart.js Examples
There are nine types of charts offered by Chart.js.
Each is customisable and can be combined on a mixed chart.
Chart.js Line Chart Example
How to make a Chart.js line chart
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Line Chart</title>
<!--Chart.js JS CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
datasets: [{
data: [86,114,106,106,107,111,133],
label: "Total",
borderColor: "#3e95cd",
backgroundColor: "#7bb6dd",
fill: false,
}, {
data: [70,90,44,60,83,90,100],
label: "Accepted",
borderColor: "#3cba9f",
backgroundColor: "#71d1bd",
fill: false,
}, {
data: [10,21,60,44,17,21,17],
label: "Pending",
borderColor: "#ffa500",
backgroundColor:"#ffc04d",
fill: false,
}, {
data: [6,3,2,2,7,0,16],
label: "Rejected",
borderColor: "#c45850",
backgroundColor:"#d78f89",
fill: false,
}
]
},
});
</script>
</body>
</html>
Specify the type of chart as 'line', then add the dataset properties below.
Add individual data sets with y-axis datapoints, a label, borderColor, backgroundColor, and fill properties.
Chart.js Filled Line Chart Example
How to make a Chart.js line chart with background colors
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Filled Line Chart</title>
<!--Chart.js JS CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
datasets: [{
data: [86,114,106,106,107,111,133],
label: "Total",
borderColor: "rgb(62,149,205)",
backgroundColor: "rgb(62,149,205,0.1)",
}, {
data: [70,90,44,60,83,90,100],
label: "Accepted",
borderColor: "rgb(60,186,159)",
backgroundColor: "rgb(60,186,159,0.1)",
}, {
data: [10,21,60,44,17,21,17],
label: "Pending",
borderColor: "rgb(255,165,0)",
backgroundColor:"rgb(255,165,0,0.1)",
}, {
data: [6,3,2,2,7,0,16],
label: "Rejected",
borderColor: "rgb(196,88,80)",
backgroundColor:"rgb(196,88,80,0.1)",
}
]
},
});
</script>
</body>
</html>
Specify the backgroundColor for each dataset and either delete fill:false or change it to fill:true to add a background color to each line area.
However, be aware colors do get muddy as they overlap.
We also recommend using the RGB color format for the backgroundColor to specify opacity.
Chart.js Bar Chart Example
How to make a Chart.js bar chart
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Bar Chart</title>
<!--Chart.js JS CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
datasets: [{
data: [86,114,106,106,107,111,133],
label: "Total",
borderColor: "rgb(62,149,205)",
backgroundColor: "rgb(62,149,205,0.1)",
borderWidth:2
}, {
data: [70,90,44,60,83,90,100],
label: "Accepted",
borderColor: "rgb(60,186,159)",
backgroundColor: "rgb(60,186,159,0.1)",
borderWidth:2
}, {
data: [10,21,60,44,17,21,17],
label: "Pending",
borderColor: "rgb(255,165,0)",
backgroundColor:"rgb(255,165,0,0.1)",
borderWidth:2
}, {
data: [6,3,2,2,7,0,16],
label: "Rejected",
borderColor: "rgb(196,88,80)",
backgroundColor:"rgb(196,88,80,0.1)",
borderWidth:2
}
]
},
});
</script>
</body>
</html>
Declare type:"bar", then add the x-axis labels and the datasets.
The background color of the bars will default to gray if no backgroundColor is given.
Stacked Bar Chart Example
How to make a Chart.js stacked bar chart
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Stacked Bar Chart</title>
<!--Chart.js JS CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
datasets: [{
data: [70,90,44,60,83,90,100],
label: "Accepted",
borderColor: "#3cba9f",
backgroundColor: "#71d1bd",
borderWidth:2
}, {
data: [10,21,60,44,17,21,17],
label: "Pending",
borderColor: "#ffa500",
backgroundColor:"#ffc04d",
borderWidth:2
}, {
data: [6,3,2,2,7,0,16],
label: "Rejected",
borderColor: "#c45850",
backgroundColor:"#d78f89",
borderWidth:2
}
]
},
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked:true
}],
}
},
});
</script>
</body>
</html>
Instead of having a Totals dataset, present the data as a stacked bar chart.
The scales option with both xAxes and yAxes set to stacked:true needs to be added for this to work.
Chart.js Radar Chart Example
How to make a Chart.js radar chart
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Radar Chart</title>
<!--Chart.js JS CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
datasets: [{
data: [86,114,106,106,107,111,133],
label: "Total",
borderColor: "#3e95cd",
backgroundColor: "rgb(62,149,205,0.1)",
borderWidth:2,
}, {
data: [70,90,44,60,83,90,100],
label: "Accepted",
borderColor: "#3cba9f",
backgroundColor: "rgb(60,186,159,0.1)",
borderWidth:2,
}, {
data: [10,21,60,44,17,21,17],
label: "Pending",
borderColor: "#ffa500",
backgroundColor:"rgb(255,165,0,0.1)",
borderWidth:2,
}, {
data: [6,3,2,2,7,0,16],
label: "Rejected",
borderColor: "#c45850",
backgroundColor:"rgb(196,88,80,0.1)",
borderWidth:2,
}
]
},
options: {
scales: {
xAxes: [{
display: false,
}],
}
},
});
</script>
</body>
</html>
If you choose to display a radar chart, set the XAxes and YAxes to display: false, as they is not needed to read this chart.
Doughnut Chart Example
How to make a Chart.js doughnut chart
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Doughnut Chart</title>
<!--Chart.js JS CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Accepted","Pending", "Rejected"],
datasets: [{
data: [70,10,6],
borderColor:[
"#3cba9f",
"#ffa500",
"#c45850",
],
backgroundColor: [
"rgb(60,186,159,0.1)",
"rgb(255,165,0,0.1)",
"rgb(196,88,80,0.1)",
],
borderWidth:2,
}]
},
options: {
scales: {
xAxes: [{
display: false,
}],
yAxes: [{
display: false,
}],
}
},
});
</script>
</body>
</html>
The doughnut chart works similarly to the radar chart.
The axes are not required for this chart.
Pie Chart Example
How to make a Chart.js pie chart
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Pie Chart</title>
<!--Chart.js JS CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Accepted","Pending", "Rejected"],
datasets: [{
data: [70,10,6],
borderColor:[
"#3cba9f",
"#ffa500",
"#c45850",
],
backgroundColor: [
"rgb(60,186,159,0.1)",
"rgb(255,165,0,0.1)",
"rgb(196,88,80,0.1)",
],
borderWidth:2,
}]
},
options: {
scales: {
xAxes: [{
display: false,
}],
yAxes: [{
display: false,
}],
}
},
});
</script>
</body>
</html>
The pie chart works similarly to the doughnut chart, it just renders without a hole in the center.
Polar Area Chart Example
How to make a Chart.js polar area chart
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Polar Area Chart</title>
<!--Chart.js JS CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Accepted","Pending", "Rejected"],
datasets: [{
data: [70,10,6],
borderColor:[
"#3cba9f",
"#ffa500",
"#c45850",
],
backgroundColor: [
"rgb(60,186,159,0.1)",
"rgb(255,165,0,0.1)",
"rgb(196,88,80,0.1)",
],
borderWidth:2,
}]
},
options: {
scales: {
xAxes: [{
display: false,
}],
yAxes: [{
display: false,
}],
}
},
});
</script>
</body>
</html>
The polar area charts require the same dataset formatting as the doughnut and pie charts.
Bubble Chart Example
How to make a Chart.js bubble chart
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Bubble Chart</title>
<!--Chart.js JS CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bubble',
data: {
datasets: [{
data: [
{x: 17, y: 3, r:11},
],
label: "Blue Team",
borderColor: "#3e95cd",
backgroundColor: "rgb(62,149,205,0.1)",
borderWidth:2,
}, {
data: [
{x: 10, y: 3, r:20},
],
label: "Green Team",
borderColor: "#3cba9f",
backgroundColor: "rgb(60,186,159,0.1)",
borderWidth:2,
}, {
data: [
{x: 4, y: 4, r:30},
],
label: "Yellow Team",
borderColor: "#ffa500",
backgroundColor:"rgb(255,165,0,0.1)",
borderWidth:2,
}, {
data: [
{x: 14, y: 0, r:9}
],
label: "Red Team",
borderColor: "#c45850",
backgroundColor:"rgb(196,88,80,0.1)",
borderWidth:2,
}
]
},
options: {
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: '# of wins'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: '# of games'
}
}],
}
},
});
</script>
</body>
</html>
For bubble charts, a set of x and y coordinates required in the dataset.
To create the radius of the bubbles, add a third coordinate r.
Scatter Chart Example
How to make a Chart.js scatter chart
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Scatter Chart</title>
<!--Chart.js JS CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
data: [
{x: 17, y: 3},
],
label: "Blue Team",
borderColor: "#3e95cd",
backgroundColor: "rgb(62,149,205,0.1)",
borderWidth:2,
}, {
data: [
{x: 10, y: 3},
],
label: "Green Team",
borderColor: "#3cba9f",
backgroundColor: "rgb(60,186,159,0.1)",
borderWidth:2,
}, {
data: [
{x: 4, y: 4},
],
label: "Yellow Team",
borderColor: "#ffa500",
backgroundColor:"rgb(255,165,0,0.1)",
borderWidth:2,
}, {
data: [
{x: 14, y: 0}
],
label: "Red Team",
borderColor: "#c45850",
backgroundColor:"rgb(196,88,80,0.1)",
borderWidth:2,
}
]
},
options: {
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: '# of wins'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: '# of games'
}
}],
}
},
});
</script>
</body>
</html>
X and Y properties are also required for a scatter chart.
Mixed Chart Example
How to make a Chart.js mixed chart with bar and line datasets
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Mixed Chart</title>
<!--Chart.js JS CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
datasets: [{
data: [86,114,106,106,107,111,133],
label: "Total",
borderColor: "#3e95cd",
backgroundColor: "rgb(62,149,205)",
borderWidth:2,
type: 'line',
fill:false
}, {
data: [70,90,44,60,83,90,100],
label: "Accepted",
borderColor: "#3cba9f",
backgroundColor: "#3cba9f",
borderWidth:2
}, {
data: [10,21,60,44,17,21,17],
label: "Pending",
borderColor: "#ffa500",
backgroundColor:"#ffa500",
borderWidth:2,
}, {
data: [6,3,2,2,7,0,16],
label: "Rejected",
borderColor: "#c45850",
backgroundColor:"#c45850",
borderWidth:2
}
]
},
});
</script>
</body>
</html>
A mixed chart combines multiple Chart.js chart types on one graph. A common combination is line and bar chart datasets.
Change the dataset by adding type to the dataset.
How to customize Chart.js - Chart.js Configurations
The title, legends, padding, and colors are all configurable Chart.js properties. Most are declared under options.
Chart.js title
How to customize the Chart.js title
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Title</title>
<!--Chart.js JS CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'scatter',
data: {
...
},
options: {
title: {
display: true,
text: 'Leads over Time',
},
},
});
</script>
</body>
</html>
The title is added under options as a string.
Chart.js legend
How to place the Chart.js legend top center
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Legend Center</title>
<!--Chart.js JS CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'scatter',
data: {
...
},
options: {
legend: {
display:true,
position:'left',
align:'start'
},
},
});
</script>
</body>
</html>
The position sets the horizontal location while align determines the vertical location of the legend.
By default, the legend is displayed at the top, center of the canvas.
Positions are either 'top', 'bottom', 'left', or 'right'. Align can be 'start','center', or 'end'.
Chart.js layout
How to add padding to the Chart
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Padding</title>
<!--Chart.js JS CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
...
},
options: {
layout: {
padding: {
left: 50,
right: 30,
top: 3,
bottom: 2
}
}
},
});
</script>
</body>
</html>
The padding is added to the chart within layout.
