Charts

A Recharts wrapper — bar/line/area/pie/donut and a radial-progress ring, all from plain tabular data, no manual config. See also HeatmapGrid, SimpleRadarChart, and Sparkline for the rest of the chart family.

import { SimpleBarChart, SimpleLineChart, SimpleAreaChart, SimplePieChart, RadialProgressChart } from "@pompeitech/vesuvius-ui";

Bar

A single metric is the common case — pass one key in categories:

Bar — multi-series

More than one key in categories renders one bar per series, grouped side by side per index value:

Bar — stacked

Same multi-series data, stacked — each index value now gets one bar, segments stacked instead of grouped:

Line

Area

Same idea as Bar — a single series first:

Area — stacked

Area — minimal (no grid, no axes)

For a chart embedded in a small stat card rather than as a standalone figure — drop the chrome entirely and let the shape speak for itself, same idea as Sparkline but with axis/tooltip machinery still available if you turn it back on:

Pie / donut

A full pie (innerRadius={0}, the default) first:

Pie — donut

Any non-zero innerRadius (a pixel number, or a percentage string relative to the outer radius) punches the hole:

Custom colors

colors overrides the default --chart-1…--chart-5 sequence, one entry per category — any valid CSS color, including another design-system token:

Formatted values

valueFormatter reformats the y-axis ticks and the tooltip's value together — pass it once, both stay in sync automatically:

Radial progress

A multi-segment ring — a "Project Health" widget (on-track / at-risk / blocked breakdown), not a percentage-of-100 gauge.

7Total

On Track2
At Risk1
Blocked1
Dependency3

Custom compositions

For anything the Simple* wrappers don't cover, compose Recharts primitives directly inside ChartContainer — it handles the CSS variable → chart color wiring (config maps a data key to a --color-<key> token) that ChartTooltip/ChartLegend read from.

import * as Recharts from "recharts";
import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, type ChartConfig } from "@pompeitech/vesuvius-ui";
 
const config = {
  revenue: { label: "Revenue", color: "var(--chart-1)" },
  expenses: { label: "Expenses", color: "var(--chart-2)" },
} satisfies ChartConfig;
 
<ChartContainer config={config} className="h-72">
  <Recharts.ComposedChart data={data}>
    <Recharts.CartesianGrid vertical={false} />
    <Recharts.XAxis dataKey="month" />
    <ChartTooltip content={<ChartTooltipContent indicator="line" />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Recharts.Bar dataKey="expenses" fill="var(--color-expenses)" radius={4} />
    <Recharts.Line dataKey="revenue" stroke="var(--color-revenue)" strokeWidth={2} dot={false} />
  </Recharts.ComposedChart>
</ChartContainer>

API

SimpleBarChart / SimpleLineChart / SimpleAreaChart share this shape:

Prop	Type	Default	Description
`data`	`Record<string, any>[]`		Required.
`index`	`string`		Required — key used for the x-axis labels.
`categories`	`string[]`		Required — keys plotted as series. More than one draws multiple bars/lines/areas.
`colors`	`string[]`	the theme's `--chart-1`…`--chart-5` tokens	One color per category, in order.
`stacked`	`boolean`	`false`	Bar/Area only — stacks series per `index` value instead of grouping them side by side.
`showLegend`	`boolean`	`true`
`showGrid`	`boolean`	`true`
`showXAxis`	`boolean`	`true`
`showYAxis`	`boolean`	`true`
`valueFormatter`	`(value: number) => string`		Reformats both the y-axis ticks and the tooltip value together.

SimplePieChart

Prop	Type	Default	Description
`data`	`Record<string, any>[]`		Required.
`index`	`string`		Required — key holding each slice's label.
`category`	`string`		Required — key holding each slice's value (singular, unlike the other charts' `categories`, since a pie has exactly one value series).
`innerRadius`	`number \| string`	`0`	Non-zero punches a donut hole — a pixel number, or a percentage string relative to the outer radius.
`colors`	`string[]`	the theme's `--chart-1`…`--chart-5` tokens	One color per slice, in data order.
`showLegend`	`boolean`	`true`
`valueFormatter`	`(value: number) => string`		Reformats the tooltip value.

RadialProgressChart

Prop	Type	Description
`data`	`{ label: string; value: number; color: string }[]`	Required — one entry per ring segment; segments are proportional to each other, not to a fixed 100% total, so it's a breakdown widget, not a percentage gauge.

ChartContainer (for custom compositions)

Prop	Type	Description
`config`	`ChartConfig` — `Record<string, { label: string; color: string }>`	Maps each data key to a label and color, exposed to its children as `--color-<key>` CSS custom properties.

ChartTooltip/ChartLegend are thin wrappers around Recharts' own Tooltip/Legend that accept ChartTooltipContent/ChartLegendContent (styled to match the kit) as their content.

Accessibility

Recharts' SVG output has no built-in text alternative — a chart conveys its data visually only. For anything beyond a decorative accent, pair the chart with a Table/DataTable presenting the same values as text, or at minimum wrap it in a container with an aria-label summarizing what it shows.