Chart

import {
  ChartContainer,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from "recharts";

const config: ChartConfig = {
  desktop: { label: "Desktop", theme: "--chart-1" },
  mobile: { label: "Mobile", theme: "--chart-2" },
};

<ChartContainer config={config} height={260}>
  <LineChart data={data}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" />
    <YAxis />
    <Tooltip content={<ChartTooltipContent />} />
    <Line dataKey="desktop" stroke="var(--color-desktop)" />
    <Line dataKey="mobile" stroke="var(--color-mobile)" />
  </LineChart>
</ChartContainer>

<ChartContainer config={config}>
  <BarChart data={data}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" />
    <YAxis />
    <Tooltip content={<ChartTooltipContent />} />
    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={[6,6,0,0]} />
    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={[6,6,0,0]} />
  </BarChart>
</ChartContainer>

<ChartContainer config={config}>
  <AreaChart data={data}>
    <defs>
      <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
        <stop offset="5%" stopColor="var(--color-desktop)" stopOpacity={0.6} />
        <stop offset="95%" stopColor="var(--color-desktop)" stopOpacity={0.05} />
      </linearGradient>
    </defs>
    ...
    <Area dataKey="desktop" type="monotone"
      stroke="var(--color-desktop)" fill="url(#fillDesktop)" stackId="a" />
  </AreaChart>
</ChartContainer>

<ChartContainer config={pieConfig}>
  <PieChart>
    <Tooltip content={<ChartTooltipContent />} />
    <Pie data={data} dataKey="value" nameKey="name"
      innerRadius={56} outerRadius={96}>
      {data.map((_, i) => (
        <Cell key={i} fill={`var(--chart-${i+1})`} />
      ))}
    </Pie>
  </PieChart>
</ChartContainer>