Beautiful charts, ready to copy

7 chart types and 66 examples built on Recharts, themed from your colour tokens and readable in light and dark. Pick one, copy the code, change the data.

Browse charts Documentation

Area Chart

Support volume

Tickets opened and resolved over the last 30 days.

Opened2,565

Resolved2,382

Area Chart

A filled line chart that shows how values build up over time.

Bar Chart

Compare values across categories — vertical, grouped, horizontal or stacked.

Line Chart

Track one or more series over time, with optional dots and labels.

Pie Chart

Show parts of a whole — as a pie, a donut with a centre total, or with a legend.

Radar Chart

Compare several variables on radial axes, with polygon or circular grids.

Radial Chart

Radial bars and progress rings, with a label in the centre.

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/chart.json

Adds components/ui/chart.tsx, installs recharts and writes the chart colour variables into your CSS. Each chart page shows the example code to copy from there. Installing by hand:

pnpm add recharts clsx tailwind-merge

Copy registry/ui/chart.tsx from any chart page’s Manual tab, and add the palette to your global CSS:

:root {
  --chart-1: oklch(0.63 0.23 36);
  --chart-2: oklch(0.55 0.2 252);
  --chart-3: oklch(0.58 0.16 145);
  --chart-4: oklch(0.78 0.18 75);
  --chart-5: oklch(0.52 0.015 260);
}

.dark {
  --chart-1: oklch(0.72 0.19 36);
  --chart-2: oklch(0.66 0.19 252);
  --chart-3: oklch(0.68 0.17 145);
  --chart-4: oklch(0.85 0.17 75);
  --chart-5: oklch(0.72 0.012 260);
}

@theme inline {
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
}

How it works

A chart is Recharts with a thin wrapper. You describe your series once in a config object; ChartContainer turns each key into a CSS variable --color-<key> and hands it to the series, the tooltip and the legend. Colours default to --chart-1 … --chart-5 in config order, so charts follow your theme — light and dark — without any per-chart colour code.

import { Bar, BarChart, XAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from '@/components/ui/chart'

const config = {
  desktop: { label: 'Desktop' },                          // colour defaults to var(--chart-1)
  mobile: { label: 'Mobile', color: 'var(--chart-2)' },   // or set your own
} satisfies ChartConfig

// ChartContainer publishes the config as CSS variables on its wrapper:
//   --color-desktop: var(--chart-1)
//   --color-mobile:  var(--chart-2)

<ChartContainer config={config}>
  <BarChart data={data}>
    <XAxis dataKey="month" />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Bar dataKey="desktop" fill="var(--color-desktop)" />
    <Bar dataKey="mobile" fill="var(--color-mobile)" />
  </BarChart>
</ChartContainer>

Charts animate in unless the visitor prefers reduced motion, in which case they render immediately. Give every chart a legend only when it has more than one series.

API Reference

Name	Type	Default	Description
ChartContainer config	Record<string, { label: string; color?: string }>	—	Required. One entry per series (or pie slice). Each key becomes the CSS variable --color-<key>; colour defaults to --chart-1, --chart-2, … in order.
ChartContainer children	ReactElement	—	Required. One Recharts chart (AreaChart, BarChart, …). It is wrapped in a ResponsiveContainer for you.
ChartContainer className	string	aspect-video min-h-[200px] w-full	Sizes the chart. Override the aspect ratio or height here — e.g. mx-auto aspect-square w-full max-w-[280px] for polar charts.
ChartTooltipContent indicator	'dot' \| 'line' \| 'dashed'	'dot'	How each row’s colour marker is drawn.
ChartTooltipContent hideLabel	boolean	false	Hide the heading (the x-axis value).
ChartTooltipContent hideIndicator	boolean	false	Hide the colour markers.
ChartTooltipContent nameKey	string	—	Field of the data row that holds the name to look up in config — used by pie and radial charts.
ChartTooltipContent labelKey	string	—	Field of the data row to use as the heading instead of the axis value.
ChartTooltipContent labelFormatter	(label, payload) => ReactNode	—	Format the heading.
ChartTooltipContent formatter	(value, name, item) => ReactNode	—	Replace how a row’s value is rendered (numbers use thousands separators by default).
ChartLegendContent hideIcon	boolean	false	Hide the colour swatches.
ChartLegendContent nameKey	string	—	Field of the data row that holds the name to look up in config — used by pie charts.