Bar Chart

Vertical bar chart for comparing quantities across categories. Supports single, grouped, and stacked variants.

Preview

Single series

40302010

JanFebMarAprMayJun

Grouped (2 series)

Q1Q2Q3Q4Q5

Revenue Target

Stacked

MonTueWedThuFri

Desktop Mobile Tablet

Props

Prop	Type	Default	Description
data	{ label: string; values: number[] }[]	--	Category data points
series	{ name: string; color?: string }[]	--	Series configuration
variant	'single' | 'grouped' | 'stacked'	'single'	Bar layout mode
showGrid	boolean	true	Show horizontal grid lines
height	number	200	Chart height in px

Code example

React

import { BarChart } from '@thepace/lexicon/components';

<BarChart
  variant="grouped"
  data={[
    { label: 'Q1', values: [24, 18] },
    { label: 'Q2', values: [32, 26] },
    { label: 'Q3', values: [38, 30] },
    { label: 'Q4', values: [42, 35] },
  ]}
  series={[
    { name: 'Revenue' },
    { name: 'Target' },
  ]}
/>

CSS class reference

Class	Purpose
.lex-bar-chart__bars	Bar container (flex row)
.lex-bar-chart__group	Grouped bars for one category
.lex-bar-chart__bar	Individual bar
.lex-bar-chart__bar--s1 through --s5	Series colour
.lex-bar-chart__stack	Stacked bar container
.lex-bar-chart__segment	Stacked bar segment

Accessibility

• Use role="img" with aria-label describing the chart.
• Provide a hidden data table for screen readers.
• Bars enlarge slightly or show a tooltip on hover for keyboard/mouse interaction.
• Use patterns or textures alongside colour for colour-blind users.

Guidelines

Do

• Use grouped bars for direct comparison between series.
• Use stacked bars to show composition of a total.
• Label the Y-axis to give values context.

Don't

• Don't use more than 3 series in grouped mode — bars become too narrow.
• Don't use 3D bar effects.
• Don't start the Y-axis at a non-zero value without clearly indicating it.