Skip to content
Pluot

Brushing

This example demonstrates the brushing features supported by the <Pluot/> React component. The component supports both controlled (the brush state is managed by the parent component) and uncontrolled (the brush state is managed internally by Pluot and changes are emitted via onBrush and onBrushEnd callback props). The following props control brushing interactions:

  • brushMode: determines the brush shape (Rect, Polygon lasso, RangeX, or RangeY)
  • brushUnitsModeX and brushUnitsModeY: determine whether the brush shape is defined in terms of Data coordinates (responding to camera zoom/pan interactions), Pixels, or Normalized (0-to-1) coordinates
  • enableBrushCreate, enableBrushEdit, and enableBrushClear determine which interactions are allowed
  • brush: used when the brush state is managed by the parent component
  • Additional props control long-press duration, the color of the brush overlay, the margins/bounds of the brushable region, and whether uncontrolled brush states are persisted.

Try it: long-click (1.5s) inside the plot, then drag to start brushing. The design of this long-press-to-initiate-brushing interaction is inspired by regl-scatterplot.