Chart.js: 2.0 - Stacked horizontalBar Tooltips Display Bug

Created on 16 May 2016  路  4Comments  路  Source: chartjs/Chart.js

Hey all,

I think I've stumped upon a bug with how stacked horizontal bar tool tips are being displayed (see images below). Both of these charts hold identical data. The only difference is one type is set to horizontalBar vs bar (see config value below).
The vertical version (correct):
vertical_stacked_bar_label
The horizontal version (incorrect):
horiz_stacked_bar_label

options config object:
{"options":{"tooltips":{"mode":"label"},"scales":{"xAxes":[{"stacked":true,"ticks":{"autoSkip":false}}],"yAxes":[{"stacked":true}]}}}

Assumed Functionality:
I would assume that regardless of vertical/horizontal that the tool tips would be the same.

duplicate bug

Most helpful comment

@zachpanz88 Ah, sorry! I did not see that one when I searched. Thank you!

@etimberg Awesome, I will probably just wait until that is released.

Thanks to you both for your continued support and hard work on this library. It is awesome!

All 4 comments

This was reported in #2536, and I believe it was fixed with #2542, which has not made it into a final release yet.

@zprisk as a work-around you can manually set the tooltip callbacks to the ones in #2542 until the defaults are updated

@zachpanz88 Ah, sorry! I did not see that one when I searched. Thank you!

@etimberg Awesome, I will probably just wait until that is released.

Thanks to you both for your continued support and hard work on this library. It is awesome!

The change in #2542 doesn't fix this issue when doing a custom label callback function.
Would it be possible to have tooltipItem in the label function callback arguments include a non-axis dependent value?

e.g. using an arg called value instead of xLabel or yLabel, and my own use case that overrides the label to use toLocaleString() to format the values

callbacks: {
  label: function(tooltipItem, data) {
    return data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.value.toLocaleString();
  }
}
Was this page helpful?
0 / 5 - 0 ratings