Chart JS stacked bar example

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.

https://youtu.be/Lb1_5hFVVlU

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
  },
}