Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Horizontal stacked bar chart with chart.js

I am trying to find out if there is any plugin to do a horizontal stacked bar chart with chart.js

I see there are plugins for stacked bar charts and also for horizontal bar charts, but I didn't find one that combines both.

https://github.com/Regaddi/Chart.StackedBar.js

Anyone know how to achieve this?

like image 566
aruizga Avatar asked Nov 18 '15 05:11

aruizga


2 Answers

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

Bonus: Includes code to show the values on the graph

like image 161
Jamie Calder Avatar answered Oct 08 '22 14:10

Jamie Calder


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.

like image 40
potatopeelings Avatar answered Oct 08 '22 16:10

potatopeelings