Add an extra label to a sunburst slice

[diedel]

Question

I have a sunburst with two levels and I would like to add the labels "0", "1" and "2" to each of its circunferences, like the ticks of radial axis. I have managed to do it with this ugly code:

var level0 = chart.seriesTemplates.create("0");
label0 = level0.createChild(am4core.Label);
label0.text = "0";
label0.fontSize = 15;
label0.fontWeight = "bold";
label0.isMeasured = false;
label0.x = -105;
label0.y = -120;

Is it possible to add a child label to the slice directly and position it nicely?

Environment (if applicable)

• amCharts 4

Additional context

[martynasma]

How about adding a zero-value slices for each level?

They would not affect the general diagram, but you could use them for labels.

[diedel]

Nice idea @martynasma , thank you!

I created one zero-value slice for each of the three levels. I display its labels outside of the slice and with "bent" and left padding (I tried to rotate the labels around the slice's arc but I didn't succeed)

    var level0 = chart.seriesTemplates.create("0");
    level0.labels.template.inside = false;
    level0.labels.template.fill = am4core.color("#000");
    level0.labels.template.text = "{category}";
    level0.labels.template.bent = true;
    level0.labels.template.paddingLeft = 10;
    level0.slices.template.tooltipText = "";

[martynasma]

Would you be able to post your whole chart and data on CodePen/jsFiddle so that we can test?

[diedel]

Here is the Pen:

https://codepen.io/diedel/pen/VwJBamV

[martynasma]

If you need those labels to not be drawn at an angle, you can just add this:

level0.labels.template.relativeRotation = false;

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.