Chart

const config = {
  revenue: { label: "Revenue", color: "var(--chart-1)" },
} satisfies ChartConfig;

<ChartContainer config={config} className="h-[280px] w-full">
  <BarChart data={data} margin={{ top: 8, right: 8, bottom: 0, left: -16 }}>
    <CartesianGrid vertical={false} strokeDasharray="3 3" />
    <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
    <YAxis tickLine={false} axisLine={false} tickFormatter={(v) => `$${v / 1000}k`} />
    <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
    <Bar dataKey="revenue" fill="var(--color-revenue)" radius={[6, 6, 0, 0]} />
  </BarChart>
</ChartContainer>

const config = {
  revenue: { label: "Revenue", color: "var(--chart-1)" },
  expenses: { label: "Expenses", color: "var(--chart-3)" },
} satisfies ChartConfig;

<ChartContainer config={config} className="h-[280px] w-full">
  <BarChart data={data}>
    <CartesianGrid vertical={false} strokeDasharray="3 3" />
    <XAxis dataKey="month" tickLine={false} axisLine={false} />
    <YAxis tickLine={false} axisLine={false} />
    <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Bar dataKey="revenue" fill="var(--color-revenue)" radius={[4, 4, 0, 0]} />
    <Bar dataKey="expenses" fill="var(--color-expenses)" radius={[4, 4, 0, 0]} />
  </BarChart>
</ChartContainer>

<ChartContainer config={config} className="h-[280px] w-full">
  <LineChart data={data}>
    <CartesianGrid vertical={false} strokeDasharray="3 3" />
    <XAxis dataKey="month" tickLine={false} axisLine={false} />
    <YAxis tickLine={false} axisLine={false} />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Line dataKey="revenue" stroke="var(--color-revenue)" strokeWidth={2} dot={false} />
    <Line dataKey="expenses" stroke="var(--color-expenses)" strokeWidth={2} dot={false} />
  </LineChart>
</ChartContainer>

<ChartContainer config={config} className="h-[280px] w-full">
  <AreaChart data={data}>
    <defs>
      <linearGradient id="revenueFill" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="var(--color-revenue)" stopOpacity={0.4} />
        <stop offset="100%" stopColor="var(--color-revenue)" stopOpacity={0.02} />
      </linearGradient>
    </defs>
    <CartesianGrid vertical={false} strokeDasharray="3 3" />
    <XAxis dataKey="month" tickLine={false} axisLine={false} />
    <YAxis tickLine={false} axisLine={false} />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Area
      type="monotone"
      dataKey="revenue"
      stroke="var(--color-revenue)"
      strokeWidth={2}
      fill="url(#revenueFill)"
    />
  </AreaChart>
</ChartContainer>

const config = {
  Direct: { label: "Direct", color: "var(--chart-1)" },
  Search: { label: "Search", 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;

<ChartContainer config={config} className="h-[280px] w-full">
  <PieChart>
    <ChartTooltip cursor={false} content={<ChartTooltipContent hideIndicator />} />
    <Pie data={traffic} dataKey="visits" nameKey="source" innerRadius={70} outerRadius={110} paddingAngle={2}>
      {traffic.map((d) => (
        <Cell key={d.source} fill={`var(--color-${d.source})`} />
      ))}
    </Pie>
    <ChartLegend content={<ChartLegendContent />} />
  </PieChart>
</ChartContainer>

<ChartTooltip content={<ChartTooltipContent hideLabel />} />

<Card className="w-[520px]">
  <CardHeader>
    <CardTitle>Overview</CardTitle>
    <CardDescription>Last 12 months of revenue.</CardDescription>
  </CardHeader>
  <CardContent>
    <ChartContainer config={config} className="h-[280px] w-full">…</ChartContainer>
  </CardContent>
</Card>