Scatter Chart

Multi-series scatter/bubble chart for correlation analysis.

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/scatter-chart.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

Usage

How to use this component in your code.

<ScatterChart
  series={{
    revenue: {
      label: "Revenue vs Streams",
      color: "var(--chart-1)",
      data: [
        { x: 100, y: 2400 },
        { x: 120, y: 1398 },
      ],
    },
    cost: {
      label: "Cost vs Streams",
      color: "var(--chart-2)",
      shape: "diamond",
      data: [
        { x: 110, y: 1200 },
        { x: 130, y: 980 },
      ],
    },
  }}
  xAxisLabel="Streams (K)"
  yAxisLabel="Amount ($)"
  showLegend
/>