BarChart

Grouped and stacked bars, slender with a 4px top radius and 2px gaps between stacked segments; horizontal for rankings.

Input
Cache read
Output
Reasoning

Tokens by kind per day
Category	Input	Cache read	Output	Reasoning
Oct 6	840K	712.5K	560K	382.5K
Oct 7	1.26M	1.05M	805K	315K
Oct 8	1.08M	902.5K	700K	472.5K
Oct 9	900K	760K	595K	405K
Oct 10	1.32M	1.09M	490K	337.5K
Oct 11	1.14M	950K	735K	495K
Oct 12	960K	807.5K	630K	427.5K

function Stacked() {
  const series = useSeries();
  return (
    <div className="w-full">
      <BarChart aria-label="Tokens by kind per day" categories={days} series={series} layout="stacked" formatValue={formatTokens} />
    </div>
  );
}

import { BarChart } from "@logicplanes/kaeso-ui";

Props

aria-label
string
The chart's accessible name ("Requests by model").
axisLabels
string[]
Shorter names under the bars, one per category ("3 Aug" for "Week of 3 Aug"); the tooltip, the table and screen readers keep the categories. Name the year where one begins ("Aug", "Dec", "2026", "Feb"), and pass dates: where the labels don't all fit, the axis keeps every nth, and keeps that one before the newest (axisLabelIndexes).
categories
string[]
The names along the category axis, one per bar group, in order. They also head the tooltip and the data table.
dates
readonly AxisDate[]
The day each category begins, one per category: a Date, or an ISO day ("2026-01-05"). Where the axis thins its labels, it keeps the ones where a year begins (the month after December, the first week in January), read from these, so every language keeps the same labels.
empty
boolean
Shows the empty state (emptyText) in place of the data. Pass it when the period has no data.
emptyText
ReactNode
What the empty state says. Defaults to "No data for this period" in the provider's language.
error
ReactNode
The data failed to load: the chart keeps its height, says so quietly and offers Try again. Errors are toasts, so the value isn't shown; toast the message where the request fails.
formatValue
((v: number) => string) = (v) => formatNumber(v)
Formats values on the axis and in the tooltip.
height
number = 240
The plot's height in px (240 by default).
highlight
number
Highlight a category as the pointer does, with its tooltip: a linked view, or the states pages.
layout
"horizontal" | "grouped" | "stacked" = grouped
grouped puts each category's bars side by side (default), stacked stacks them, and horizontal draws bars across for rankings.
loading
boolean
The data is loading: the chart keeps its height and shows a quiet loading bar.
onRetry
(() => void)
Called when Try again is pressed after error; without it, the button doesn't show.
series
BarSeries[]
The bars' series, each with an id, a label, one value per category and an optional color. Colors otherwise come from the series order by id.