scrolling 100% stacked column chart

2 posts, 0 answers
  1. David
    David avatar
    1 posts
    Member since:
    Oct 2012

    Posted 19 May Link to this post

    I'm trying to create a 100% stacked column chart that can scroll left and right with the mouse.   Scrolling works properly with normal columns, but not with 100% stacked ones.  Here's a sample that shows the problem:

     <!DOCTYPE html>
    <html>
    <head>
        <base href="http://demos.telerik.com/kendo-ui/bar-charts/pan-and-zoom">
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.common-material.min.css" />
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.material.min.css" />

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.mobile.all.min.css">
    <script src="http://kendo.cdn.telerik.com/2016.2.504/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.2.504/js/jszip.min.js"></script>
    </head>
    <body>
    <div id="example">

    <div class="box wide">

    <p>Use SHIFT + Mouse Drag Region Selection combination on mouse-enabled devices to zoom in data for a specific period of time</p>

    </div>
        <div class="demo-section k-content wide">
            <div id="chart"></div>
        </div>
        <script>
            // Sample data
            var data = [];
            for (var i = 0; i < 100; i++) {
              var val = Math.round(Math.random() * 10);
              data.push({
                category: "Cfdsfsfds fsf dsf ds sf ds f" + i,
                value: val
              });
            }

            function createChart() {
                $("#chart").kendoChart({
                    renderAs: "canvas",
                    dataSource: {
                        data: data
                    },
                    categoryAxis: {
                        min: 0,
                        max: 10,
                        labels: {
                            rotation: "90"
                        }
                    },
                    seriesDefaults:{
                      type: "column",
                       stack: {
                            type:"100%"
                        }
                    },
                    series: [{
                        field: "value",
                        categoryField: "category"
                    },{
                        
                        field: "value",
                        categoryField: "category"
                    }],
                    valueAxis:{
                      min:0,
                      max:1
                    },
                    pannable: {
                        lock: "y"
                    }
                });
            }

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


    </body>
    </html>

  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 23 May Link to this post

    Hi,

    Thank you for reporting this issue. I've logged it on GitHub for tracking purposes.

    You can use the workaround suggested there for the time being. See the updated snippet.

    Apologies for the caused inconvenience.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top