Chart Bar · UI Library

Default

A single-series vertical bar chart.

Import the parts you need from the component's folder.

ts

import { ChartBar, ChartBarInteractive } from "@/components/ui/chart";

Flip the orientation with the horizontal prop.

Grouped bars for multiple series.

Stack multiple series with the stacked prop.

Toggle between series; totals update in the header.

A single-series bar in a card with a header, trend badge, and grid.

Grouped series in a card with a trend badge.

Frame a bar with a diagonal stripe SVG pattern via svgDefs + barFill.

Mix a stripe-filled series with a solid one using a per-key barFill map.

An elegant dotted SVG pattern fill with a matching stroke.

Compare a dotted series against a solid one.

A soft vertical gradient fill via a linearGradient def.

A 50/50 duotone fill using a hard-stop horizontal gradient.

An isometric 3D bar with gradient faces, rendered by ChartBar3D.

A solid isometric 3D bar with shaded faces.

Bars collapse to a tick and expand on hover, surfacing the value.

A horizontal, grouped bar chart with category labels on the left.

Prop	Type	Default	Description
`data`	`Record<string, any>[]`	—	Series rows.
`config`	`ChartConfig`	—	Map of key → { label, color }.
`dataKey`	`string`	`"value"`	Single-series row key.
`dataKeys`	`string[]`	`null`	Multi-series row keys (overrides dataKey).
`xKey`	`string`	`"date"`	Row key for the category axis.
`horizontal`	`boolean`	`false`	Render horizontal bars.
`stacked`	`boolean`	`false`	Stack multi-series bars.
`legend`	`boolean`	`false`	Render a legend below the chart.
`roundedCorners`	`number`	`6`	Bar corner radius.
`barPadding`	`number`	`0.2`	Fraction of each band left empty between bars.
`grid`	`boolean`	`false`	Draw horizontal grid lines behind the bars.
`svgDefs`	`string`	`null`	Raw SVG <defs> string (patterns/gradients/filters) injected into the chart.
`barFill`	`string \| Record<string, string>`	`null`	Override the fill; a string for every series or a per-key map (e.g. url(#pattern)).
`barStroke`	`string`	`null`	Outline color drawn around every bar.
`barStrokeWidth`	`number`	`1`	Outline width.
`xTickFormatter`	`(d) => string`	`null`	Custom category tick formatter.
`yTickFormatter`	`(d) => string`	`null`	Custom value tick formatter.

Prop	Type	Default	Description
`data`	`Record<string, any>[]`	—	Series rows.
`config`	`ChartConfig`	—	Map of key → { label, color }.
`xKey`	`string`	`"month"`	Row key for the category axis.
`valueKey`	`string`	`"value"`	Row key for the bar value.
`mode`	`"gradient" \| "solid"`	`"gradient"`	Gradient faces or a single color with shaded faces.
`colorOverride`	`string`	`null`	Override the bar color.
`barCategoryGap`	`number`	`0.2`	Fraction of each band left as gap.

Prop	Type	Default	Description
`data`	`Record<string, any>[]`	—	Series rows.
`config`	`ChartConfig`	—	Map of key → { label, color }.
`xKey`	`string`	`"month"`	Row key for the category axis.
`valueKey`	`string`	`"value"`	Row key for the bar value.
`colorOverride`	`string`	`null`	Override the bar color.

Event	Description
`update:active`	Fires with the hovered bar's value (or null on leave).

Prop	Type	Default	Description
`data`	`Record<string, any>[]`	—	Series rows.
`config`	`ChartConfig`	—	Theming map; series with a color become toggles.
`dataKeys`	`string[]`	`null`	Override which series are selectable.
`xKey`	`string`	`"date"`	Row key for the category axis.
`title`	`string`	`""`	Optional header title.
`description`	`string`	`""`	Optional header description.