zoomableBoolean|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.mousewheelBoolean|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.lockString(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: { lock: "y" } }, categoryAxis: { categories: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"] } }); </script>zoomable.mousewheel.rateNumber(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.selectionBoolean|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.keyString(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.lockString(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>In this article