11. Components: charts.css
Chart containers for bars, donut rings, sparklines, and legends. Sizing comes from inline CSS custom properties on each element. Static charts do not need JS.
Use for
Use these for dashboard metrics, status breakdowns, allocation bars, inline table sparklines, and app-shell visualizations that do not need a separate report.
Keep it simple
These patterns work best with 1 to 2 data series. For complex multi-series charts, scatter plots, or live-updating data, use a charting library and apply .la-chart-wrap as the container. Token colors will carry through to rendered content.
Bar chart
.la-bar-chart uses a bottom-aligned flex row. Each .la-bar-col holds a .la-bar and an optional .la-bar-label. Set the bar height with style="--h: 72%". Add data-value="12" to show a CSS-only hover tooltip.
.la-chart-wrap .la-bar-chart .la-bar-col .la-bar[data-value] .la-bar-label
Deployments this week
All environments · May 2026
.la-bar--2: secondary series
Pass vs. fail
CI pipeline runs by day
Horizontal bar
.la-hbar-chart stacks labeled rows. Each .la-hbar-row uses three columns: label, track, and value. Set fill width with style="--w: 72%" on .la-hbar-fill. Use fill modifiers (--danger, --warning, --success) when the value represents status.
.la-hbar-chart .la-hbar-row .la-hbar-label .la-hbar-track .la-hbar-fill .la-hbar-value
Test coverage by service
Last scan · 14 May 2026
Queue depth by team
Open items right now
Donut / ring chart
.la-donut uses conic-gradient to draw the fill. Set the filled percentage with style="--p: 78" (0 to 100). Nest .la-donut-center inside for the label. The --sm and --xs modifiers provide smaller rings for tight spaces.
.la-donut[style="--p: N"] .la-donut-center .la-donut-value .la-donut-label
Pass rate
Sizes
Default (128px)
--sm (80px)
--xs (36px)
Deployment outcomes
Line chart
For line and area charts, render an inline <svg> and apply .la-sparkline-line and .la-sparkline-area to the path elements. The wrapper, title, legend, and grid lines use the same CSS classes as the other chart types.
.la-chart-wrap with inline SVG using .la-sparkline-line and .la-sparkline-area
Weekly deployments
Rolling 8 weeks
Sparklines
.la-sparkline is a small inline SVG. Apply .la-sparkline-line to the <polyline> and .la-sparkline-area to the fill <polygon>. Sparklines work best in table cells or stat rows to show directional trend without overwhelming a data-dense layout.
.la-sparkline inline in a metrics table
| Service | Avg response | Trend (8 days) | Error rate | Trend (8 days) |
|---|---|---|---|---|
| API Gateway | 142 ms | 0.4% | ||
| Auth Service | 89 ms | 0.1% | ||
| Data Pipeline | 1.2 s | 2.8% | ||
| Worker Queue | 310 ms | 0.9% |
Legend
.la-chart-legend is a flex row of swatch and label pairs. Add .la-chart-legend--stack for a vertical list. Each .la-chart-legend-dot has modifier classes for chart and status colors.
.la-chart-legend .la-chart-legend-item .la-chart-legend-dot .la-chart-legend-label
Horizontal row
Stacked column
Stat cards with charts
Place a KPI metric with a mini chart inside a .la-card or .la-chart-wrap. Use .la-donut--sm or a compact bar chart next to a headline number. This works well in dashboard summary rows.
KPI stat cards: metric + mini chart
Total deployments
1,284
↑ 14% vs last month
Avg. build time
4m 12s
↓ 8% vs last week
Pipeline failures
38
↑ 3 since yesterday
Coverage delta
+2.4%
vs previous sprint
Empty state
When there is no data, use .la-chart-empty inside the chart wrapper. Keep the message short and specific.
.la-chart-empty .la-chart-empty-icon
Deployments this month
Coverage over time