CSS-only data visualization components for admin dashboards. Progress bars, rings, gauges, heatmaps, sparklines, and more.
1. Progress Bars
Horizontal progress indicators with size, color, striped, and animated variants.
Default (with labels)
Color Variants
Sizes
Striped & Animated
Rounded (Pill)
2. Stacked Bars
Multiple colored segments in one bar showing breakdowns and distributions.
Disk Usage (256 GB)
Browser Market Share
3. Progress Rings
Circular progress indicators using CSS conic-gradient. Set value via style="--value: 72" (0-100).
Color Variants
Sizes
4. Dashboard Gauges
Semi-circle gauge indicators. Set value via style="--value: 72" (0-100). v2.7.0 rebuilt the gauge as a true transparent ring — label moved out of the donut, sits below alongside __min and __max.
Size override · v2.7.0 :size attr
New :size attr emits --pa-gauge-size inline (default upstream 12rem). Width and height (always half the width) both derive from this token. Text inside the donut doesn't auto-scale — set font-size on .pa-gauge__value in your stylesheet for proportional resizing.
5. Data Bars in Tables
Inline bar visualization inside table cells for quick comparison.
| # | Sales Rep | Revenue | Performance | Target | Status |
|---|---|---|---|---|---|
| 1 | Sarah Chen | $142,500 | 95% | On Track | |
| 2 | James Wilson | $128,300 | 85% | On Track | |
| 3 | Maria Garcia | $98,700 | 66% | At Risk | |
| 4 | Tom Baker | $76,200 | 51% | Behind | |
| 5 | Lisa Park | $112,900 | 75% | Steady |
6. Activity Heatmap
GitHub contribution-style activity grid. Each cell uses data-level="0-4" for intensity.
Contribution Activity (12 weeks)
Color Variant (Success)
7. Sparkline Bars
Compact mini bar charts for inline data visualization inside cards or table cells.
8. Combined: KPI Dashboard
Real-world example combining stat cards, progress rings, sparklines, and data bars.