Chart

TSX
"use client";

import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart";

const deployments = [
  { day: "Mon", deploys: 14 },
  { day: "Tue", deploys: 22 },
  { day: "Wed", deploys: 19 },
  { day: "Thu", deploys: 27 },
  { day: "Fri", deploys: 11 },
  { day: "Sat", deploys: 3 },
  { day: "Sun", deploys: 2 },
];

const chartConfig = {
  deploys: { label: "Deploys", color: "var(--chart-1)" },
} satisfies ChartConfig;

const total = deployments.reduce((sum, item) => sum + item.deploys, 0);

export default function Chart01() {
  return (
    <figure
      aria-labelledby="chart-01-title"
      className="flex w-full max-w-md flex-col gap-3"
    >
      <figcaption className="flex items-baseline justify-between gap-4">
        <span id="chart-01-title" className="text-sm font-medium">
          Production deploys this week
        </span>
        <span className="text-sm text-muted-foreground tabular-nums">
          {total} total
        </span>
      </figcaption>
      <ChartContainer config={chartConfig} className="aspect-auto h-44 w-full">
        <BarChart data={deployments} margin={{ left: 0, right: 0 }}>
          <CartesianGrid vertical={false} />
          <XAxis
            dataKey="day"
            tickLine={false}
            axisLine={false}
            tickMargin={8}
          />
          <ChartTooltip
            cursor={false}
            content={<ChartTooltipContent hideLabel />}
          />
          <Bar dataKey="deploys" fill="var(--color-deploys)" radius={4} />
        </BarChart>
      </ChartContainer>
    </figure>
  );
}

TSX
"use client";

import * as React from "react";
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";

import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

const signups = [
  { week: "Aug 4", signups: 412 },
  { week: "Aug 11", signups: 468 },
  { week: "Aug 18", signups: 431 },
  { week: "Aug 25", signups: 527 },
  { week: "Sep 1", signups: 590 },
  { week: "Sep 8", signups: 562 },
  { week: "Sep 15", signups: 648 },
];

const chartConfig = {
  signups: { label: "Signups", color: "var(--chart-2)" },
} satisfies ChartConfig;

type FillStyle = "solid" | "subtle" | "outline";

// Each style only changes the area's paint; the data and axes stay identical.
const fillStyles: Record<
  FillStyle,
  { label: string; fillOpacity: number; strokeWidth: number; dash?: string }
> = {
  solid: { label: "Solid", fillOpacity: 0.85, strokeWidth: 0 },
  subtle: { label: "Subtle", fillOpacity: 0.2, strokeWidth: 2 },
  outline: { label: "Outline", fillOpacity: 0, strokeWidth: 2 },
};

export default function Chart02() {
  const [style, setStyle] = React.useState<FillStyle>("subtle");
  const paint = fillStyles[style];

  return (
    <Card className="w-full max-w-md">
      <CardHeader className="max-sm:grid-cols-1!">
        <CardTitle>Weekly signups</CardTitle>
        <CardDescription>New workspaces created, last 7 weeks</CardDescription>
        <CardAction className="max-sm:col-start-1 max-sm:row-span-1 max-sm:row-start-3 max-sm:mt-2 max-sm:justify-self-start">
          <ToggleGroup
            aria-label="Fill style"
            variant="outline"
            size="sm"
            spacing={0}
            value={[style]}
            onValueChange={(next) => {
              if (next.length > 0) setStyle(next[0] as FillStyle);
            }}
          >
            {(Object.keys(fillStyles) as FillStyle[]).map((key) => (
              <ToggleGroupItem key={key} value={key} className="px-2 text-xs">
                {fillStyles[key].label}
              </ToggleGroupItem>
            ))}
          </ToggleGroup>
        </CardAction>
      </CardHeader>
      <CardContent>
        <ChartContainer
          config={chartConfig}
          role="img"
          aria-label="Weekly signups from Aug 4 to Sep 15, rising from 412 to 648"
          className="aspect-auto h-48 w-full"
        >
          <AreaChart data={signups} margin={{ left: 8, right: 8, top: 4 }}>
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="week"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              interval="preserveStartEnd"
            />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent indicator="line" />}
            />
            <Area
              dataKey="signups"
              type="monotone"
              fill="var(--color-signups)"
              fillOpacity={paint.fillOpacity}
              stroke="var(--color-signups)"
              strokeWidth={paint.strokeWidth}
              isAnimationActive={false}
            />
          </AreaChart>
        </ChartContainer>
      </CardContent>
    </Card>
  );
}

TSX
"use client";

import * as React from "react";
import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const traits = [
  "Battery",
  "Speed",
  "Display",
  "Portability",
  "Ports",
  "Value",
] as const;

// Editorial review scores out of 10, in the same order as `traits`.
const laptops = {
  "orbit-14": { label: "Orbit 14", price: "$1,299", scores: [9, 7, 8, 9, 5, 7] },
  "vantage-16": {
    label: "Vantage 16 Pro",
    price: "$2,149",
    scores: [6, 10, 9, 4, 9, 5],
  },
  "slate-13": { label: "Slate 13 Air", price: "$999", scores: [8, 5, 7, 10, 3, 9] },
};

type LaptopKey = keyof typeof laptops;

const baseline: LaptopKey = "orbit-14";

const rivals = (Object.keys(laptops) as LaptopKey[])
  .filter((key) => key !== baseline)
  .map((key) => ({ value: key, label: laptops[key].label }));

