Beautiful Charts & Graphs

A collection of ready-to-use chart components built with Recharts. From basic charts to rich data displays, copy and paste into your apps.

Sparkline categories

Visitors

12,480

import { Line, LineChart } from "recharts"

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

const chartData = [
  { day: 1, value: 240 },
  { day: 2, value: 300 },
  { day: 3, value: 280 },
  { day: 4, value: 360 },
  { day: 5, value: 340 },
  { day: 6, value: 420 },
  { day: 7, value: 480 },
]

const chartConfig = {
  value: { label: "Visitors", color: "var(--chart-1)" },
} satisfies ChartConfig

export default function ChartSparkline01() {
  return (
    <Card>
      <CardHeader>
        <CardDescription>Visitors</CardDescription>
        <CardTitle className="text-2xl tabular-nums">12,480</CardTitle>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig} className="h-16 w-full">
          <LineChart data={chartData} margin={{ top: 5, bottom: 5, left: 0, right: 0 }}>
            <Line
              dataKey="value"
              type="natural"
              stroke="var(--color-value)"
              strokeWidth={2}
              dot={false}
            />
          </LineChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}

Revenue

$8,240

import { Area, AreaChart } from "recharts"

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

const chartData = [
  { day: 1, value: 120 },
  { day: 2, value: 180 },
  { day: 3, value: 160 },
  { day: 4, value: 240 },
  { day: 5, value: 300 },
  { day: 6, value: 280 },
  { day: 7, value: 340 },
]

const chartConfig = {
  value: { label: "Revenue", color: "var(--chart-2)" },
} satisfies ChartConfig

export default function ChartSparkline02() {
  return (
    <Card>
      <CardHeader>
        <CardDescription>Revenue</CardDescription>
        <CardTitle className="text-2xl tabular-nums">$8,240</CardTitle>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig} className="h-16 w-full">
          <AreaChart data={chartData} margin={{ top: 5, bottom: 5, left: 0, right: 0 }}>
            <Area
              dataKey="value"
              type="natural"
              stroke="var(--color-value)"
              strokeWidth={2}
              fill="var(--color-value)"
              fillOpacity={0.2}
            />
          </AreaChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}

Orders

1,204

import { Bar, BarChart } from "recharts"

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

const chartData = [
  { day: 1, value: 40 },
  { day: 2, value: 72 },
  { day: 3, value: 58 },
  { day: 4, value: 90 },
  { day: 5, value: 66 },
  { day: 6, value: 84 },
  { day: 7, value: 100 },
]

const chartConfig = {
  value: { label: "Orders", color: "var(--chart-3)" },
} satisfies ChartConfig

export default function ChartSparkline03() {
  return (
    <Card>
      <CardHeader>
        <CardDescription>Orders</CardDescription>
        <CardTitle className="text-2xl tabular-nums">1,204</CardTitle>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig} className="h-16 w-full">
          <BarChart data={chartData} margin={{ top: 5, bottom: 5, left: 0, right: 0 }}>
            <Bar dataKey="value" fill="var(--color-value)" radius={2} />
          </BarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}