Chart.js: Different label on tooltip vs X Axis?

[nfriedly]

Hi, thanks for creating this library, it's some awesome work.

Is it possible to have a different label on the X axis vs on the tool tip? I took a quick glance at the code and it doesn't look like it to me, but I may have missed something.

In particular, I want less data on the X axis (it's just a series of dates in my case, so I could see it only having a label for every 3rd day or whatever), but I want a more full description on the tooltip, and definitely don't want the label skipped in the tooltip.

[fulldecent]

Hello, I'm sorry this issue hasn't received much attention yet. It seems this is an implementation question, could you please post your question to StackOverflow with the Chart.js tag and include a link here. This will ensure your question reaches the largest audience.

https://stackoverflow.com/questions/tagged/chart.js

[nfriedly]

Actually, I'm pretty sure this isn't possible with Chart.js currently, so it's really more of a feature request. (I was also figuring that I'd implement it myself and send a PR to close this issue... but the project I was using Chart.js on got put on the back burner so I haven't had the time yet.)

However, I can still cross-post it there if you think it's appropriate.

[derekperkins]

Check out #1158. Does that solve your issue if we get it merged?

[nfriedly]

I think it might have, although I'm onto a different project now, so I wouldn't immediately use it.

[tannerlinsley]

This is now possible in v2.0

[olivermuc]

It be most fantastic to also point out how :-)
No matter where and when I affect the tick label or on scale (afterTickToLabelConversion) level, it changes the label for both the axis and tooltip.

[j105]

@olivermuc Have you got the answer yet? I tried searched as much as I can but couldn't find the solution.

[olivermuc]

Yes. Using a workaround: I created my own custom tooltips, using the _data object to access the full labels. In the xAxis function to manipulate the tick labels, I truncate the labels after X characters.

[ngyv]

I think instead of using the label callback, you can use the beforeLabel callback and then override the title callback to return an empty string.

tooltips: {
  callbacks: {
     title: function() {
       return '';
     },
     beforeLabel: function(tooltipItem, data) { 
       //return formatted date
       return tooltipItem.xLabel;
     }
  }
},

[rafaelbiten]

Sorry to bring this one back but I think we still have this issue.

The problem is that ticks.callback is destructive, so imagine we have dates (ie.: 2019-05-07) as labels and we need to format the xLabel. We start by using ticks.callback and return, for the given example May 7. After that, callbacks from tooltips.callbacks will lose access to the original 2019-05-07 value and get May 7 instead.

So, if inside the Tooltip we want to have an extended title like: May 7, 2019, it becomes tricky.

Please let me know if I'm missing something. And thanks a lot for the great library.

[rafaelbiten]

Found a workaround. For our case, the following works:

callbacks: {
  title([tooltipItem]: ChartTooltipItem[], { labels }: ChartData): any {
    if (!labels || !labels.length) return tooltipItem.xLabel

    const value = labels[tooltipItem.index!] as string
    return optionWithTooltipFormat
      ? formatTooltipLabel(optionWithTooltipFormat.tooltipLabelFormat!, value)
      : tooltipItem.xLabel
  },
}