Bar Chart

Vertical and horizontal bars with grouping, sorting, value labels, and auto-flip to horizontal on mobile. The second most common chart type in newsroom work.

Sorted with Value Labels

Most populous US states

2020 Census, in thousands

Source: US Census Bureau

Horizontal Orientation

Most populous US states

Grouped by Region

Population by state and region

Usage

<BarChart
  data={data}
  title="Most populous US states"
  sortBy="value"
  showValueLabels={true}
  orientation="horizontal"
/>

Props

PropTypeDefault
dataCategoricalRow[]required
titlestringrequired
orientation'vertical' | 'horizontal''vertical' (auto 'horizontal' on mobile)
sortBy'value' | 'label' | 'none''none'
showValueLabelsbooleanfalse
palettePaletteName | string[]'newsroom'
colorMode'default' | 'colorblind' | 'print' | 'highcontrast'auto-detect
showGridbooleantrue
showTablebooleantrue
labelKey / valueKey / groupKeystring'label' / 'value' / 'group'

Data Shape

interface CategoricalRow {
  label: string;
  value: number;
  group?: string;  // enables grouped coloring + legend
}

Accessibility

  • Each bar is a focusable element with an ARIA label ("California: 39,538")
  • Arrow keys navigate between bars, values announced to screen reader
  • Auto-generated description with highest/lowest values
  • Auto-flips to horizontal on mobile for readability