CartesianChart

Grundlagen

Best Practices

Achte bei der Verwendung eines CartesianCharts darauf, dass ...

• die x-Achse immer zeitbasiert ist.
• Dimensionen mit Categorical Colors dargestellt werden.
• bei der Area-Darstellung die Areas nach Größe sortiert werden, mit der größten Area unten.
• die Anzahl der dargestellten Dimensionen übersichtlich bleibt, um Lesbarkeit sicherzustellen.

Verwendung

Verwende ein CartesianChart, um ...

• Trends von Metriken über längere Zeiträume hinweg zu zeigen.
• den relativen Anteil mehrerer Dimensionen an einem Gesamtwert darzustellen (mit Area-Darstellung).
• Veränderungen bei einer oder mehreren Dimensionen miteinander zu vergleichen.

Playground

Verwende <CartesianChart />, um ein CartesianChart darzustellen. Beachte dabei, dass zum Rendern entweder das übergeordnete Parent eine feste Höhe vorgeben muss oder das Chart selbst über die Property height eine eigene Höhe erhalten muss. Mit typedCartesianChart<T> lässt sich ein Chart für einen bestimmten Datentyp erzeugen.

---

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.

Area: Zeigt die Entwicklung des Gesamtwerts über einen Zeitraum und den jeweiligen Anteil einzelner Objekte daran.

---

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.

---

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[]	-
height	string	-
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	-