CODEWITHSUNDEEP
jquerykendo-ui
Duffp
Duffp

Reputation: 5978

KendoUI Line Chart - Dynamic Y-Axis

Does anyone know if it is possible to make the y-axis of a KendoUI Chart dynamic? Ultimately what I would like to do is have the mouse wheel either increase or decrease the range when scrolled on top of it. Another (less elegant) way would just to have two buttons + and - to increase the range on the y-axis. Any guidance would be greatly appreciated. I haven't been able to find anything through the documentation.

Upvotes: 0

Views: 1258

Answers (1)

Robin Giltner
Robin Giltner

Reputation: 3055

You can use the chart.setOptions to change the valueAxis min and max properties with something like 

var chart = $("#chart").data("kendoChart");
var min = chart.options.valueAxis.min;
var max = chart.options.valueAxis.max;
chart.setOptions({ valueAxis: { min: min * 1.25, max: max * 0.75 }});

Which you can call with a button click etc. Using this StackOverflow answer (https://stackoverflow.com/a/22518932/1293912) I used a jquery handler on the window to catch the events mousewheel, and DOMMouseScroll and used those event handlers to call the increase/decrease Y Axis

Here is a quick and dirty sample http://jsbin.com/dateka/1/edit?html,js,output

Upvotes: 2

Related Questions