Charts
Bar chart
Category comparison. Hatched, duotone, gradient, or a bloom.
Props
| Property | Type | Default | Description |
|---|---|---|---|
data | ChartDatum[] | — | Rows to draw. Each object is a point or category. |
dataKey | string | "value" | Numeric field on each row. |
config | ChartConfig | — | Map of dataKey → { label?, color? }. Colors fall back to --chart-1. |
className | string | — | Chart container. Default height is 220px; spark looks better around 88px. |
labelKey | string | "label" | Category field on each row. |
variant | "vertical" | "horizontal" | "rounded" | "hatched" | "dither" | "glow" | "gradient" | "duotone" | "grouped" | "stacked" | "stacked-100" | "diverging" | "editorial" | "bullet" | "vertical" | Orientation and bar fill. horizontal flips the axes. duotone is a hard two-band fill. |
dataKeys | string[] | [dataKey] | Series to compare. Pass two or more for grouped, stacked and stacked-100 to have anything to compare. stacked-100 rebases the drawing to share; the tooltip still reports real counts. |