export default function Chart03() {
  const [rival, setRival] = React.useState<LaptopKey>("vantage-16");

  const chartConfig = {
    current: { label: laptops[baseline].label, color: "var(--chart-1)" },
    rival: { label: laptops[rival].label, color: "var(--chart-2)" },
  } satisfies ChartConfig;

  const data = traits.map((trait, index) => ({
    trait,
    current: laptops[baseline].scores[index],
    rival: laptops[rival].scores[index],
  }));

  const wins = data.filter((row) => row.current > row.rival).length;
  const losses = data.filter((row) => row.current < row.rival).length;

  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Compare laptops</CardTitle>
        <CardDescription>
          {laptops[baseline].label} ({laptops[baseline].price}) scores higher
          in {wins} of {traits.length} areas and lower in {losses}.
        </CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-3">
        <Select
          items={rivals}
          value={rival}
          onValueChange={(value) => {
            if (value) setRival(value as LaptopKey);
          }}
        >
          <SelectTrigger aria-label="Compare with" className="w-full">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {rivals.map((item) => (
              <SelectItem key={item.value} value={item.value}>
                {item.label} · {laptops[item.value].price}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <ChartContainer
          config={chartConfig}
          role="img"
          aria-label={`Review scores out of 10. ${data
            .map(
              (row) =>
                `${row.trait}: ${laptops[baseline].label} ${row.current}, ${laptops[rival].label} ${row.rival}`,
            )
            .join("; ")}`}
          className="mx-auto aspect-square w-full max-w-72"
        >
          <RadarChart data={data} outerRadius="72%">
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent indicator="line" />}
            />
            <PolarGrid />
            <PolarAngleAxis
              dataKey="trait"
              tick={{ fill: "var(--muted-foreground)", fontSize: 11 }}
            />
            <Radar
              dataKey="rival"
              fill="var(--color-rival)"
              fillOpacity={0.15}
              stroke="var(--color-rival)"
              strokeWidth={1.5}
              strokeDasharray="4 3"
            />
            <Radar
              dataKey="current"
              fill="var(--color-current)"
              fillOpacity={0.3}
              stroke="var(--color-current)"
              strokeWidth={2}
              dot={{ r: 3, fillOpacity: 1 }}
            />
            <ChartLegend content={<ChartLegendContent />} />
          </RadarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  );
}

TSX
"use client";

import { MailIcon, MessageSquareIcon, PhoneIcon } from "lucide-react";
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";

import {
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart";

const tickets = [
  { day: "Mon", email: 48, chat: 92, phone: 21 },
  { day: "Tue", email: 52, chat: 104, phone: 18 },
  { day: "Wed", email: 41, chat: 87, phone: 25 },
  { day: "Thu", email: 60, chat: 115, phone: 30 },
  { day: "Fri", email: 38, chat: 76, phone: 16 },
];

// An `icon` on a config entry replaces the color swatch in both the legend
// and the tooltip, so each channel reads by shape as well as by color. The
// icons are drawn in their series color so they still work as a key.
function EmailIcon() {
  return <MailIcon className="stroke-(--color-email)" />;
}

function ChatIcon() {
  return <MessageSquareIcon className="stroke-(--color-chat)" />;
}

function PhoneCallIcon() {
  return <PhoneIcon className="stroke-(--color-phone)" />;
}

const chartConfig = {
  email: { label: "Email", icon: EmailIcon, color: "var(--chart-1)" },
  chat: { label: "Live chat", icon: ChatIcon, color: "var(--chart-2)" },
  phone: { label: "Phone", icon: PhoneCallIcon, color: "var(--chart-3)" },
} satisfies ChartConfig;

export default function Chart04() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <div className="flex flex-col gap-0.5">
        <span id="chart-04-title" className="text-sm font-medium">
          Support tickets by channel
        </span>
        <span className="text-xs text-muted-foreground">
          Opened Monday to Friday, week 38
        </span>
      </div>
      <ChartContainer
        config={chartConfig}
        role="img"
        aria-labelledby="chart-04-title"
        className="aspect-auto h-60 w-full"
      >
        <BarChart data={tickets} margin={{ left: 0, right: 0 }}>
          <CartesianGrid vertical={false} />
          <XAxis
            dataKey="day"
            tickLine={false}
            axisLine={false}
            tickMargin={8}
          />
          <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
          <ChartLegend content={<ChartLegendContent />} />
          <Bar
            dataKey="email"
            stackId="channel"
            fill="var(--color-email)"
            radius={[0, 0, 4, 4]}
          />
          <Bar dataKey="chat" stackId="channel" fill="var(--color-chat)" />
          <Bar
            dataKey="phone"
            stackId="channel"
            fill="var(--color-phone)"
            radius={[4, 4, 0, 0]}
          />
        </BarChart>
      </ChartContainer>
    </div>
  );
}

TSX
"use client";

import {
  Bar,
  BarChart,
  LabelList,
  type LabelProps,
  XAxis,
  YAxis,
} from "recharts";

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart";

const pages = [
  { path: "/pricing", views: 18420 },
  { path: "/docs/installation", views: 14310 },
  { path: "/blog/migration", views: 9870 },
  { path: "/changelog", views: 7240 },
  { path: "/careers", views: 5615 },
];

const chartConfig = {
  views: { label: "Page views", color: "var(--chart-1)" },
  label: { color: "var(--background)" },
} satisfies ChartConfig;

const formatViews = (value: number) =>
  value >= 1000 ? `${(value / 1000).toFixed(1)}k` : String(value);

