Amcharts fill the circle with an image

user_3003810 0
Viewed 256

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

amcharts charts javascript
1 Answers

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.

user_46909460
Related