# React Gauge Chart: Zonen, Zielwerte und kleine Größen
> Bau ein React Gauge Chart, das einen Wert mit Zonen und Zielwert zeigt, seine Texte auch bei 120px lesbar hält und sich bei Screenreadern als Meter meldet.
- Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Veröffentlicht: 19. Okt. 2026
- Kategorie: [Komponenten-Guides](https://wingo-ui.com/de/blog/category/components)
- Lesezeit: 9 Min.
- Kanonische URL: https://wingo-ui.com/de/blog/react-gauge-chart
- Englische Fassung: https://wingo-ui.com/blog/react-gauge-chart
## Kurz gesagt
Ein React Gauge Chart zeigt einen Wert auf einer festen Skala, als Bogen, Nadel oder Segmente, gefärbt nach der Zone, in der der Wert liegt, mit einer Zielmarkierung und einem Label, das lesbar bleiben muss, wenn das Instrument auf 120px schrumpft. Nimm ein Gauge für eine Zahl mit Zonen, Radial Bars für mehrere Ziele, die sich jeweils bis zu ihrem eigenen Zielwert füllen, und einen einfachen Progress-Ring, wenn du nur einen Prozentwert brauchst. Gauge und Radial Bar von Wingo UI erledigen das über Props und melden sich bei Screenreadern als Meter.
Du brauchst ein React Gauge Chart für ein Dashboard: Umsatz gemessen am Monatsziel, ein NPS-Wert, ein Support-SLA, die Festplattenbelegung. Eine Zahl, eine Skala und ein Gefühl dafür, ob die Zahl gut oder schlecht ist. Die erste Version ist meist ein SVG-Bogen mit einer großen Zahl in der Mitte, und bei 280px sieht sie gut aus. Dann landet sie in einer KPI-Karte mit 120px: Das Label läuft über den Bogen hinaus, Minimum und Maximum kollidieren mit den Bogenenden, und ein Screenreader kündigt ein Bild ohne Beschriftung an. Dieser Guide zeigt, wann ein Gauge das richtige Diagramm ist, welche Props in [Gauge](https://wingo-ui.com/components/gauge) und [Radial Bar](https://wingo-ui.com/components/radial-bar) von Wingo UI zählen und wie beide auf dem Smartphone lesbar bleiben.
## Wann nehme ich ein Gauge Chart statt eines Balkens oder Rings?
Nimm ein Gauge, wenn ein einzelner Wert auf einer Skala mit sinnvollem Minimum und Maximum liegt und die Zonen genauso wichtig sind wie die Zahl. Ein Tachometer hat einen roten Bereich; ein Monatsziel hat „im Rückstand“, „knapp“ und „gut“. Brauchst du nur den Prozentwert einer Aufgabe, sagt ein Fortschrittsbalken oder -ring dasselbe mit weniger Platz. Hast du mehrere Ziele gleichzeitig, lassen sie sich mit Radial Bars besser vergleichen als mit einer Reihe von Gauges.
| Du willst zeigen | Nimm | Warum |
|---|---|---|
| Einen Wert mit Zonen und Zielwert (NPS, SLA, Verkaufsziel) | [Gauge](https://wingo-ui.com/components/gauge) | Zonenfarben, Zielmarkierung und Skalenenden in einem Instrument |
| Mehrere Ziele, jedes mit eigenem Zielwert | [Radial Bar](https://wingo-ui.com/components/radial-bar) | Konzentrische Ringe vergleichen den Fortschritt, und ein Ring über 100% dreht eine zweite Runde |
| Den Prozentwert einer Aufgabe (Upload, Onboarding) | [Progress](https://wingo-ui.com/components/progress) als Ring | Kleiner, kostenlos, wird als progressbar angesagt |
| Eine Zahl und ihren Trend | [Stat Card](https://wingo-ui.com/components/stat-card) | Ein Gauge hat keine Zeitachse |
Das [Meter-Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/meter/) von WAI-ARIA zieht dieselbe Grenze: Ein Meter ist ein Wert innerhalb eines bekannten Bereichs, etwa der Ladestand eines Akkus, und eignet sich weder für Fortschritt noch für Werte ohne sinnvolles Maximum. Das ist ein guter Test für jedes Gauge. Wenn du das Maximum nicht benennen kannst, nimm ein anderes Diagramm.
## Welche Pakete für React Gauge Charts gibt es?
Drei Namen tauchen zuerst auf, wenn du nach einer React Gauge Chart Komponente oder einem React Speedometer Chart suchst, dazu MUI X, falls du MUI schon nutzt. Die Angaben stammen aus dem npm-Eintrag und der Doku des jeweiligen Projekts, Stand Oktober 2026.
| Paket | Aktuelle Version | Lizenz | Hinweise aus der Doku |
|---|---|---|---|
| [react-gauge-chart](https://github.com/Martin36/react-gauge-chart) | 0.5.1, veröffentlicht im April 2024 | MIT | Basiert auf D3. `nrOfLevels` oder `arcsLength` für Zonen, `percent` von 0 bis 1 für die Nadel. Die Peer Dependencies reichen nur bis React 18. Die README nennt es einen Bug, dass das Diagramm bei Prop-Updates in anderer Größe neu rendert, und empfiehlt eine feste Höhe. |
| [react-gauge-component](https://github.com/antoniolago/react-gauge-component) | 2.0.29, veröffentlicht im April 2026 | MIT | Ein Fork von react-gauge-chart mit einer Preset-Galerie und einem Sandbox-Editor. Die Peer Dependencies schließen React 19 ein. Die README zeigt für Next.js einen dynamischen Import mit `ssr: false`. |
| [react-d3-speedometer](https://www.npmjs.com/package/react-d3-speedometer) | 3.1.2, veröffentlicht im Januar 2026 | MIT | Ein Tachometer mit Nadel auf Basis von D3, mit React 19 als Peer Dependency. |
| [MUI X Charts Gauge](https://mui.com/x/react-charts/gauge/) | `@mui/x-charts` 9.15.0, veröffentlicht im Oktober 2026 | MIT | Bogen-Gauge mit `value`, `valueMin`, `valueMax`, `startAngle`, `endAngle`. Folgt dem ARIA-Pattern für Meter. Es gibt kein Prop für eine Nadel: Die Doku zeichnet sie in `GaugeContainer` mit dem Hook `useGaugeState()`. |
Nutzt du schon MUI, ist dessen Gauge die naheliegende Wahl: Es ist barrierefrei, und du holst dir keine neue Abhängigkeit ins Projekt. Willst du ein Nadel-Gauge mit Zonen aus einem einzigen npm install und stört dich ein reiner Client-Import nicht, nimm react-gauge-component statt react-gauge-chart: Es hat im April 2026 ein Release bekommen und führt React 19 als Peer Dependency. Das Gauge von Wingo UI ist Quellcode, den du in dein Projekt kopierst, mit Zonen, Zielwert und drei eingebauten Varianten.
## Welche Props braucht ein React Gauge Chart?
Einen Wert, eine Skala und Zonen. `value` ist Pflicht, `min` und `max` stehen standardmäßig auf 0 und 100, und `thresholds` gibt an, wo jede Zone beginnt. Die Zonen werden automatisch sortiert, und jede reicht bis zum nächsten Schwellwert oder bis `max`.
```bash
npx wingo-ui@latest add gauge
```
```tsx
import { Gauge } from "@/components/ui/gauge";
export function SalesGoal() {
return (
);
}
```
Der Bogen nimmt die Farbe der Zone an, in der der Wert liegt (`colorByZone`, standardmäßig an), ein schmales Band außen am Bogen zeigt alle Zonen (`showBands`), und ein Chip unter dem Wert nennt die aktuelle Zone. `target` zeichnet eine Markierung quer über die Spur, die in der Farbe des Untergrunds ausgeschnitten ist, damit sie auf jeder Zonenfarbe lesbar bleibt.
Diese Props passt du als Nächstes meist an:
- `variant`: `arc` füllt die Spur bis zum Wert, `needle` zeichnet eine schmale Spur in den Zonenfarben und eine Nadel (der typische Speedometer-Look), `segments` teilt die Spur in Zonen oder in `segments` gleich große Schritte.
- `sweep`: `180` für einen Halbkreis, `240` (der Standard) oder `270` für einen offenen Ring.
- `size`: `sm`, `md` oder `lg`, eine nominale Breite von 120, 200 oder 280px mit einer Wertgröße von 18, 28 oder 40px.
- `valueFormat`: `number`, `compact`, `currency` oder `percent`, zusammen mit `currency` und `locale`. Für alles andere gibt es `formatValue(value, { kind })`: `kind` ist `"value"` für den Wert, `"tick"` für Minimum und Maximum oder `"label"` für den gesprochenen Text.
Zieh den Regler unter dem Instrument. Der Bogen wechselt die Farbe, sobald der Wert 50% und 75% überschreitet, und die Dollar-Zeile unter dem Label zieht mit.
> Live-Demo (Gauge): Zieh den Regler: Der Bogen wird bei 50% bernsteinfarben und bei 75% grün, der Zonen-Chip wechselt, und die Zahl zählt zum neuen Wert. Probier sie unter [Gauge](https://wingo-ui.com/components/gauge) aus und installier sie mit `npx wingo-ui@latest add gauge`.
## Wie bleibt ein Gauge bei kleinen Größen lesbar?
Lass die Komponente Platz für den Text schaffen. Die meisten Gauge-Beispiele setzen Wert, Label und Beschreibung mit fester Schriftgröße in den Bogen. Das klappt bei 280px und geht bei 120px kaputt, wo ein Label wie „Durchschnittliche Antwortzeit“ breiter ist als die Öffnung.
Das Gauge löst das in drei Schritten und misst dabei nie das DOM:
1. **Der Wert schrumpft, bis er passt.** Die große Zahl wird kleiner, wenn ihr formatierter Text breiter ist als der Raum im Bogen, sodass „$128,450“ nie die Spur berührt.
2. **Das Label rückt unter das Instrument**, wenn Label und Beschreibung in die Zeile mit Minimum und Maximum laufen würden. Zuerst probiert es eine schmalere Spalte zwischen den beiden Skalenenden und wandert erst nach außen, wenn der Text dort immer noch zu hoch ist. Der Wert bleibt im Bogen.
3. **Die Skalenenden werden kompakt.** Mit `valueFormat="currency"` und einem Bereich ab 10.000 erscheint ein Maximum von 190000 als „$190K“ unter dem Bogenende.
Weil das Layout aus geschätzten Textbreiten entsteht, steht im Server-HTML schon alles an seinem Platz, und bei der Hydration springt nichts. Das Instrument schrumpft auch mit einem schmaleren Container, aber das Root-Element hat `min-w-[120px]`, sodass ein Raster mit zwei Gauge-Spalten auf ein 360px breites Smartphone passt, eine dritte Spalte aber nicht.
Für Listenzeilen liest sich ein Halbkreis besser als ein Bogen mit 240 Grad, weil er niedriger ist. Blende die Skalenenden aus, setz den Labeltext neben das Instrument und gib `min-w-0` plus eine Breite mit, wenn die Zeile das Instrument unter 120px braucht:
```tsx
```
## Wie zeige ich einen Wert, bei dem weniger besser ist?
Ordne die Zonen von gut nach schlecht. Antwortzeiten, Fehlerraten und Kosten sind besser, wenn sie niedrig sind, also bekommt die erste Zone den Ton success:
```tsx
"use client";
import { Gauge } from "@/components/ui/gauge";
const hours = (v: number) => `${v.toLocaleString("en-US", { maximumFractionDigits: 1 })} h`;
export function ReplyTime({ value }: { value: number }) {
return (
hours(v)}
/>
);
}
```
Die Zeile `"use client"` ist hier wichtig: `formatValue` ist eine Funktion, und eine Server Component kann einer Client Component keine Funktion übergeben. Die Variante segments zeigt jede Zone als eigenes Stück, die aktuelle voll deckend und die anderen mit 25% Deckkraft, dazu eine Ringmarkierung am Wert. Für einen Score mit negativem Bereich, etwa NPS von -100 bis 100, setz `min={-100}` und `max={100}`, und die Zonen funktionieren genauso. Werte außerhalb des Bereichs werden beim Zeichnen auf den Bereich begrenzt, während der Text weiter die echte Zahl zeigt, und `value={null}` zeichnet die Spur mit einem Strich für „noch keine Daten“.
> Live-Demo (Gauge): Die Nadel-Variante als Halbkreis: Zieh den Regler, und die Nadel dreht sich durch die Zonen, während der Wert mitzählt. Probier sie unter [Gauge](https://wingo-ui.com/components/gauge) aus und installier sie mit `npx wingo-ui@latest add gauge`.
## Wie zeige ich mehrere Ziele als React Radial Progress Chart?
Nimm die Radial Bar. Ein React Radial Progress Chart mit mehreren Ringen beantwortet eine andere Frage als ein Gauge: Wie weit ist jedes Ziel, nebeneinander betrachtet? Jeder Eintrag in `data` ist ein Ring mit eigenem `max`, der äußerste zuerst.
```bash
npx wingo-ui@latest add radial-bar
```
```tsx
"use client";
import { useState } from "react";
import { RadialBar, type RadialBarDatum } from "@/components/ui/radial-bar";
const goals: RadialBarDatum[] = [
{ id: "calls", label: "Anrufe", value: 42, max: 60 },
{ id: "meetings", label: "Meetings", value: 7, max: 10 },
{ id: "quotes", label: "Gesendete Angebote", value: 18, max: 15 },
];
export function TeamActivity() {
const [selected, setSelected] = useState(null);
return (
3 Ziele}
locale="en-US"
/>
);
}
```
Ein Ring, der sein Ziel überschreitet, dreht eine zweite Runde, so sind 18 von 15 Angeboten als übererfüllt erkennbar, ohne dass die Skala bricht. `variant="bars"` zeichnet statt voller Ringe Balken über 270 Grad, jeweils beschriftet direkt links vom Startpunkt bei 12 Uhr. Die Legende steht ab 480px Containerbreite neben dem Diagramm und rutscht in schmaleren Containern darunter.
Kleine Größen löst sie wie das Gauge. `size` nimmt `sm`, `md`, `lg` oder eine beliebige Pixelzahl, sodass ein Ringset mit 52px in eine Listenzeile passt. Ist die Öffnung zu klein für die Anzeige, schwebt der Wert des Rings, über dem die Maus steht oder der den Fokus hat, stattdessen neben dessen Ende, und auf Touchscreens wird er über dem Diagramm fixiert (`tooltipMode="auto"`).
> Live-Demo (Radial bar): Fahr mit der Maus über einen Ring oder tipp ihn an: Die anderen werden blasser, und die Öffnung zeigt seinen Prozentwert. Spring per Tab zum Diagramm und geh mit den Pfeiltasten durch die Ringe. Probier sie unter [Radial bar](https://wingo-ui.com/components/radial-bar) aus und installier sie mit `npx wingo-ui@latest add radial-bar`.
## Wie mache ich ein Gauge Chart barrierefrei?
Gib ihm die Rolle meter, einen Namen und einen Satz, den ein Mensch versteht. Das Gauge rendert `role="meter"` mit `aria-valuemin`, `aria-valuemax` und `aria-valuenow`. Ein `label` als String benennt es; andere Label-Knoten werden über `aria-labelledby` verknüpft, `description` über `aria-describedby`. Der gesprochene Wert enthält Zone und Zielwert, mit den englischen Standardtexten und dem Zonen-Label „Close“ zum Beispiel „67.6%, Close zone, target 75%“. Diesen Satz ersetzt du mit `labels.valueText(value, min, max, info)`, wobei `info` den formatierten Text, die Zone und den Zielwert enthält. Das Gauge ist rein lesend und bekommt nie den Fokus, weil es nichts zu bedienen gibt.
Die Radial Bar ist interaktiv und funktioniert deshalb anders. Sie rendert pro Ring ein verstecktes Meter-Element, eine Tabelle für Screenreader mit Wert, Zielwert und Prozent sowie Tastatursteuerung: Mit Tab springst du zum Diagramm, die Pfeiltasten gehen durch die Ringe, Home und End springen zum äußersten bzw. innersten Ring, Enter oder Leertaste wählen aus, Escape hebt die Auswahl auf. Eine Live Region sagt jeden Ring an, während du dich durch die Ringe bewegst.
Bei keinem der beiden Diagramme vermittelt die Farbe allein die Zone. Das Gauge schreibt den Zonennamen in den Chip und in den gesprochenen Text; die Radial Bar schreibt Werte und Prozente in die Legende. Bei reduzierter Bewegung überspringen beide die Animation und zeigen direkt den Endzustand.
## Was sind die typischen Fehler bei einem Gauge Chart?
- **Ein Gauge für eine Zahl ohne Maximum.** Der Umsatz dieses Monats hat keine natürliche Obergrenze. Nimm ein Ziel als Maximum oder zeig eine Stat Card mit Trend.
- **Die Zielmarkierung auf einem anderen Hintergrund.** Die Markierung ist in der Farbe des Untergrunds ausgeschnitten. Sitzt das Gauge auf einer Karte oder einer eigenen Füllung, übergib diese Farbe als `surface`.
- **Fehlende Zonen-Labels.** Ohne `label` an jedem Schwellwert verschwindet der Chip, und der Screenreader sagt die Zahl und den Zielwert an, aber nicht die Zone.
- **Animation in Vorschaubildern und im Druck.** Der Bogen baut sich animiert auf, sobald er zum ersten Mal in den sichtbaren Bereich scrollt. Übergib für statische Exporte `animated={false}`.
- **Eine Reihe Gauges für zusammengehörige Ziele.** Fünf Instrumente nebeneinander lassen sich schwer vergleichen. Radial Bars oder ein Balkendiagramm stellen sie in einem einzigen Diagramm nebeneinander.
## Wie füge ich es meinem Projekt hinzu?
Führ `npx wingo-ui@latest add gauge` oder `npx wingo-ui@latest add radial-bar` aus. Die CLI kopiert den Quellcode in dein Projekt, ergänzt das Chart-Kit sowie die Helfer für Motion und Zahlen, die die Komponenten importieren, und installiert `motion` und `d3-shape`. Beide sind Pro-Komponenten ([Preise](https://wingo-ui.com/de/pricing)); der Ring von [Progress](https://wingo-ui.com/components/progress) ist kostenlos, wenn du nur einen Prozentwert brauchst. Für die Seite rund um ein Gauge baut das [Next.js Admin Dashboard Tutorial](https://wingo-ui.com/de/blog/nextjs-admin-dashboard-tutorial) die Shell, die KPI-Reihe und die Tabellen, und der [Vergleich der Komponentenbibliotheken für Dashboards](https://wingo-ui.com/de/blog/best-react-component-library-for-dashboard) deckt die übrigen Diagramme ab. Weitere ausführliche Artikel zu einzelnen Komponenten findest du unter [Komponenten-Guides](https://wingo-ui.com/de/blog/category/components), darunter den [Guide zu React Sparklines](https://wingo-ui.com/de/blog/react-sparkline) für Trends in KPI-Kacheln.
## Komponenten in diesem Artikel
- [Gauge](https://wingo-ui.com/components/gauge) (Pro): A React gauge chart showing one value against a scale and its zones: a speedometer arc, needle or segmented dial with a target tick. Installation: `npx wingo-ui@latest add gauge`
- [Radial bar](https://wingo-ui.com/components/radial-bar) (Pro): A React radial bar chart: several goals as concentric activity rings or 270° bars, each filling toward its own target and lapping past 100%. Installation: `npx wingo-ui@latest add radial-bar`
## Häufige Fragen
### Wie baue ich ein Gauge Chart in React?
Nimm eine Gauge-Komponente, die einen Wert, ein Minimum und ein Maximum bekommt, und ergänz Zonen und einen Zielwert. Mit Wingo UI ist das , installiert mit npx wingo-ui@latest add gauge.
### Was ist der Unterschied zwischen einem Gauge und einem Radial Bar Chart?
Ein Gauge zeigt einen Wert auf einer Skala mit Zonen, wie ein Tachometer. Ein Radial Bar Chart zeigt mehrere Werte als konzentrische Ringe, die sich jeweils bis zu ihrem eigenen Zielwert füllen, wie die Aktivitätsringe einer Fitness-App.
### Welche ARIA-Rolle sollte ein Gauge haben?
role="meter" mit aria-valuenow, aria-valuemin, aria-valuemax und einem Label, wie es das Meter-Pattern der WAI-ARIA Authoring Practices beschreibt. Nimm stattdessen progressbar, wenn der Wert den Fortschritt einer Aufgabe zeigt, etwa eines Uploads.
### Kann ich ein React Gauge Chart in Next.js mit Server-Rendering nutzen?
Manche Pakete brauchen einen dynamischen Import mit ssr auf false; die README von react-gauge-component zeigt das für Next.js. Das Gauge von Wingo UI platziert seine Texte anhand geschätzter Breiten, statt das DOM zu messen, deshalb enthält schon das Server-HTML Instrument, Wert und Label an der richtigen Stelle.
### Sind Gauge und Radial Bar von Wingo UI kostenlos?
Nein. Beide sind Pro-Komponenten. Die Komponente Progress, die eine Ring-Variante für einen einzelnen Prozentwert hat, gehört zum kostenlosen Tarif.
---
Quelle: https://wingo-ui.com/de/blog/react-gauge-chart