anChart.js is an open-source free JavaScript library that is used to visualize data in the form of charts like pie, lines, bars, area, radar, polar, and scatter. It makes it easier for users to interpret and understand complex information. In this article, we will learn about its features, syntax, and step-by-step guide to implementing chart.js with examples.
Features of Chart.js
- It is easy to use and its beginner-friendly syntax is straightforward that enables developers to create charts quickly and efficiently.
- It provides a variety of customization options, and by using those options you can customize charts as per your requirements.
- These charts are responsive, which means they will adjust by themselves on different devices.
- It provides various types of charts such as pie, line, bar, area, radar, polar, scatter, etc..
- These charts are interactive, which means they enable users to hover over data points to view additional information or click on elements to trigger actions.
Syntax:
let chart = new Chart(canvas_element , {
type: 'chart_type', //ex: line, bar, pie
data: {
labels: [ ], //An array of labels for the X-axis.
//You can define multiple dataset objects to show multiple data.
datasets: [{
label: 'dataset_name', //label of dataset
data: [], //An array of data points corresponding to each label on the X-axis.
borderColor: 'color' //color of the dataset's border.
.....
}]
},
options: {
//Additional configuration options for the chart.
}
});
Steps to create a chart:
1. First include the chart.js in the HTML.
<head> <script src=
</script>
<link rel= "stylesheet" type= "text/css" href= "style.css" >
</head> |
2. Create canvas: To create a chart we need to represent the Chart class. In order to do this, we need to pass jQuery instance or 2d context of the canvas of where we want the place or draw the chart.
For example:
<canvas id = ”chart” width=”900” height = “900”> </canvas>
3. Type of Chart and Data: Decide what type of chart is required and prepare the data accordingly. Data requires labels, datasets, data values, backgroundColor,borderColor, borderWidth and various other options.
For example:
labels:[“CS”, “IT” , “ECE” , “EE”, ”ME”, “BE”], And datasets: Label: ‘ # of students’,
Data : [105,124,78,91,62,56],
backgroundColor :[ 'rgba(255, 99, 132, 0.2)' ,
'rgba(54, 162, 235, 0.2)' ,
'rgba(255, 206, 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, 206, 86, 1)' ,
'rgba(75, 192, 192, 1)' ,
'rgba(153, 102, 255, 1)' ,
'rgba(255, 159, 64, 1)'
]
|
And finally, we should decide the type of chart from a line, bar, radar, pie, doughnut, polar area, bubble and scatter.
4. Create a graph: After defining what type of graph is to be drawn, pass the data to that graph that we want to visualize.
Below is an example:
let ctx = document.getElementById( "chart" );
let myChart = new Chart(ctx, {
type: 'bar' ,
data: {
labels: [ "CS" , "IT" , "ECE" , "EE" , "ME" , "BE" ],
datasets: [{
label: '# of students' ,
data: [105, 124, 78, 91, 62, 56],
backgroundColor: [ 'rgba(255, 99, 132, 0.2)' ,
'rgba(54, 162, 235, 0.2)' ,
'rgba(255, 206, 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, 206, 86, 1)' ,
'rgba(75, 192, 192, 1)' ,
'rgba(153, 102, 255, 1)' ,
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
}
}); |
Example 1: Below is an example of Pie Chart
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< title >Pie Chart Example</ title >
<!-- Include Chart.js library -->
< script src =
</ script >
< style >
div {
height: 50vh;
width: 50vw;
}
</ style >
</ head >
< body >
< h1 >GeeksForGeeks | Pie Chart</ h1 >
< div >
<!-- Create a canvas element to render the chart -->
< canvas id = "pieChart"
width = "400"
height = "400" >
</ canvas >
</ div >
< script >
// Get the 2D rendering context of the canvas
let ctx = document.getElementById('pieChart').getContext('2d');
// Create a new Pie Chart
let pieChart = new Chart(ctx, {
// Specify the chart type
type: 'pie',
// Provide data for the chart
data: {
// Labels for each segment of the pie
labels: ['JavaScript',
'Python',
'Java',
'C++',
'PHP'],
// Datasets for the chart
datasets: [{
data: [40, 35, 25, 17, 18],
// Data points for each segment
backgroundColor: ['rgba(255, 99, 132, 0.8)',
'rgba(75, 192, 192, 0.8)',
'rgba(54, 162, 235, 0.8)',
'rgba(255, 205, 86, 0.8)',
'rgba(153, 102, 255, 0.8)'],
borderWidth: 2 // Border width for each segment
}]
},
// Additional options for the chart
options: {
responsive: true, //It make the chart responsive
//This plugin will display Title of chart
plugins: {
title: {
display: true,
text: 'Number of Students Enrolled Course'
}
}
}
});
</ script >
</ body >
</ html >
|
Output:
Example 2: Below is an example of Bar Chart
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< title >Bar Chart Example</ title >
<!-- Including Chart.js library -->
< script src =
</ script >
</ head >
< style >
div {
height: 50vh;
width: 50vw;
}
</ style >
< body >
< h1 >GeeksForGeeks | Bar Chart Example</ h1 >
< div >
<!-- Create a canvas element to render the chart -->
< canvas id = "barChart"
width = "400"
height = "200" >
</ canvas >
</ div >
< script >
// Get the 2D rendering context of the canvas
let ctx =
document.getElementById('barChart').getContext('2d');
// Create a new Bar Chart
let barChart = new Chart(ctx, {
// Specify the chart type
type: 'bar',
// Providing data for the chart
data: {
// Labels for the X-axis
labels: ['January',
'February',
'March',
'April',
'May'],
// Datasets for the chart
datasets: [{
label: 'Pizza', // Label for the dataset
data: [122, 77, 45, 104, 66], // Data points for the Y-axis
backgroundColor: 'rgba(215, 153, 20, 0.5)', // Background color for the bars
borderColor: 'rgba(215, 153, 20, 1)', // Border color for the bars
borderWidth: 1 // Border width for the bars
}, {
label: 'Burger', // Label for the dataset
data: [87, 133, 87, 66, 84], // Data points for the Y-axis
backgroundColor: 'rgba(75, 192, 192, 0.5)', // Background color for the bars
borderColor: 'rgba(75, 192, 192, 1)', // Border color for the bars
borderWidth: 1 // Border width for the bars
}]
},
// Additional options for the chart
options: {
responsive: true, // Make the chart responsive
//Adding Plugin for Chart
plugins: {
//This Plugin will display Title of chart
title: {
display: true,
text: 'Monthly Sales of Pizza and Burger'
}
}
}
});
</ script >
</ body >
</ html >
|