Dynamic backgroundColor for tooltip

[praveen7557]

Feature Proposal

Dynamic backgroundColor for tooltip based on the dataset color

Feature Use Case

I have 4 series in my line chart, I want to show different color tooltip for each series

Possible Implementation

Same as for label callback it would be better if we have a callback for backgroundColor also.

[Alanscut]

The same functional requirements are here. Does the team consider adding configuration items supported by tooltips to callbacks ? For example: footerFontColor and titleFontColor, etc. The user can control the tooltip more flexibly.

[etimberg]

I don't see a reason not to support scriptable options for the tooltip. @benmccann @kurkle any thoughts?

[Alanscut]

Same issue #7227, Chart.js is used in my project, Thanks very much to the Chart.js team. I am also looking at its source code. I would be happy to submit a PR.

[benmccann]

I had been wondering if we should replace the canvas tooltip with an HTML tooltip. That would have two main advantages. First, it would fix the bug reports we've gotten where the tooltip can't fit inside the canvas. Second, it would be much faster because we could possibly avoid repainting the canvas or repaint just a small portion of it in order to render the tooltip. I hope that might also be more customizable because users could build their own tooltip and leverage the built-in HTML tooltip components that they want whereas users don't really have a way to provide their own canvas tooltip.

[kurkle]

@benmccann would still need to repaint for hover effects though. If there is any speed gain, it could also be achieved by using 2nd canvas (positioning it similarly as the HTML tooltip would be). Anyway, that should not hold any improvements for the current situation.

I don't have any objections to scriptable options, happy to review a PR.

[praveen-wal]

When using displayColors: true, Can we make the rectangle as circle by using any option? I don't want to use a custom tooltip because I only need this one change. There is already one issue here, but they are suggesting to use custom tooltip #3938.

[benmccann]

@benmccann would still need to repaint for hover effects though

Yes, that's true. Though some people might turn off hover effects to avoid repainting entirely or we could repaint just the hovered and unhovered points.

If there is any speed gain, it could also be achieved by using 2nd canvas (positioning it similarly as the HTML tooltip would be)

Also true, but I'm not sure I see the advantage of doing that since HTML is much easier to work with in my opinion.

[kevinelliott]

I would like the ability to set the tooltip's backgroundColor dynamically per dataset.

[etimberg]

@kurkle I got very close using the scriptable options. https://jsfiddle.net/0p6f1jkw/

I think we might need plugins to have their own context. The caching picks the background colour of whichever dataset is hovered first. Any thoughts?

[kurkle]

I think the context should be implemented in the plugin. There is already a setContext helper on the options, so might be quite easy to implement.