Chart JS custom tooltip option?

Question

I am trying to build chart using Chart.Js. This chart.js has default option for tooltip, I want to make customized tooltip option. Is there a way to make it possible?

<

Answer 1

I found this page to be helpful:

https://github.com/nnnick/Chart.js/blob/master/samples/pie-customTooltips.html

He shows where and how to define the function for your custom tooltip, as well as an example of the styling. I had to modify the code to match my needs, but this is a great example on how to implement the custom tooltip feature.

Some things to note that threw me off at first:

1) The id in the style rules need to be modified to match your tooltip div. (this is obvious, but I didn't catch it at first)

2) tooltip.text will follow the format you set for 'tooltipTemplate' in your options, or the default tooltipTemplate set in chart.js