Data

BarChart

The Chart.js bar type in chart ink — rows or columns, targets, one story bar.

Preview

components/data/BarChart.jsx

Cash / Deposits83.9%

Bonds0.0%

Goldstarter placed3.8%

Energy4.7%

The Chart.js bar type in chart ink. Bars draw in de-emphasis ink; emphasis marks at most one story bar in rust; targets are fg ticks.

Usage

src/components/ui/BarChart.tsx

tsx

import { BarChart } from "@/components/ui/BarChart";

<BarChart
  format={(v) => `${v.toFixed(1)}%`}
  data={[
    { label: "Cash / Deposits", value: 83.9, target: 40, emphasis: true },
    { label: "Gold", value: 3.8, target: 12, note: "starter placed" },
  ]}
/>

{/* classic columns: */}
<BarChart horizontal={false} data={…} />

API

props

Prop	Type	Default	Description
data	BarChartDatum[]	—	{ label, value, target?, emphasis?, valueLabel?, note? }.
horizontal	boolean	true	Label + readout rows (default) or classic columns.
max	number	—	Scale maximum; defaults to a padded nice max.
height	number	180	Column-mode plot height.
format	(v) => string	—	Readout formatter.
barSize	number	10	Bar thickness in px (horizontal).

Tokens consumed

semantic only

--ink-300--rust-500--color-bg-hover--color-fg--color-fg-muted--font-mono