// Rough advance width of a 12px medium glyph, used to decide whether a path
// fits inside its bar. Paths that do not fit move out beside the bar.
const CHAR_WIDTH = 7;
const INSET = 10;

function BarLabel({ viewBox, index }: LabelProps) {
  const page = pages[index ?? 0];
  if (!page || !viewBox || !("width" in viewBox)) return null;
  const x = Number(viewBox.x ?? 0);
  const y = Number(viewBox.y ?? 0);
  const width = Number(viewBox.width ?? 0);
  const height = Number(viewBox.height ?? 0);
  const midY = y + height / 2;
  const fitsInside = width >= page.path.length * CHAR_WIDTH + INSET * 2;

  if (fitsInside) {
    return (
      <g>
        <text
          x={x + INSET}
          y={midY}
          dominantBaseline="central"
          fontSize={12}
          className="fill-(--color-label) font-medium"
        >
          {page.path}
        </text>
        <text
          x={x + width + 8}
          y={midY}
          dominantBaseline="central"
          fontSize={12}
          className="fill-foreground tabular-nums"
        >
          {formatViews(page.views)}
        </text>
      </g>
    );
  }

  return (
    <text
      x={x + width + 8}
      y={midY}
      dominantBaseline="central"
      fontSize={12}
      className="fill-foreground"
    >
      <tspan className="font-medium">{page.path}</tspan>
      <tspan dx={8} className="tabular-nums">
        {formatViews(page.views)}
      </tspan>
    </text>
  );
}

export default function Chart05() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Top pages</CardTitle>
        <CardDescription>Unique page views, last 30 days</CardDescription>
      </CardHeader>
      <CardContent>
        {/* layout="vertical" turns the value axis horizontal; labels ride inside the bars when they fit. */}
        <ChartContainer
          config={chartConfig}
          role="img"
          aria-label="Top five pages by unique views, led by /pricing with 18.4k"
          className="aspect-auto h-56 w-full"
        >
          <BarChart
            data={pages}
            layout="vertical"
            margin={{ left: 0, right: 40 }}
            barCategoryGap={6}
          >
            <YAxis dataKey="path" type="category" hide />
            <XAxis dataKey="views" type="number" hide />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent indicator="line" />}
            />
            <Bar dataKey="views" fill="var(--color-views)" radius={6}>
              <LabelList dataKey="path" content={BarLabel} />
            </Bar>
          </BarChart>
        </ChartContainer>
      </CardContent>
      <CardFooter className="text-xs text-muted-foreground">
        Pricing overtook the docs landing page for the first time this quarter.
      </CardFooter>
    </Card>
  );
}

TSX
"use client";

import * as React from "react";
import { ChartNoAxesColumnIcon, RefreshCwIcon, TriangleAlertIcon } from "lucide-react";
import { CartesianGrid, Line, LineChart, XAxis } from "recharts";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";
import { Skeleton } from "@/components/ui/skeleton";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

const orders = [
  { date: "Sep 16", orders: 128 },
  { date: "Sep 17", orders: 142 },
  { date: "Sep 18", orders: 119 },
  { date: "Sep 19", orders: 167 },
  { date: "Sep 20", orders: 181 },
  { date: "Sep 21", orders: 158 },
  { date: "Sep 22", orders: 203 },
];

const chartConfig = {
  orders: { label: "Orders", color: "var(--chart-2)" },
} satisfies ChartConfig;

const states = [
  { value: "ready", label: "Ready" },
  { value: "loading", label: "Loading" },
  { value: "empty", label: "Empty" },
  { value: "error", label: "Error" },
] as const;

type ChartState = (typeof states)[number]["value"];

// Skeleton bar heights, as a share of the frame, hint at the shape to come.
const skeletonHeights = ["45%", "60%", "38%", "72%", "80%", "64%", "90%"];

function ChartBody({
  state,
  onRetry,
}: {
  state: ChartState;
  onRetry: () => void;
}) {
  if (state === "loading") {
    return (
      <div
        role="status"
        aria-label="Loading orders chart"
        className="flex h-full items-end gap-2 px-1 pb-6"
      >
        {skeletonHeights.map((height, index) => (
          <Skeleton
            // biome-ignore lint/suspicious/noArrayIndexKey: static placeholder list
            key={index}
            className="flex-1 rounded-sm"
            style={{ height }}
          />
        ))}
      </div>
    );
  }

  if (state === "empty") {
    return (
      <Empty className="h-full border border-border p-4">
        <EmptyHeader>
          <EmptyMedia variant="icon">
            <ChartNoAxesColumnIcon aria-hidden="true" />
          </EmptyMedia>
          <EmptyTitle>No orders in this range</EmptyTitle>
          <EmptyDescription>
            Orders appear here within a minute of checkout.
          </EmptyDescription>
        </EmptyHeader>
      </Empty>
    );
  }

  if (state === "error") {
    return (
      <Empty role="alert" className="h-full border border-destructive/30 p-4">
        <EmptyHeader>
          <EmptyMedia
            variant="icon"
            className="bg-destructive/10 text-destructive"
          >
            <TriangleAlertIcon aria-hidden="true" />
          </EmptyMedia>
          <EmptyTitle>Couldn't load orders</EmptyTitle>
          <EmptyDescription>
            The analytics service timed out after 10 seconds.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <Button variant="outline" size="sm" onClick={onRetry}>
            <RefreshCwIcon aria-hidden="true" />
            Try again
          </Button>
        </EmptyContent>
      </Empty>
    );
  }

  return (
    <ChartContainer
      config={chartConfig}
      role="img"
      aria-label="Daily orders, September 16 to 22"
      className="aspect-auto h-full w-full"
    >
      <LineChart data={orders} margin={{ left: 12, right: 12, top: 8 }}>
        <CartesianGrid vertical={false} />
        <XAxis
          dataKey="date"
          tickLine={false}
          axisLine={false}
          tickMargin={8}
          interval="preserveStartEnd"
        />
        <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
        <Line
          dataKey="orders"
          type="monotone"
          stroke="var(--color-orders)"
          strokeWidth={2}
          dot={{ r: 3, fill: "var(--color-orders)" }}
        />
      </LineChart>
    </ChartContainer>
  );
}

