VictoryBrushContainer
Adds the ability to highlight a region of a chart, and interact with highlighted regions.
For examples of VictoryBrushContainer in action, visit the Data Selection guide.
Inherited Props
Component Props
allowDrag
The optional allowDrag prop accepts a boolean that enables dragging behavior for the highlighted brush area. Resizing will still be enabled when the allowDrag prop is set to false.
<VictoryChart containerComponent={ <VictoryBrushContainer allowDrag={false} brushDomain={{ x: [0.1, 0.3] }} /> } theme={VictoryTheme.clean} > <VictoryLine /> </VictoryChart>
allowDraw
The optional allowDraw prop accepts a boolean that enables drawing new brush areas. When this prop is set to false, existing brush areas may still be resized or dragged, but clicking outside of existing brush areas will not trigger the creation of new brush areas.
<VictoryChart containerComponent={ <VictoryBrushContainer allowDraw={false} brushDomain={{ x: [0.1, 0.3] }} /> } theme={VictoryTheme.clean} > <VictoryLine /> </VictoryChart>
allowResize
The optional allowResize prop accepts a boolean that enables resizing the highlighted brush area. Dragging will still be enabled when the allowResize prop is set to false, but the dimensions of the brush area will be fixed. By default, when allowResize is set to false, clicking outside of the brush area will center the brush on the user's mouse position without resizing it. This behavior can be controlled via the defaultBrushArea prop.
<VictoryChart containerComponent={ <VictoryBrushContainer allowResize={false} brushDomain={{ x: [0.1, 0.3] }} /> } theme={VictoryTheme.clean} > <VictoryLine /> </VictoryChart>
brushComponent
The brushComponent prop specifies the component to be rendered for the highlighted area.
This component will be supplied with the following props: x, y, width, height, and style.
When this prop is not specified, a <rect/> will be rendered.
brushDimension
When the brushDimension prop is set, brushing will only be specific to the given dimension
(either "x" or "y"), and the entire domain of the other dimension will be highlighted. When this prop
is not specified, highlighting will occur along both dimensions.
brushDomain
The optional brushDomain prop describes the highlighted state. This prop is an object that
specifies separate arrays for x and y. Each array is a tuple that describes the minimum and maximum
values to render. If this prop is not provided initially, the chart will render with the entire
domain highlighted. When this prop changes, the chart will render with a new highlighted domain.
example: brushDomain={{x: [50, 100], y: [0, 100]}
brushStyle
The brushStyle adds custom styles to the brushComponent.
defaultBrushArea
The defaultBrushArea prop specifies how the container will behave when a region outside the active brush is clicked without selecting a new area. When the prop is set to "all", the entire domain will be selected. When the prop is set to "none", no new region will be selected, and any existing active brush will be cleared. When the prop is set to "disable" the new selected region will default to the current active brush. When this prop is set to "move", the active brush will be moved so that it is centered over the location of the click event.
<VictoryChart containerComponent={ <VictoryBrushContainer defaultBrushArea="disable" brushDomain={{ x: [0.1, 0.3] }} /> } > <VictoryLine /> </VictoryChart>
disable
When the disable prop is set to true, VictoryBrushContainer events will not fire.
handleComponent
The handleComponent prop specifies the component to be rendered for each handle for the highlighted
area. This component will be supplied with the following props: x, y, width, height, cursor, and style.
When this prop is not specified, a <rect/> will be rendered.
handleStyle
The handleStyle adds custom styles to the handleComponents. This prop should be given as
an object of SVG style attributes.
Handles refer to the region on each highlighted area where the area may be
expanded. Only handles relevant to the given dimension will be rendered. For example, when
brushDimension="x" only "left" and "right" handles will be rendered. Handles are automatically styled
with cursors appropriate to their orientation.
handleWidth
The handleWidth prop specifies the size of the rendered handle component in pixels. This prop will determine the width of "left" and "right" handles and the height of "top" and "bottom" handles.
onBrushCleared
The optional onBrushCleared prop accepts a function to be called when the active brush area is cleared. The function accepts the parameters of domain (the updated domain), and props (the props used by VictoryBrushContainer).
example: onBrushCleared={(domain, props) => handleBrushCleared(domain, props)}
onBrushDomainChange
The optional onBrushDomainChange prop accepts a function to be called on each update to the highlighted domain. The function accepts the parameters of domain (the updated domain), and props (the props used by VictoryBrushContainer).
example: onBrushDomainChange={(domain, props) => handleDomainChange(domain, props)}
onBrushDomainChangeEnd
The optional onBrushDomainChangeEnd prop accepts a function to be called only on mouse up events. The function accepts the parameters of domain (the updated domain), and props (the props used by VictoryBrushContainer).
example: onBrushDomainChangeEnd={(domain, props) => handleDomainChangeEnd(domain, props)}