Travis Horn
Travis Horn

Travis Horn

Stacked Bar Chart with Chart.js

Stacked Bar Chart with Chart.js

Travis Horn's photo
Travis Horn

Published on Sep 7, 2017

2 min read

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">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>My Stacked Bar Chart</title>


In the body, we’ll need a &lt;canvas&gt; 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="[]("></script>

The rest of the chart will be coded with JavaScript. So another &lt;script&gt; tag is necessary.

  // Chart code will go here.

We’ll first need a reference to the &lt;canvas&gt; 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:

Share this