BarChart
Charts

BarChart

Stacked column chart for per-bucket volumes (daily payments, hourly requests).

Component behavior

BarChart shows a magnitude per discrete x-axis bucket, optionally split into stacked parts. It is the appropriate chart when the buckets are the point: days, regions, status codes, queue names.

Use cases
  • Counts or totals in discrete buckets.
  • Category totals divided into stacked segments.
  • A small enough category set to keep bars distinguishable.
Alternatives

LineChart: samples form a continuous time series.

Histogram: the task requires a distribution of one numeric variable.

Sparkline: the chart must fit inline without axes.

WaterfallChart: values are signed changes to a running total.

DonutChart: the task requires the composition of one total.

Props

Each BarDatum is one column: a label for the axis and a segments array. Segments stack bottom to top in array order, so the first entry is drawn on the axis. Colors are explicit per segment; there is no automatic palette, which keeps series color consistent across every chart on a page.

BarChartProps props
PropTypeDefaultDescription
dataBarDatum[]—Array of bars, each with a label and stacked segments.
heightnumber84Plot height, in pixels. Legend and x-axis labels add to the total height.
maxnumber—Upper y-axis bound. Defaults to the largest value or stacked total plus 8%.
yLabels[string, string, string]—Top, middle, and bottom axis labels. Supplied labels do not derive from the data.
xLabelEverynumber—Show every Nth x label (1 = all). Defaults to about five labels total.
legend{ label: string; color: string }[]—Explicit legend entries. Not inferred from segment colors.
renderTooltip(index: number) => ReactNode—Tooltip body for the hovered bar index.

Examples

Stacked columns

Each bar represents one bucket, with stacked segments for outcomes. Hovering a column dims the other columns.

BarChart stacked

Single series with axes

One segment per bar is a plain column chart. yLabels takes the three gridline labels as strings you format yourself; the chart does not compute them, so units, rounding, and locale are yours to choose.

BarChart single series

Tooltips

renderTooltip receives the hovered bar index. ChartTooltipHeader and ChartTooltipRow provide tooltip content styles. The tooltip changes sides past the plot midpoint.

BarChart tooltip

Comparing two charts

Without max, each chart scales to its own tallest stack. Set the same max on charts that must be compared on a shared scale.

BarChart shared max
ImportTSX
import { BarChart } from "@solarius/onset";
import type { BarDatum, BarSegment } from "@solarius/onset";

<BarChart
  data={[
    {
      label: "Mon",
      segments: [{ value: 15, color: "var(--m-color-primary)" }],
    },
    {
      label: "Tue",
      segments: [{ value: 22, color: "var(--m-color-primary)" }],
    },
  ]}
  yLabels={["100", "50", "0"]}
  height={100}
/>;