Stacked Bar Charts

2 posts, 0 answers
  1. Shabih
    Shabih avatar
    1 posts
    Member since:
    Mar 2015

    Posted 09 Apr 2015 Link to this post

    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>

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 10 Apr 2015 Link to this post

    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!
     
Back to Top