export default function Chart06() {
  const [state, setState] = React.useState<ChartState>("ready");

  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Daily orders</CardTitle>
        <CardDescription>Preview every state the chart can be in</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <ToggleGroup
          aria-label="Chart state"
          variant="outline"
          size="sm"
          spacing={0}
          value={[state]}
          onValueChange={(next) => {
            if (next.length > 0) setState(next[0] as ChartState);
          }}
          className="w-full"
        >
          {states.map((item) => (
            <ToggleGroupItem
              key={item.value}
              value={item.value}
              className="flex-1 text-xs"
            >
              {item.label}
            </ToggleGroupItem>
          ))}
        </ToggleGroup>
        <div className="h-56" aria-busy={state === "loading"}>
          <ChartBody state={state} onRetry={() => setState("ready")} />
        </div>
      </CardContent>
    </Card>
  );
}

TSX
"use client";

import * as React from "react";
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

const revenue = [
  { month: "Apr", starter: 4200, pro: 11800, enterprise: 21500 },
  { month: "May", starter: 4650, pro: 12900, enterprise: 22100 },
  { month: "Jun", starter: 4410, pro: 14200, enterprise: 24800 },
  { month: "Jul", starter: 5120, pro: 15100, enterprise: 24300 },
  { month: "Aug", starter: 5480, pro: 16750, enterprise: 27600 },
  { month: "Sep", starter: 5930, pro: 18200, enterprise: 29900 },
];

const chartConfig = {
  starter: { label: "Starter", color: "var(--chart-1)" },
  pro: { label: "Pro", color: "var(--chart-2)" },
  enterprise: { label: "Enterprise", color: "var(--chart-3)" },
} satisfies ChartConfig;

type Plan = keyof typeof chartConfig;

const plans = Object.keys(chartConfig) as Plan[];

const currency = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
});

export default function Chart07() {
  // Controlled legend: the pressed toggles decide which series are drawn.
  const [visible, setVisible] = React.useState<Plan[]>(["starter", "pro"]);

  const latest = revenue[revenue.length - 1];
  const total = visible.reduce((sum, plan) => sum + latest[plan], 0);

  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Monthly recurring revenue</CardTitle>
        <CardDescription>
          September:{" "}
          <span className="font-medium text-foreground tabular-nums">
            {currency.format(total)}
          </span>{" "}
          across {visible.length} {visible.length === 1 ? "plan" : "plans"}
        </CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <ToggleGroup
          multiple
          aria-label="Plans shown in chart"
          variant="outline"
          size="sm"
          value={visible}
          onValueChange={(next) => {
            // Keep at least one series on screen.
            if (next.length > 0) setVisible(next as Plan[]);
          }}
          className="flex-wrap"
        >
          {plans.map((plan) => (
            <ToggleGroupItem
              key={plan}
              value={plan}
              className="gap-2 text-xs text-muted-foreground aria-pressed:text-foreground"
            >
              <span
                aria-hidden="true"
                className="size-2 rounded-[2px] opacity-30 transition-opacity in-aria-pressed:opacity-100"
                style={{ backgroundColor: chartConfig[plan].color }}
              />
              {chartConfig[plan].label}
            </ToggleGroupItem>
          ))}
        </ToggleGroup>
        <ChartContainer
          config={chartConfig}
          role="img"
          aria-label="Monthly recurring revenue by plan, April to September"
          className="aspect-auto h-52 w-full"
        >
          <AreaChart data={revenue} margin={{ left: 16, right: 16, top: 4 }}>
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
            />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent indicator="dot" />}
            />
            {plans
              .filter((plan) => visible.includes(plan))
              .map((plan) => (
                <Area
                  key={plan}
                  dataKey={plan}
                  type="monotone"
                  stackId="mrr"
                  fill={`var(--color-${plan})`}
                  fillOpacity={0.25}
                  stroke={`var(--color-${plan})`}
                  strokeWidth={2}
                />
              ))}
          </AreaChart>
        </ChartContainer>
      </CardContent>
    </Card>
  );
}

TSX
"use client";

import * as React from "react";
import { Label, Pie, PieChart, Sector, type PieSectorShapeProps } from "recharts";

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const sources = [
  { source: "organic", visitors: 5820, fill: "var(--color-organic)" },
  { source: "direct", visitors: 3140, fill: "var(--color-direct)" },
  { source: "referral", visitors: 1960, fill: "var(--color-referral)" },
  { source: "social", visitors: 1285, fill: "var(--color-social)" },
  { source: "email", visitors: 740, fill: "var(--color-email)" },
];

