Charts
Data-driven chart types — bar, column, area, line, pie, radial, burndown
ASW ships native charting — semantic <table>
elements with data-chart attributes. No JavaScript. No SVG.
Pure CSS.
Chart types
| Type | Attribute | Use case |
|---|---|---|
| Bar | data-chart="bar" | Horizontal comparison |
| Column | data-chart="column" | Vertical time-series |
| Area | data-chart="area" | Filled trend line |
| Line | data-chart="line" | Trend with data points |
| Pie | data-chart="pie" | Part-to-whole |
| Radial | data-chart="radial" | Single-value gauge |
| Burndown | data-chart="burndown" | Sprint tracking |
Examples
Compositions
- Operational Dashboard — multi-chart agent metrics view
- Radial Gauges — session health with status variants
- Sprint Burndown — sprint tracking with ideal velocity line
- Sprint Report — multi-chart sprint report template
Advanced techniques
- Build Pipeline Metrics — stacked bar (
data-chart-stacked), column with tight spacing, per-row color - Investment Overview — pie chart (
data-chart="pie") with--pie-segments, bar with color overrides - Aerial Survey Data — line chart (
data-chart="line"), area chart, radial gauges - Field Intelligence Report — column + bar with
data-chart-labels, multi-series, area trend - Operation Tracker — stacked column (
data-chart-stacked+data-chart-labels), mission analytics
Reference
See Charts docs for the full attribute reference and modifier list.