Bar Chart

Compare magnitudes across categories: ≤24px bars, 4px rounded data end, 2px gap between neighbours.

Import

import { BarChart } from '@marbleui/ui'

Props

<BarChart>

Prop	Type	Default	Description
data *required	`Datum[]`	`—`
index *required	`string`	`—`	Key in each datum used for the x axis.
series *required	`Series[]`	`—`
summary *required	`string`	`—`	Accessible one-sentence summary of the chart.
className	`string`	`—`
description	`ReactNode`	`—`
height	`number`	`—`
indexFormat	`(v: unknown) => string`	`—`
layout	`'vertical' \| 'horizontal'`	`'vertical'`	vertical columns (default) or horizontal bars with category labels on the left.
showGrid	`boolean`	`—`
showLegend	`boolean`	`—`
showYAxis	`boolean`	`—`
stacked	`boolean`	`—`
title	`ReactNode`	`—`
valueFormat	`(n: number) => string`	`—`

Usage notes

Compare magnitudes across categories. Every chart takes a summary (its accessible description) and offers a “Show data” table toggle.

<BarChart
  title="Revenue by line"
  summary="Subscription revenue grew every month; services stayed flat."
  data={rows} index="month"
  series={[{ key: 'subscriptions', label: 'Subscriptions' }, { key: 'services', label: 'Services' }]}
  valueFormat={(n) => `$${n}K`}
/>

Series colors follow the fixed categorical order (--chart-1…8); don’t reorder by value, and fold a 9th series into “Other”.
layout="horizontal" for long category names; stacked for part-to-whole over time.
Tab focuses the plot. Vertical bars step with Left/Right, horizontal bars with Up/Down; the tooltip follows (horizontal single-series bars show it on keyboard only, since rows print their value) and a live region reads each row.
Write summary as the takeaway, not a description of the axes.

Example source · show

import { profit, revenue } from '../lib/chart-samples'
import { BarChart } from './bar-chart'

const money = (n: number) => {
  const a = Math.abs(n)
  return `${n < 0 ? '-' : ''}$${a >= 1000 ? `${(a / 1000).toFixed(a % 1000 ? 1 : 0)}K` : a}`
}
const series = [{ key: 'subscriptions', label: 'Subscriptions' }, { key: 'services', label: 'Services' }]
const regions = [
  { region: 'North America', revenue: 48200 },
  { region: 'Europe', revenue: 36900 },
  { region: 'Asia Pacific', revenue: 21400 },
  { region: 'Latin America', revenue: 9800 },
  { region: 'Africa', revenue: 4300 },
]

export const styles = {
  Grouped: () => <BarChart className="w-[36rem]" title="Revenue by line" summary="Monthly subscription and services revenue, January to August." data={revenue} index="month" series={series} valueFormat={money} />,
  Stacked: () => <BarChart className="w-[36rem]" title="Total revenue" description="Stacked by line" summary="Total monthly revenue stacked by line." data={revenue} index="month" series={series} stacked valueFormat={money} />,
  Horizontal: () => <BarChart className="w-[32rem]" layout="horizontal" title="Revenue by region" summary="Revenue by region; North America leads with $48.2K." data={regions} index="region" series={[{ key: 'revenue', label: 'Revenue' }]} valueFormat={money} />,
  Negative: () => <BarChart className="w-[36rem]" title="Monthly profit" summary="Monthly profit; losses in spring and autumn." data={profit} index="month" series={[{ key: 'profit', label: 'Profit' }]} valueFormat={money} />,
}

Source: packages/ui/src/bar-chart/bar-chart.tsx

Catalog