BarChart

Gruppierte und gestapelte Balken, schlank, mit 4px Radius oben und 2px Abstand zwischen gestapelten Segmenten; horizontal für Ranglisten.

Quelltext

Eingabe
Cache-Lesen
Ausgabe
Reasoning

Tokens by kind per day
Kategorie	Eingabe	Cache-Lesen	Ausgabe	Reasoning
Oct 6	840.000	712.500	560.000	382.500
Oct 7	1,26 Mio.	1,05 Mio.	805.000	315.000
Oct 8	1,08 Mio.	902.500	700.000	472.500
Oct 9	900.000	760.000	595.000	405.000
Oct 10	1,32 Mio.	1,09 Mio.	490.000	337.500
Oct 11	1,14 Mio.	950.000	735.000	495.000
Oct 12	960.000	807.500	630.000	427.500

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
Der zugängliche Name des Diagramms („Anfragen nach Modell“).
axisLabels
string[]
Kürzere Namen unter den Balken, einer pro Kategorie („3. Aug.“ für „Woche vom 3. Aug.“); Tooltip, Tabelle und Screenreader behalten die Kategorien. Nenne das Jahr, wo eines beginnt („Aug.“, „Dez.“, „2026“, „Feb.“), und übergib dates: Passen nicht alle Beschriftungen, zeigt die Achse jede n-te und die vor der neuesten (axisLabelIndexes).
categories
string[]
Die Namen entlang der Kategorieachse, einer pro Balkengruppe, in Reihenfolge. Sie stehen auch über dem Tooltip und der Datentabelle.
dates
readonly AxisDate[]
Der Tag, an dem jede Kategorie beginnt, einer pro Kategorie: ein Date oder ein ISO-Tag („2026-01-05“). Wo die Achse Beschriftungen ausdünnt, behält sie die, an denen ein Jahr beginnt (der Monat nach Dezember, die erste Januarwoche), so behält jede Sprache dieselben Beschriftungen.
empty
boolean
Zeigt den leeren Zustand (emptyText) anstelle der Daten. Für Zeiträume ohne Daten.
emptyText
ReactNode
Was der leere Zustand sagt. Standardmäßig „Keine Daten für diesen Zeitraum“ in der Sprache des LocaleProvider.
error
ReactNode
Die Daten ließen sich nicht laden: Das Diagramm behält seine Höhe, sagt es leise und bietet „Erneut versuchen“ an. Fehler sind Toasts, daher wird der Wert nicht angezeigt; zeige die Meldung dort als Toast, wo die Anfrage fehlschlägt.
formatValue
((v: number) => string) = (v) => formatNumber(v)
Formatiert Werte auf der Achse und im Tooltip.
height
number = 240
Die Höhe des Diagramms in px (standardmäßig 240).
highlight
number
Hebt eine Kategorie hervor wie der Mauszeiger, mit Tooltip: für verknüpfte Ansichten oder die Zustandsseiten.
layout
"horizontal" | "grouped" | "stacked" = grouped
grouped stellt die Balken jeder Kategorie nebeneinander (Standard), stacked stapelt sie, horizontal zeichnet sie quer für Ranglisten.
loading
boolean
Die Daten werden geladen: Das Diagramm behält seine Höhe und zeigt einen ruhigen Ladebalken.
onRetry
(() => void)
Wird aufgerufen, wenn nach error „Erneut versuchen“ gedrückt wird; ohne diese Funktion erscheint der Button nicht.
series
BarSeries[]
Die Reihen der Balken, jede mit einer id, einem label, einem Wert pro Kategorie und optional einer color. Sonst kommen die Farben aus der Reihenfolge der Reihen nach id.