Charts

Bar Chart

Grouped, stacked, and negative-value variants. Built with D3 scales, animated on mount, responsive by default.

New Units

Used Units

Service

Usage

import { BarChart } from 'foundry-charts'

const data = [
  { month: 'Jan', new: 42, used: 31, service: 18 },
  { month: 'Feb', new: 55, used: 27, service: 22 },
  // ...
]

const series = [
  { key: 'new', label: 'New Units' },
  { key: 'used', label: 'Used Units' },
  { key: 'service', label: 'Service' },
]

<BarChart
  data={data}
  series={series}
  xKey="month"
  variant="grouped"
  height={300}
/>

Props

Prop	Type	Default	Description
`data`	`BarChartDatum[]`	`—`	Array of data objects. Each object represents one x-axis category.
`series`	`SeriesConfig[]`	`—`	Which keys to plot. Each entry has key, label, and optional color.
`xKey`	`string`	`—`	The key in each datum that provides the x-axis label.
`variant`	`'grouped' \| 'stacked'`	`'grouped'`	Layout variant.
`height`	`number`	`320`	Chart height in pixels. Width is always 100% of the container.
`formatY`	`(v: number) => string`	`formatValue`	Formatter for y-axis tick labels and tooltip values.
`formatX`	`(v: string) => string`	`—`	Optional formatter for x-axis tick labels.
`className`	`string`	`—`	Additional CSS class on the root element.
`style`	`CSSProperties`	`—`	Inline styles on the root element.

SeriesConfig

Prop	Type	Default	Description
`key`	`string`	`—`	Key in the data object to read values from.
`label`	`string`	`—`	Human-readable label for legend and tooltip.
`color`	`string`	`—`	Override the default series color. Any valid CSS color.