Chart.js: Dataset order is reversed compared to documentation

[arasimfm]

Hi,
I have Mixed graph with one bar and 3 lines but issue is bar is showing over the lines.

I know I can fix this by changing the order of each dataset, but by doing that it changes the order of the legend's label on top of the graph as well. I can see "order" keyword in dataset but I tried ad its not working. Should I include any other js file for this feature to work.

[benmccann]

You should be able just specify order: https://www.chartjs.org/docs/latest/charts/mixed.html#drawing-order

Please make sure you are using the latest version 2.9.3. If it's still not working you will need to provide an interactive example like a codepen, jsfiddle, or plunker for us to be able to understand what's happening

[kurkle]

Closing due to missing test case.

[joseph-d]

This issue only seems to occur when backgroundColor is applied to the bar dataset.

Here's a JSFiddle to demonstrate: https://jsfiddle.net/L4tg5nm6/

Edit: updated the fiddle to include mode: index for tooltips. This is relevant because as per @arasimfm original post changing the order of the actual code in the datasets array actually changes the order of the labels in the tooltips. This is often not desirable and it would be preferable to have ways of controlling the tooltips legend list order and the layering of the chart items independently.

[adityaprasoon]

I am also facing the same issue. @joseph-d previous comment and JSFiddle is accurate.

As a solution I have just changed the order of datasets. https://jsfiddle.net/9zcs8egw/

[joseph-d]

Thank you @aprasoon-igx - changing the order of the array in the code does solve this in a way but unfortunately it also means that the legend tooltips are re-ordered too which is not always desirable. I have updated my comment above with new information and also updated the fiddle.

[kurkle]

@joseph-d order is not available in 2.8.0.
It works fine in 2.9.3: https://jsfiddle.net/avnubh96/1/

[joseph-d]

@kurkle Ah, my bad! The URL in the "getting started" at https://www.chartjs.org/docs/latest/getting-started/ is 2.8.0 and I didn't think to check github for a newer version.

Sorry to bother everyone!

[DavidMetcalfe]

@joseph-d That being said, the Getting Started documentation really should have the latest version in it.

[benmccann]

Agreed. The docs for 3.0 have fixed that mistake

[JerryBaboona]

I was just grappling with this issue as well when using the 2.8.0 version. I updated to 2.9.3 and followed this codepen:

@joseph-d order is not available in 2.8.0.
It works fine in 2.9.3: https://jsfiddle.net/avnubh96/1/

And it worked!

However, it should be noted that the way the documentation is written here https://www.chartjs.org/docs/latest/charts/mixed.html#drawing-order _suggests the order working oppositely_, i.e. the highest value for order is drawn on top (see commented lines in code example). From my experience and the above codepen it works the other way - the lowest order value is drawn on top. The docs should be updated to reflect this.

[kurkle]

This is already fixed in v3 documentation.
https://www.chartjs.org/docs/latest/charts/mixed.html#drawing-order
https://www.chartjs.org/docs/master/charts/mixed.html#drawing-order

[MrDMOB]

This doesn't seem to fix the issue submitted by @arasimfm and noted by @joseph-d. The order parameter works and will draw the lower ordered dataset first, however the tooltip order of the datasets is also modified. It seems to behave the same as changing the order in which the datasets appear in the datasets array.

Is there a way to use the order option to determine how the datasets are drawn, but allow the tooltip to display tips in the order in which the datasets are listed in the dataset array?