Chart primitives

Layouts & specialized

Interactions

SVG utilities

Data utilities

Umbrella package

visx

@visx/brush

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

Installation

npm install --save @visx/brush

Examples

Brush

<Brush />

APIs

#<Brush />

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

Allowed directions for Brush dimensional change.

Default horizontal

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

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

Initial start and end position of the Brush.

# innerRefMutableRefObject<BaseBrush>

Reference to the BaseBrush component.

# marginMarginShape

Margin subtracted from Brush stage dimensions.

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

# onBrushEnd(bounds: Bounds) => void

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

# onBrushStart(start: Point) => void

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

# onChange(bounds: Bounds) => void

Callback invoked on a change in Brush bounds.

# onClick(event: PointerHandlerEvent) => void

Callback invoked on Brush stage click.

# onMouseLeave(event: PointerHandlerEvent) => void

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

# onMouseMove(event: PointerHandlerEvent) => void

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

# renderBrushHandle(props: BrushHandleRenderProps) => ReactNode

Render function for custom brush handles.

# resetOnEndboolean

Whether to reset the Brush on drag end.

Default false

# resizeTriggerAreasResizeTriggerAreas[]

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, }

# useWindowMoveEventsboolean

Prevent drag end on mouse leaving from brush stage.

Default false

# widthnumber

Brush stage width.

Default 0

# xAxisOrientation"top" | "bottom"

Orientation of xAxis if brushRegion=xAxis.

Default bottom

# xScaleValueOf<ScaleTypeToD3Scale<BrushScaleOutput, any, any>>

x-coordinate scale.

# yAxisOrientation"left" | "right"

Orientation of yAxis if brushRegion=yAxis.

Default right

# yScaleValueOf<ScaleTypeToD3Scale<BrushScaleOutput, any, any>>

y-coordinate scale.

Exports

<Brush />