Search code examples
angularchart.jscustomizationprimeng

Angular PrimeNG Chart Module: Customize hover text

In the PrimeNG chart, when I hover over a data point I can see the black box with some information about the point. How can I customize this box? I want to add my own HTML for that hover infobox.

P.S: PrimeNG Chart Module uses chart.js under the hood.

enter image description here

Solution

  • You can use External (Custom) Tooltips as explained here

    External tooltips allow you to hook into the tooltip rendering process so that you can render the tooltip in your own custom way. Generally this is used to create an HTML tooltip instead of an on-canvas tooltip.

    Please take a look at this sample that illustrates how it can be done.