Bubble Chart

Map three dimensions of data to x, y, and bubble size. Color coding by category, tooltips with custom content, and SVG rendering at any resolution. Perfect for market analysis, portfolio visualization, and scientific data.

$npm install @chartts/core
example.tsx
import { bubble } from "@chartts/core"

const svg = bubble({
  data: [
    { country: "US", gdp: 25.5, population: 331, area: 9.8 },
    { country: "China", gdp: 18.3, population: 1412, area: 9.6 },
    { country: "Japan", gdp: 4.2, population: 125, area: 0.38 },
    { country: "Germany", gdp: 4.1, population: 83, area: 0.36 },
  ],
  x: "gdp",
  y: "population",
  size: "area",
  label: "country",
})

Features

Three-dimensional data mapping
Color coding by category or value
Tooltip with custom content
Size scale with configurable range
Collision detection for labels
SVG rendering with Tailwind CSS
Under 3kb tree-shaken
Read the DocsSee DemosExamples