Bar chart

Use bar charts to compare categories. Bars share the same fill and pixel options as area charts. Stack with stackId. Flip layout with layout="vertical" (horizontal bars).

Examples

Stacked

Share stackId on each <DuneBarChart.Bar />.

Horizontal

Set layout="vertical" and put the category key on YAxis.

Loading

Set loading on the root to show a pixel skeleton until data is ready.

Loading…

Parts

Part	Role
`DuneBarChart`	Root: `data`, `config`, `fill`, `pixel`, `layout`, `loading`
`DuneBarChart.Grid`	Cartesian grid
`DuneBarChart.XAxis`	Value or category axis
`DuneBarChart.YAxis`	Category or value axis
`DuneBarChart.Tooltip`	Hover tooltip
`DuneBarChart.Legend`	Series legend
`DuneBarChart.Bar`	One series (`dataKey`, optional `stackId`)

Props

Root

Prop	Type	Default	Notes
`data`	`Record<string, unknown>[]`	required	Row objects
`config`	`Record<string, DuneSeriesConfig>`	-	Labels and colors
`fill`	`"bands" \| "dither"`	`"bands"`	Pixel fill mode
`pixel`	`number`	`2`	Cell size in CSS px
`layout`	`"horizontal" \| "vertical"`	`"horizontal"`	`vertical` draws horizontal bars
`loading`	`boolean`	`false`	Pixel skeleton
`emptyMessage`	`string`	-	Empty-state copy
`chartProps`	object	-	Extra Recharts `BarChart` props
`className`	`string`	-	Wrapper class

Bar

Prop	Type	Notes
`dataKey`	`string`	Series field
`stackId`	`string`	Shared id stacks bars
`name`	`string`	Overrides legend name
`isAnimationActive`	`boolean`	Series animation

Tips

For horizontal bars, category goes on YAxis and values go on XAxis.
Stacked and grouped are the same parts API. Only stackId changes.
Use chartProps for Recharts options such as barCategoryGap.

Bar chart

On this page