Cannot change label from percentage to number in amchart5

Question

I am using the new amcharts5 and I cannot seem to change my pie chart "slice" and label to a pure number despite referencing my old code and other links.

Basically my code and chart loads, but the issue is my values is depicted in percentages instead of numbers. This is my code below where I tried to address this.

Any assistance will be appreciated.

                    // Set data 
                    series.data.setAll([
                        { value: Type[0], category: "Type 1" }, 
                        { value: Type[1], category: "Type 2" }, 
                        { value: Type[2], category: "Type 3" },
                    ]);


                    // Create legend 
                    var legend = chart.children.push(am5.Legend.new(root, {

                        centerX: am5.percent(50),
                        x: am5.percent(50),
                        marginTop: 15,
                        marginBottom: 15
                    }));


                    legend.labels.template.text = "{category}: {value.value}";
                    legend.slices.template.tooltipText = "{category}: {value.value}";
                    chart.legend.valueLabels.template.text = "{value.value}";

                    legend.data.setAll(series.dataItems);

Regards

score 5 · Accepted Answer · answered Dec 16 '21 at 17:26

v5 is completely different from v4, API-wise. In order to configure the pie chart's legend, you have to set it inside the series as documented here:

let series = chart.series.push(
  am5percent.PieSeries.new(root, {
    name: "Series",
    categoryField: "country",
    valueField: "sales",
    legendLabelText: "{category}",
    legendValueText: "{value}"
  })
);

Tooltips need to be set on the slices using set or setAll (see the settings documentation for more info):

series.slices.template.set('tooltipText', '{category}: {value}');

Similarly for the slice labels, set the text property using the above functions:

series.labels.template.set('text', '{category}: {value}');

Demo:

var root = am5.Root.new("chartdiv");

root.setThemes([
  am5themes_Animated.new(root)
]);

var chart = root.container.children.push( 
  am5percent.PieChart.new(root, {
    layout: root.verticalLayout
  }) 
);

var data = [{
  country: "France",
  sales: 100000
}, {
  country: "Spain",
  sales: 160000
}, {
  country: "United Kingdom",
  sales: 80000
}];

 
var series = chart.series.push(
  am5percent.PieSeries.new(root, {
    name: "Series",
    valueField: "sales",
    categoryField: "country",
    legendLabelText: "{category}",
    legendValueText: "{value}"
  })
);
series.slices.template.set('tooltipText', '{category}: {value}');
series.labels.template.set('text', '{category}: {value}');

series.data.setAll(data);

var legend = chart.children.push(am5.Legend.new(root, {

  centerX: am5.percent(50),
  x: am5.percent(50),
  marginTop: 15,
  marginBottom: 15
}));
 
legend.data.setAll(series.dataItems);

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="//cdn.amcharts.com/lib/5/index.js"></script>
<script src="//cdn.amcharts.com/lib/5/percent.js"></script>
<script src="//cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<div id="chartdiv"></div>

Cannot change label from percentage to number in amchart5

1 Answers1