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"
:
- React
- Angular
- Svelte
- Vue
- Solid
- TypeScript
<VisFreeBrush mode="y"/>
<vis-free-brush mode="y"></vis-free-brush>
<VisFreeBrush mode="y"/>
<VisFreeBrush mode="y" />
<VisFreeBrush mode="y"/>
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
- Angular
- Svelte
- Vue
- Solid
- TypeScript
<VisFreeBrush autoHide={false}/>
<vis-free-brush [autoHide]="false"></vis-free-brush>
<VisFreeBrush autoHide={false}/>
<VisFreeBrush :autoHide="false" />
<VisFreeBrush autoHide={false}/>
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 |