Chart
A themed wrapper around Recharts for building consistent data visualisations.
$
Registry itembunx shadcn@latest add @nx-ui/chartInstalls withutils
Bar chart
Grouped bars comparing two series. ChartContainer supplies the theme; each series colour comes from the config via var(--color-<key>).
Area chart
Stacked areas tracking a trend over time — here the soil health index at three restoration sites across a growing season.
Loading & error states
Recharts renders a chart when data is ready. While a query is in flight show a skeleton in the container's place; if it fails, swap in a retry affordance. Toggle to preview each.
In a dashboard card
A realistic composition: the chart framed by a Card with a headline metric, trend indicator and a summarising footer.
Material diverted from landfill
January–June 2026 · all sites
18.4%
Compost stream up 24% this half-year
Sourced from 12 partner organisations across the network
API reference
Exported parts and their props, extracted from the component source.