Charts
Themed Recharts wrappers (Line, Bar, Area, Donut). Colors come from --chart-1..5 CSS vars.
Source:
src/components/ui/charts/ Rendered example — light + dark
Light
LineChart
BarChart
AreaChart
DonutChart
Dark
LineChart
BarChart
AreaChart
DonutChart
Recipes & props
A realistic usage snippet for this component. Imports come from
@/components/ui/….
See the source file
src/components/ui/charts/
for the full API.
import { LineChart } from '@/components/ui/charts';
const data = [
{ month: 'Jan', prs: 8 },
{ month: 'Feb', prs: 14 },
{ month: 'Mar', prs: 11 },
];
// Colors come from --chart-1..5 CSS vars (dark-mode aware).
export function Throughput() {
return <LineChart data={data} index="month" categories={['prs']} />;
}Props API
AreaChartProps | Prop | Type | Default | Description |
|---|---|---|---|
data | T[] | — | — |
index | keyof T & string | — | Key of the X-axis category in each datum. |
series | (keyof T & string)[] | — | Y-axis series keys. |
height opt | number | 300 | — |
className opt | string | — | — |
ariaLabel opt | string | 'area chart' | Accessible label for the chart region. Defaults to 'area chart'. |
BarChartProps | Prop | Type | Default | Description |
|---|---|---|---|
data | T[] | — | — |
index | keyof T & string | — | Key of the X-axis category in each datum. |
series | (keyof T & string)[] | — | Y-axis series keys. |
height opt | number | 300 | — |
className opt | string | — | — |
ariaLabel opt | string | 'bar chart' | Accessible label for the chart region. Defaults to 'bar chart'. |
DonutChartProps | Prop | Type | Default | Description |
|---|---|---|---|
data | DonutDatum[] | — | — |
height opt | number | 280 | — |
className opt | string | — | — |
innerRadius opt | number | 60 | Inner radius as a percentage of the outer radius. Defaults to 60. |
ariaLabel opt | string | 'donut chart' | Accessible label for the chart region. Defaults to 'donut chart'. |
GaugeProps | Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Value 0–max. |
max opt | number | 100 | — |
height opt | number | 180 | — |
className opt | string | — | — |
colorIndex opt | number | 0 | — |
label opt | React.ReactNode | — | — |
ariaLabel opt | string | 'gauge chart' | Accessible label for the chart region. Defaults to 'gauge chart'. |
LineChartProps | Prop | Type | Default | Description |
|---|---|---|---|
data | T[] | — | — |
index | keyof T & string | — | Key of the X-axis category in each datum. |
series | (keyof T & string)[] | — | Y-axis series keys. |
height opt | number | 300 | — |
className opt | string | — | — |
ariaLabel opt | string | 'line chart' | Accessible label for the chart region. Defaults to 'line chart'. |
SparklineProps | Prop | Type | Default | Description |
|---|---|---|---|
data | number[] | — | Numeric series to plot. |
height opt | number | 40 | — |
className opt | string | — | — |
colorIndex opt | number | 0 | — |
ariaLabel opt | string | 'sparkline' | Accessible label for the chart region. Defaults to 'sparkline'. |