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 (opens in a new tab)
| Prop | Description | Default |
|---|---|---|
data | ChartInternalDataShape[] | |
domain | [ChartDataTypes, ChartDataTypes] | |
axisType | "value" | "time" | "category" | "duration" | |
roundDomains | boolean | |
height | number | |
width | number | |
scale | number | |
offset | number | |
pannable | boolean | |
zoomable | boolean | |
disabled | boolean | |
maxZoom | number | |
zoomStep | number | |
disableMouseWheel | boolean | |
requireZoomModifier | boolean | |
onZoomPan | (event: ZoomPanChangeEvent) => void | () => undefined |
ZoomPan (opens in a new tab)
| Prop | Description | Default |
|---|---|---|
height | number | 0 |
width | number | 0 |
scale | number | 1 |
x | number | 0 |
y | number | 0 |
pannable | boolean | true |
zoomable | boolean | true |
disabled | boolean | |
maxZoom | number | 10 |
minZoom | number | 0 |
zoomStep | number | 0.1 |
constrain | boolean | true |
globalPanning | boolean | true |
disableMouseWheel | boolean | |
requireZoomModifier | boolean | |
onZoomPan | (event: ZoomPanEvent) => void | |
onZoom | (event: ZoomEvent) => void | () => undefined |
onZoomEnd | () => void | () => undefined |
onPanStart | (event: PanStartEvent) => void | () => undefined |
onPanMove | (event: PanMoveEvent) => void | () => undefined |
onPanEnd | (event: PanEndEvent) => void | () => undefined |
onPanCancel | (event: PanCancelEvent) => void | () => undefined |