LmsBarChart

Diagramme

Balkendiagramm — Größen nebeneinander vergleichen.

In Markdown: ::lms-bar-chart Im Zusammenhang ansehen

Die verlässlichste Form für „wie viel wovon": Länge liest der Mensch genauer ab als Fläche oder Winkel.

Beispiele (6)

Senkrechte Balken

Vertical Bar Chart

Datentabelle zum Diagramm
Kategorie	Gemeldete Vorfälle
Januar	12
Februar	19
März	8
April	15
Mai	22
Juni	14

Liegende Balken

Horizontal Bar Chart — bei langen Kategorienamen die bessere Wahl.

Datentabelle zum Diagramm
Kategorie	Anteil der Vorfälle in Prozent
Phishing	41
Schadsoftware	24
Fehlkonfiguration	18
Verlorenes Gerät	11
Innentäter	6

Gestapelte Balken

Stacked Bar Chart

Datentabelle zum Diagramm
Kategorie	Behoben	In Bearbeitung	Offen
Q1	18	6	2
Q2	22	4	3
Q3	15	9	1
Q4	27	3	4

Gestapelt in Gruppen

Stacked Bar Chart with Groups — gleiche `stack`-Kennung stapelt aufeinander.

Datentabelle zum Diagramm
Kategorie	Standort A · behoben	Standort A · offen	Standort B · behoben	Standort B · offen
Q1	12	3	8	4
Q2	15	2	11	1
Q3	9	4	14	2
Q4	18	1	10	3

Schwebende Balken

Floating Bars — ein Wertepaar `[von, bis]` je Balken, über das options-Prop.

Datentabelle zum Diagramm
Kategorie	Zeitfenster in Stunden
Erkennung	x undefined, y undefined
Eindämmung	x undefined, y undefined
Wiederherstellung	x undefined, y undefined
Nachbereitung	x undefined, y undefined

Abgerundete Balken

Bar Chart Border Radius — über den Notausgang `options`.

Datentabelle zum Diagramm
Kategorie	Abgeschlossene Module
Mo	8
Di	14
Mi	11
Do	17
Fr	6

API

Vollständig aus den Quellen erzeugt. Dieselben Angaben stehen an jedem Beispiel hinter dem Knopf API — hier ausgeschrieben, damit sie über die Seitensuche und im Druck auffindbar bleiben.

Props

Prop	Typ	Standard	Bedeutung
`labels`	`(string \| number)[]`	`() => []`	Beschriftungen der Kategorienachse.
`datasets`	`LmsChartDataset[]`	`() => []`	—
`stacked`	`boolean`	—	Balken aufeinander stapeln.
`horizontal`	`boolean`	—	Kategorien nach links, Werte nach rechts.
`legend`	`boolean`	—	Legende zeigen.
`title`	`string`	—	Überschrift.
`subtitle`	`string`	—	—
`yTitle`	`string`	—	Beschriftung der Wertachse.
`xTitle`	`string`	—	—
`caption`	`string`	—	Zeile unter dem Diagramm. Inline-Markdown erlaubt.
`summary`	`string`	—	Zusammenfassung für Screenreader, zusätzlich zur Datentabelle.
`height`	`string`	`'20rem'`	—
`options`	`Record<string, unknown>`	—	Rohe Chart.js-Optionen. Werden tief mit den Vorgaben verschmolzen.

Slots

Dieser Baustein hat keine Slots — sein Inhalt kommt vollständig aus den Props.

Emits

Dieser Baustein sendet keine Events.

Theme

Dieser Baustein hat keine Fläche in der app.config.ts.

Sein Aussehen steuerst du über Props — bei den didaktischen Bausteinen über das gemeinsame Farbrollen-Vokabular (color, variant), bei den dekorativen über deren eigene Props. Eine Theming-Ebene wie ui.<komponente> in Nuxt UI gibt es hier noch nicht.

Changelog

Hinzugefügt1.4.02026-08-20
Geändert0.7.02026-08-20
src/runtime/utils/totp.ts kommt hinzu: TOTP in reinem JavaScript, gegen die Testvektoren des RFC geprüft. Einzige Änderung gegenüber der Quelle sind Nicht-Null-Zusicherungen an den Feldzugriffen — der Bestand an @ts-nocheck bleibt bei 51, und keine Ausnahme liegt außerhalb von fx/
Hinzugefügt0.6.02026-08-20
useLmsProgress: Fortschritt lässt sich speichern, ohne dass die Bibliothek ein Backend kennt. Das Zielprojekt hinterlegt einmal einen Adapter mit get/set, die Bausteine nutzen ihn, wenn er da ist — sonst halten sie den Stand im Speicher wie bisher. Ereignisse wären hier nutzlos: MDC kann keine Events abonnieren, und genau dort werden diese Bausteine benutzt
Behoben0.4.02026-08-20
Die Warnung Slot "default" invoked outside of the render function erscheint nicht mehr. Der Katalog läuft jetzt mit 0 Fehlern und 0 Warnungen
Hinzugefügt0.3.02026-08-20
Der MDC-Bereich jedes Beispiels ist jetzt ein Editor: Syntaxhervorhebung, Code-Vervollständigung aus der Registry, Prüfung in sechs Stufen und eine Vorschau, die beim Tippen mitläuft. Oben rechts Zurücksetzen und Kopieren
Hinzugefügt0.3.02026-08-20
Die Prüfung meldet unbekannte Bausteine, unbekannte Props, fehlende Pflicht-Props, unbekannte Slots, Events (die MDC nicht abonnieren kann) und den Typkonflikt, an dem man in MDC am häufigsten hängenbleibt: Inline-Attribute sind immer Zeichenketten, {count=14} übergibt "14"
Hinzugefügt0.2.02026-08-20
API-Ansicht je Baustein: Props, Slots, Emits, Theme und dieser Changelog. In der Demo-Hülle als Reiter hinter dem Knopf API, auf der Detailseite ausgeschrieben
Hinzugefügt0.2.02026-08-20
Emits werden dokumentiert. Sie sind der Grund, warum sich manche Bausteine aus Markdown heraus nicht vollständig bedienen lassen: MDC kann keine Events abonnieren
Geändert0.2.02026-08-20
Die Komponentenreferenz der README wird jetzt vollständig erzeugt statt von Hand gepflegt
Geändert0.2.02026-08-20
Auch die Tabelle der optionalen Abhängigkeiten wird erzeugt. Sie war gedriftet: motion-v stand mit 50 statt 54 Komponenten darin, @uiw/color-convert unter „je 1", obwohl es drei sind
Hinzugefügt0.1.02026-08-19
Erstveröffentlichung: 187 Bausteine in 17 Kategorien, davon 40 didaktische Lms- und 147 dekorative Fx-Bausteine aus Inspira UI