ProgressRing

A ring showing one percentage against an optional target, with the number inside.

92%of 95%

1<template>2  <ProgressRing :value="92" :target="95" color="var(--color-chart-severity-critical)">3    <span class="heading-02-medium text-text-primary">92%</span>4    <span class="label-02-regular text-text-semantic-error">of 95%</span>5  </ProgressRing>6</template>

Props

Name	Type	Default
value	number \| null	-
target	number	-
color	string	"var(--color-chart-chart-1)"
size	number	96
ariaLabel	string	-
tooltipRows	TrendChartTooltipRow[]	-
tooltipHeading	string	-

Slots

Name	Description
default	Centered inside the ring: the value and, under it, a caption.

Guidelines

Do

Use it for one share of a whole, such as SLA compliance; when there is a target, pass it so the tick says whether the share meets it.
Put the number inside the ring through the default slot, with its caption under it, so the reader never has to read the arc.
Pass a chart token (var(--color-chart-chart-1) or a severity chart color) as color; it is a plain CSS color string.

Pass null as value when there is no data; the track renders empty and the slot can show a dash.
Pass tooltipRows (and a tooltipHeading) so a hover shows the value and the target in the same tooltip panel the other charts use; the ring has no series of its own, so the labels come from the caller.

Don't

Don't use it for task completion or an upload; that is Progress, the linear bar.
Don't rely on the arc alone to carry the state. The tick color and the slot text say whether the target is met; the arc only shows the size.
Don't pass ariaLabel unless the ring says something the slot text does not; with a label, the slot content becomes presentational.

Examples

Target

Within target

The tick keeps the primary text color when the value meets the target.

97%of 90%

1<template>2  <ProgressRing :value="97" :target="90" color="var(--color-chart-severity-high)">3    <span class="heading-02-medium text-text-primary">97%</span>4    <span class="label-02-regular text-text-tertiary">of 90%</span>5  </ProgressRing>6</template>

Without a target

No tick. The ring only shows the share.

64%

1<template>2  <ProgressRing :value="64">3    <span class="heading-02-medium text-text-primary">64%</span>4  </ProgressRing>5</template>

States

No data

A null value renders the empty track and keeps the tick, so the target is still visible.

1<template>2  <ProgressRing :value="null" :target="80">3    <span class="heading-02-medium text-text-tertiary">-</span>4  </ProgressRing>5</template>

Hovering the ring shows the charts' tooltip panel with the rows the caller passes: here the value and the target, headed by the severity.