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