Chart primitives

Layouts & specialized

Interactions

SVG utilities

Data utilities

Umbrella package

@vx/vx

@vx/brush

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

Installation

npm install --save @vx/brush

Examples

Brush

<Brush />

Components

<Brush />

APIs

#<Brush />

# Brush.brushDirection"both" | "horizontal" | "vertical" | undefinedoptional

Allowed directions for Brush dimensional change.

Default horizontal

# Brush.brushRegion"chart" | "xAxis" | "yAxis" | undefinedoptional

What is being brushed, used for margin subtraction.

Default chart

# Brush.disableDraggingSelectionbooleanoptional

Whether movement of Brush should be disabled.

Default false

# Brush.handleSizenumberoptional

Size of Brush handles, applies to all resizeTriggerAreas.

Default 4

# Brush.heightnumberoptional

Brush stage height.

Default 0

# Brush.initialBrushPositionPartialBrushStartEnd | undefinedoptional

Initial start and end position of the Brush.

# Brush.marginMarginShape | undefinedoptional

Margin subtracted from Brush stage dimensions.

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

# Brush.onBrushEnd((bounds: Bounds | null) => void) | undefinedoptional

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

# Brush.onBrushStart((start: Point) => void) | undefinedoptional

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

# Brush.onChange((bounds: Bounds | null) => void) | undefinedoptional

Callback invoked on a change in Brush bounds.

# Brush.onClick((event: MouseHandlerEvent) => void) | undefinedoptional

Callback invoked on Brush stage click.

# Brush.onMouseLeave((event: MouseHandlerEvent) => void) | undefinedoptional

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

# Brush.onMouseMove((event: MouseHandlerEvent) => void) | undefinedoptional

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

# Brush.resetOnEndboolean | undefinedoptional

Whether to reset the Brush on drag end.

Default false

# Brush.resizeTriggerAreasResizeTriggerAreas[] | undefinedoptional

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

Default ['left', 'right']

# Brush.selectedBoxStyleSVGProps<SVGRectElement>optional

Style object for the Brush selection rect.

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

# Brush.widthnumberoptional

Brush stage width.

Default 0

# Brush.xAxisOrientation"top" | "bottom" | undefinedoptional

Orientation of xAxis if brushRegion=xAxis.

Default bottom

# Brush.xScaleScale<any, any>optional

x-coordinate scale.

# Brush.yAxisOrientation"left" | "right" | undefinedoptional

Orientation of yAxis if brushRegion=yAxis.

Default right

# Brush.yScaleScale<any, any>optional

y-coordinate scale.