ZoomSettings API in Vue Chart API component

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.

<div id='Chart'></div>

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.

  <div id='Chart'></div>

  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.