Daily bars

import { DailyBars, providerChartColor } from "@arcadia/ui";

<DailyBars label="Tokens per day" days={["2026-10-01", "2026-10-02", "2026-10-03"]}
  series={[{ key: "muse", label: "Meta", values: [1_200_000, 0, 3_400_000], color: providerChartColor("muse") }]} />

One bar per day, every day of the range present, so a quiet stretch reads as quiet and a busy week as a busy week, never as a slope between two points. Series stack largest first from the base. Pass each series its identity paint (providerChartColor for a provider, chartColor for a model's slot) so a hidden series or a new range never repaints the others. Values read through format, fmtTokens by default.

The day's reading floats like the kit's popups, outside the chart, so a card that clips its content never cuts it. It stands beside the day's bar, level with the plot's top: right of a day in the first half, left of one in the second, so the newest days read toward the chart. Where neither side has room, as on a phone, it moves above the bars.

rootStyle takes layout and the plot's height.

--bars-h

Ref<Space> | DerivedDefault calc(var(--space-16) * 3)

The plot's height.

The plot is one focusable image named by label with each series' total, so a screen reader hears the whole range at once. With focus on it, Left and Right step through the days, Home and End jump to the ends and Escape clears the reading; the reading is a status the plot points at, so the day is announced as it moves. The legend's chips are toggle buttons with their pressed state.