CartesianChart
Das CartesianChart stellt Metriken über Zeit als Liniendiagramm oder Flächendiagramm 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.
Darstellungstypen
Im CartesianChart können unterschiedliche Darstellungstypen wie <Area />,
<Line /> oder eine Kombination aus beiden 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
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. |
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 | - |