KPI-, Live- und Karten-Charts

Gauges, Fortschrittsringe und Sparklines für Kennzahlen, laufend ankommende Daten, Kurskerzen und Werte nach Region auf einer Karte.

6 Components · 22 Variants

Kategorie wechseln

Auf dieser Seite

Alle Components dieser Kategorie. Wähle eine, um zu ihren Variants zu springen.

Messanzeige5
Live-Diagramm5
Kerzendiagramm4
Regionenkarte4
Ringfortschritt2
Sparkline2

gauge

Messanzeige

Ein Wert gegen seine Skala, mit schwingender Nadel, benannten Bereichen, aufleuchtenden Stufen, beziffertem Zifferblatt oder als Reihe kleiner Anzeigen. Zeiger und Pfeiltasten lesen jeden Punkt der Skala ab.

Nadel
Bereiche
Stufen
Zifferblatt
Reihe von Anzeigen

Props und Details

Nadel

Ein Halbkreis füllt sich bis zum Wert, die Nadel schwingt ein und kommt zur Ruhe, eine Zielmarke sitzt auf der Skala.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/gauge

Bringt mit utils, kit, icon, chart, chart-figure

Usage

<Gauge variant="needle" value={68} max={100} target={75} unitLabel="Net promoter score" />

Source

Bereiche

Die Skala in benannten Bereichen. Die Nadel nennt den Bereich, in dem sie steht, mit Symbol und Wort, nie nur mit Farbe.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/gauge

Bringt mit utils, kit, icon, chart, chart-figure

Usage

<Gauge variant="zones" value={74} zones={[{ to: 60, label: "Calm", tone: "good" }, { to: 85, label: "Busy", tone: "watch" }, { to: 100, label: "Full", tone: "critical" }]} />

Source

Stufen

Der Bogen in gleichen Stufen, die nacheinander aufleuchten, wenn die Anzeige hereinscrollt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/gauge

Bringt mit utils, kit, icon, chart, chart-figure

Usage

<Gauge variant="segmented" value={7} max={10} segments={10} unitLabel="Profile complete" />

Source

Zifferblatt

Drei Viertel eines Kreises mit bezifferter Skala, Zwischenstrichen und Nadel, wie ein Instrument.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/gauge

Bringt mit utils, kit, icon, chart, chart-figure

Usage

<Gauge variant="dial" value={7.4} max={12} suffix=" kW" />

Source

Reihe von Anzeigen

Kleine Halbkreise in einem Haarlinienraster, je eine Messgröße. Ab drei Vierteln wechselt der Bogen in den Warnton und ein Hinweis sagt warum.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/gauge

Bringt mit utils, kit, icon, chart, chart-figure

Usage

<Gauge variant="row" items={[{ label: "Storage", value: 412, max: 500, note: "412 of 500 GB" }, …]} />

Source

live-chart

Live-Diagramm

Werte, die laufend hereinkommen, als gleitende Linie, wachsende Balken, Ereignisspur mit Liste, Live-Kacheln oder Latenzband mit Grenze. Es hält still, solange du liest, und hat einen Pausenknopf.

Gleitende Linie
Balken je Sekunde
Ereignisspur
Live-Kacheln
Latenzband

Props und Details

Gleitende Linie

Eine Messgröße gleitet jede Sekunde nach links, der neueste Punkt pulsiert und trägt seinen Wert an der Achse.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/live-chart

Bringt mit utils, kit, icon, chart, chart-figure

Usage

<LiveChart variant="line" series={[{ label: "Visitors now", values: last40, min: 20, max: 140 }]} simulate />

Source

Balken je Sekunde

Ein Balken je Sekunde, der neueste im Akzent, ältere treten zurück und gleiten links hinaus.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/live-chart

Bringt mit utils, kit, icon, chart, chart-figure

Usage

<LiveChart variant="bars" series={[{ label: "Requests", values, min: 0, max: 400 }]} simulate />

