Grouped bar – Charts - React

A grouped bar chart compares series side by side within each category. The variables are the series rather than the bars inside one series, so variant assigns color per series index. Use monochrome for four or fewer series, and categorical for five or more.

Design rules: Bar charts — grouped
Shared API / tooltips / palettes: Chart component
Plain bar / direct labels: Bar

Minimal option

Define one bar series per variable and leave stack unset. Orientation follows the axis layout rather than a Chart prop: the category axis holds the labels and the value axis holds the measurements.

Variant styling

variant applies the following treatment:

Concern	Behavior
Color	Palette by series index
Corner radius	Open end of each bar, following orientation and sign
Hover	Series focus and blur

Avoid hand-authoring borderRadius or palette hex values to reproduce this treatment.

Tooltips

Pass renderTooltip to add hover content. See Chart component.

Last modified on August 20, 2026

⌘I