New to Kendo UI for jQuery? Start a free 30-day trial
Show a Total Sum for Stacked Chart Series
Environment
| Product | Progress® Kendo UI® Chart for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I place a label with the stack total on top of column or bar Chart series?
Solution
Starting with the 2016 R3 release, a stackValue field is available in the label template, the series visual, and the event arguments.
It is possible to use this configuration to display the cumulative point value for stacked series.
<div id="chart"></div>
<script>
$(function(){
$("#chart").kendoChart({
dataSource:{
data:[{
a: 22,
b: 11,
c: 33
},{
a: 2,
b: 1,
c: 3
}]
},
seriesDefaults: {
type: "column",
stack: true
},
series: [{
field: "a",
name: "a"
},{
field: "b",
name: "b"
},{
field: "c",
name: "c",
labels: {
template: "#= stackValue #",
visible: true
}
}]
});
});
</script>Since the label is defined at last field level, when you unselect the last field from legend the stackValue is no longer visible. To overcome this, add a 'dummy' series field with the total label:
<div id="chart"></div>
<script>
$(function () {
$("#chart").kendoChart({
dataSource: {
data: [
{ a: 22, b: 11, c: 33, d: 0 },
{ a: 2, b: 1, c: 3, d: 0 },
],
},
seriesDefaults: {
type: "column",
stack: true,
},
series: [
{
field: "a",
name: "a",
},
{
field: "b",
name: "b",
},
{
field: "c",
name: "c",
},
{
field: "d",
labels: {
template: "#= stackValue #",
visible: true,
}
}]
});
});
</script>