Source

Ereignisspur

Einzelne Ereignisse als Punkte auf einer laufenden Spur der letzten Minute, ihre Größe der Betrag, die neuesten in einer kurzen Liste darunter.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/live-chart

Bringt mit utils, kit, icon, chart, chart-figure

Usage

<LiveChart variant="events" events={[{ label: "Order #1040", value: 34.9, ago: 12 }]} eventNames={["Order #"]} simulate />

Source

Live-Kacheln

Mehrere Messgrößen als Kacheln in einem Haarlinienraster, jede mit aktuellem Wert, Richtung und einer kleinen gleitenden Linie.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/live-chart

Bringt mit utils, kit, icon, chart, chart-figure

Usage

<LiveChart variant="multi" series={[{ label: "Processor", values, min: 0, max: 100, suffix: " %" }, …]} simulate />

Source

Latenzband

Die typische und die langsame Antwort (p50 und p95) als Band, die Grenze als gestrichelte Linie, aktuelle Werte in der Legende.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/live-chart

Bringt mit utils, kit, icon, chart, chart-figure

Usage

<LiveChart variant="latency" series={[{ label: "p50", values }, { label: "p95", values }]} limit={400} limitLabel="Limit" simulate />

Source

candlestick-chart

Kerzendiagramm

Kurse als Eröffnung, Hoch, Tief und Schluss. Als Kerzen, Kerzen mit Umsatz darunter, mit Zeitraumschalter von einem Monat bis zu einem Jahr oder als OHLC-Balken mit gleitendem Schnitt. Steigende Tage hohl, fallende gefüllt.

Kerzen
Mit Umsatz
Zeitraum wählen
OHLC-Balken

Props und Details

Kerzen

Die letzten neunzig Handelstage, auf dem Telefon vierundvierzig. Das Fadenkreuz findet den Tag, der Schluss steht als Marke an der Achse.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/candlestick-chart

Bringt mit utils, kit, chart, chart-figure

Usage

<CandlestickChart variant="candles" data={[{ date: "2026-10-16", open, high, low, close }]} format={{ style: "currency", currency: "EUR" }} />

Source

Mit Umsatz

Der gehandelte Umsatz in eigenem Feld darunter, auf eigener Skala und denselben Tagen, so gibt es nie eine zweite y-Achse.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/candlestick-chart

Bringt mit utils, kit, chart, chart-figure

Usage

<CandlestickChart variant="with-volume" data={[{ date, open, high, low, close, volume }]} />

Source

Zeitraum wählen

Ein Monat, drei Monate oder ein Jahr. Das Jahr wird zu Wochen zusammengefasst, damit jede Kerze ihren Körper behält.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/candlestick-chart

Bringt mit utils, kit, chart, chart-figure

Usage

<CandlestickChart variant="ranges" data={oneYear} ranges={[{ label: "1M", days: 22 }, { label: "3M", days: 65 }, { label: "1Y", days: 0 }]} />

Source

OHLC-Balken

Eröffnung und Schluss als Striche an einem feinen Balken, ruhiger als Kerzen, dazu ein Schnitt über zwanzig Tage im Akzent.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/candlestick-chart

Bringt mit utils, kit, chart, chart-figure

Usage

<CandlestickChart variant="ohlc" data={…} average={20} />

Source

region-map

Regionenkarte

Werte je Region auf einer gezeichneten Karte der erfundenen Insel Fernland, als getönte Regionen mit Rangliste, Veränderung in zwei Tönen, gleich große Sechsecke oder Kreise nach Größe. Für eine echte Karte eigene SVG-Formen übergeben.

Getönte Regionen
Veränderung
Sechsecke
Kreise nach Größe

Props und Details

Getönte Regionen

Fünf Akzentstufen auf gleichen Klassen, eine Rangliste neben der Karte. Ein Zeiger auf einer Seite hebt dieselbe Region hervor.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/region-map

