follow pie series's position/size to place a label

[flaming-cl]

We have a label ref placed at the center of the donut chart.

While users resizing the chart, how we can keep the label follow the pie series' position/size to ensure the label is in the center and it can be resized according to the pie's size?

Codepen: https://codepen.io/flaming-cl/pen/dyxXRQX

Screen.Recording.2024-10-21.at.4.48.33.PM.mov

[martynasma]

All you need to do is to add the label as a child of series, not chart itself.

[flaming-cl]

All you need to do is to add the label as a child of series, not chart itself.

@martynasma Thanks, but it doesn't seem to work for JSON config, following the same structure by defining a child for chart

Codepen: https://codepen.io/flaming-cl/pen/dyxXRQX

[martynasma]

It does work, you're just not defining relative position right.

{
   "type": "Percent",
   "value": 18
}

This means 1800%.

If you need to place it at 18%, you need to use 0.18 as a value.

[flaming-cl]

It does work, you're just not defining relative position right.

{
   "type": "Percent",
   "value": 18
}

This means 1800%.

If you need to place it at 18%, you need to use 0.18 as a value.

Thanks @martynasma . A small question, do you know why the documentation is mentioning 50 percent

https://www.amcharts.com/docs/v5/concepts/serializing/

[martynasma]

Hm, yeah, indeed. You're right.

Not sure why this doesn't work for the series label. We'll need to get back to you on that.

[martynasma]

OK, so everything is in order. Phew.

The thing is that PieSeries x/y points to its middle, so if you need your label to be in the middle, you need to set its x/y to zeroes.

You can also use centerX and centerY to adjust center of the label itself, e.g.:

          series: {
            children: [
              {
                type: "Label",
                settings: {
                  text: "%",
                  fontSize: 40,
                  fontWeight: "600",
                  textAlign: "center",
                  x: { type: "Percent", value: 0 },
                  centerX: { type: "Percent", value: 50 },
                  y: { type: "Percent", value: 0 },
                  centerY: { type: "Percent", value: 50 },
                  paddingTop: 0,
                  paddingBottom: 0
                }
              }
            ],