@vx/brush

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

Installation

npm install --save @vx/brush

Examples

Components

APIs

#<Brush />

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

Allowed directions for Brush dimensional change.

Default horizontal

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

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.initialBrushPositionPartialBrushStartEndoptional

Initial start and end position of the Brush.

# Brush.marginMarginShapeoptional

Margin subtracted from Brush stage dimensions.

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

# Brush.onBrushEnd(bounds: Bounds) => voidoptional

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

# Brush.onBrushStart(start: Point) => voidoptional

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

# Brush.onChange(bounds: Bounds) => voidoptional

Callback invoked on a change in Brush bounds.

# Brush.onClick(event: MouseHandlerEvent) => voidoptional

Callback invoked on Brush stage click.

# Brush.onMouseLeave(event: MouseHandlerEvent) => voidoptional

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

# Brush.onMouseMove(event: MouseHandlerEvent) => voidoptional

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

# Brush.resetOnEndbooleanoptional

Whether to reset the Brush on drag end.

Default false

# Brush.resizeTriggerAreasResizeTriggerAreas[]optional

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"optional

Orientation of xAxis if brushRegion=xAxis.

Default bottom

# Brush.xScaleScale<any, any>optional

x-coordinate scale.

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

Orientation of yAxis if brushRegion=yAxis.

Default right

# Brush.yScaleScale<any, any>optional

y-coordinate scale.