chart.zoom
Configuration Structure
chart: {}The zoom options let users zoom into axis charts by dragging a selection, scrolling the mouse wheel, or using the toolbar buttons. You can restrict zooming to a single axis, auto-scale the y-axis to the visible range, and style the highlighted zoomed area. It is part of the chart configuration.
zoom
enabled
To allow zooming in axis charts.
Note: In a category x-axis chart, to enable zooming, you will also need to set xaxis.tickPlacement: 'on'.
Read more on the Category Axis Zoom tutorial.
type
Allow zooming either on both x-axis, y-axis or on both axis. Available options
- x
- y
- xy
Known Issue: In synchronized charts, xy or y will not update charts in sync, while x will work correctly.
autoScaleYaxis
When this option is turned on, the chart's y-axis re-scales to a new low and high based on the visible area. Helpful in situations where the user zoomed in to a small area to get a better view.
Known Issue: This option doesn't work in a multi-axis chart (when you have more than 1 y-axis)
allowMouseWheelZoom
Whether to allow zooming using mouse wheel.
pinch
Momentum: enable two-finger pinch-zoom on touch devices. It zooms the x-axis around the pinch centroid, frame by frame, and requires zoom.enabled: true. This is on by default; set false to opt out. See the Mobile gestures guide.
resetControl
The way back out of a zoom on a chart whose toolbar is hidden. Added in 7.4.
Drag-to-zoom is a deliberate gesture, so unlike the wheel and the pinch it is not withheld when the toolbar is hidden. The reset button that undoes it is. That leaves a viewer who drags across a bare chart inside a window with nothing on screen that puts the range back.
So while the chart is zoomed and nothing else on screen can reset it, one reset control is drawn where the toolbar would have been, and it goes when the range does. Escape resets under the same gate. A chart nobody zooms is untouched: toolbar: { show: false } still means an empty chart for every viewer who does not zoom.
| Value | Behaviour |
|---|---|
'auto' (default) | Supply the control and the key only where there is no reset button already. A toolbar showing its reset tool counts as a way back; anything else does not. This resolves the same way allowMouseWheelZoom does. |
true | Also force the control on where toolbar.tools.reset is off, which is the same dead end as a hidden toolbar. |
false | Turn off both the control and the Escape shortcut, for a page that supplies its own reset. |
Requires zoom.enabled: true.
chart: {
toolbar: { show: false },
zoom: {
enabled: true,
resetControl: 'auto'
}
}
One side effect worth knowing about: a completed drag-zoom now focuses the chart, which it did not before (the drag was swallowed before the browser could move focus, so Escape reached nothing). That also puts the +, - and 0 keyboard-zoom keys within reach after a mouse zoom for the first time. The focus does not flash a tooltip, and a page listening for Escape still receives the event.
zoomedArea
zoomedArea is the area which is drawn when a user drags the mouse from one point to another
fill
color
Background color of the selection zoomed area
opacity
Sets the transparency level of the selection fill
stroke
color
Border color of the selection zoomed area
opacity
Sets the transparency level of the selection border
width
Sets the width selection border