Stat
Presents one tabular metric with an optional text-labeled directional trend.@gemologic/sheen-charts · dataPlayground
This example has no scalar controls. Its validated source remains interactive below.
- Error rate
- 0.18%
- 0.04 points lower
<Stat label="Error rate" value="0.18%" trend="down" valence="positive" trendLabel="0.04 points lower" />Variant matrix
Improving error rate
- Error rate
- 0.18%
- 0.04 points lower
Utilization with a track
- Utilization
- 65%
Anatomy
- Package
@gemologic/sheen-charts- Source
packages/charts/src/Stat.tsx- Tokens
--sheen-color-fg--sheen-color-fg-muted--sheen-color-success--sheen-color-danger--sheen-text-stat-size--sheen-text-stat-leading--sheen-text-stat-weight--sheen-text-stat-tracking
Accessibility
Role: term and definitionKeyboard: No component-owned keysDo
- State the direction and magnitude in trendLabel.
- Set valence from the metric's meaning; lower errors are positive, higher latency is negative.
Do not
- Do not rely on arrow shape or color to communicate a change.
- Do not infer whether a change is good from its direction.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
label * | string | — | Required visible metric label. |
value * | string | number | — | Nonempty display text or a finite number. |
format | Intl.NumberFormatOptions | — | Optional locale-aware Intl.NumberFormat options; requires a numeric value. Fractions and units use muted text. |
trend | StatTrend | — | Optional directional state; requires trendLabel. |
trendLabel | string | — | Required visible non-color description when trend is supplied. |
valence | import("./chart-types.ts").StatValence | — | Meaning of the change, independent of direction; positive, negative, or neutral. Requires a trend and defaults to neutral. |
visual | JSX.Element | — | Optional supplementary JSX, such as a labeled Sparkline or Meter based on actual data. The text value remains complete. Preserve the visual node when refreshing its data. |
class | string | — | Optional class appended to the component root. |