Diagramm — component.chart
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
Componentv1.0.0Datenweb.documentweb.applicationdesktop.shellbuilder.preview
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 |
|---|---|---|
type | string: line | bar | area | pie | donut | radar | "line" |
title | string | "" |
categories | array | [] |
series * | array | — |
height | number | 320 |
unit | string | "" |
legend | boolean | true |
stacked | boolean | false |
Events & Slots
Events: select
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--chart-border-default | var(--color-border-default) |
--chart-elevation-overlay | var(--elevation-overlay) |
--chart-radius-surface | var(--radius-surface) |
--chart-surface-default | var(--color-surface-default) |
--chart-surface-overlay | var(--color-surface-overlay) |
--chart-surface-sunken | var(--color-surface-sunken) |
--chart-text-default | var(--color-text-default) |
--chart-text-muted | var(--color-text-muted) |
Genutzte Design-Tokens
border.hairline color.border.default color.surface.default color.surface.overlay color.surface.sunken color.text.default color.text.muted elevation.overlay font.family.default radius.surface size.2 size.3 size.4 text.sm text.xs tracking.wide weight.semibold