how to sum of values in middle of pie chart using amchart 5

How can i show sum of value in the middle of pie chart using am charts.

am5.ready(function() {
    var totalUsers = {!! json_encode($totalUsers) !!};
    var root = am5.Root.new("total-users");
    root.setThemes([
        am5themes_Animated.new(root)
    ]);
    
    var chart = root.container.children.push(am5percent.PieChart.new(root, {
        layout: root.verticalLayout,
        innerRadius: am5.percent(50)
    }));

    var series = chart.series.push(am5percent.PieSeries.new(root, {
        valueField: "value",
        categoryField: "category",
        alignLabels: false
    }));

    series.labels.template.setAll({
        textType: "circular",
        centerX: 0,
        centerY: 0,
        
    });

    var label = chart.seriesContainer.children.push(am5.Label.new(root, {
    textAlign: "center",
    centerY: am5.p100,
    centerX: am5.p50,
    text:"[values.value.sum]"
  })
);
    
    series.data.setAll(totalUsers);

    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);
    series.appear(1000, 100);

}); // end am5.ready()

also i want to show values in decimal not in percentage. i have tried text:”[values.value.sum]” but it’s not working

Answer

You can just set the label text manually if you can’t figure out a built in way. Given I don’t know your json structure, let’s go with this:

 const totalUsers = [{name:'Josh',value:10},{name:'Kyle',value:5}];      
 label.set('text', `${totalUsers.sum(user => user.value)}`);

Advertisement

Answer