CODEWITHSUNDEEP
kendo-ui
Randy
Randy

Reputation: 23

Kendo UI Zoom Lock Y Axis Not Working

I am trying to lock the Y axis when zooming in Kendo UI. According to the docs, I should be able to do it like this: zoomable: { mousewheel: { lock: "y" } }

But somehow it is not working, even the demo in Kendo has the same problem, see http://demos.telerik.com/kendo-ui/bar-charts/pan-and-zoom When I zoom in, you can see y axis max change from 12 to 10 and lower.

Am I understanding the docs correctly or there is a bug with kendo?

Thank you!

Upvotes: 0

Views: 997

Answers (3)

jpllosa
jpllosa

Reputation: 2202

The answer of setting the valueAxis.max is nearly there. But the issue I have with this is when you reach maximum zoom decimals appear because the y-axis changes based on which bars are currently visible. If I do a valueAxis.labels.format: '{0:0}', yes the decimals are gone but on maximum zoom it would appear that the bars are not leveled correctly to the y-axis. In fact the bar height/level is correct, the y-axis label is wrong, it's missing a decimal. The key is setting valueAxis.majorUnit. To demostrate, here is my options for a Kendo Chart for jQuery. Comment/uncomment the valueAxis.labels and valueAxis.majorUnit to see the difference.

{
  series: [{
    name: 'Grand Total',
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    type: 'column',
  }],
  zoomable: {
    mousewheel: {
      lock: 'y',
    },
    selection: {
      lock: 'y',
    },
  },
  pannable: {
    lock: 'y',
  },
  valueAxis: {
    max: 12,
    // labels: {
    //     format: '{0:0}',
    // },
    majorUnit: 1,
  },
  categoryAxis: {
    categories: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
  },
}

Hope this helps.

Upvotes: 0

Shai
Shai

Reputation: 3872

You can see that if you zoom on a bar with a height of 10, the y axis max remains at 12.

The behavior you're seeing is not zooming but changing the axis max to better suit the heights of the bars you see in the view. You can see the difference in the fact that the minimum value of the axis remains 0 but when you enable zooming in the y axis, the minimum value also changes.

You can avoid this behavior by setting a permanent axis max value:

valueAxis: {
  max: number
}

The reason for this behavior is that if you add/remove/change your values, you'll want the grid to accommodate the new bars and not have them exceed the top of the chart. Setting the max y axis value is a good idea only if your data isn't going to change after the chart is shown for the first time.

Upvotes: 0

ezanker
ezanker

Reputation: 24738

The y-axis is not zooming, rather the max value is being auto-calculated depending on which bars are currently visible. You can avoid this be setting the valueAxis.max value. In the example, add

valueAxis:{
  max: 12
},

Upvotes: 0

Related Questions