Zoom Pan

The Zoom Pan component in REAVIZ allows users to zoom in and pan across various charts. This is particularly useful for exploring large datasets, enabling users to focus on specific areas of the chart.

Where to use:

Large Datasets: Ideal for charts with large datasets, allowing users to zoom in on specific data points.
Detailed Analysis: Useful for enabling detailed analysis by zooming into specific sections of the chart.
Interactive Exploration: Great for interactive data exploration, providing a more dynamic user experience.

Examples

API

ChartZoomPan

Name	Type	Default
`data`	`ChartInternalDataShape[]` Data the chart is rendering. Set internally by the parent chart.
`domain`	`[ChartDataTypes, ChartDataTypes]` Current zoom domain on the axis being zoomed.
`axisType`	`"value" \| "time" \| "category" \| "duration"` Type of the axis being zoomed. Set internally by the parent chart.
`roundDomains`	`boolean` Whether the axis is rounding domains. Set internally by the parent chart.
`height`	`number` Height of the zoom-pan area. Set internally by the parent chart.
`width`	`number` Width of the zoom-pan area. Set internally by the parent chart.
`scale`	`number` Current zoom scale factor.
`offset`	`number` Current pan offset.
`pannable`	`boolean` Whether panning is enabled.
`zoomable`	`boolean` Whether zooming is enabled.
`disabled`	`boolean` Whether the gestures are disabled.
`maxZoom`	`number` Maximum allowed zoom scale.
`zoomStep`	`number` Incremental step applied on zoom gestures.
`disableMouseWheel`	`boolean` Whether to ignore mouse wheel events for zoom.
`requireZoomModifier`	`boolean` Whether a modifier key is required to trigger zoom.
`onZoomPan`	`(event: ZoomPanChangeEvent) => void` Fires when the user zooms or pans.

ZoomPan

Name	Type	Default
`height`	`number` Height of the area.	`0`
`width`	`number` Width of the area.	`0`
`scale`	`number` Current zoom scale factor.	`1`
`x`	`number` Current x translation.	`0`
`y`	`number` Current y translation.	`0`
`pannable`	`boolean` Whether panning is enabled.	`true`
`zoomable`	`boolean` Whether zooming is enabled.	`true`
`disabled`	`boolean` Whether the gestures are disabled.
`maxZoom`	`number` Maximum allowed zoom scale.	`10`
`minZoom`	`number` Minimum allowed zoom scale.	`0`
`zoomStep`	`number` Incremental step applied on zoom gestures.	`0.1`
`constrain`	`boolean` Whether panning is constrained to the chart bounds.	`true`
`globalPanning`	`boolean` Whether panning works anywhere on the page.	`true`
`disableMouseWheel`	`boolean` Whether to ignore mouse wheel events for zoom.
`requireZoomModifier`	`boolean` Whether a modifier key is required to trigger zoom.
`onZoomPan`	`(event: ZoomPanEvent) => void`
`onZoom`	`(event: ZoomEvent) => void`
`onZoomEnd`	`() => void`
`onPanStart`	`(event: PanStartEvent) => void`
`onPanMove`	`(event: PanMoveEvent) => void`
`onPanEnd`	`(event: PanEndEvent) => void`
`onPanCancel`	`(event: PanCancelEvent) => void`