[Chartjs]-Horizontal stacked bar chart with chart.js

63👍

UPDATED for CHARTJS V4

With the new version of ChartJS, you need to set the indexAXIS to ‘y’, and set the x and y scales to stacked.

options: {
  indexAxis: 'y',
  scales: {
    x: {
      stacked: true
    },
    y: {
      stacked: true
    }
  }
}

Here’s an updated Codepen using V4 of ChartJS
https://codepen.io/jamiecalder/pen/vYaWyVy


ORIGINAL ANSWER BELOW USES ChartJS V2

I know this is a few months old, but I thought I’d add my answer for future generations.

I was able to do without extra plugins. If you set the xAxes and yAxes to stacked:true under scales, you can create a stacked horizontal graph.

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

Here’s a quick pen to show how I did it. http://codepen.io/jamiecalder/pen/NrROeB

2👍

Take a look at the fork ChartNew.js (https://github.com/FVANCOP/ChartNew.js). This has HorizontalStackedBars (and many other additions). See https://github.com/FVANCOP/ChartNew.js/wiki/050_available_graphs for how its going to look like.

Leave a comment