Adding images on Doughnut

• November 25, 2022 at 5:10 pm #40052
  
  john.black

  Hi Team,

  is it possible to add an image on doughnut like this

  

  Thanks.

  November 28, 2022 at 1:30 pm #40067
  
  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

  November 28, 2022 at 6:53 pm #40125
  
  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?

  November 29, 2022 at 7:05 pm #40144
  
  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