dashboardcn
2

Scatter Chart

PreviousNext

Correlation dots per series that become bubbles when a size key is set, with a per-point tooltip and legend.

"use client"

import { ScatterChart } from "@/components/ui/scatter-chart"

Installation

pnpm dlx shadcn@latest add https://dashboardcn.com/r/scatter-chart.json

Also installs chart from shadcn/ui if missing.

Usage

import { ScatterChart } from "@/components/ui/scatter-chart"

<ScatterChart
  series={[
    { label: "Free", data: free },
    { label: "Pro", data: pro },
    { label: "Enterprise", data: enterprise },
  ]}
  xKey="sessions"
  yKey="revenue"
  xLabel="Sessions"
  yLabel="Revenue"
  showLegend
/>

Examples

Bubbles

Set sizeKey to scale each point by a third value, and nameKey to title the tooltip with the point's label.

"use client"

import { ScatterChart } from "@/components/ui/scatter-chart"