BarChart

Grouped, stacked and 100% stacked bars, horizontal or vertical, with negatives and value labels.

@ruckc/truss-chart Charts

Import

import { BarChart } from '@ruckc/truss-chart';
import '@ruckc/truss-chart/charts.css'; // series palette

stacked

horizontal

showValues

series

negatives

cats

title

Prop	Type	Default	Description
`categories` required	`string[]`	—	Category labels along the category axis.
`series` required	`Series[]`	—	Up to 8 series (fixed-order palette). Negative values are allowed everywhere, including stacked bars.
`title`	`string`	—	Heading text.
`subtitle`	`string`	—	Secondary text under the title.
`height`	`number`	`240`	Plot height in px (horizontal charts grow to fit their categories).
`stacked`	`boolean \| 'percent'`	`false`	`true` stacks values (positives up/right of zero, negatives down/left); `'percent'` normalises each category to 100%.
`horizontal`	`boolean`	`false`	Bars run left→right with categories down the side — better for long labels and many categories.
`showValues`	`boolean`	`false`	Label the end of each bar (the stack total when stacked).
`reference`	`({ value: number; label?: string }) \| ({ value: number; label?: string })[]`	—	One or more labelled reference lines (a target, a limit, an average) drawn across the plot at a value on the value axis. They extend the axis domain so they are always visible.
`details`	`string[]`	—	Extra text per category (same order as `categories`), shown under the category name in the tooltip and as a Details column in the table view.
`yFormat`	`(n: number) => string`	`fmtValue`	Formats value-axis numbers and tooltip values.