Charts · Application UI
Chart
A Recharts wrapper that injects CSS color variables from a config map and provides tooltip and legend sub-components styled to match the design system.
Feature showcase
Installation
Features
11 examples
Default, Bar Chart, Custom Tooltip, Donut Chart, Legend Variants, Line Chart, Pie Chart, Radial Bar, Stacked Bar, Theme Colors, Tooltip Variants.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| config | ChartConfig | - | Map of data-key names to label, icon, and color/theme values; drives CSS variable injection for all chart series. |
| children | React.ComponentProps<typeof ResponsiveContainer>['children'] | - | A Recharts chart element (e.g. AreaChart, BarChart) rendered inside a ResponsiveContainer. |
| id | string | - | Optional stable ID used to scope the injected CSS variables; auto-generated when omitted. |
| initialDimension | { width: number; height: number } | { width: 320, height: 200 } | Fallback dimensions passed to ResponsiveContainer before the first layout measurement. |
| className | string | - | Additional Tailwind / CSS classes merged onto the outer div. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/chart.tsx |
| Default example | content/examples/chart/default.tsx |
| Bar Chart example | content/examples/chart/bar-chart.tsx |
| Custom Tooltip example | content/examples/chart/custom-tooltip.tsx |
| Donut Chart example | content/examples/chart/donut-chart.tsx |
| Legend Variants example | content/examples/chart/legend-variants.tsx |
| Line Chart example | content/examples/chart/line-chart.tsx |
| Pie Chart example | content/examples/chart/pie-chart.tsx |
| Radial Bar example | content/examples/chart/radial-bar.tsx |
| Stacked Bar example | content/examples/chart/stacked-bar.tsx |
| Theme Colors example | content/examples/chart/theme-colors.tsx |
| Tooltip Variants example | content/examples/chart/tooltip-variants.tsx |