Skip to content
UI Kit
Accent color

KPI, live and map charts

Gauges, progress rings and sparklines for key numbers, data that keeps arriving, price candles and values by region on a map.

6 components · 22 variants
Switch category

On this page

Every component of this category. Pick one to jump to its variants.

gauge

Gauge

One value against its scale, with a swinging needle, named zones, lighting steps, a numbered dial or as a row of small gauges. The pointer and the arrow keys read any point of the scale.

Props and details · Gauge

Needle

A half circle fills to the value while the needle swings in and settles, a target mark sits on the scale.

Open in Studio

Zones

The scale in named ranges. The needle names the range it stands in, with an icon and a word, never color alone.

Open in Studio

Steps

The arc in equal steps that light up one after another as the gauge scrolls in.

Open in Studio

Dial

Three quarters of a circle with a numbered scale, minor ticks and the needle, like an instrument.

Open in Studio

Row of gauges

Small half circles in a hairline grid, one measure each. Above three quarters the arc turns to the warning tone and a note says why.

Open in Studio

live-chart

Live chart

Values that keep coming in, as a sliding line, growing bars, an event track with a feed, live tiles or a latency band with a limit. It holds still while you read and has a pause button.

Props and details · Live chart

Sliding line

One measure slides left every second, the newest point pulses and carries its value on the axis.

Open in Studio

Bars per second

One bar per second, the newest in the accent, older bars step back and slide out on the left.

Open in Studio

Event track

Single events as dots on a running track of the last minute, their size the amount, the newest in a short feed below.

Open in Studio

Live tiles

Several measures as tiles in a hairline grid, each with its current value, its direction and a small sliding line.

Open in Studio

Latency band

The typical and the slow response (p50 and p95) as a band, the limit as a dashed line, current values in the legend.

Open in Studio

candlestick-chart

Candlestick chart

Prices as open, high, low and close. As candles, candles with volume below, a range switch from one month to a year, or OHLC bars with a moving average. Rising days hollow, falling days filled.

Props and details · Candlestick chart

Candles

The last ninety trading days, forty-four on phones. The crosshair finds the day, the close sits as a tag on the axis.

Open in Studio

With volume

The traded volume in its own panel below, on its own scale and the same days, so there is never a second y axis.

Open in Studio

Range switch

One month, three months or a year. The year folds into weeks, so every candle keeps its body.

Open in Studio

OHLC bars

Open and close as ticks on a thin bar, quieter than candles, with a twenty day average drawn in the accent.

Open in Studio

region-map

Region map

Values per region on a drawn map of the invented island Fernland, as tinted regions with a ranked list, change in two tones, equal hex tiles or sized circles. Pass your own SVG shapes for a real map.

Props and details · Region map

Tinted regions

Five accent steps on equal bins, a ranked list beside the map. Pointing at either lights up the same region.

Open in Studio

Change

Gains and losses in two tones of three strengths, a grey middle for about the same, sign and arrow in the list.

Open in Studio

Hex tiles

Every region as one hexagon of the same size, so a small district counts as much as a large one. Name and value inside.

Open in Studio

Sized circles

Circles whose area is the value over a quiet map, the largest drawn first, a key for the size.

Open in Studio

radial-progress

Radial progress

Progress towards a goal as a single ring with the share in the middle, or several goals as concentric rings.

Props and details · Radial progress

Single ring

One goal per ring, the share in the middle, the absolute values below.

Concentric rings

Three weekly goals in one figure, the legend carries values and shares.

sparkline

Sparkline

A word-sized chart for running text and stat tiles, as line, area or bars, with tooltip and arrow keys.

Props and details · Sparkline

Inline in text

Sparklines sit in the line of text and align with it, every one with its own accessible name.

KPI row

Four stat tiles, each with a sparkline that fills the tile. Area, line, bars and a quiet grey line.

Similar components

More from Elements, the same area of the kit.

Often combined with

Sections that usually sit next to KPI, live and map charts on a page.

Often searched

Jump to

Copied to the clipboard