This is a migrated thread and some comments may be shown as answers.

Stacked Bar Charts

1 Answer 113 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Shabih
Top achievements
Rank 1
Shabih asked on 09 Apr 2015, 06:00 AM

I am trying to do a stacked bar chart. In the tooltip i want to show the running total of stacked bar. Is there any way i can do that ?

e.g. in the below example. First stack consist of two parts 4.83 and 0.09, i want to show in the tooltip (4.83+0.09=4.92) but could not find a way to do that. Which property should i use in the tooltip, currently its like that:

 template: "#= series.name # : #= series.data #"

<div id="example">
    <div class="demo-section k-content">
        <div id="chart"></div>
    </div>
    <script>
        function createBarChart() {
        $("#chart").kendoChart({
            legend: {
                visible: false
            },
            seriesDefaults: {
                type: "bar"
            },
            series: [{
                name: "Target",
                stack: "Target & Stretch",
                data: [4.83]
            }, {
                name: "Stretch",
                stack: "Target & Stretch",
                data: [0.09]
            }, {

                name: "Actual",
                stack: "Actual",
                data: [4.92]
            }],
            seriesColors: ["#cd1533", "#000000", "#00ff00"],
            valueAxis: {
                min: 0,
                labels: {
                    template: "#= kendo.format('{0:N}', value ) # "
                },
                line: {
                    visible: true
                }
            },
            categoryAxis: {
                categories: ["Target & Actual"],
                labels:{
                    visible: false
                },
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                template: "#= series.name # : #= series.data #"
            }
        });
    }

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

1 Answer, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 10 Apr 2015, 01:55 PM
Hi Shabih,

This scenario is not supported out-of-the-box by Kendo UI Chart. Please excuse us for any inconvenience this may cause.

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
Shabih
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Share this question
or