BarChart

Interactive

See BarChart in Storybook for every variant, with live controls.

A mini bar chart. Pure SVG, for small in-card comparisons.

import { BarChart } from "@kairosis/eidos";

<BarChart
  data={[18, 24, 31, 22, 39, 44, 36]}
  labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
  highlightIndex={5}
/>;

Props

Prop	Type	Default	Description
data	number[]	—	Required. Renders nothing when empty
labels	string[]	[]	Mono labels under each bar
width	number	280	px
height	number	96	px
color	string	var(--primary)
highlightIndex	number	—	Marks the "current" bar in --secondary and dims the rest

Guidelines

• highlightIndex is the one sanctioned use of orange here — it marks "current". One highlighted element per view, and it dims every other bar to 45% so the eye lands on it.
• Bars scale to the largest value; there's no y-axis. This shows proportion, not absolute magnitude.
• Zero and near-zero values still draw a 2px stub, so a bar never disappears entirely.
• No tooltips or interaction. For values, put them in text.
• aria-hidden — expose the underlying numbers elsewhere.