Patterns

Charts

Pure SVG, zero dependencies. Five shapes: area for trends, bars for compare, line for parallels, donut for share, radar for shape. All accent-driven.

installnpx shadcn@latest add https://br-design-system2.vercel.app/r/br-charts.json

Preview

Revenue

Last 12 months · MRR equivalent

+12.4%

€428k

This period Previous

Shipped projects

By quarter · 2024 vs 2025

38this yr

This year Last year

Days to ship

Median time from kickoff to launch

-22%

11days

Current Previous

Where time goes

Hours · current sprint

248h

this sprint

Design9237%

Engineering8434%

Research3815%

Ops3414%

Component health

Latest audit · 6 dimensions

This product Category avg.

Activity by day

Last 14 days · merged PRs

+18

142

Thu Mar 12 · 15 PRs merged — highest day of fortnight.

import { AreaChart, BarChart, LineChart, DonutChart, RadarChart } from "@/components/br/charts";

<AreaChart
  title="Revenue"
  subtitle="Last 12 months · MRR equivalent"
  value="€428k"
  delta="+12.4%"
  series={[18, 22, 19, 27, 31, 28, 36, …]}
  alt={[14, 19, 17, 21, 24, 23, 27, …]}
  labels={["Mar", "Apr", "May", …]}
  max={60}
/>

<BarChart series={[4,6,5,8]} alt={[3,4,3,5]} />     // side-by-side
<BarChart series={[6,9,11,8]} highlight={2} />       // one bar highlighted
<LineChart series={[18,16,17,14]} dotted />          // with circles

<DonutChart total="248h" label="this sprint" items={[...]} />

<RadarChart
  axes={["A11y", "API", "Density", "Theme", "Motion", "Docs"]}
  series={[86, 74, 92, 88, 70, 64]}
  altSeries={[64, 60, 70, 68, 60, 58]}
/>

Props

Prop	Type	Default	Description
title / subtitle	ReactNode	—	Top label + secondary meta.
value / unit / delta	ReactNode / ReactNode / string	—	Big number + optional unit + accent delta chip.
series / alt	number[]	—	Main + comparison data. alt becomes dashed line or paired bar.
labels	string[]	—	X-axis labels in mono uppercase.
max	number	—	Y-axis ceiling (auto if omitted).
BarChart.highlight	number	—	Index of bar to render in accent; rest are muted.
DonutChart.total / label / items	string / string / { label, value, color }[]	—	Center display + segment list.
RadarChart.axes / series / altSeries	string[] / number[] / number[]	—	Spoke labels + values (0–100 scale).