Chartcn

Shadcn Scatter Chart Generator

Plot the relationship between two numbers with a scatter chart, with points grouped and colored by a category.

CSV, TSV from Excel/Sheets, a Markdown table, or JSON.

CSV
Code
Image
chart.tsx
"use client"

import { CartesianGrid, Scatter, ScatterChart, XAxis, YAxis } from "recharts"
import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const data = [
  { Segment: "Search", Spend: 4200, Conversions: 320 },
  { Segment: "Social", Spend: 3100, Conversions: 210 },
  { Segment: "Email", Spend: 1800, Conversions: 260 },
  { Segment: "Display", Spend: 2600, Conversions: 140 },
  { Segment: "Affiliate", Spend: 1200, Conversions: 95 },
]

const chartConfig: ChartConfig = {
  "Search": { label: "Search", color: "var(--chart-1)" },
  "Social": { label: "Social", color: "var(--chart-2)" },
  "Email": { label: "Email", color: "var(--chart-3)" },
  "Display": { label: "Display", color: "var(--chart-4)" },
  "Affiliate": { label: "Affiliate", color: "var(--chart-5)" },
}

export function Chart() {
  const groups = [...new Set(data.map((row) => String(row.Segment)))].map((key, index) => ({
    key,
    color: chartConfig[key]?.color ?? `var(--chart-${(index % 5) + 1})`,
    points: data.filter((row) => String(row.Segment) === key),
  }))

  return (
    <ChartContainer config={chartConfig} className="aspect-auto h-[350px] w-full">
      <ScatterChart margin={{ top: 8, right: 12, bottom: 8, left: 8 }}>
        <CartesianGrid strokeDasharray="3 5" />
        <XAxis type="number" dataKey="Spend" name="Spend" tickLine={false} axisLine={false} tickMargin={8} height={48} tickFormatter={(value) => new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 }).format(value)} label={{ value: "Spend", position: "insideBottom", fill: "var(--muted-foreground)", fontSize: 12 }} />
        <YAxis type="number" dataKey="Conversions" name="Conversions" tickLine={false} axisLine={false} tickMargin={8} width={56} tickFormatter={(value) => new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 }).format(value)} label={{ value: "Conversions", angle: -90, position: "insideLeft", fill: "var(--muted-foreground)", fontSize: 12 }} />
        <ChartTooltip cursor={{ strokeDasharray: "3 3" }} content={<ChartTooltipContent />} />
        <ChartLegend content={<ChartLegendContent />} itemSorter={null} />
        {groups.map((group) => (
          <Scatter key={group.key} name={group.key} data={group.points} fill={group.color} fillOpacity={0.85} />
        ))}
      </ScatterChart>
    </ChartContainer>
  )
}

When to use a scatter chart

Scatter charts reveal correlation, clusters, and outliers between two measures.

  • Ad spend vs. conversions by channel
  • Price vs. rating by product
  • Latency vs. payload size by endpoint

Data format

  • Use exactly 3 columns: Category,X,Y. The category sets each point's color and legend group.
  • Paste CSV, JSON from your API, TSV copied from Excel or Google Sheets, or a Markdown table. The generated component keeps your column names as its data keys.
CSV
Segment,Spend,Conversions
Search,4200,320
Social,3100,210
Email,1800,260
Display,2600,140
Affiliate,1200,95
Same data as JSON
[
  {"segment": "Search", "spend": 4200, "conversions": 320},
  {"segment": "Social", "spend": 3100, "conversions": 210},
  {"segment": "Email", "spend": 1800, "conversions": 260},
  …
]

Options

Colors
Custom color per category group.

How to add it to your project

  1. 1. Add the shadcn/ui chart component (it installs Recharts):
    npx shadcn@latest add chart
  2. 2. Paste your data above, pick the options, and copy the generated chart.tsx.
  3. 3. Save it in your project (e.g. components/scatter-chart.tsx) and render <Chart />, or <Chart data={rows} /> in Data as prop mode.

Scatter Chart FAQ