Zooming in React Chart

Zooming enhances chart interactivity by allowing users to magnify specific areas, making it easier to analyze details and explore large datasets more effectively.

Selection zoom

To enable zooming via rubber band selection, set the selectionZoom property to true within the ChartZoomSettings component. This allows users to click and drag to select a specific area of the chart for a closer, more detailed view.

Mouse wheel zoom

To enable zooming with the mouse wheel, set the mouseWheelZoom property to true in the ChartZoomSettings component. This allows users to smoothly zoom in and out of the chart by scrolling the mouse wheel.

Pinch zoom

To enable pinch-to-zoom functionality on touch-enabled devices, set the pinchZoom property to true in the ChartZoomSettings component. This allows users to zoom in and out of the chart using a pinch gesture for intuitive touch interaction.

Pan

To enable panning on a zoomed chart, set the pan property to true. This allows users to easily navigate across different areas of the chart by clicking and dragging.

Pagination

You can swipe left or right using panning, or tap on a specific date button at the bottom to view the data for that day.

Mode

The mode property in the ChartZoomSettings component defines the direction in which zooming is applied. You can choose from the following options:

• X – Enables horizontal zooming only.

• Y – Enables vertical zooming only.

• XY – Enables both horizontal and vertical zooming (default setting).

The default mode is XY.

Toolbar

Zooming and panning can also be controlled using the zoom toolbar. To display the toolbar when the chart is first rendered, set the visible property to true inside the toolbar in the ChartZoomSettings component.

Toolbar customization

The position of the zoom toolbar can be customized using the position property within the ChartZoomSettings component.

For flexible alignment, use the following properties:

• hAlign: Specifies horizontal alignment.
  • Left – Aligns the toolbar to the start.
  • Center – Centers the toolbar.
  • Right – Aligns the toolbar to the end.
• vAlign: Specifies vertical alignment.
  • Top – Positions the toolbar at the top.
  • Center – Centers the toolbar vertically.
  • Bottom – Positions the toolbar at the bottom.