Kendo UI Bar Chart - pan and zoom not working?

719 views Asked by At

My bar chart is inside a window. When the window opens the chart is created but the zoomable and pannable options don't work? Any ideas why? My datasource is linked to an object array variable.

$("#chart").kendoChart({
    pannable: {
        lock: "y"
    },
    zoomable: {
        mousewheel: {
            lock: "y"
        },
        selection: {
            lock: "y"
        }
    },
    dataSource: dsSales,
    title: {
        text: "Sales Analysis"
    },
    legend: {
        position: "top",
        visible: true
    },
    tooltip: {
        visible: true,
        template: "#= series.name # : #= value # (#= dataItem.month #)"
    },
    seriesDefaults: {
        type: pcChartType
    },
    series: [
        {field:"OrderQty", name:"Order Qty", colorField:"useColorQty"},
        {field:"OrderValue", name:"Order Value", colorField:"useColorValue"},
    ],
    categoryAxis: {
        field:"month",
        majorGridLines: {
            visible: true
        }
    },
    valueAxis: {
        minorGridLines: {
            visible: true
        }
    },
    dataBound: function(e){

    }
}).data("kendoChart");
1

There are 1 answers

0
Juliën On

The Pan & Zoom feature on the Kendo UI charts are a new feature that, as of this writing, has only been made available recently on all charts. If you use a recent version of Kendo UI, for example v2016.1.112, your sample will undoubtedly work as you've provided the correct configuration for this:

  $("#chart").kendoChart({
        renderAs: "canvas",
        // ... other stuff here
        pannable: {
            lock: "y"
        },
        zoomable: {
            mousewheel: {
                lock: "y"
            },
            selection: {
                lock: "y"
            }
        }
    }); 

Without a reproducible sample (especially the data from dsSales) this is hard to analyse further.