Free Brush

Basic Configuration

Free Brush is an extention of Brush, an interactive component that is designed to work inside an XYContainer. See brush docs to learn about basic configuration and usage.

Mode

You can change the axis alignment of your Free Brush by setting the mode property to "x", "y" or "xy":

mode: xyxy

React

<VisFreeBrush mode="y"/>

Angular

<vis-free-brush mode="y"></vis-free-brush>

Svelte

<VisFreeBrush mode="y"/>

Vue

<VisFreeBrush mode="y" />

TypeScript

const freeBrush = new FreeBrush<DataRecord>({ mode: "y" })

Loading...

Auto Hide

Disabling the autoHide property will keep the Free Brush selection visible after the onBrushEnd event has triggered:

React

<VisFreeBrush autoHide={false}/>

Angular

<vis-free-brush [autoHide]="false"></vis-free-brush>

Svelte

<VisFreeBrush autoHide={false}/>

Vue

<VisFreeBrush :autoHide="false" />

TypeScript

const freeBrush = new FreeBrush<DataRecord>({ autoHide: false })

Loading...

CSS Variables

All supported CSS variables and their default values

--vis-free-brush-selection-fill-color: #0b1640;
--vis-free-brush-selection-fill-opacity: 0.4;
--vis-free-brush-selection-stroke-color: #acb2b9;
--vis-free-brush-handle-fill-color: #6d778c;
--vis-free-brush-handle-stroke-color: none;
 
/* Dark Theme */
--vis-dark-free-brush-selection-fill-color: #344174;
--vis-dark-free-brush-selection-stroke-color: #0b1640;
--vis-dark-free-brush-handle-fill-color: #6d778c;

Component Props

Name	Type	Description
* required property