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
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)}`);