Components Chart
progress
Evidence Canvas Series
Horizontal progress bars — one row per item, percentage filled.
Use for status-tracking across multiple parallel items (project readiness, OKR progress, capacity utilization). Status colors via on-track/at-risk/blocked.
When to use
- Parallel workstreams at a glance. When the audience needs to scan five to eight workstreams and immediately spot the ones in trouble. The bar length carries the magnitude; the status pill carries the verdict.
- Percent-complete is the natural unit. Readiness, OKR progress, capacity utilization, rollout coverage. Any series where each row is a 0–100% completion against its own scale fits the layout. Mixed units belong in
kpi. - Status framing matters as much as the number. Use the
on-track,at-risk,blocked,deferred,donevocabulary — the engine tints the bar fill to match. A 68% bar reads very differently when it isat-riskthan when it ison-track.
When not to use
- Comparing unrelated metrics. Revenue % of target, latency vs SLO, and headcount fill aren't comparable on a shared bar scale. Use
kpifor value/target/status tiles orstatsfor an independent metric row. - More than eight rows. Past eight workstreams the bars compress and the labels truncate. Split the view by owner or workstream group; the audience can't scan twelve bars at once anyway.
- Decorative status pills. Don't invent new status words for tone.
on-track,at-risk,blocked,deferred,doneare the vocabulary the engine recognises; everything else renders as a plain pill and breaks the at-a-glance read.
Slots
| Slot | Selector | Required | Description |
|---|---|---|---|
title | h2 | yes | Slide heading framing the progress view. |
eyebrow | p > code | no | Optional eyebrow caption above the heading. |
subtitle | p | no | Optional plain subtitle after the heading. |
rows | ul > li | yes | One li per item: label text then trailing inline-code pills — percent first, optional status second, e.g. - Adoption 68% at-risk. Status vocabulary: on-track / live / at-risk / warn / blocked / fail / deferred / done. An optional nested bullet renders as a per-row note. |
Anatomy
┌─────────────────────────────────────────┐
│ header │
│ Progress heading. │
│ │
│ Goal A ▓▓▓▓▓▓▓▓▓▓▓▓▓▓70%░░░░░░ │
│ Goal B ▓▓▓▓▓▓▓▓▓▓50%░░░░░░░░░░ │
│ Goal C ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓90%░ │
│ │
│ footer 1/19 │
└─────────────────────────────────────────┘