Skip to main content

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.


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

<VisFreeBrush mode="y"/>

Auto Hide

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

<VisFreeBrush autoHide={false}/>

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;
* required property