Chart.js: Not natural legend order for stacked bar chart

Created on 20 Apr 2017  ·  5Comments  ·  Source: chartjs/Chart.js

If following conditions are met:

  • chart type is 'bar' (vertical)
  • y-axis is stacked
  • legend position is either left or right

then the default legend order doesn't correspond with the order of stacked parts:
https://jsfiddle.net/yjp7LxgL/1/

It makes reading chart data harder.

help wanted enhancement support

Most helpful comment

So I have a similar complaint tied to the tooltips here:

screen shot 2017-10-18 at 3 40 26 pm

Seems like the default behavior for drawing stacked graphs bottom -> up should be altered or updated.

Maybe have stacked: true be stacked: 'normal' or stacked: 'reverse'

All 5 comments

Using the legend.reverse option should help:

    legend: {
        position: 'right',
        reverse: true
    }

@etimberg we could also add a legend.labels.sorter option to give more control on the item order?

@simonbrunel good idea on the sort function. I'm happy to look at a PR from someone implementing this.

So I have a similar complaint tied to the tooltips here:

screen shot 2017-10-18 at 3 40 26 pm

Seems like the default behavior for drawing stacked graphs bottom -> up should be altered or updated.

Maybe have stacked: true be stacked: 'normal' or stacked: 'reverse'

Maybe have stacked: true be stacked: 'normal' or stacked: 'reverse'

That sounds great.
Although I just came here looking for a way to sort a doughnut chart's wedges by descending order whilst displaying the legend in alphabetical order. If it's not possible now the ability to implement a custom sort function for either/both might be more flexible?

Maybe have stacked: true be stacked: 'normal' or stacked: 'reverse'

this seems to be not working, any other way to resolve this

Was this page helpful?
0 / 5 - 0 ratings