Diagramme
Hüllen um Chart.js — Balken, Linien, Anteile, Netze, Punktwolken.
Acht Hüllen um Chart.js. Die Beispiele folgen den Samples der Chart.js-Doku, übersetzt in MDC.
Drei Dinge sind anders als bei einer nackten Einbindung:
Die Farben kommen aus dem Theme. Ein Canvas kennt keine Klassen, und
var(--ui-primary) als Zeichenkette malt es schwarz. Die Palette entsteht,
indem der Farbton der Primärfarbe gedreht wird — beliebig viele Farben,
gleiche Helligkeit, alle aus dem Theme. Die semantischen Rollen zu nehmen trüge
nicht: in einem grünen Theme sind primary und success derselbe Wert.
Ein Themenwechsel kommt an. Schalten Sie oben rechts Farbe oder Modus um —
jedes Diagramm auf dieser Seite zeichnet sich neu. Beobachtet wird <html>,
nicht nur der Farbmodus; der Farbfächer schaltet fünf Dinge um.
Es gibt eine Datentabelle. Unter jedem Diagramm steht eine für Screenreader
verborgene Tabelle mit den echten Zahlen, erzeugt aus denselben Daten. Ein
<canvas> ist sonst eine leere Fläche, und ein aria-label nennt die Form,
nicht den Inhalt.
Chart.js ist eine optionale peerDependency: wer keine Diagramme braucht, lädt die 200 kB nicht mit.
Vier Abschnitte der Chart.js-Doku fehlen hier
Scriptable Options, Advanced, Plugins und Utils bestehen im Kern aus
Funktionen — backgroundColor: (ctx) => …, eigene Plugin-Objekte mit
beforeDraw. YAML trägt keine Funktionen; ein Beispiel dafür wäre gelogen.
Wer das braucht, bindet den Baustein in einer .vue-Datei ein und gibt die
Funktionen über options mit — das Prop reicht alles unverändert durch.
LmsBarChart
Die verlässlichste Form für „wie viel wovon": Länge liest der Mensch genauer ab als Fläche oder Winkel.
Senkrechte Balken
Vertical Bar Chart
| 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.
| 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
| 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.
| 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.
| 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`.
| Kategorie | Abgeschlossene Module |
|---|---|
| Mo | 8 |
| Di | 14 |
| Mi | 11 |
| Do | 17 |
| Fr | 6 |
LmsLineChart
Die Linie behauptet einen Zusammenhang zwischen benachbarten Punkten — also nur dort, wo die Achse eine Ordnung hat.
Linie
Line Chart
| Kategorie | Bearbeitete Nuggets |
|---|---|
| Woche 1 | 24 |
| Woche 2 | 38 |
| Woche 3 | 51 |
| Woche 4 | 47 |
| Woche 5 | 63 |
| Woche 6 | 72 |
Mehrere Reihen
Multi Axis Line Chart — die zweite Reihe hängt an einer eigenen Achse.
| Kategorie | Teilnehmende | Quote in Prozent |
|---|---|---|
| Jan | 120 | 42 |
| Feb | 180 | 48 |
| Mär | 240 | 51 |
| Apr | 310 | 49 |
| Mai | 380 | 58 |
| Jun | 460 | 64 |
Treppenstufen
Stepped Line Chart — für Werte, die sprunghaft wechseln statt zu gleiten.
| Kategorie | Geltende Meldefrist in Stunden |
|---|---|
| Jan | 72 |
| Feb | 72 |
| Mär | 24 |
| Apr | 24 |
| Mai | 24 |
| Jun | 24 |
| Jul | 24 |
Krümmung
Line Chart Interpolation — tension zwischen 0 und 1.
| Kategorie | eckig (0) | weich (0.4) |
|---|---|---|
| 1 | 12 | 22 |
| 2 | 32 | 42 |
| 3 | 18 | 28 |
| 4 | 44 | 54 |
| 5 | 26 | 36 |
| 6 | 51 | 61 |
| 7 | 38 | 48 |
Gestrichelt und mit Punktformen
Line Styling und Point Styling zusammengefasst.
| Kategorie | Ist | Ziel |
|---|---|---|
| Jan | 18 | 20 |
| Feb | 24 | 26 |
| Mär | 31 | 32 |
| Apr | 29 | 38 |
| Mai | 38 | 44 |
| Jun | 44 | 50 |
Lücken in den Daten
`null` unterbricht die Linie, statt eine Null zu behaupten.
| Kategorie | Erfasste Quote |
|---|---|
| Jan | 42 |
| Feb | 48 |
| Mär | kein Wert |
| Apr | kein Wert |
| Mai | 58 |
| Jun | 64 |
| Jul | 69 |
Flächendiagramme
Dieselbe Hülle mit area — die Area charts der Chart.js-Doku.
Fläche
Area Chart — Boundaries.
| Kategorie | Abgeschlossene Schulungen |
|---|---|
| Jan | 24 |
| Feb | 38 |
| Mär | 51 |
| Apr | 47 |
| Mai | 63 |
| Jun | 72 |
Gestapelte Flächen
Stacked Area — die Reihen addieren sich zum Ganzen.
| Kategorie | Grundlagen | Vertiefung | Prüfung |
|---|---|---|---|
| Jan | 18 | 6 | 2 |
| Feb | 22 | 9 | 4 |
| Mär | 25 | 14 | 6 |
| Apr | 24 | 12 | 9 |
| Mai | 30 | 18 | 11 |
| Jun | 34 | 22 | 16 |
LmsPieChart
Beantwortet eine Frage gut: wie verteilt sich ein Ganzes auf wenige Teile.
Kuchen
Pie Chart
| Kategorie | Anteil |
|---|---|
| Phishing | 41 |
| Schadsoftware | 24 |
| Fehlkonfiguration | 18 |
| Sonstiges | 17 |
Zwei Ringe übereinander
Multi Series Pie — die zweite Reihe legt sich als äußerer Ring darüber.
| Kategorie | Vorjahr | Laufendes Jahr |
|---|---|---|
| Phishing | 38 | 41 |
| Schadsoftware | 27 | 24 |
| Fehlkonfiguration | 20 | 18 |
| Sonstiges | 15 | 17 |
LmsDoughnutChart
Das Loch nimmt die Fläche weg, die am schwersten zu vergleichen ist.
Ring
Doughnut Chart
| Kategorie | Module |
|---|---|
| Abgeschlossen | 7 |
| In Bearbeitung | 3 |
| Nicht begonnen | 2 |
Schmaler Ring
cutout steuert die Größe der Mitte.
| Kategorie | Prüfungen |
|---|---|
| Bestanden | 84 |
| Nicht bestanden | 16 |
LmsPolarChart
Gleiche Winkel, unterschiedliche Radien — für gleichrangige Kategorien.
Polardiagramm
Polar Area Chart
| Kategorie | Reifegrad |
|---|---|
| Passwörter | 4 |
| Geräte | 3 |
| 5 | |
| Daten | 2 |
| Updates | 3 |
| Bewusstsein | 4 |
LmsRadarChart
Mehrere gleichrangige Kriterien, eine Fläche je Betrachtungsgegenstand.
Netz
Radar Chart — der Vergleich zweier Flächen sagt mehr als zwölf Einzelzahlen.
| Kategorie | Ist | Soll |
|---|---|---|
| Passwörter | 4 | 5 |
| Geräte | 3 | 5 |
| 5 | 5 | |
| Daten | 2 | 4 |
| Updates | 3 | 5 |
| Bewusstsein | 4 | 5 |
Netz mit Lücke
Radar Skip Points — `null` lässt eine Achse aus.
| Kategorie | Erhebung 2026 |
|---|---|
| Passwörter | 4 |
| Geräte | 3 |
| kein Wert | |
| Daten | 2 |
| Updates | 3 |
| Bewusstsein | 4 |
LmsScatterChart
Die einzige Form, die einen Zusammenhang zeigen kann statt nur Werte.
Punktwolke
Scatter Chart
| Kategorie | Betriebe |
|---|---|
| 1 | x 2, y 8 |
| 2 | x 4, y 14 |
| 3 | x 6, y 11 |
| 4 | x 9, y 22 |
| 5 | x 12, y 26 |
| 6 | x 14, y 24 |
| 7 | x 18, y 35 |
| 8 | x 22, y 41 |
Zwei Gruppen
Scatter - Multi axis, hier als zwei Reihen mit eigener Farbe.
| Kategorie | Mit Schulung | Ohne Schulung |
|---|---|---|
| 1 | x 2, y 6 | x 3, y 18 |
| 2 | x 5, y 9 | x 6, y 24 |
| 3 | x 7, y 8 | x 10, y 31 |
| 4 | x 11, y 14 | x 15, y 38 |
LmsBubbleChart
Ein Streudiagramm mit einer dritten Größe im Radius — für Gewichte, nicht für feine Unterschiede.
Blasen
Bubble Chart — `r` ist der Radius in Pixeln.
| Kategorie | Handlungsfelder |
|---|---|
| 1 | x 2, y 8, r 22 |
| 2 | x 5, y 14, r 9 |
| 3 | x 8, y 11, r 15 |
| 4 | x 12, y 24, r 30 |
| 5 | x 16, y 19, r 12 |
Gemischte Diagramme
Eine Reihe kann einen abweichenden type tragen — die Combo bar/line und
Stacked bar/line der Chart.js-Doku.
Balken und Linie
Combo bar/line
| Kategorie | Gemeldete Vorfälle | Gleitender Mittelwert |
|---|---|---|
| Jan | 12 | 12 |
| Feb | 19 | 15 |
| Mär | 8 | 13 |
| Apr | 15 | 14 |
| Mai | 22 | 16 |
| Jun | 14 | 16 |
Achsen, Legende, Titel, Kurzhinweis
Auswahl aus den Options-Abschnitten der Chart.js-Doku. Alles hier geht über den
Notausgang options und wird tief mit den Vorgaben verschmolzen — wer
scales.y.min setzt, verliert nicht die Farben der übrigen Achse.
Achsengrenzen und Schrittweite
Linear Scale — Min/Max/Step Size.
| Kategorie | Quote in Prozent |
|---|---|
| Jan | 42 |
| Feb | 48 |
| Mär | 51 |
| Apr | 49 |
| Mai | 58 |
| Jun | 64 |
Logarithmische Achse
Logarithmic Scale — für Größenordnungen statt Beträge.
| Kategorie | Versuche bis zum Treffer |
|---|---|
| 8 Zeichen | 200000000 |
| 9 | 12000000000 |
| 10 | 700000000000 |
| 11 | 42000000000000 |
| 12 | 2500000000000000 |
| 13 | 150000000000000000 |
| 14 | 9000000000000000000 |
Legende an anderer Stelle
Legend Position.
| Kategorie | Behoben | Offen |
|---|---|---|
| Q1 | 18 | 2 |
| Q2 | 22 | 3 |
| Q3 | 15 | 1 |
| Q4 | 27 | 4 |
Titel und Untertitel
Title und Subtitle — als kurze Props, ohne options.
| Kategorie | Vorfälle |
|---|---|
| Q1 | 20 |
| Q2 | 25 |
| Q3 | 16 |
| Q4 | 31 |
Kurzhinweis anders ausgerichtet
Tooltip Position — hier am Cursor statt am Datenpunkt.
| Kategorie | Teilnehmende |
|---|---|
| Jan | 120 |
| Feb | 180 |
| Mär | 240 |
| Apr | 310 |
| Mai | 380 |
| Jun | 460 |