revido kit
Start building
← All components
data-display / beta

GroupedBarChart

Side-by-side bars for two or more series on a shared category axis (revenue vs profit by month).

LIVE PREVIEW
Loading preview…

When to use

  • Compare two related measures across the same categories.
  • Month or stage sequences where a single BarChart cannot show both series.

Consider an alternative

  • A single series — use BarChart.
  • Parts of one whole (revenue split into profit and expenses) — use StackedBarChart.
  • Negative values — clamp to the baseline and show the real figure in a table.

Import

import { GroupedBarChart } from '@revido-llc/kit';

Keyboard interaction

  • Tab — focus each series bar and reveal its tooltip
  • Enter / Space — activate onCategoryPress when provided
  • Escape — dismiss the tooltip

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.

data (required)readonly GroupedBarChartCategory[]—Categories in axis order. Each holds one value per series `id`.
series (required)readonly GroupedBarChartSeries[]—Two or more series drawn side-by-side within each category.
highlightstring—Category label to emphasize. Defaults to none.
onCategoryPress((label: string) => void)—Fired when a category group is activated (bar or category label).
orientation"vertical" | "horizontal""vertical"Vertical for short sequences; horizontal when category labels are long.
valueFormat((value: number) => string)—Formats axis ticks, direct labels, tooltips and the accessible table.
childrenReactNode—
classNamestring—

Examples

Orientations

<GroupedBarChart
  data={[{ label: "Oct", values: { revenue: 35000, profit: 11800 } }]}
  series={[
    { id: "revenue", label: "Revenue", tone: 1 },
    { id: "profit", label: "Profit", tone: 2 },
  ]}
  highlight="Oct"
/>

Billing months

<GroupedBarChart
  data={months}
  series={[
    { id: "revenue", label: "Revenue", tone: 1 },
    { id: "profit", label: "Profit", tone: 2 },
  ]}
  valueFormat={money}
  highlight="Oct"
/>

No measurements

<GroupedBarChart data={[{ label: "Jul", values: { revenue: 0, profit: 0 } }]} series={series} />

Literal anatomy

Static component anatomy; bind onCategoryPress in the consuming app.

<GroupedBarChart aria-label="Revenue and profit by month" data={months} series={series} />

Related components