ZoomSettingsModel

23 Sep 20252 minutes to read

Interface for a class ZoomSettings

Properties

accessibility AccessibilityModel

Options to improve accessibility for zoom toolkit elements.

enableAnimation boolean

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

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');

enableMouseWheelZooming boolean

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

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.

enablePinchZooming boolean

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

enableScrollbar boolean

Specifies whether the axis should have a scrollbar.

enableSelectionZooming boolean

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

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');

showToolbar boolean

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

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.

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.