How can i show sum of value in the middle of pie chart using am charts.
JavaScript
x
47
47
1
am5.ready(function() {
2
var totalUsers = {!! json_encode($totalUsers) !!};
3
var root = am5.Root.new("total-users");
4
root.setThemes([
5
am5themes_Animated.new(root)
6
]);
7
8
var chart = root.container.children.push(am5percent.PieChart.new(root, {
9
layout: root.verticalLayout,
10
innerRadius: am5.percent(50)
11
}));
12
13
var series = chart.series.push(am5percent.PieSeries.new(root, {
14
valueField: "value",
15
categoryField: "category",
16
alignLabels: false
17
}));
18
19
series.labels.template.setAll({
20
textType: "circular",
21
centerX: 0,
22
centerY: 0,
23
24
});
25
26
var label = chart.seriesContainer.children.push(am5.Label.new(root, {
27
textAlign: "center",
28
centerY: am5.p100,
29
centerX: am5.p50,
30
text:"[values.value.sum]"
31
})
32
);
33
34
series.data.setAll(totalUsers);
35
36
var legend = chart.children.push(am5.Legend.new(root, {
37
centerX: am5.percent(50),
38
x: am5.percent(50),
39
marginTop: 15,
40
marginBottom: 15,
41
}));
42
43
legend.data.setAll(series.dataItems);
44
series.appear(1000, 100);
45
46
}); // end am5.ready()
47
also i want to show values in decimal not in percentage. i have tried text:”[values.value.sum]” but it’s not working
Advertisement
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:
JavaScript
1
3
1
const totalUsers = [{name:'Josh',value:10},{name:'Kyle',value:5}];
2
label.set('text', `${totalUsers.sum(user => user.value)}`);
3