Cartesian

BarChart

Categorical bar chart with grouped, stacked, horizontal, labeled, active, and negative value variants.

Examples

Stacked with metrics

Bar Chart - Interactive Daily activity by type with top-line metrics. Running 2,530 Swimming 2,550 Running Swimming

Bar Chart - Interactive
day	Running	Swimming
Mon	450	300
Tue	380	420
Wed	510	240
Thu	220	610
Fri	560	460
Sat	410	520

<BarChart
  title="Bar Chart - Interactive"
  xKey="day"
  data={activity}
  stacked
  metrics={[
    {label: 'Running', value: '2,530', color: 'var(--uin-chart-1)'},
    {label: 'Swimming', value: '2,550', color: 'var(--uin-chart-2)'}
  ]}
  series={[
    {key: 'running', label: 'Running', unit: 'kcal'},
    {key: 'swimming', label: 'Swimming', unit: 'kcal'}
  ]}
/>

Grouped

Bar Chart - Grouped Compare pipeline stages side by side. Imported Indexed Failed

Bar Chart - Grouped
source	Imported	Indexed	Failed
Books	420	378	18
PDFs	260	221	31
Web	188	156	12
Notes	134	126	4

<BarChart
  title="Bar Chart - Grouped"
  xKey="source"
  data={intake}
  series={[
    {key: 'imported', label: 'Imported'},
    {key: 'indexed', label: 'Indexed'},
    {key: 'failed', label: 'Failed'}
  ]}
/>

Horizontal

Bar Chart - Horizontal Horizontal bars improve label readability. Indexed

Bar Chart - Horizontal
source	Indexed
Books	378
PDFs	221
Web	156
Notes	126

<BarChart
  title="Bar Chart - Horizontal"
  xKey="source"
  data={intake}
  orientation="horizontal"
  showLabels
  series={[{key: 'indexed', label: 'Indexed'}]}
/>

Negative values

Bar Chart - Negative Positive and negative values share a zero baseline. Net

Bar Chart - Negative
label	Net
Jan	880
Feb	-220
Mar	640
Apr	-140
May	940
Jun	720

<BarChart
  title="Bar Chart - Negative"
  xKey="label"
  data={signed}
  showLabels
  series={[{key: 'net', label: 'Net'}]}
/>

Props

Prop	Type	Default	Description
`data`	`ChartDatum[]`	`—`	Categorical rows to plot.
`series`	`ChartSeries[]`	`—`	Bar series config with key, label, color, icon, and unit metadata.
`xKey`	`string`	`'x'`	Field used for category labels.
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	Controls whether bars grow upward or sideways.
`stacked`	`boolean`	`false`	Stack series in each category instead of grouping them.
`showLabels`	`boolean`	`false`	Render value labels near each bar.
`negativeColor`	`string`	`'var(--uin-chart-negative)'`	Color used for negative values.

Install

CLI

npm install d3-array d3-scale d3-shape
npx @a3tai/mittsu add bar-chart --registry ./packages/charts/registry.json