How to Implement Stacked Line Charts using ChartJS ?
Last Updated :
05 Jun, 2023
In this article, we will learn to implement normal as well as grid-stacked line charts using the Chart JS plugin.
We generally face situations where we need to analyze data with different units of measure. The stacked line charts allow us to easily identify and compare the trends and patterns in our data.
Stacked line charts are created by stacking lines on top of each other which shows the contribution to data trends. The data are generally ordered from low to high patterns. These types of charts are used when we have more than one dataset which all add up to the total trend.
Uses of Stacked line charts:
- We can make a very quick comparison between 2 sets (data) of measures.
- We can see data points more clearly when they are stacked on top of each other.
- We can easily track multiple data trends.
- We can quickly see the percentage of each data point compared to the total value.
Approach:
- In the HTML design, use the <canvas> tag for showing the line graph.
- In the script part of the code, instantiate the ChartJS object by setting the type, data, and options properties of the library.
- Set other required options inside each property like datasets, label, backgroundColor, scales, and others as per the need of the programmer.
CDN link:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js”></script>
Syntax:
new Chart($("#ID"), {
type: 'line',
data: { ... },
options: { ... }
});
Example 1: The following code demonstrates a very simple example of the stacked line chart with a different unit of measure like “Revenue”, “Margin in %”, and “Overhead” measured over a period of time (months at the bottom).
HTML
<!DOCTYPE html>
<html>
<head>
<title>Chart JS Stacked line Chart </title>
<script src=
</script>
<script src=
</script>
</head>
<body>
<div id="containerID">
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Chart JS Stacked Line Chart </h3>
<div>
<canvas id="stackedLineChartID">
</canvas>
</div>
</div>
<script>
// Get the drawing context on the canvas
var myContext = document.getElementById("stackedLineChartID");
var myChart = new Chart(myContext, {
type: 'line',
data: {
labels: ["Jan", "Feb", "March", "April", "May", "June","July"],
datasets: [{
label: 'Overhead',
backgroundColor: "cyan",
data: [9000, 8000,12000,10000,11000,12000,13000],
fill:false
}, {
label: 'Margin%',
backgroundColor: "lightgreen",
data: [31, 42, 64,54, 41,75,81],
fill:false
}, {
label: 'Revenue',
backgroundColor: "pink",
data: [13000, 14000,17000,14000,10400,24000,16000],
fill:false
}],
},
options: {
responsive: true
}
});
</script>
</body>
</html>
|
Output:
Example 2: The following code demonstrates Grid stacked line chart. The options attributes are set such as scale properties to draw the grid in the x and y-axis. A simple example is shown considering the population of Mumbai and Chennai over a period of time( years at the bottom of the graph). Refer to the output for better understanding.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Chart JS Stacked line Chart </title>
<script src=
</script>
<script src=
</script>
</head>
<body>
<div id="containerID">
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Chart JS Stacked Grid Line Chart </h3>
<div>
<canvas id="stackedLineChartID">
</canvas>
</div>
</div>
<script>
// Get the drawing context on the canvas
var myContext = document.getElementById("stackedLineChartID");
var myChart = new Chart(myContext, {
type: 'line',
data: {
labels: ["2010", "2012", "2014",
"2016", "2018", "2020","2022"],
datasets: [{
label: 'Mumbai',
borderColor: "blue",
data: [9000, 8000,12000,10000,11000,12000,13000],
fill:true
}, {
label: 'Chennai',
borderColor: "green",
data: [13000, 14000,17000,14000,10400,24000,16000],
fill:true
}],
},
options: {
responsive: true,
title:
{
display: true,
text: 'Chart JS Gridlines - Line Chart'
},
scales: {
x: {
grid : {
display : true,
color: "blue",
lineWidth: 2
}
},
y : {
grid : {
display : true,
color: "blue"
}
}
}//end scales
}//end options
});
</script>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...