Chart JS Stacked Bar Example
A stacked bar chart is a chart that stacks the values of each dataset on top of each other. To create a stacked bar chart using Chart.js, you can use the bar chart type and set the stacked attribute to true. Here is an example:
The video below shows you quickly how to create a simple stacked bar chart in Chart.js. This video does expect you to have understanding on how to make a basic bar chart.
Video Chart JS Stacked Bar Example
This video shows you how to create a stacked bar chart in Chart.js. The boiler template used in the video is from our Chart.js Getting Started page.
In Chart.js creating a stacked bar is easily to do. By default a bar chart will not be stacked. To create a stacked bar chart we will need to indicate that the datasets will be stacked.
Scale settings for stacked bar chart
To do this we allow the X and Y scales to be stacked by using the following command. This can be done with this snippet of code.
scales: {
x: {
stacked: true
},
y: {
stacked: true
},
}