Brush and Zoom
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,
VictoryBrushContainer are used to create a zoomable chart with a mini-map brush control.
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.
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.