Data

Gauge

semantic HTML

Progress toward a bounded target or capacity.

stablefreeSince 0.1.5

Live example

78% of the monthly publishing goal is complete.

<div data-standard-component="gauge" label="Editorial goal" data='{"value":78,"max":100,"label":"78%"}'><p>78% of the monthly publishing goal is complete.</p></div>

Variants and sizes

The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.

compactcomfortableroomy

Public API

Contract	Value
Implementation	`semantic HTML`
Status	`stable`
License	`free`
Since	`0.1.5`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

ECharts SVG visualization with an accessible SSR data-table fallback.

Server template guidance

<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->