How to make Donut chart with tooltips

[deveshlashkari]

Hello Developers,
I want to create a donut chart with tooltips something like this -

Can anyone tell me that if this can be possible with this package & if Yes, How to do it.

Thanks

[LeeLenaleee]

This is not possible by default, you will need to write or use a custom plugin for this.

Closest you can come with a already written plugin is the datalabels plugin. Afaik it doesnt totaly support what you want. If you really want that look you will need to draw it on the canvas yourself with a self written plugin

[Udemology]

@LeeLenaleee , is there a way to get the exact coordinates of the tooltip caret from the doughnut chart in Chart js? Getting the those coordinates would be the perfect starting point for the line.

With every other chart it can be done with the axis like the x.getPixelForTick(val) but Doughnut chart does not have an axis.

[LeeLenaleee]

Yes you can get the datasetMeta, than on the dataPoint you want from the data you can call the tooltipPosition method which will return the x and y coordinates of where the point of the tooltip carret will be.

Can see this custom plugin for clarification. Black dots on all the places where TT will spawn:
https://jsfiddle.net/Leelenaleee/y0oz7cn1/16/