Adding images on Doughnut

[john.black]

Hi Team,

is it possible to add an image on doughnut like this

Thanks.

[Adithya Menon]

@john-black,

You can position images in the middle of the doughnut chart by adding a few lines of code. Please check out the code snippet below for the same,

img.style.position = "absolute";
img.style.display = "block";
img.style.top =  chart.height/2 - img.offsetHeight/2 + "px";
img.style.left = chart.width/2 - img.offsetWidth/2.3 + "px";

Also, please take a look at this JSFiddle for a complete code. For further insight, please refer to this step-by-step guide for positioning images over chart.

—
Adithya Menon
Team CanvasJS

[john.black]

Thank you for sharing Adithya, how about adding an image on the label or in the circle pie, is it also possible to do that?

[Adithya Menon]

@john-black,

It is not possible to add an image on the datapoint of the chart as of now. However, you can add Unicode characters to the indexLabel and place them inside the datapoint by setting indexLabelPlacement property as inside.

Kindly take a look at this updated JSFiddle for an example on adding Unicode characters to the indexLabel.

At the same time, you can show image on the tooltip. Please refer to this JSFiddle for an example on the same.

—
Adithya Menon
Team CanvasJS