ZoomSettingsModel API in Vue Chart API component

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.

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

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.

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

  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.