scrolling 100% stacked column chart

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

    Posted 19 May 2016 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>
        <base href="">
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <link rel="stylesheet" href="//" />
        <link rel="stylesheet" href="//" />

        <script src=""></script>
        <script src=""></script>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
    <script src=""></script>
    <script src=""></script>
    <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 class="demo-section k-content wide">
            <div id="chart"></div>
            // Sample data
            var data = [];
            for (var i = 0; i < 100; i++) {
              var val = Math.round(Math.random() * 10);
                category: "Cfdsfsfds fsf dsf ds sf ds f" + i,
                value: val

            function createChart() {
                    renderAs: "canvas",
                    dataSource: {
                        data: data
                    categoryAxis: {
                        min: 0,
                        max: 10,
                        labels: {
                            rotation: "90"
                      type: "column",
                       stack: {
                    series: [{
                        field: "value",
                        categoryField: "category"
                        field: "value",
                        categoryField: "category"
                    pannable: {
                        lock: "y"

            $("#example").bind("kendo:skinChange", createChart);


  2. T. Tsonev
    T. Tsonev avatar
    2794 posts

    Posted 23 May 2016 Link to this post


    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.

    T. Tsonev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top