Scatter plot

XY scatter with optional size encoding. Renders circles at data positions with configurable accessors.

Primitive: ChartScatter

Interactive demo

Usage

import { ChartRoot, ChartScatter } from '@ramtt/charts'

<ChartRoot data={scatterData} height={280}>
  <ChartScatter
    xAccessor={(d) => d.x}
    yAccessor={(d) => d.y}
    className="fill-blue-500"
  />
</ChartRoot>

Props

Prop	Type	Default	Description
xAccessor	`(d, i) => number`	—	X value accessor
yAccessor	`(d, i) => number`	—	Y value accessor
sizeAccessor	`(d, i) => number`	—	Size encoding accessor
sizeRange	`[number, number]`	[3, 16]	Min/max circle size
colorFn	`(d, i) => string`	—	Per-point color function