Create a Stacked Bar Chart in Chart.js

Chart.js is an excellent tool for creating awesome charts of several types. You can use it to draw line, bar, radar, mixed, pie, doughnut and more types of charts. The tool is free to use, which means you can install and use it for free to display awesome looking charts on your website. You will only need to insert the script into your website’s html code to install and use chart.js.

Wordpress users can use this awesome tool for creating and displaying charts instead of using a dedicated plugin. They can insert the script using the html block in Gutenberg editor.

You can create multiple types of charts in chart.js including bar charts, line charts, mixed charts, stacked bar charts, horizontal bar charts and so on. In this tutorial, we will discuss how to create a stacked bar chart (bars stacked on one another rather than placed side by side).

Install Chart.js

In case you are not familiar with the installation process of chart.js, you will first need to install it. There are various methods of installing chart.js. However, the best method is the cdn method, which is also the easiest method. You can install the chart.js version 4.4.0 with the following script in your head tag.

<script src="
https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js
"></script>

Otherwise, you can use npm to install chart.js

npm install chart.js

Creating Stacked Bar Charts with Chart.js

In a previous post, we have discussed how to create simple bar charts with data labels in chart.js. To create a stacked bar chart, you will need to create a bar chart with two or more datasets and then set the property stacked to true to create a stacked bar chart. Mostly, when you are dealing with more than one datasets like comparing two or more types of values in one chart, you have different bars for each dataset. However, with a stacked bar chart, you can display them on a single multicolored bar, each color representing a distinct value.

For example, suppose you are comparing the revenue of three different brands for three years. You can have a bar of a distinct color for each brand or you can display the revenue of each year for three brands in a single multicolored bar. In the first case, you would have nine different bars divided into three categories (labels). In the second case, you will only have three multicolored bars.

So, let’s first create a simple bar chart with two different datasets and set the property stacked to true for both x and y axes.

<div>
  <canvas id="myChart1"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script> 
<script>
  var ctx = document.getElementById('myChart1');
 Chart.register(ChartDataLabels); 
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes in 2022', backgroundColor: 'lightseagreen',
        data: [12, 19, 3, 5, 2, 3],
        
        borderWidth: 1
      },{label: '# of Votes in 2023', backgroundColor: 'lightpink',
        data: [22, 29, 13, 15, 12, 13]},
        
]
    },
    options: { 
plugins:
{datalabels: {align: 'top', anchor: 'end', color:'black', font: { size: 10}},
}, 
      scales: {
        x: {stacked: true},
        y: {
          beginAtZero: true, stacked: true
        }
      }
    }
  });
</script>

As you can see in the script above, we have set the property stacked to true for both x and y axes resulting in a stacked bar graph.

Now, you have your stacked bar chart ready in chart.js. You can also remove the gridlines by setting the display property for the grid to false for both the axes. In case, you want to remove the ticks along the y axis, just set the display property for the ticks to false in options.

 scales: {
        x: {stacked: true, grid:{display: false}},
        y: {
          beginAtZero: true, stacked: true, grid: {display: false}, ticks: {display: false},
        }
      }

Further, if you want, you can make changes to the tooltip to include both datasets. For example, if you do not make any changes, the tooltip will only show the value from one dataset at a time. However, we are using two or more datasets for creating a bar chart. So, the user will need to hover over both the sections of the bar to check out the data (if data labels are not applied). If you have not applied the data labels and want to show the values from both datasets inside the tooltip, you will need to use mode: index.

    options: { 
plugins:
{tooltip:{mode: 'index'}, datalabels: {align: 'top', anchor: 'end', color:'black', font: { size: 10}},
}, 

Once you have applied mode: index to the tooltip in the plugins section, you will see that the tooltip now includes values from each dataset for each bar.

So, this is how you can create a nice looking stacked bar chart using chart.js. The tooltip can be further customized to change its backgroundColor, font size and other features.