Modifying funnel label values with custom percentages in amcharts

Question

I would like to do two things:

1) Modify the label values highlighted in yellow that are to the right in this funnel chart.

2) Change the way the percentage is calculated: Typically, I have a "percentage" field in my data for each category and I want that to be displayed as the percentage in the label that has been highlighted. For example, the data.percentage for the category "second" is 10%. Thus, 10% needs to be displayed as shown in the picture.

Code:

var chart = am4core.create("chartdiv", am4charts.SlicedChart);
chart.hiddenState.properties.opacity = 0; 

chart.data = [{
    "name": "The first",
    "value": 600,
    "percentage": "100%"
}, {
    "name": "The second",
    "value": 300,
    "percentage": "10%"
}, {
    "name": "The third",
    "value": 200,
    "percentage": "10%"
}, {
    "name": "The fourth",
    "value": 180,
    "percentage": "35%"
}, {
    "name": "The fifth",
    "value": 50,
    "percentage": "20%"
}];

var series = chart.series.push(new am4charts.FunnelSeries());
series.colors.step = 2;
series.dataFields.value = "value";
series.dataFields.category = "name";
series.alignLabels = true;

series.labelsContainer.paddingLeft = 15;
series.labelsContainer.width = 200;

I figured out that series object has a member called labels that contain label values but I can't figure out how to modify them in the code itself. How do I go about this?

Answer 1

To modify contents of the labels you use series.labels.template.text.

You can refer to any field in data in there using curly brackets:

series.labels.template.text = "{category}: {percentage}";

The {percentage} will be replaced with whatever value is held in "percentage" of that particular slice's data.

This article outlines about data placeholders in text.