zoomable Boolean|Object (default: false)

Specifies if the chart can be zoomed.

Example - enable zooming

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }],
    zoomable: true,
    categoryAxis: {
      categories: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
    }
  });
</script>

zoomable.mousewheel Boolean|Object (default: true)

Specifies if the chart can be zoomed using the mouse wheel.

Example - disable mouse wheel zoom

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }],
    zoomable: {
      mousewheel: false
    },
    categoryAxis: {
      categories: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
    }
  });
</script>

zoomable.mousewheel.lock String (default: "none")

Specifies an axis that should not be zoomed. The supported values are none, x and y.

Example - disable mouse wheel zoom for the y axis

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }],
    zoomable: {
      mousewheel: false
    },
    categoryAxis: {
      categories: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
    }
  });
</script>

zoomable.mousewheel.rate Number (default: 0.3)

Specifies the zoom rate as percentage of the axis range. The default value is 0.3 or 30% of the axis range.

Example - set the mousewheel zoom rate to 10% of the axis range

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }],
    zoomable: {
      mousewheel: {
        rate: 0.1
      }
    },
    categoryAxis: {
      categories: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
    }
  });
</script>

zoomable.selection Boolean|Object (default: true)

Specifies if the chart can be zoomed using selection.

Example - disable selection zoom

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }],
    zoomable: {
      selection: false
    },
    categoryAxis: {
      categories: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
    }
  });
</script>

zoomable.selection.key String (default: "shift")

Specifies a keyboard key that should be pressed to activate the selection. The supported values are:

• "none" - No key is required.
• "ctrl" - The "ctrl" key should be pressed.
• "shift" - The "shift" key should be pressed.
• "alt" - The "alt" key should be pressed.

Example - specify that no key needs be pressed

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }],
    zoomable: {
      selection: {
        key: "none"
      }
    },
    categoryAxis: {
      categories: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
    }
  });
</script>

zoomable.selection.lock String (default: "none")

Specifies an axis that should not be zoomed. The supported values are none, x and y.

Example - disable selection zoom for the y axis

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }],
    zoomable: {
      selection: {
        lock: "y"
      }
    },
    categoryAxis: {
      categories: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
    }
  });
</script>