Skip to main content

progress Renderer

renderAs: 'progress' renders a numeric value (0–100) as a horizontal filled bar. Use it for completion percentages, SLA indicators, capacity gauges, or any bounded metric.

Core Examples​

Basic Progress Bar​

Completion percentage rendered as a progress bar with percentage label.

Name
Completion
Aurora Chen
78%
Mateo Silva
45%
Priya Nair
100%
{ key: 'completion', renderAs: 'progress', renderAsOptions: { height: '12px', showPercentage: true } }

Dynamic Color and Styling​

color accepts a function receiving the entity — use it to color the bar based on value thresholds. textColor controls the percentage label text color.

SLA bar: green ≥80, amber ≥60, red below. Quota bar: custom purple with white label.

Name
SLA
Quota
Aurora Chen
42%
Mateo Silva
91%
Priya Nair
57%
{
  key: 'sla',
  renderAs: 'progress',
  renderAsOptions: {
    height: '8px',
    showPercentage: false,
    color: (entity) =>
      entity.sla >= 80 ? '#16a34a' : entity.sla >= 60 ? '#d97706' : '#dc2626',
    backgroundColor: '#e5e7eb',
  },
},
{
  key: 'quota',
  renderAs: 'progress',
  renderAsOptions: { height: '16px', showPercentage: true, color: '#6d28d9', textColor: '#ffffff' },
},

Options Reference​

OptionTypeDefaultEffect
heightnumber | CSS string'20px'Height of the bar. Numbers are interpreted as px.
showPercentagebooleantrueShow numeric percentage label inside or beside the bar.
colorstring | (entity) => string'#007bff'Fill color. Accepts a function for per-row dynamic coloring.
backgroundColorstring | (entity) => string'#e9ecef'Track background color.
textColorstring | (entity) => string'#000'Percentage label text color.
classNamestringunsetAdditional CSS class on the root element.

Caveats​

  • Values are clamped to [0, 100]. A value of 150 renders a full bar without error.
  • Non-numeric values render as an empty bar (value treated as 0).
  • For scores with semantic bands (e.g. Critical / Watch / Healthy), use scoreMeter instead — it adds labeled band chips.

See Also​