const chartConfig = {
  visitors: { label: "Visitors" },
  organic: { label: "Organic search", color: "var(--chart-1)" },
  direct: { label: "Direct", color: "var(--chart-2)" },
  referral: { label: "Referral", color: "var(--chart-3)" },
  social: { label: "Social", color: "var(--chart-4)" },
  email: { label: "Email", color: "var(--chart-5)" },
} satisfies ChartConfig;

type Source = (typeof sources)[number]["source"];

const items = sources.map((item) => ({
  value: item.source,
  label: String(chartConfig[item.source as keyof typeof chartConfig].label),
}));

const total = sources.reduce((sum, item) => sum + item.visitors, 0);

export default function Chart08() {
  const [active, setActive] = React.useState<Source>("organic");
  const activeItem = sources.find((item) => item.source === active) ?? sources[0];
  const share = Math.round((activeItem.visitors / total) * 100);

  // The selected sector grows outward; the others step back.
  const renderSector = React.useCallback(
    (props: PieSectorShapeProps) => {
      const isSelected = props.payload?.source === active;
      return (
        <Sector
          {...props}
          outerRadius={(props.outerRadius ?? 0) + (isSelected ? 8 : 0)}
          fillOpacity={isSelected ? 1 : 0.35}
        />
      );
    },
    [active],
  );

  return (
    <div className="flex w-full max-w-xs flex-col items-center gap-4">
      <div className="flex w-full items-center justify-between gap-3">
        <span id="chart-08-title" className="text-sm font-medium">
          Traffic sources
        </span>
        <Select
          items={items}
          value={active}
          onValueChange={(value) => {
            if (value) setActive(value as Source);
          }}
        >
          <SelectTrigger aria-label="Highlighted source" className="w-40">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {items.map((item) => (
              <SelectItem key={item.value} value={item.value}>
                {item.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
      <ChartContainer
        config={chartConfig}
        role="img"
        aria-labelledby="chart-08-title"
        className="aspect-square w-full max-w-60"
      >
        <PieChart>
          <ChartTooltip
            cursor={false}
            content={<ChartTooltipContent nameKey="source" hideLabel />}
          />
          <Pie
            data={sources}
            dataKey="visitors"
            nameKey="source"
            innerRadius="58%"
            outerRadius="82%"
            strokeWidth={4}
            stroke="var(--background)"
            shape={renderSector}
            isAnimationActive={false}
          >
            <Label
              content={({ viewBox }) => {
                if (!viewBox || !("cx" in viewBox) || !("cy" in viewBox)) {
                  return null;
                }
                return (
                  <text
                    x={viewBox.cx}
                    y={viewBox.cy}
                    textAnchor="middle"
                    dominantBaseline="middle"
                  >
                    <tspan
                      x={viewBox.cx}
                      y={viewBox.cy}
                      className="fill-foreground text-2xl font-semibold tabular-nums"
                    >
                      {share}%
                    </tspan>
                    <tspan
                      x={viewBox.cx}
                      y={(viewBox.cy ?? 0) + 22}
                      className="fill-muted-foreground text-xs"
                    >
                      {activeItem.visitors.toLocaleString()} visitors
                    </tspan>
                  </text>
                );
              }}
            />
          </Pie>
        </PieChart>
      </ChartContainer>
      <p className="text-center text-xs text-muted-foreground">
        {total.toLocaleString()} visitors in the last 30 days
      </p>
    </div>
  );
}

TSX
"use client";

import * as React from "react";
import { ZapIcon } from "lucide-react";
import { Bar, BarChart, Brush, CartesianGrid, XAxis, YAxis } from "recharts";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart";

const RATE_PER_KWH = 0.31;

// Deterministic sample: 60 days of household electricity use ending Sep 24,
// heavier on weekends and during an early-September heat wave.
const usage = Array.from({ length: 60 }, (_, index) => {
  const date = new Date(Date.UTC(2026, 8, 24 - (59 - index)));
  const weekday = date.getUTCDay();
  const weekend = weekday === 0 || weekday === 6 ? 3.4 : 0;
  const heatWave = index >= 30 && index <= 38 ? 6.5 : 0;
  const base = 14 + Math.sin(index / 5) * 2.2;
  return {
    date: date.toISOString().slice(0, 10),
    kwh: Math.round((base + weekend + heatWave) * 10) / 10,
  };
});

const chartConfig = {
  kwh: { label: "Usage (kWh)", color: "var(--chart-4)" },
} satisfies ChartConfig;

const shortDate = new Intl.DateTimeFormat("en-US", {
  month: "short",
  day: "numeric",
  timeZone: "UTC",
});

const formatDate = (value: unknown) =>
  typeof value === "string" ? shortDate.format(new Date(value)) : "";

const usd = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
});

const defaultWindow = { startIndex: 46, endIndex: 59 };

export default function Chart09() {
  const [range, setRange] = React.useState(defaultWindow);

  const selected = usage.slice(range.startIndex, range.endIndex + 1);
  const total = selected.reduce((sum, day) => sum + day.kwh, 0);
  const peak = selected.reduce((max, day) => (day.kwh > max.kwh ? day : max));
  const isDefault =
    range.startIndex === defaultWindow.startIndex &&
    range.endIndex === defaultWindow.endIndex;

  return (
    <Card className="w-full max-w-lg">
      <CardHeader>
        <CardTitle>Electricity use</CardTitle>
        <CardDescription>
          Drag the handles below the chart to pick a date range.
        </CardDescription>
        <CardAction>
          <Button
            variant="ghost"
            size="sm"
            disabled={isDefault}
            onClick={() => setRange(defaultWindow)}
          >
            Last 14 days
          </Button>
        </CardAction>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <dl
          aria-live="polite"
          className="grid grid-cols-2 gap-3 sm:grid-cols-3 text-sm [&_dd]:font-medium [&_dd]:tabular-nums [&_dt]:text-xs [&_dt]:text-muted-foreground"
        >
          <div className="flex flex-col gap-0.5">
            <dt>
              {formatDate(selected[0].date)} –{" "}
              {formatDate(selected[selected.length - 1].date)}
            </dt>
            <dd>{total.toFixed(0)} kWh</dd>
          </div>
          <div className="flex flex-col gap-0.5">
            <dt>Estimated cost</dt>
            <dd>{usd.format(total * RATE_PER_KWH)}</dd>
          </div>
          <div className="flex flex-col gap-0.5">
            <dt>Peak day</dt>
            <dd className="flex items-center gap-1">
              <ZapIcon aria-hidden="true" className="size-3.5 text-chart-4" />
              {formatDate(peak.date)}
            </dd>
          </div>
        </dl>
        <ChartContainer
          config={chartConfig}
          role="img"
          aria-label={`Daily electricity use from ${formatDate(selected[0].date)} to ${formatDate(selected[selected.length - 1].date)}: ${total.toFixed(0)} kilowatt-hours in total`}
          className="aspect-auto h-64 w-full [&_.recharts-brush-texts_text]:fill-muted-foreground"
        >
          <BarChart data={usage} margin={{ left: 0, right: 8, top: 8 }}>
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="date"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              minTickGap={24}
              tickFormatter={formatDate}
            />
            <YAxis
              width={32}
              tickLine={false}
              axisLine={false}
              tickFormatter={(value: number) => `${value}`}
            />
            <ChartTooltip
              cursor={false}
              content={
                <ChartTooltipContent
                  labelFormatter={(_, payload) =>
                    formatDate(payload?.[0]?.payload?.date)
                  }
                />
              }
            />
            <Bar dataKey="kwh" fill="var(--color-kwh)" radius={[3, 3, 0, 0]} />
            <Brush
              dataKey="date"
              height={28}
              travellerWidth={8}
              startIndex={range.startIndex}
              endIndex={range.endIndex}
              onChange={(next) => {
                if (
                  typeof next.startIndex === "number" &&
                  typeof next.endIndex === "number"
                ) {
                  setRange({
                    startIndex: next.startIndex,
                    endIndex: next.endIndex,
                  });
                }
              }}
              tickFormatter={formatDate}
              ariaLabel="Date range"
              fill="var(--muted)"
              stroke="var(--muted-foreground)"
            />
          </BarChart>
        </ChartContainer>
        <p className="text-xs text-muted-foreground">
          Billed at {usd.format(RATE_PER_KWH)} per kWh on the Standard
          residential plan.
        </p>
      </CardContent>
    </Card>
  );
}

TSX
"use client";

import { BellRing, CircleCheck, TriangleAlert } from "lucide-react";
import * as React from "react";
import {
  Area,
  AreaChart,
  CartesianGrid,
  ReferenceLine,
  XAxis,
  YAxis,
} from "recharts";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";

const PLAN_LIMIT = 1_000_000;
const SCALE_LIMIT = 5_000_000;
// Threshold for the optional usage alert email.
const ALERT_AT = 900_000;

// Cumulative API requests for the Sep 1 - Sep 30 billing cycle.
// Actual usage runs through Sep 18, then a straight-line projection.
const usageData = [
  { day: "Sep 1", actual: 21_400 },
  { day: "Sep 3", actual: 78_900 },
  { day: "Sep 5", actual: 142_300 },
  { day: "Sep 7", actual: 188_100 },
  { day: "Sep 9", actual: 262_700 },
  { day: "Sep 11", actual: 341_500 },
  { day: "Sep 13", actual: 409_800 },
  { day: "Sep 15", actual: 478_200 },
  { day: "Sep 17", actual: 561_900 },
  { day: "Sep 18", actual: 604_300, projected: 604_300 },
  { day: "Sep 21", projected: 718_000 },
  { day: "Sep 24", projected: 831_700 },
  { day: "Sep 27", projected: 945_400 },
  { day: "Sep 30", projected: 1_059_100 },
];

const chartConfig = {
  actual: { label: "Requests", color: "var(--chart-1)" },
  projected: { label: "Projected", color: "var(--chart-1)" },
} satisfies ChartConfig;

const compact = new Intl.NumberFormat("en-US", {
  notation: "compact",
  maximumFractionDigits: 1,
});

export default function Chart10() {
  const used = 604_300;
  const projected = 1_059_100;
  const overage = projected - PLAN_LIMIT;
  const [alertOn, setAlertOn] = React.useState(false);
  const [upgraded, setUpgraded] = React.useState(false);

  return (
    <Card className="w-full max-w-lg">
      <CardHeader>
        <CardTitle>API requests</CardTitle>
        <CardDescription>
          Billing cycle Sep 1 – Sep 30 · {upgraded ? "Scale" : "Growth"} plan
        </CardDescription>
        <CardAction>
          <Badge variant="outline">12 days left</Badge>
        </CardAction>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <div className="flex flex-wrap items-baseline gap-x-2">
          <span className="font-semibold text-2xl tabular-nums">
            {used.toLocaleString("en-US")}
          </span>
          <span className="text-sm text-muted-foreground">
            of {(upgraded ? SCALE_LIMIT : PLAN_LIMIT).toLocaleString("en-US")}{" "}
            included
          </span>
        </div>
        <ChartContainer
          config={chartConfig}
          className="aspect-auto h-48 w-full"
          role="img"
          aria-label={`Cumulative API requests: ${used.toLocaleString("en-US")} used so far, projected ${projected.toLocaleString("en-US")} by Sep 30 against a ${PLAN_LIMIT.toLocaleString("en-US")} limit`}
        >
          <AreaChart data={usageData} margin={{ left: 0, right: 8, top: 8 }}>
            <defs>
              <linearGradient id="chart-10-fill" x1="0" y1="0" x2="0" y2="1">
                <stop
                  offset="0%"
                  stopColor="var(--color-actual)"
                  stopOpacity={0.3}
                />
                <stop
                  offset="100%"
                  stopColor="var(--color-actual)"
                  stopOpacity={0}
                />
              </linearGradient>
            </defs>
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="day"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              minTickGap={24}
            />
            <YAxis
              width={40}
              tickLine={false}
              axisLine={false}
              domain={[0, 1_100_000]}
              ticks={[0, 250_000, 500_000, 750_000, 1_000_000]}
              tickFormatter={(value: number) => compact.format(value)}
            />
            <ChartTooltip
              content={
                <ChartTooltipContent
                  indicator="line"
                  formatter={(value, name) => (
                    <div className="flex w-full items-center justify-between gap-3">
                      <span className="text-muted-foreground">
                        {chartConfig[name as keyof typeof chartConfig]?.label}
                      </span>
                      <span className="font-mono font-medium tabular-nums">
                        {Number(value).toLocaleString("en-US")}
                      </span>
                    </div>
                  )}
                />
              }
            />
            {upgraded ? null : (
              <ReferenceLine
                y={PLAN_LIMIT}
                stroke="var(--destructive)"
                strokeDasharray="4 4"
                label={{
                  value: "Plan limit",
                  position: "insideTopLeft",
                  fill: "var(--destructive)",
                  fontSize: 11,
                }}
              />
            )}
            {alertOn ? (
              <ReferenceLine
                y={ALERT_AT}
                stroke="var(--muted-foreground)"
                strokeDasharray="2 3"
                label={{
                  value: `Alert at ${compact.format(ALERT_AT)}`,
                  position: "insideTopRight",
                  fill: "var(--muted-foreground)",
                  fontSize: 11,
                }}
              />
            ) : null}
            <Area
              dataKey="actual"
              type="monotone"
              stroke="var(--color-actual)"
              strokeWidth={2}
              fill="url(#chart-10-fill)"
              connectNulls={false}
            />
            <Area
              dataKey="projected"
              type="linear"
              stroke="var(--color-projected)"
              strokeWidth={2}
              strokeDasharray="5 4"
              fill="none"
              connectNulls={false}
            />
          </AreaChart>
        </ChartContainer>
        <div
          role="status"
          className="flex items-start gap-2.5 rounded-lg bg-muted px-3 py-2.5 text-sm"
        >
          {upgraded ? (
            <>
              <CircleCheck
                aria-hidden="true"
                className="mt-0.5 size-4 shrink-0 text-success"
              />
              <p className="text-muted-foreground">
                You are on Scale now. The projected {compact.format(projected)}{" "}
                requests fit inside the{" "}
                <span className="font-medium text-foreground">
                  {compact.format(SCALE_LIMIT)}
                </span>{" "}
                included, so there is no overage this cycle.
              </p>
            </>
          ) : (
            <>
              <TriangleAlert
                aria-hidden="true"
                className="mt-0.5 size-4 shrink-0 text-destructive"
              />
              <p className="text-muted-foreground">
                At this pace you will pass your limit around{" "}
                <span className="font-medium text-foreground">Sep 29</span>. The
                extra {compact.format(overage)} requests would cost{" "}
                <span className="font-medium text-foreground tabular-nums">
                  $29.55
                </span>{" "}
                at $0.50 per 1K.
              </p>
            </>
          )}
        </div>
      </CardContent>
      <CardFooter className="flex-wrap justify-end gap-2">
        <Button
          variant="ghost"
          size="sm"
          aria-pressed={alertOn}
          onClick={() => setAlertOn((on) => !on)}
        >
          {alertOn ? (
            <BellRing aria-hidden="true" data-icon="inline-start" />
          ) : null}
          {alertOn
            ? `Alert set at ${compact.format(ALERT_AT)}`
            : "Set a usage alert"}
        </Button>
        {upgraded ? (
          <Button
            size="sm"
            variant="outline"
            onClick={() => setUpgraded(false)}
          >
            Stay on Growth
          </Button>
        ) : (
          <Button size="sm" onClick={() => setUpgraded(true)}>
            Upgrade to Scale
          </Button>
        )}
      </CardFooter>
    </Card>
  );
}

TSX
"use client";

import { BellRing } from "lucide-react";
import * as React from "react";
import {
  CartesianGrid,
  Line,
  LineChart,
  ReferenceDot,
  ReferenceLine,
  XAxis,
  YAxis,
} from "recharts";

import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

type Range = "3m" | "6m" | "1y";

const history = [
  { date: "Oct 2", price: 349 },
  { date: "Nov 1", price: 349 },
  { date: "Nov 24", price: 279 },
  { date: "Dec 2", price: 329 },
  { date: "Jan 6", price: 329 },
  { date: "Feb 3", price: 319 },
  { date: "Mar 10", price: 319 },
  { date: "Apr 7", price: 299 },
  { date: "May 5", price: 309 },
  { date: "Jun 2", price: 309 },
  { date: "Jul 8", price: 269 },
  { date: "Jul 15", price: 299 },
  { date: "Aug 4", price: 299 },
  { date: "Sep 1", price: 289 },
  { date: "Sep 22", price: 289 },
];

const rangeStart: Record<Range, number> = { "3m": 10, "6m": 6, "1y": 0 };

const ALERT_PRICE = 275;

const chartConfig = {
  price: { label: "Price", color: "var(--chart-1)" },
} satisfies ChartConfig;

const usd = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
});

