Data utilities
Umbrella package
@visx/brush
A brush allows you to select a sub-region of your chart or axis.
Installation
npm install --save @visx/brush
Examples
<Brush />
APIs
#<Brush />
"both" | "horizontal" | "vertical"
Allowed directions for Brush dimensional change.
Default horizontal
"chart" | "xAxis" | "yAxis"
What is being brushed, used for margin subtraction.
Default chart
boolean
Whether movement of Brush should be disabled.
Default false
number
Size of Brush handles, applies to all resizeTriggerAreas
.
Default 4
number
Brush stage height.
Default 0
PartialBrushStartEnd
Initial start and end position of the Brush.
MutableRefObject<BaseBrush>
Reference to the BaseBrush component.
MarginShape
Margin subtracted from Brush stage dimensions.
Default {
top: 0,
left: 0,
right: 0,
bottom: 0,
}
(bounds: Bounds) => void
Callback invoked on mouse up when a Brush size is being updated.
(start: Point) => void
Callback invoked on initialization of a Brush (not Brush move).
(bounds: Bounds) => void
Callback invoked on a change in Brush bounds.
(event: PointerHandlerEvent) => void
Callback invoked on Brush stage click.
(event: PointerHandlerEvent) => void
Callback invoked on mouse leave from Brush stage when not dragging.
(event: PointerHandlerEvent) => void
Callback invoked on mouse move in Brush stage when not dragging.
(props: BrushHandleRenderProps) => ReactNode
Render function for custom brush handles.
boolean
Whether to reset the Brush on drag end.
Default false
ResizeTriggerAreas[]
Array of rect sides and corners which should be resizeable / can trigger a Brush size change.
Default ['left', 'right']
SVGProps<SVGRectElement>
Style object for the Brush selection rect.
Default {
fill: DEFAULT_COLOR,
fillOpacity: 0.2,
stroke: DEFAULT_COLOR,
strokeWidth: 1,
strokeOpacity: 0.8,
}
boolean
Prevent drag end on mouse leaving from brush stage.
Default false
number
Brush stage width.
Default 0
"top" | "bottom"
Orientation of xAxis if brushRegion=xAxis
.
Default bottom
ValueOf<ScaleTypeToD3Scale<BrushScaleOutput, any, any>>
x-coordinate scale.
"left" | "right"
Orientation of yAxis if brushRegion=yAxis
.
Default right
ValueOf<ScaleTypeToD3Scale<BrushScaleOutput, any, any>>
y-coordinate scale.