CODEWITHSUNDEEP
javascriptkendo-uikendo-chart
AJ31
AJ31

Reputation: 258

Kendo Stacked Bar Chart - StackValue doesn't display correct sum incase of negative values

I have a kendo stacked 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 #"
    }
});

The chart is formed as below.

enter image description here

Under the series for last value, I have added the labels which is supposed to calculate the sum of the stacked bars. However for bars with negative values it doesn't include that in it's sum. How do I get it to display correct sum for each data?

Upvotes: 1

Views: 321

Answers (1)

jpllosa
jpllosa

Reputation: 2202

I think mathematically, the stacked chart is correct. Take for example the negative labels, they are correct because the bar is that value based on the 0 axis point. So in 1964, -28 is the correct label for that bar which started from 0.

Is this what you're after?

stacked chart

Anyway, you'll have to do it manually. That's why we have a Map to keep track of things. Only display it after 3 additions otherwise you'll have a label for each bar.

Try this on the Telerik DOJO:

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/bar-charts/stacked-bar">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.default-ocean-blue.min.css" />

    <script src="https://kendo.cdn.telerik.com/2022.3.913/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.all.min.js"></script>
    
    

</head>
<body>
    <div id="example">
    <div class="demo-section wide">
        <div id="chart"></div>
    </div>
    <script>
      var categories = new Map([
        [1952, {value: 0, count: 0}],
        [1956, {value: 0, count: 0}],
        [1960, {value: 0, count: 0}],
        [1964, {value: 0, count: 0}],
        [1968, {value: 0, count: 0}],
        [1972, {value: 0, count: 0}],
        [1976, {value: 0, count: 0}],
        [1984, {value: 0, count: 0}],
        [1988, {value: 0, count: 0}],
        [1992, {value: 0, count: 0}],
        [1996, {value: 0, count: 0}],
        [2000, {value: 0, count: 0}],
        [2004, {value: 0, count: 0}],
        [2008, {value: 0, count: 0}],
        [2012, {value: 0, count: 0}],
        ]);
      
        function createChart() {
            const myChart = $("#chart").kendoChart({
    title: {
        text: ""
    },            
    legend: {
        visible: false
    },
    seriesDefaults: {
        type: "bar",
        stack: true,
      labels: {
          template: function(data) {
            
            let temp = categories.get(data.category);
            temp.value = temp.value + data.value;
            temp.count++;
            categories.set(data.category, temp);
            
            if (temp.count < 3) {
              return '';
            } else {
              return temp.value;
            }
          },
          visible: 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",        
    }],
    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 #"
    }
});
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
</div>



</body>
</html>

Upvotes: 0

Related Questions