Bringt mit utils, kit, icon, chart, chart-figure

Usage

<RegionMap variant="regions" regions={[{ id: "r1", label: "Nordheide", value: 42 }, …]} unitLabel="Members per 1,000" />

Source

Veränderung

Plus und Minus in zwei Tönen mit drei Stärken, ein graues Mittelfeld für etwa gleich, Vorzeichen und Pfeil in der Liste.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/region-map

Bringt mit utils, kit, icon, chart, chart-figure

Usage

<RegionMap variant="diverging" regions={[{ id: "r1", label: "Nordheide", value: 18200, change: 0.08 }]} />

Source

Sechsecke

Jede Region als ein Sechseck gleicher Größe, so zählt ein kleiner Bezirk so viel wie ein großer. Name und Wert stehen darin.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/region-map

Bringt mit utils, kit, icon, chart, chart-figure

Usage

<RegionMap variant="hex-tiles" regions={[…]} tiles={{ r1: [1, 0], … }} />

Source

Kreise nach Größe

Kreise, deren Fläche der Wert ist, über einer ruhigen Karte, die größten zuerst gezeichnet, ein Schlüssel für die Größe.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/region-map

Bringt mit utils, kit, icon, chart, chart-figure

Usage

<RegionMap variant="symbols" regions={[{ id: "r6", label: "Fernstadt", value: 1840 }, …]} />

Source

radial-progress

Ringfortschritt

Fortschritt zu einem Ziel als einzelner Ring mit dem Anteil in der Mitte, oder mehrere Ziele als Ringe ineinander.

Einzelner Ring
Ringe ineinander

Props und Details

Einzelner Ring

Ein Ziel je Ring, der Anteil in der Mitte, die absoluten Werte darunter.

Installv1.0.0

aiw add @ai-website/radial-progress

Bringt mit utils, kit, chart

Usage

<RadialProgress label="Monthly goal" data={[{ label: 'Monthly goal', value: 18240, max: 24000 }]} />

Source

Ringe ineinander

Drei Wochenziele in einer Figur, die Legende trägt Werte und Anteile.

Installv1.0.0

aiw add @ai-website/radial-progress

Bringt mit utils, kit, chart

Usage

<RadialProgress label="Goals this week" data={[{ label: 'Consultations', value: 18, max: 20 }, …]} />

Source

sparkline

Sparkline

Ein Diagramm in Wortgröße für Fließtext und Kennzahlen, als Linie, Fläche oder Balken, mit Tooltip und Pfeiltasten.

Im Fließtext
Kennzahlenreihe

Props und Details

Im Fließtext

Sparklines sitzen in der Textzeile und richten sich an ihr aus, jede mit eigenem Namen für Screenreader.

Installv1.0.0

aiw add @ai-website/sparkline

Bringt mit utils, kit, chart

Usage

<p>… 11,874 visits <Sparkline inline width={72} height={20} data={days} xKey="day" label="Visits per day" /> …</p>

Source

Kennzahlenreihe

Vier Kennzahlen, jede mit einer Sparkline über die ganze Breite. Fläche, Linie, Balken und eine ruhige graue Linie.

Installv1.0.0

aiw add @ai-website/sparkline

Bringt mit utils, kit, chart

Usage

<Sparkline data={rows} xKey="month" variant="area" format={{ style: 'currency', currency: 'EUR' }} label="Revenue" />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben KPI-, Live- und Karten-Charts stehen.

Auf dieser Seite

Nadel

Bereiche

Stufen

Zifferblatt

Reihe von Anzeigen

Gleitende Linie

Balken je Sekunde

Ereignisspur

Live-Kacheln

Latenzband

Kerzen

Mit Umsatz

Zeitraum wählen

OHLC-Balken

Getönte Regionen

Veränderung

Sechsecke

Kreise nach Größe

Einzelner Ring

Ringe ineinander

Im Fließtext

Kennzahlenreihe

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit