Skip to main content

Brush

Basic Configuration

Brush is designed to work inside an XYContainer alongside an XYChart. The basic configuration looks like:

component.tsx
import { VisXYContainer, VisArea, VisBrush } from '@unovis/react'

function Component(props) {
const data: DataRecord[] = props.data
const x = (d: DataRecord) => d.x
const y = (d: DataRecord) => d.y

return (
<VisXYContainer data={data}>
<VisArea x={x} y={y}/>
<VisBrush/>
</VisXYContainer>
)
}
Loading...

Usage

The Brush component has four event listener properties:

  • onBrushStart
  • onBrushMove
  • onBrushEnd
  • onBrush, which encapsulates all the above.

Each callback has the following parameters:

  • selection: type [number, number], the range of data current being displayed
  • event - the brush event instance
  • userDriven: type boolean, to indicate whether the event was triggered by the user

Selections

Manual Selection

You can explicitly define the default selection range using the selection property:

<VisBrush selection={[3,6]}/>
Loading...

Selection Min Length

You can set a constraint for the minimum selection value with the selectionMinLength property:

<VisBrush selectionMinLength={5}/>
Loading...

Draggable

By default, setting the desired the range relies on moving both start and end Brush handles. You can adjust the entire range with one click by enabling the draggable proprerty:

<VisBrush selectionMinLength={2} selection={[3,6]} draggable={true}/>
Loading...

Brush Appearance

Handle Position

handlePosition changes the placement of the Brush handle with respect to the XYChart.

<VisBrush handlePosition="outside"/>
Loading...

Handle Width

handleWidth sets the width in pixels of the Brush's handle:

<VisBrush handleWidth={20}/>
Loading...

Selection

You can change the appearance of the selection by changing the corresponding CSS variables. For example, here's how you can modify the appearance of the selected and unselected areas:

--vis-brush-selection-fill-color: #0b1640;
--vis-brush-selection-opacity: 0.6;
--vis-brush-unselected-fill-color: #fff;
--vis-brush-unselected-opacity: 0.9;
<VisBrush selection={[2,5]}/>
Loading...

CSS Variables

Supported CSS variables and their default values
--vis-brush-selection-fill-color: none;
--vis-brush-selection-stroke-color: none;
--vis-brush-selection-stroke-width: 0;
--vis-brush-selection-opacity: 0;
--vis-brush-unselected-fill-color: #0b1640;
--vis-brush-unselected-stroke-color: #acb2b9;
--vis-brush-unselected-stroke-width: 0;
--vis-brush-unselected-opacity: 0.4;
--vis-brush-handle-fill-color: #6d778c;
--vis-brush-handle-stroke-color: #eee;
--vis-dark-brush-selection-fill-color: none;
--vis-dark-brush-selection-stroke-color: none;
--vis-dark-brush-selection-stroke-width: 0;
--vis-dark-brush-selection-opacity: 0;
--vis-dark-brush-unselected-fill-color: #acb2b9;
--vis-dark-brush-unselected-stroke-color: #0b1640;
--vis-dark-brush-unselected-stroke-width: 0;
--vis-dark-brush-unselected-opacity: 0.4;
--vis-dark-brush-handle-fill-color: #acb2b9;
--vis-dark-brush-handle-stroke-color: var(--vis-color-grey);

Component Props

NameTypeDescription
* required property