Is there a way to customize the tooltip backgroup color dynamically ?

[mjeanroy]

Hi,

Currently, we can change the tooltip background color with the backgroundColor property on the tooltip configuration object but is there a way to change this color dynamically (if I want the color to depends on the point being displayed)? I know we can customize some colors with the labelColor callback but I would like to change the entire background color.

Here is my use case:

• I display a time graph with more than one line.
• When the mouse is hover a point, I would like to:
  • Use the line color as the entire background if there is only one point at this coordinates.
  • Use the default color if there are more than one point at this coordinates.

Here is an example:

In this chart, I would like to have the background color of the tooltip to be the same at the line color so, not black but purple).

Do you think it's possible with the current API?

[etimberg]

@mjeanroy this is not possible with the current API. You might have to replace the tooltip draw function. Even better, you could factor out the background draw into a new method on the tooltip then in your case you only have to replace the drawBackground method

[mjeanroy]

Thank you for your answer @etimberg (and thank you for your great library by the way 😉 )!

I'm not sure what you mean by:

You might have to replace the tooltip draw function

Is it something I can do with the current version of Chart.js or do I have to write a custom plugin?

[etimberg]

@mjeanroy I was thinking that you would add the following before creating charts. For the most part you'd copy the implementation from https://github.com/chartjs/Chart.js/blob/master/src/core/core.tooltip.js#L673 except for https://github.com/chartjs/Chart.js/blob/master/src/core/core.tooltip.js#L692 where you'd determine the color based on the tooltipItems arrays per your requirements.

Chart.Tooltip.prototype.draw = function() {
  // New implementation
};

[mjeanroy]

@etimberg Ok, that's clear, thank you.

Are you open for a PR to extract a drawBackground method (as you suggested before)?

[Ezra-Siton-UIX]

Basic codepen example using tooltipModel:
https://codepen.io/ezra_siton/pen/dyoQeGe?editors=1011

https://www.chartjs.org/docs/2.7.3/configuration/tooltip.html#tooltip-model