React Bubble Chart

Visualize three dimensions of data with a React bubble chart. Map values to x, y, and bubble size. Color scales, labels, tooltips, and Tailwind CSS on every element.

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

export function MarketAnalysis() {
  const data = [
    { company: "Acme", revenue: 12, growth: 25, employees: 500 },
    { company: "Beta", revenue: 8, growth: 40, employees: 200 },
    { company: "Corp", revenue: 25, growth: 10, employees: 1200 },
    { company: "Delta", revenue: 5, growth: 60, employees: 80 },
  ]

  return (
    <BubbleChart
      data={data}
      x="revenue"
      y="growth"
      size="employees"
      label="company"
      className="h-72"
    />
  )
}

Features

Three-dimensional data mapping (x, y, size)
Color scale by category or value
Labels and tooltips
SVG rendering with real DOM
Tailwind className on bubbles, axes, labels
Responsive sizing
Under 3kb tree-shaken
Read the DocsSee DemosExamples