Stacked Bar Chart with Chart.js

This is a simple example of using Chart.js to create a stacked bar chart (sometimes called a stacked column chart).

Chart.js provides simple yet flexible JavaScript charting for designers & developers.

It allows you to create all types of bar, line, area, and other charts in HTML. It uses the canvas standard. While I do prefer using SVG when working with data visualization on the web, Chart.js is a popular option, so it’s worth checking out.

Starting with a basic index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>My Stacked Bar Chart</title>
  </head>
  <body>

  </body>
</html>

In the body, we’ll need a <canvas> element to bind to. This is where the chart will appear.

<canvas id="chart"></canvas>

And we’ll pull in the Chart.js library.

<script src="[https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js](https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js)"></script>

The rest of the chart will be coded with JavaScript. So another <script> tag is necessary.

<script>
  // Chart code will go here.
</script>

We’ll first need a reference to the <canvas> element we wrote earlier.

var ctx = document.getElementById('chart');

And we’ll instantiate a new chart on this element. The first argument is the bound element, and the second is a definition of our chart. The definition will have three properties: type, data, and options.

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {},
  options: {}
});

Notice we’ve told Chart.js that this will be a bar type chart.

In the data property, we’ll define datasets and their labels. In my example, I have three datasets — all with the same label.

data: {
  labels: ['Risk Level'],
  datasets: [
    { /* dataset one */ },
    { /* dataset two */ },
    { /* dataset three */ }
  ]
}

Each dataset will have a label, data array, and backgroundColor. In a stacked bar chart, each dataset will have only one point of data.

datasets: [
  {
    label: 'Low',
    data: [67.8],
    backgroundColor: '#D6E9C6' // green
  },
  {
    label: 'Moderate',
    data: [20.7],
    backgroundColor: '#FAEBCC' // yellow
  },
  {
    label: 'High',
    data: [11.4],
    backgroundColor: '#EBCCD1' // red
  }
]

We’ve told Chart.js that we want a bar chart, we’ve told it about our data, the last step is to tell it that this is chart should be stacked. We do this in the options property.

options: {
  scales: {
    xAxes: [{ stacked: true }],
    yAxes: [{ stacked: true }]
  }
}

The end result is a stacked bar chart.

And here’s the complete code:

https://codepen.io/travishorn/pen/kkVKJG

Travis Horn

Travis Horn

Stacked Bar Chart with Chart.js

Chart.js provides simple yet flexible JavaScript charting for designers & developers.