The ZoomAndPan plugin allows you to set the chart's viewport and change it in response to mouse and touch events.
Use the following statement to import the plugin with embedded theme components:
import { ZoomAndPan } from '@devexpress/dx-react-chart-material-ui';
//import { ZoomAndPan } from '@devexpress/dx-react-chart-bootstrap4';If you want to use custom components, you can import the themeless plugin:
import { ZoomAndPan } from '@devexpress/dx-react-chart';| Name | Type | Default | Description |
|---|---|---|---|
| defaultViewport? | Viewport | The default viewport. | |
| viewport? | Viewport | The viewport. | |
| onViewportChange? | (viewport: Viewport) => void | A function that is executed when the viewport changes. | |
| interactionWithArguments? | 'none' | 'pan' | 'zoom' | 'both' | The type of interaction available for the argument scale. | |
| interactionWithValues? | 'none' | 'pan' | 'zoom' | 'both' | The type of interaction available for the value scale. | |
| zoomRegionKey? | 'shift' | 'alt' | 'ctrl' | The key the allows a user to zoom a region by selecting it with the mouse drag gesture. | |
| dragBoxComponent? | ComponentType<ZoomAndPan.DragBoxProps> | A component that renders the rectangle that appears when a user zooms a region. |
The viewport configuration.
| Field | Type | Description |
|---|---|---|
| argumentStart | any | The viewport's start boundary on the argument scale. |
| argumentEnd | any | The viewport's end boundary on the argument scale. |
| valueStart | any | The viewport's start boundary on the value scale. |
| valueEnd | any | The viewport's end boundary on the value scale. |
| scaleName | string | The scale on which valueStart and valueEnd should be applied. |
Describes properties passed to a component that renders the rectangle around the area a user zooms with the mouse drag gesture.
| Field | Type | Description |
|---|---|---|
| rect | { x: number, y: number, width: number, height: number } | The rectangle's coordinates. |
| Name | Properties | Description |
|---|---|---|
| ZoomAndPan.DragBox | ZoomAndPan.DragBoxProps | A component that renders the rectangle that appears when a user zooms a region. |