Search code examples
javascriptchartsamcharts

Amcharts fill the circle with an image

I'm working on a sample using amcharts library. I want the image to fill the red circle

here is what I tried to do

  icon.circle.strokeWidth = 0;
  icon.image.properties.width = "100%";
  icon.image.properties.height = "100%";
  icon.image.properties.maxWidth = "100%";
  icon.image.properties.maxHeight = "100%";

Here is the full code snippet uploaded to codePen

Solution

  • I state I'm not proficient with amcharts.

    In your example I changed from

    icon.circle.radius = am4core.percent(100);
icon.image.properties.scale = 1;

    to

    icon.circle.radius = am4core.percent(350);
icon.image.properties.scale = 3.5;

    and I obtained almost requested result, with a nice red border, increasing the scale to about 3.8 the image covers all the red surface.

    It works even without.

    icon.image.properties.width = "100%";
icon.image.properties.height = "100%";
icon.image.properties.maxWidth = "100%";
icon.image.properties.maxHeight = "100%";

    Probably in your final application of the concept you'll need to perform some more computation to get the required scale for the two options I changed... I can't say.

    Hope to gave you some ideas.