Charts
Chart-Library basierend auf Recharts (shadcn/ui-Ansatz). Alle gaengigen Diagramm-Typen mit einheitlichem Theming, Tooltips und responsiver Darstellung. Nutzt React-Komponenten via client:load in Astro.
AreaChart (Flaechendiagramm)
Flaechendiagramme eignen sich besonders gut für Zeitreihen und kumulative Darstellungen. Die gefüllte Fläche visualisiert das Volumen.
Einfach - Eine Datenserie
Gestapelt - Mehrere Serien (genestete Daten)
BarChart (Balkendiagramm)
Balkendiagramme sind ideal für Vergleiche zwischen Kategorien. Unterstützt vertikale, horizontale, gestapelte und gruppierte Darstellung.
Einfach - Vertikal
Gruppiert - Mehrere Serien nebeneinander
Gestapelt - Mehrere Serien übereinander
Horizontal
LineChart (Liniendiagramm)
Liniendiagramme zeigen Trends und Entwicklungen über die Zeit. Optimal für kontinuierliche Daten.
Einfach - Eine Linie
Mehrere Linien (genestete Daten)
PieChart (Kreisdiagramm)
Kreisdiagramme stellen Anteile eines Ganzen dar. Als Donut-Variante oder mit genesteten Ringen für hierarchische Daten.
Einfach - Kreisdiagramm
Donut-Variante
Genestete Ringe (hierarchische Daten)
RadarChart (Netzdiagramm)
Netzdiagramme vergleichen mehrere Dimensionen gleichzeitig. Ideal für Bewertungen, Scores und Profil-Vergleiche.
Einfach - Ein Profil
Vergleich - Mehrere Profile (genestete Daten)
RadialChart (Radialdiagramm)
Radialdiagramme zeigen Fortschritt oder Zielerreichung als kreisförmige Balken. Gut für KPI-Dashboards.
Einfach - Zielerreichung
Genestete Ringe (Ist vs. Ziel)
ComposedChart (Balken + Linien)
Kombiniert Bar- und Line-Serien in einem Diagramm. Typische Fälle: absolute Werte als Balken + Trend/Ziel als Linie, oder zwei Messreihen mit unterschiedlichen Groessenordnungen über eine duale Achse.
Bars + Trendlinie (gleiche Achse)
Duale Achse (Bars in Mio., Linie in %)
Gruppierte Bars + ein Punkt pro Gruppe (duale Achse)
ChartSwitcher
Dynamisches Hinzufügen und Entfernen von Charts über ein Dropdown-Menü. Nutzer können sich ihr Dashboard selbst zusammenstellen.
Balkendiagramm
Kreisdiagramm
ChartComparison (Jahresvergleich)
Vergleichskomponente mit Tab-Navigation. Zeigt dieselben Metriken über verschiedene Zeiträume. Chart-Typ ist umschaltbar zwischen Balken, Linie und Fläche.
Quartals-Umsatz vs. Kosten
Datenstrukturen
Jeder Chart-Typ erwartet Daten in einem bestimmten Format. Hier die Übersicht:
XY-Charts (Area, Bar, Line)
Array von Objekten mit einem Key für die X-Achse und einem oder mehreren Wert-Keys:
// Einfach (eine Serie)
const data = [
{ monat: 'Jan', verbrauch: 4200 },
{ monat: 'Feb', verbrauch: 3800 },
];
const config = {
verbrauch: { label: 'Verbrauch (kWh)', color: 'oklch(60% 0.2 260)' }
};
// Genestet (mehrere Serien)
const data = [
{ monat: 'Jan', strom: 3200, gas: 1800, waerme: 1400 },
{ monat: 'Feb', strom: 2900, gas: 1600, waerme: 1200 },
];
const config = {
strom: { label: 'Strom', color: 'oklch(60% 0.2 260)' },
gas: { label: 'Gas', color: 'oklch(60% 0.18 145)' },
waerme: { label: 'Fernwärme', color: 'oklch(65% 0.2 45)' },
};PieChart
Array mit name und value. Der name muss als Key in der Config existieren:
// Einfach
const data = [
{ name: 'strom', value: 45 },
{ name: 'gas', value: 30 },
];
// Genestet (zwei Ringe)
const innerData = [{ name: 'privat', value: 60 }, { name: 'gewerbe', value: 40 }];
const outerData = [
{ name: 'strom_p', value: 35 },
{ name: 'gas_p', value: 25 },
{ name: 'strom_g', value: 22 },
{ name: 'gas_g', value: 18 },
];RadarChart
Array mit einem Kategorie-Key und einem oder mehreren Wert-Keys:
// Einfach
const data = [
{ kategorie: 'Zuverlässigkeit', wert: 92 },
{ kategorie: 'Preis', wert: 78 },
];
// Genestet (mehrere Serien)
const data = [
{ kategorie: 'Zuverlässigkeit', aktuell: 85, ziel: 95, branche: 80 },
{ kategorie: 'Preis', aktuell: 78, ziel: 85, branche: 75 },
];RadialChart
Array mit name und value (0-100 für Prozent-Darstellung):
const data = [
{ name: 'oekostrom', value: 78 },
{ name: 'zufriedenheit', value: 92 },
{ name: 'netzausbau', value: 65 },
];ChartConfig
Die zentrale Konfiguration bestimmt Labels und Farben:
interface ChartConfig {
[key: string]: {
label: string; // Anzeigename im Tooltip/Legende
color: string; // CSS-Farbe (oklch empfohlen)
icon?: Component; // Optionales Icon
};
}
// Der Key muss mit dem dataKey in den Daten übereinstimmen:
// data: [{ monat: 'Jan', strom: 3200 }]
// ^^^^^
// config: { strom: { label: 'Strom', color: '...' } }
// ^^^^^Integration in Astro
Die Charts sind React-Komponenten. In Astro werden sie mit einer client:-Direktive eingebunden:
---
// In einer .astro-Datei
import { CPBarChart } from '../components/Charts';
import '../components/Charts/charts.css';
const data = [
{ monat: 'Jan', strom: 3200, gas: 1800 },
{ monat: 'Feb', strom: 2900, gas: 1600 },
];
const config = {
strom: { label: 'Strom', color: 'oklch(60% 0.2 260)' },
gas: { label: 'Gas', color: 'oklch(60% 0.18 145)' },
};
---
<CPBarChart
client:load
data={data}
config={config}
xAxisKey="monat"
unit="kWh"
stacked
/>Wichtig: client:load laedt das JS sofort. Alternativ: client:visible (erst bei Sichtbarkeit) oder client:idle (bei Idle-Zeit).
Voraussetzungen
Die Chart-Library benötigt folgende npm-Pakete:
npm install recharts @astrojs/react react react-domAußerdem muss @astrojs/react in der astro.config.mjs registriert sein:
import react from '@astrojs/react';
export default defineConfig({
integrations: [react()],
});Alle Chart-Typen im Überblick
| Typ | Component | Genestete Daten | Besonderheiten |
|---|---|---|---|
| Fläche | CPAreaChart | Stacked | Gradient-Fuellungen |
| Balken | CPBarChart | Stacked / Grouped | Horizontal-Modus |
| Linie | CPLineChart | Mehrere Linien | Kurven / Linear |
| Kreis | CPPieChart | Zwei Ringe (inner/outer) | Donut-Variante |
| Netz | CPRadarChart | Mehrere Profile | Gefüllt / Nur Umriss |
| Radial | CPRadialChart | Mehrere Ringe | Fortschrittsanzeige |
| Kombiniert | CPComposedChart | Bars + Lines, duale Achse | Gruppierte Bars + Punkt pro Gruppe |
Installation
cp-components add charts