Chart

uistable

Chart — extracted 1:1 from WEM-App.

npx shadcn add @krawma/chart

npm: recharts@^3.8.0 · registry: @krawma/utils

Preview

Depends on

utils

Purpose

Token-aware wrappers around Recharts — a ChartContainer that maps a typed config to CSS variables, plus themed ChartTooltip/ChartLegend. Use it so charts share the design system's palette and adapt to light/dark automatically.

Anatomy

ChartContainer (takes a ChartConfig) wrapping a Recharts chart, with ChartTooltip + ChartTooltipContent and ChartLegend + ChartLegendContent.

Style

No variants. Series colors come from the --chart-1..5 tokens via the config; never hard-code hex — see the dataviz palette guidance. Renders correctly in both themes.

Behavior & functionality

config keys map to series and supply labels/colors. The container injects the per-chart CSS vars (ChartStyle) that Recharts reads.

Accessibility

Charts are visual — provide a text alternative (caption, summary, or an accessible data table) alongside for non-visual users. Don't rely on color alone to distinguish series; pair with labels/patterns.
Security: config values feed ChartStyle's inline CSS — keep them developer-authored, never user-controlled input.

Do / Don't

✅ Define series/colors in config using the chart tokens.
❌ Don't pass user-supplied strings into config (CSS injection surface).