Diagramm
Diagramm auf ApexCharts (lokal ausgeliefert, kein CDN): Linie, Balken, Fläche, Kreis, Ring, Radar. Farben und Schrift werden zur Laufzeit aus den Design-Tokens gelesen, ein Theme-Wechsel färbt mit. Ohne JavaScript bleibt eine lesbare Wertetabelle stehen
Beispiele
Liniendiagramm mit zwei Reihen (Farben aus den Tokens — Theme-Umschalter oben probieren)
| Kategorie | 2026 | 2025 |
|---|---|---|
| Mär | 32.000 € | 28.000 € |
| Apr | 35.500 € | 30.100 € |
| Mai | 41.200 € | 33.900 € |
| Jun | 38.800 € | 35.200 € |
| Jul | 44.100 € | 37.400 € |
| Aug | 48.560 € | 39.800 € |
Balken, gestapelt
| Kategorie | Shop | Telefon | Außendienst |
|---|---|---|---|
| Mär | 120 | 45 | 22 |
| Apr | 132 | 41 | 25 |
| Mai | 141 | 38 | 28 |
| Jun | 138 | 44 | 24 |
| Jul | 155 | 40 | 30 |
| Aug | 168 | 36 | 33 |
Ring-Diagramm
| Kategorie | Anteil |
|---|---|
| Elektronik | 44 |
| Möbel | 26 |
| Textil | 20 |
| Sonstiges | 10 |
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| type | string: line | bar | area | pie | donut | radar | "line" | Diagramm-Art |
| title | string | "" | Titel |
| categories | array | [] | Kategorien (X-Achse bzw. Segment-Namen) |
| series * | array | — | Datenreihen |
| height | number | 320 | Höhe (px) |
| unit | string | "" | Einheit (Achse/Tooltip) |
| legend | boolean | true | Legende |
| stacked | boolean | false | Balken stapeln |
* Pflicht-Prop
Events & Slots
Events:
⚡ select — im Surface per on: {<event>: {action, params}} verdrahtbar.
Genutzte Design-Tokens
border.hairlinecolor.border.defaultcolor.surface.defaultcolor.surface.overlaycolor.surface.sunkencolor.text.defaultcolor.text.mutedelevation.overlayfont.family.defaultradius.surfacesize.2size.3size.4text.smtext.xstracking.wideweight.semibold
LLM-Notizen
component.chart
Diagramm auf ApexCharts. Die Bibliothek liegt lokal (invisible/vendor/apexcharts.esm.js, beim Build aus node_modules kopiert und minifiziert) und wird erst beim Mounten dynamisch geladen — Seiten ohne Diagramm laden nichts.
Wann nutzen
- Mehrreihige Auswertungen mit Achsen und Legende.
- Für kleine Verläufe in Kennzahl-Karten/Tabellen:
component.sparkline(reines SVG, KEINE Bibliothek).
Wichtige Props
type:line | bar | area | pie | donut | radarseries* =[{name, values: [Zahl, …]}](bei pie/donut zählt nur die erste Reihe)categories= X-Achse bzw. Segment-Namen,unit,height,legend,stacked
Beispiel-Node
{
"definition": "component.chart",
"props": {
"type": "bar", "title": "Aufträge nach Kanal", "stacked": true,
"categories": ["Mär", "Apr", "Mai"],
"series": [{"name": "Shop", "values": [120, 132, 141]}, {"name": "Telefon", "values": [45, 41, 38]}]
}
}
Hinweise
- Farben/Schrift kommen zur Laufzeit aus den Token-Variablen — ein Theme-Wechsel färbt das Diagramm mit (der Controller beobachtet
data-theme). Nie Farben als Prop setzen. - Die Reihen-Palette entdoppelt sich selbst (in manchen Themes ist accent gleich primary).
- Ohne JavaScript bleibt eine lesbare Wertetabelle stehen — zugleich die barrierearme Fassung der Daten.
- Emittiert
selectmit{series, point}beim Klick auf einen Datenpunkt.