@visx/brush

A brush allows you to select a sub-region of your chart or axis.

Installation

npm install --save @visx/brush

Examples

APIs

#<Brush />

# brushDirection"both" | "horizontal" | "vertical" | undefined

Allowed directions for Brush dimensional change.

Default horizontal

# brushRegion"chart" | "xAxis" | "yAxis" | undefined

What is being brushed, used for margin subtraction.

Default chart

# disableDraggingSelectionboolean

Whether movement of Brush should be disabled.

Default false

# handleSizenumber

Size of Brush handles, applies to all resizeTriggerAreas.

Default 4

# heightnumber

Brush stage height.

Default 0

# initialBrushPositionPartialBrushStartEnd | undefined

Initial start and end position of the Brush.

# innerRefMutableRefObject<BaseBrush | null> | undefined

Reference to the BaseBrush component.

# marginMarginShape | undefined

Margin subtracted from Brush stage dimensions.

Default { top: 0, left: 0, right: 0, bottom: 0, }

# onBrushEnd((bounds: Bounds | null) => void) | undefined

Callback invoked on mouse up when a Brush size is being updated.

# onBrushStart((start: Point) => void) | undefined

Callback invoked on initialization of a Brush (not Brush move).

# onChange((bounds: Bounds | null) => void) | undefined

Callback invoked on a change in Brush bounds.

# onClick((event: PointerHandlerEvent) => void) | undefined

Callback invoked on Brush stage click.

# onMouseLeave((event: PointerHandlerEvent) => void) | undefined

Callback invoked on mouse leave from Brush stage when not dragging.

# onMouseMove((event: PointerHandlerEvent) => void) | undefined

Callback invoked on mouse move in Brush stage when not dragging.

# resetOnEndboolean | undefined

Whether to reset the Brush on drag end.

Default false

# resizeTriggerAreasResizeTriggerAreas[] | undefined

Array of rect sides and corners which should be resizeable / can trigger a Brush size change.

Default ['left', 'right']

# selectedBoxStyleSVGProps<SVGRectElement>

Style object for the Brush selection rect.

Default { fill: DEFAULT_COLOR, fillOpacity: 0.2, stroke: DEFAULT_COLOR, strokeWidth: 1, strokeOpacity: 0.8, }

# widthnumber

Brush stage width.

Default 0

# xAxisOrientation"top" | "bottom" | undefined

Orientation of xAxis if brushRegion=xAxis.

Default bottom

# xScaleScale<any, any>

x-coordinate scale.

# yAxisOrientation"left" | "right" | undefined

Orientation of yAxis if brushRegion=yAxis.

Default right

# yScaleScale<any, any>

y-coordinate scale.

Exports