React Gauge Chart: Zonen, Zielwerte und kleine Größen

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 und 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.

Das Meter-Pattern (opens in a new tab) 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.

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.

npx wingo-ui@latest add gauge

import { Gauge } from "@/components/ui/gauge";

export function SalesGoal() {
  return (
    <Gauge
      value={67.6}
      valueFormat="percent"
      target={75}
      thresholds={[
        { value: 0, tone: "danger", label: "Im Rückstand" },
        { value: 50, tone: "warning", label: "Knapp" },
        { value: 75, tone: "success", label: "Gut" },
      ]}
      label="Monatliches Umsatzziel"
      description="$6,760 von $10,000"
      locale="en-US"
    />
  );
}

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.

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:

<Gauge value={42} max={60} size="sm" sweep={180} showMinMax={false} tone="info" locale="en-US" className="w-[96px] min-w-0" />

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:

"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 (
    <Gauge
      value={value}
      max={8}
      variant="segments"
      target={4}
      thresholds={[
        { value: 0, tone: "success", label: "Schnell" },
        { value: 4, tone: "warning", label: "Langsam" },
        { value: 6, tone: "danger", label: "Kritisch" },
      ]}
      label="Durchschnittliche Antwortzeit"
      description="Ziel: unter 4 h"
      formatValue={(v) => 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“.

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.

npx wingo-ui@latest add radial-bar

"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<string | null>(null);

  return (
    <RadialBar
      data={goals}
      value={selected}
      onValueChange={setSelected}
      label="Team-Aktivität heute"
      description="Gesendete Angebote haben ihr Ziel überschritten"
      center={<span className="text-xl font-semibold">3 Ziele</span>}
      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").

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); der Ring von Progress ist kostenlos, wenn du nur einen Prozentwert brauchst. Für die Seite rund um ein Gauge baut das Next.js Admin Dashboard Tutorial die Shell, die KPI-Reihe und die Tabellen, und der Vergleich der Komponentenbibliotheken für Dashboards deckt die übrigen Diagramme ab. Weitere ausführliche Artikel zu einzelnen Komponenten findest du unter Komponenten-Guides, darunter den Guide zu React Sparklines für Trends in KPI-Kacheln.

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.