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.
Default
Monthly Overview
Bar Chart
Weekly Transfer Activity
Downloads vs uploads per day
Custom Tooltip
Site Analytics
Custom tooltip renderer
Donut Chart
Device Status
Current session overview
Active340
Idle120
Offline45
Legend Variants
Legend bottom (default)
Legend top
Legend with icons
Line Chart
Performance Score
8-week rolling average with target line
Pie Chart
Traffic Sources
Breakdown by acquisition channel
Radial Bar
Resource Utilization
Current usage percentages
Storage72%
Memory55%
CPU38%
Stacked Bar
Issue Breakdown
Stacked by category per month
Theme Colors
Theme-aware Colors
Using the theme key for separate light/dark color values
Tooltip Variants
Dot indicator
Line indicator
Dashed indicator
Installation
npx shadcn@latest add @byronwade/chartProps
| 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. |