Chart.js: Possible to group a stacked bar chart?

[chadcodes]

Is it possible to group a set of stacked bars in this version of ChartJS? I've got a fiddle of a triple stacked bar with 3 datasets, and I would like to group them together so I can add another set of 3 stacked bars. Hopefully this makes sense.

https://jsfiddle.net/7oo4ugbj/

[potatopeelings]

@chadcodes if you're ok to set your y axis limits manually check out - http://jsfiddle.net/4rjge8sk/

[etimberg]

@potatopeelings awesome example there!

Edit: could you PR those changes? I think they'd be a great way to round out the core bar implementation. When you PR, could you implement for both vertical and horizontal bar charts?

[chadcodes]

Definitely ok with setting the y axis manually. My data is normalized going in so I can control the upper limit of the y. Thank you so much for the fiddle, helps me out quite a bit.

I have a follow up question for you. I've modified your fiddle a little to fit my data and I find I'm doubling up my labels. The data within each grouped stack is the same so I'm not sure how to avoid duplication of the labels. I might be coming at the problem wrong with my datasets.

http://jsfiddle.net/4rjge8sk/1/

[potatopeelings]

@etimberg - sure, will check if I can figure out a cleaner way (the fiddle uses a lot of shortcuts :-) - I just hide datasets and call the original calculateBarY and calculateBarBase, instead of changing those methods). Might take a week or so because I'm on something else right now. Cheers!

@chadcodes - just set legend.labels.generateLabels. See http://jsfiddle.net/2xjwoLq0/

...
options: {
  legend: {
    labels: {
      generateLabels: function(chart) {
        return Chart.defaults.global.legend.labels.generateLabels.apply(this, [chart]).filter(function(item, i){
          return i <= 2;
        });
      }
    }
  },
  ...

The above is hardcoded to just take 3 - the nice way would be to use config.data to figure out the count.

[etimberg]

@potatopeelings sounds good. changing the calculateBarY and calculateBarBase functions is probably the way to go

[chadcodes]

@potatopeelings amazing work! I really appreciate the help on this. I'll work on using the config.data to update the fiddle and repost it here.

[chadcodes]

@potatopeelings I had a quick follow up question on stack if you have a moment to have a look. Would love to understand a little more how to draw on the chart via the plugin interface. Thanks again!

http://stackoverflow.com/questions/37546590/add-a-custom-label-to-the-top-or-bottom-of-a-stacked-bar-chart

[etimberg]

@potatopeelings have you been able to work on a PR for this, or could someone run with your prototype and turn it into a PR?

[potatopeelings]

@etimberg - it'd be great if someone can use the prototype for a PR. Sorry I couldn't get around to it as I hoped - got stuck with a couple of things at work.

[etimberg]

@potatopeelings not a problem. I might look into this over the weekend. I'll link you if I get something done :)

[cgountanis]

This is a really interesting topic. The value of having a groupable "stacked" bar chart is huge. Any word on this becoming a standard feature or maybe it is already? Working on a project that could use this functionality and it would be great to simply add type: groupableBar, a stack id to the dataset JSON vs. all the examples. I think the hardest part is figuring out the MAX Y value which if it was built in, could be automatic, maybe?

[Wildhoney]

+1 👍

[Wildhoney]

@potatopeelings thank for you this. Although you'll notice in your example that when you click on the legend for "My First Dataset" it's not toggle-able in the graph. Do you have any idea how to rectify this?

All of the others work fine, but I assume because we're rendering the first dataset next to the others, it somehow loses its reference?

[barisozanguler]

@Wildhoney I'm having same problem. Do you find any solution ?

[Wildhoney]

Not yet — it seems as though @potatopeelings or a native Chart.js solution are our only saviours.

[etimberg]

I would love to have this in the core but I've been focused on fixing tooltips for v2.4. If someone wants to base something on @potatopeelings work then I can happily look at a PR.

[cgountanis]

I would love to see group/stacked with support as well. It should be a standard type if you ask me. Super useful.

[potatopeelings]

PR for grouping stacked bars based on the previous code. Code Climate complains because of the duplication across bar and horizontal bar.

I think tooltips (mode = group?) and axes (a separate label line with the stack names) will probably need some enhancements to really wrap this one up.

@Wildhoney - check out the fiddle in the PR (https://jsfiddle.net/Lvj2qnrp/1/). It works now. Cheers!

[cgountanis]

Hate to ask a noobie question like this but does that mean this is standard in the main release now with examples?

[Wildhoney]

Thanks @potatopeelings – good effort 👍

@cgountanis it will be once the PR has been merged in, tagged, and released.

[Rido]

Great work @potatopeelings! 👍

Today I tried the new code and it works great. I have only one question, is it possible to use the stack as legend filter instead of the dataset label?

[rjurado01]

Thanks @potatopeelings, it works !!

[etimberg]

Done in #3563

[potatopeelings]

@Rido - I believe you should be able to override generateLabels to return labels for each group and then override onClick to toggle visibility of datasets of the group (https://github.com/chartjs/Chart.js/blob/master/src/core/core.legend.js)

[atulpendse]

@potatopeelings - Great work..