I have a stacked kendo bar chart defined as follows:
$("#chart").kendoChart({
title: {
text: ""
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar",
stack: true
},
series: [{
name: "Value1",
data: [-40, 32, 34, 36, 45, 33, -34, 83, 36, 37, 44, 37, 35, 36, 46],
color: "#f3ac32"
}, {
name: "Value2",
data: [19, 25, -21, 26, 28, 31, 35, 60, 31, 34, 32, 24, 40, 38, 29],
color: "#b8b8b8"
}, {
name: "Value3",
data: [17, 17, 16, -28, 34, 30, 25, 30, -27, -37, 25, 33, 26, 36, 29],
color: "#bb6e36",
labels: {
template: "#= stackValue #",
visible: true
},
}],
valueAxis: {
max: 180,
line: {
visible: false
},
minorGridLines: {
visible: true
}
},
categoryAxis: {
categories: [1952, 1956, 1960, 1964, 1968, 1972, 1976, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
But the sum displayed at the end of the bar is not correct in the cases where data is negative.
See the output below :
How do I get it to display the correct sum?
1 Answer, 1 is accepted
Hello AJ,
This behavior is expected. The Chart is stackValue field is designed to disregard the negative values and returns only the positive ones. To overcome this I recommend using a template function to calculate the desired result. For example:
labels: {
template: function(data) {
var seriesData = data.dataItem
return seriesData.a + seriesData.b + seriesData.c
},
visible: true
}Dojo demo: https://dojo.telerik.com/IhIDOdet
Let me know if you have any questions.
Regards,
Nikolay
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Iron
Hello Nikolay,
Thank you very much. This helps a lot. I had to create a separate function and pass that into the template as the json for the chart generates dynamically.