Victory
Victory

About Docs Gallery Support GitHub FAQs

#
Brush and Zoom

Use `VictoryZoomContainer` as your containerComponent to add panning and zooming behavior to any Victory components that work with an x-y coordinate system.

In the example below, an initial domain is set with the `zoomDomain` prop. This prop may also be used to trigger pan and zoom behavior from other components.

In the next example, `VictoryZoomContainer` and `VictoryBrushContainer` are used to create a zoomable chart with a mini-map brush control. Here, the `onZoomDomainChange` prop on `VictoryZoomContainer` alters the `brushDomain` prop on `VictoryBrushContainer` tying highlighted brush region of the mini-map to the zoom level of the chart. The `onBrushDomainChange` prop on `VictoryBrushContainer` alters the `zoomDomain` prop on `VictoryZoomContainer` so that the zoomed level of the chart matches the highlighted region of the mini-map.

`VictoryBrushContainer` may be used with any Victory component that works on an x-y coordinate system. Brushing behavior may be limited to the x or y dimensions with the `brushDimension` prop, and the selected area may be styled, or even replaced with a custom component.