ZoomSettings

23 Sep 20252 minutes to read

Configures the zooming behavior for the chart.

Properties

accessibility AccessibilityModel

Options to improve accessibility for zoom toolkit elements.

enableAnimation boolean

If set to true, the chart will animate when zooming.

Defaults to false.

enableDeferredZooming boolean

If set to true, zooming will be performed on mouse up.

Note that enableDeferredZooming requires enableSelectionZooming to be true.
```html

```typescript
let chart: Chart = new Chart({
...
   zoomSettings: {
     enableSelectionZooming: true,
     enableDeferredZooming: false
   }
...
});
chart.appendTo('#Chart');

Defaults to true

enableMouseWheelZooming boolean

If set to true, the chart can be zoomed using the mouse wheel.

Defaults to false

enablePan boolean

If set to true, the chart can be panned without requiring toolbar items. If set to false, panning is disabled, and the toolbar options must be used to pan the chart.

Defaults to false.

enablePinchZooming boolean

If set to true, the chart can be pinched to zoom in and out.

Defaults to false

enableScrollbar boolean

Specifies whether the axis should have a scrollbar.

Defaults to false.

enableSelectionZooming boolean

If set to true, the chart can be zoomed in by selecting a rectangular region on the plot area.

Defaults to false

mode ZoomMode

Specifies whether to allow zooming vertically, horizontally, or in both ways.
Available options are:

  • XY: Chart can be zoomed both vertically and horizontally.
  • X: Chart can be zoomed horizontally.
  • Y: Chart can be zoomed vertically.

    Note that enableSelectionZooming must be set to true for this feature to work.
    ```html

```typescript
let chart: Chart = new Chart({
...
   zoomSettings: {
     enableSelectionZooming: true,
     mode: 'XY'
   }
...
});
chart.appendTo('#Chart');

Defaults to ‘XY’

showToolbar boolean

If set to true, the chart is rendered with a toolbar on initial load.

Defaults to false

toolbarItems ToolbarItems[]

Specifies the toolkit options for zooming as follows:

  • Zoom - Enables the zooming tool to select and zoom into a specific region of the chart.
  • ZoomIn - Provides a button to zoom in on the chart.
  • ZoomOut - Provides a button to zoom out from the chart.
  • Pan - Allows panning across the chart to explore different regions.
  • Reset - Resets the zoom level to the default view of the chart.

Defaults to ’[“Zoom”, “ZoomIn”, “ZoomOut”, “Pan”, “Reset”]’

toolbarPosition ToolbarPositionModel

Allows customization of the zoom toolbar position. Users can set the horizontal and vertical alignment of the toolbar, as well as specify offsets for precise placement.