ScatterPlot

Scatter plot with configurable point size, color, custom symbols, and optional bubble sizing. Supports time, value, and category axes with brush, zoom/pan, and value markers.

Import

import { ScatterPlot, ScatterSeries, ScatterPoint } from 'reaviz';

ScatterPlot Props

ScatterSeries Props

ScatterPoint Props

Basic Usage

const data = [
  { key: new Date('2024-01-01'), data: 10 },
  { key: new Date('2024-02-01'), data: 25 },
  { key: new Date('2024-03-01'), data: 18 },
];

<ScatterPlot
  height={400}
  width={750}
  data={data}
/>

Bubble Chart (Dynamic Size)

<ScatterPlot
  height={400}
  width={750}
  data={data}
  margins={20}
  series={
    <ScatterSeries
      point={
        <ScatterPoint
          color="rgba(45, 96, 232, 0.8)"
          size={(v) => v.metadata.severity + 5}
        />
      }
    />
  }
/>

Custom Color

<ScatterPlot
  data={data}
  series={
    <ScatterSeries
      point={<ScatterPoint color="#FF5722" size={6} />}
    />
  }
/>

Custom Symbols

import { symbol, symbolStar } from 'd3-shape';

<ScatterPlot
  data={data}
  series={
    <ScatterSeries
      point={
        <ScatterPoint
          symbol={() => {
            const d = symbol().type(symbolStar).size(175)();
            return (
              <path
                d={d}
                style={{ fill: 'lime', stroke: 'purple', strokeWidth: 1.5 }}
              />
            );
          }}
        />
      }
    />
  }
/>

Value Markers (Reference Lines)

import { LinearValueMarker } from 'reaviz';

<ScatterPlot
  data={data}
  series={
    <ScatterSeries
      point={<ScatterPoint color={schemes.cybertron[0]} size={4} />}
      valueMarkers={[
        <LinearValueMarker value={2} color="#D740BE" />,
        <LinearValueMarker value={5} color="#F8A340" />,
      ]}
    />
  }
/>

Categorical Y-Axis

const stages = ['Stage 1', 'Stage 2', 'Stage 3'];

<ScatterPlot
  data={data}
  yAxis={
    <LinearYAxis
      type="category"
      domain={stages}
    />
  }
/>

Click Handling

<ScatterPlot
  data={data}
  series={
    <ScatterSeries
      point={
        <ScatterPoint
          onClick={(d) => console.log(d)}
        />
      }
    />
  }
/>

Conditional Visibility

<ScatterPlot
  data={data}
  series={
    <ScatterSeries
      point={
        <ScatterPoint
          visible={(d) => d.value > 10}
        />
      }
    />
  }
/>

No Gridlines

<ScatterPlot data={data} gridlines={null} />

Notes

• Default cursor is 'pointer' (unlike other chart types that default to 'auto')
• size accepts a function for bubble-chart behavior — receives the data point, return a radius
• symbol replaces the default circle with any SVG element (D3 symbols, icons, etc.)
• visible callback allows filtering individual points without modifying data
• color supports ColorSchemeType: a single color string, an array, or a (data, index) => string function