React Scatter Plot

A React scatter plot component that renders as SVG. Map data to x, y, size, and color dimensions. Add trend lines, tooltips, and style every dot with Tailwind CSS.

$npm install @chartts/react
example.tsx
import { ScatterChart } from "@chartts/react"

export function CorrelationChart() {
  const data = [
    { spend: 1200, revenue: 4200, size: 10 },
    { spend: 2400, revenue: 8100, size: 15 },
    { spend: 3600, revenue: 11800, size: 22 },
    { spend: 4800, revenue: 15200, size: 30 },
  ]

  return (
    <ScatterChart
      data={data}
      x="spend"
      y="revenue"
      size="size"
      className="h-72"
      dotClassName="fill-cyan-400"
    />
  )
}

Features

Map data to x, y, size, and color
Regression and trend lines
SVG rendering with real DOM elements
Tailwind className on dots, axes, grid
Tooltips with custom content
TypeScript with full type inference
Under 3kb tree-shaken
Read the DocsSee DemosExamples