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.

KPI categories

Revenue

$45,231.89

↑ 20.1% vs last month

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 = [
  { month: 1, value: 3200 },
  { month: 2, value: 3600 },
  { month: 3, value: 3400 },
  { month: 4, value: 4100 },
  { month: 5, value: 4400 },
  { month: 6, value: 5200 },
]

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

export default function ChartKpi01() {
  return (
    <Card>
      <CardHeader>
        <CardDescription>Revenue</CardDescription>
        <CardTitle className="text-3xl tabular-nums">$45,231.89</CardTitle>
        <p className="text-foreground text-xs font-medium">
          ↑ 20.1%{" "}
          <span className="text-muted-foreground font-normal">
            vs last month
          </span>
        </p>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig} className="h-20 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.15}
            />
          </AreaChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}

Active users

2,340

↓ 4.5% vs last month

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 = [
  { month: 1, value: 2600 },
  { month: 2, value: 2500 },
  { month: 3, value: 2550 },
  { month: 4, value: 2400 },
  { month: 5, value: 2380 },
  { month: 6, value: 2340 },
]

const chartConfig = {
  value: { label: "Active users", color: "var(--chart-4)" },
} satisfies ChartConfig

export default function ChartKpi02() {
  return (
    <Card>
      <CardHeader>
        <CardDescription>Active users</CardDescription>
        <CardTitle className="text-3xl tabular-nums">2,340</CardTitle>
        <p className="text-destructive text-xs font-medium">
          ↓ 4.5%{" "}
          <span className="text-muted-foreground font-normal">
            vs last month
          </span>
        </p>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig} className="h-20 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>
  )
}