Chart
Bar, area, line and pie charts built with plain Recharts, plus tooltips, legends and colors that follow your theme.
Installation
You write plain Recharts and borrow only the container, tooltip and legend from VitNode. New Recharts chart types work the day they ship.
bun i rechartsUsage
import type { ChartConfig } from '@vitnode/core/components/ui/chart'
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
} from '@vitnode/core/components/ui/chart'
import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'const chartConfig = {
desktop: { label: 'Desktop', color: 'var(--chart-1)' },
mobile: { label: 'Mobile', color: 'var(--chart-2)' },
} satisfies ChartConfig
<ChartContainer config={chartConfig}>
<BarChart accessibilityLayer data={chartData} title="Visitors">
<CartesianGrid vertical={false} />
<XAxis dataKey="month" tickLine={false} axisLine={false} />
<ChartTooltip content={<ChartTooltipContent />} />
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
<Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
</BarChart>
</ChartContainer>ChartContainer is responsive and defaults to aspect-video. Change the box
with className, for example aspect-square or h-64 w-full.
Chart config
Each config key matches a dataKey in your data. The config holds the words
and colors, so your data stays clean.
const chartConfig = {
desktop: { label: 'Desktop', icon: Monitor, color: 'var(--chart-1)' },
mobile: {
label: 'Mobile',
theme: { light: 'var(--chart-2)', dark: 'var(--chart-4)' },
},
} satisfies ChartConfiglabelis what the tooltip and legend show.iconreplaces the color swatch in the tooltip and legend.colorworks in both themes. Usethemewhen light and dark need different colors.
Colors
For every config key, ChartContainer creates a --color-<key> variable
scoped to that chart. Use it anywhere Recharts takes a color, or in Tailwind as
fill-(--color-desktop).
<Bar dataKey="desktop" fill="var(--color-desktop)" />Pick from --chart-1 to --chart-5 in order: blue, orange, gray, green, red.
They have light and dark values, so charts follow the theme. Two or three per
chart is plenty. See Colors.
Area chart
Stack areas with a shared stackId. Fade them with a linearGradient that
reads the chart's color variables.
<defs>
<linearGradient id="fill-downloads" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="var(--color-downloads)" stopOpacity={0.8} />
<stop offset="95%" stopColor="var(--color-downloads)" stopOpacity={0.1} />
</linearGradient>
</defs>
<Area
dataKey="downloads"
type="natural"
stackId="installs"
fill="url(#fill-downloads)"
stroke="var(--color-downloads)"
/>Line chart
<Line
dataKey="responseTime"
type="monotone"
stroke="var(--color-responseTime)"
strokeWidth={2}
/>Pie chart
Each slice is a row, not a series. Put the color on the row with fill, and
pass nameKey so the tooltip and legend find the right label.
const chartData = [
{ category: 'general', threads: 412, fill: 'var(--color-general)' },
{ category: 'support', threads: 286, fill: 'var(--color-support)' },
]
<ChartTooltip content={<ChartTooltipContent hideLabel nameKey="category" />} />
<Pie data={chartData} dataKey="threads" nameKey="category" />
<ChartLegend content={<ChartLegendContent nameKey="category" />} />Tooltip
ChartTooltip is the Recharts Tooltip. ChartTooltipContent styles it and
reads labels, icons and colors from your config. Hover the previews to compare
dashed (bar), dot (area) and line (line).
<ChartTooltip content={<ChartTooltipContent indicator="line" />} />Prop
Type
Legend
ChartLegend is the Recharts Legend. ChartLegendContent renders labels and
swatches (or icons) from your config.
import {
ChartLegend,
ChartLegendContent,
} from '@vitnode/core/components/ui/chart'
;<ChartLegend content={<ChartLegendContent />} />Prop
Type
Accessibility
accessibilityLayeradds ARIA attributes and keyboard support: Tab to the chart, then arrow keys move between points. It is on by default in Recharts 3, but writing it out shows intent.- Give each chart a
titleand adesc. Recharts renders them as the SVG's<title>and<desc>. - Keep a visible heading next to the chart, like a
CardTitle. Never rely on color alone: tooltip and legend labels tell series apart.