Charts · Recharts
Atlas-Default für Standard-Dashboards: ~100KB Bundle, React-native API, niedrige Lernkurve. Wenn die App komplexere Visualisierungen braucht — Heatmaps, Tree-Maps, Geo — wechsle zu ECharts.
Bar Chart
Fahrzeuge pro MVU
| MVU | Anzahl |
|---|---|
| AAGR | 60 |
| SBB | 48 |
| BSU | 52 |
| VBZ | 51 |
| PAG | 39 |
Pie Chart
Energy-Mix
| Antrieb | Anzahl |
|---|---|
| Trolley | 64 |
| Hybrid | 56 |
| Elektro | 74 |
| Diesel | 56 |
Line Chart
Erstinbetriebsetzungen pro Jahr
| Jahr | Anzahl |
|---|---|
| 2000 | 7 |
| 2001 | 6 |
| 2002 | 7 |
| 2003 | 8 |
| 2004 | 6 |
| 2005 | 8 |
| 2006 | 4 |
| 2007 | 8 |
| 2008 | 5 |
| 2009 | 8 |
| 2010 | 8 |
| 2011 | 3 |
| 2012 | 6 |
| 2013 | 6 |
| 2014 | 6 |
| 2015 | 8 |
| 2016 | 5 |
| 2017 | 6 |
| 2018 | 7 |
| 2019 | 9 |
| 2020 | 8 |
| 2021 | 8 |
| 2022 | 7 |
| 2023 | 7 |
| 2024 | 11 |
| 2025 | 5 |
Area Chart
Time-Series mit Fill
| Jahr | Anzahl |
|---|---|
| 2000 | 7 |
| 2001 | 6 |
| 2002 | 7 |
| 2003 | 8 |
| 2004 | 6 |
| 2005 | 8 |
| 2006 | 4 |
| 2007 | 8 |
| 2008 | 5 |
| 2009 | 8 |
| 2010 | 8 |
| 2011 | 3 |
| 2012 | 6 |
| 2013 | 6 |
| 2014 | 6 |
| 2015 | 8 |
| 2016 | 5 |
| 2017 | 6 |
| 2018 | 7 |
| 2019 | 9 |
| 2020 | 8 |
| 2021 | 8 |
| 2022 | 7 |
| 2023 | 7 |
| 2024 | 11 |
| 2025 | 5 |
Pattern
rechartstsx
import { LineChart, Line, XAxis, YAxis, Tooltip } from 'recharts'
<ResponsiveContainer width="100%" height={240}>
<LineChart data={data}>
<XAxis dataKey="year" />
<YAxis />
<Tooltip />
<Line type="monotone" dataKey="count" stroke="hsl(var(--primary))" />
</LineChart>
</ResponsiveContainer>