CartesianChart
Das CartesianChart stellt Metriken als Linien-, Flächen- oder Balkendiagramm dar.Best Practices
- Halte die x-Achse immer zeitbasiert.
- Stelle Dimensionen mit Categorical Colors dar.
- Sortiere die Areas bei der Area-Darstellung nach Größe, die größte unten.
- Halte die Zahl der Dimensionen übersichtlich. Das sichert die Lesbarkeit.
- Bei der Bar-Darstellung darf die x-Achse auch kategorisch sein. Balken vergleichen Kategorien, nicht nur Zeitpunkte.
- Stapele Balken nur dort, wo die Summe eine Bedeutung hat.
Darstellungstypen
Im CartesianChart können unterschiedliche Darstellungstypen wie <Area />,
<Line />, <Bar /> oder eine Kombination daraus verwendet werden.
Line
Zeigt die Entwicklung einzelner Objekte über einen Zeitraum und ermöglicht den Vergleich zwischen ihnen.
Besucher
Area
Zeigt die Entwicklung des Gesamtwerts über einen Zeitraum und den jeweiligen Anteil einzelner Objekte daran.
Speicherplatz
Bar
Vergleicht Werte einzelner Kategorien miteinander. Ohne stackId stehen die
Balken einer Kategorie nebeneinander.
Speicherplatz
Mehrere <Bar /> mit derselben stackId werden gestapelt. Das zeigt den Anteil
einzelner Objekte am Gesamtwert einer Kategorie.
Speicherplatz
Ausrichtung
Die Property layout bestimmt, wo die Kategorie-Achse liegt. Mit dem Default
horizontal liegt sie auf der x-Achse, die Balken wachsen nach oben. Mit
vertical liegt sie auf der y-Achse und die Balken wachsen zur Seite. Dafür
braucht die <XAxis /> ein type="number" und die <YAxis /> ein
type="category" mit dem dataKey.
Nutze die vertikale Ausrichtung für lange Kategorie-Namen oder für viele Kategorien.
Speicherplatz pro Projekt
Color
Für die Farbgebung der Daten können Categorical Colors oder eigene Farben verwendet werden. Es sollte sichergestellt sein, dass Farben, die direkt nebeneinander liegen, einen ausreichenden Kontrast zueinander haben.
Synchronisierte Charts
Zwei CartesianCharts können synchronisiert werden, um den gleichen Zeitraum darzustellen. Dadurch lassen sich verschiedene Metriken zeitlich exakt vergleichen.
CPU
RAM
Mit EmptyView
Der EmptyView wird angezeigt, sobald die Property data des Charts entweder ein
leeres Array enthält oder undefined ist. Er dient dazu, leere Zustände visuell
zu kennzeichnen und bietet Orientierung bei Ausnahmefällen wie Ladefehlern,
fehlgeschlagenen Datenabfragen oder nicht vorhandenen Ergebnissen.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
data | ChartDataValue[] | - | The data points rendered by the chart. |
height | string | - | The height of the chart. |
layout | CartesianChartLayout | "horizontal" | The orientation of the axes and graphical items. `"horizontal"` puts the category axis on the x-axis — bars grow upwards. `"vertical"` puts it on the y-axis — bars grow to the side. A vertical layout needs a numeric `XAxis` (`type="number"`) and a categorical `YAxis` (`type="category"` with the `dataKey`). |
emptyView | ReactNode | - | View that is provided when data is empty/undefined |
flexGrow | boolean | - | Allow the height controlling container to set flex-grow: 1. Can only be used in combination with `height` |
className | string | - | |
syncId | string | number | - | Charts with the same syncId will synchronize Tooltip and Brush events. @see Synchronized Charts Example |
syncMethod | SyncMethod | - | Customize how the charts will synchronize tooltips and brushes. `index`: synchronize using the data index in the data array. Index expects that all data has the same length. `value`: synchronize using the data value on categorical axis (categorical: XAxis in horizontal layout, YAxis in vertical layout). function: a custom sync method which receives tick and data as argument and returns an index. @defaultValue index |
children | ReactNode | - |