export default function Chart11() {
  const [range, setRange] = React.useState<Range>("1y");
  const [alertOn, setAlertOn] = React.useState(false);

  const data = history.slice(rangeStart[range]);
  const current = data[data.length - 1];
  const lowest = data.reduce((min, point) =>
    point.price < min.price ? point : min,
  );
  const average = Math.round(
    data.reduce((sum, point) => sum + point.price, 0) / data.length,
  );

  return (
    <section
      aria-labelledby="chart-11-title"
      className="flex w-full max-w-md flex-col gap-4 rounded-xl border bg-card p-4 text-card-foreground"
    >
      <div className="flex gap-3">
        <img
          src="/placeholder.svg"
          alt=""
          className="size-14 shrink-0 rounded-lg border bg-muted object-cover"
        />
        <div className="flex min-w-0 flex-col gap-0.5">
          <h3 id="chart-11-title" className="truncate font-medium text-sm">
            Arden Noise-Cancelling Headphones
          </h3>
          <p className="text-xs text-muted-foreground">Price history</p>
          <p className="flex items-baseline gap-2">
            <span className="font-semibold text-lg tabular-nums">
              {usd.format(current.price)}
            </span>
            <span className="text-xs text-muted-foreground tabular-nums">
              avg {usd.format(average)}
            </span>
          </p>
        </div>
      </div>

      <div className="flex items-center justify-between gap-2">
        <p className="text-xs text-muted-foreground">
          Lowest:{" "}
          <span className="font-medium text-foreground tabular-nums">
            {usd.format(lowest.price)}
          </span>{" "}
          on {lowest.date}
        </p>
        <ToggleGroup
          aria-label="Time range"
          size="sm"
          variant="outline"
          spacing={0}
          value={[range]}
          onValueChange={(value) => {
            const next = value[0] as Range | undefined;
            if (next) setRange(next);
          }}
        >
          <ToggleGroupItem value="3m">3M</ToggleGroupItem>
          <ToggleGroupItem value="6m">6M</ToggleGroupItem>
          <ToggleGroupItem value="1y">1Y</ToggleGroupItem>
        </ToggleGroup>
      </div>

      <ChartContainer
        config={chartConfig}
        className="aspect-auto h-40 w-full"
        role="img"
        aria-label={`Price history: now ${usd.format(current.price)}, lowest ${usd.format(lowest.price)} on ${lowest.date}`}
      >
        <LineChart data={data} margin={{ left: 0, right: 12, top: 12 }}>
          <CartesianGrid vertical={false} />
          <XAxis
            dataKey="date"
            tickLine={false}
            axisLine={false}
            tickMargin={8}
            minTickGap={28}
          />
          <YAxis
            width={40}
            tickLine={false}
            axisLine={false}
            domain={[250, 360]}
            tickFormatter={(value: number) => `$${value}`}
          />
          <ChartTooltip
            content={
              <ChartTooltipContent
                indicator="line"
                formatter={(value) => (
                  <div className="flex w-full items-center justify-between gap-3">
                    <span className="text-muted-foreground">Price</span>
                    <span className="font-mono font-medium tabular-nums">
                      {usd.format(Number(value))}
                    </span>
                  </div>
                )}
              />
            }
          />
          {alertOn ? (
            <ReferenceLine
              y={ALERT_PRICE}
              stroke="var(--color-price)"
              strokeDasharray="3 3"
              label={{
                value: `Alert ${usd.format(ALERT_PRICE)}`,
                position: "insideBottomRight",
                fill: "var(--muted-foreground)",
                fontSize: 11,
              }}
            />
          ) : null}
          <Line
            dataKey="price"
            type="stepAfter"
            stroke="var(--color-price)"
            strokeWidth={2}
            dot={false}
          />
          <ReferenceDot
            x={lowest.date}
            y={lowest.price}
            r={4}
            fill="var(--color-price)"
            stroke="var(--background)"
            strokeWidth={2}
          />
        </LineChart>
      </ChartContainer>

      <div className="flex items-center justify-between gap-3 rounded-lg bg-muted px-3 py-2.5">
        <div className="flex items-start gap-2.5">
          <BellRing
            aria-hidden="true"
            className="mt-0.5 size-4 shrink-0 text-muted-foreground"
          />
          <div className="flex flex-col gap-0.5">
            <Label htmlFor="chart-11-alert">
              Email me under {usd.format(ALERT_PRICE)}
            </Label>
            <span className="text-xs text-muted-foreground">
              {alertOn
                ? "We will check the price every 6 hours."
                : "Close to the lowest price of the past year."}
            </span>
          </div>
        </div>
        <Switch
          id="chart-11-alert"
          checked={alertOn}
          onCheckedChange={setAlertOn}
        />
      </div>
    </section>
  );
}