asw/content/docs/charts.md

---
title: "Charts"
description: "Data-driven charts from semantic HTML tables using the data-chart attribute vocabulary. Absorbed from Charts.css."
type: docs
weight: 80
date: 2026-04-09
tags: ["charts", "css", "reference"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-5"
ai-provider: "Anthropic"

---

ASW includes a chart layer (`06-charts.css`) absorbed from [Charts.css](https://chartscss.org/) (MIT), with the class-based API converted to data-attributes. Charts are pure CSS — no JavaScript, no Canvas, no SVG.

The data source is a standard `<table>`. CSS turns it into a chart.

---

## How data binding works

Each `<td>` carries a `--size` CSS custom property via `style` attribute. This is the **one place** ASW permits inline styles — `style="--size: 0.8"` is data injection (a numeric value binding), not presentational styling.

```
--size: 0.0   →   0%
--size: 0.5   →   50%
--size: 1.0   →   100%
```

---

## Bar chart

Horizontal bars. Each row is one bar.

```html
<table data-chart="bar">
  <caption>Token budget usage</caption>
  <tbody>
    <tr>
      <th scope="row">Wake</th>
      <td style="--size: 0.15">15%</td>
    </tr>
    <tr>
      <th scope="row">Research</th>
      <td style="--size: 0.62">62%</td>
    </tr>
    <tr>
      <th scope="row">Output</th>
      <td style="--size: 0.23">23%</td>
    </tr>
  </tbody>
</table>
```

---

## Column chart

Vertical bars. Each `<td>` is one column.

```html
<table data-chart="column">
  <caption>Sessions per day</caption>
  <tbody>
    <tr>
      <td style="--size: 0.4">Mon</td>
      <td style="--size: 0.7">Tue</td>
      <td style="--size: 0.55">Wed</td>
      <td style="--size: 0.9">Thu</td>
      <td style="--size: 0.3">Fri</td>
    </tr>
  </tbody>
</table>
```

---

## Line chart

Connects data points with a line. Requires two `<td>` values per point: `--start` and `--end`.

```html
<table data-chart="line">
  <caption>Uptime trend</caption>
  <tbody>
    <tr>
      <td style="--start: 0.6; --end: 0.75"></td>
      <td style="--start: 0.75; --end: 0.8"></td>
      <td style="--start: 0.8; --end: 0.95"></td>
      <td style="--start: 0.95; --end: 0.98"></td>
    </tr>
  </tbody>
</table>
```

---

## Area chart

Like a line chart but with the area beneath filled.

```html
<table data-chart="area">
  <caption>Memory usage</caption>
  <tbody>
    <tr>
      <td style="--start: 0.2; --end: 0.35"></td>
      <td style="--start: 0.35; --end: 0.5"></td>
      <td style="--start: 0.5; --end: 0.4"></td>
      <td style="--start: 0.4; --end: 0.6"></td>
    </tr>
  </tbody>
</table>
```

---

## Axis labels

Add `data-chart-labels` to show `<thead>` column labels as axis labels.

```html
<table data-chart="column" data-chart-labels>
  <thead>
    <tr>
      <th scope="col">Mon</th>
      <th scope="col">Tue</th>
      <th scope="col">Wed</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="--size: 0.4">40%</td>
      <td style="--size: 0.7">70%</td>
      <td style="--size: 0.55">55%</td>
    </tr>
  </tbody>
</table>
```

---

## Bar spacing

Control gap between bars with `data-chart-spacing="1"` through `"5"` (default is `2`).

```html
<table data-chart="bar" data-chart-spacing="4">
  ...
</table>
```

---

## Stacked charts

Multi-dataset mode. Each `<tr>` in `<tbody>` becomes a dataset (one colour per row).

```html
<table data-chart="column" data-chart-stacked>
  <caption>Token usage by phase</caption>
  <tbody>
    <tr style="--color: var(--accent)">
      <td style="--size: 0.3"></td>
      <td style="--size: 0.4"></td>
      <td style="--size: 0.25"></td>
    </tr>
    <tr style="--color: var(--accent-blue)">
      <td style="--size: 0.2"></td>
      <td style="--size: 0.15"></td>
      <td style="--size: 0.3"></td>
    </tr>
  </tbody>
</table>
```

---

## Custom colours

Override the default colour cycle with `style="--color: ..."` on any `<tr>`.

```html
<tr style="--color: var(--accent-red)">
  <td style="--size: 0.85">Error rate</td>
</tr>
```

Default colour cycle (8 slots): accent → blue → orange → red → purple → cyan → pink → teal.

---

## Customising chart dimensions

Override chart size tokens on the `[data-chart]` element:

```html
<table data-chart="column" style="
  --chart-height: 300px;
  --chart-bar-size: 3rem;
  --chart-gap: 8px;
">
```

| Token | Default | Description |
|-------|---------|-------------|
| `--chart-height` | `200px` | Column chart area height |
| `--chart-bar-size` | `2rem` | Column bar width / bar chart bar height |
| `--chart-gap` | `6px` | Gap between data points |

---

## Related

- [Token System](/docs/tokens/) — colour tokens used by the chart colour cycle (`--accent`, `--accent-blue`, etc.)
- [Data Attributes](/docs/data-attributes/) — the broader `data-*` vocabulary of which `data-chart` is a part