# Charts
A chart is the table of its numbers, drawn: columns stacked by day, a sparkline of the last runs, a board of lanes over the next hours. The numbers stay in the page as text, so a screen reader reads the table; a small script only hands them to the stylesheet.
## A package of the release
Charts are linked apart, on the screens that show them, beside the two files: `css/redz-ui-charts.min.css` draws, and `js/redz-ui-charts.min.js` hands it the numbers - every `data-v`, `data-at`, `data-from`, `data-to`, `data-median` and `data-now` becomes a custom property through the CSSOM, which a strict CSP allows where it would refuse a `style` attribute. A number is a share, 0 to 1: a value over the largest, a time over the window.
```html
```
## Columns by day
`table class="chart"`: its `caption` is the title, the header cells after the first are the series and draw as the legend, and each row is a day - `th scope="row"` its label, each `td` a segment whose `data-v` is its share of the tallest day, stacked from the first up. The series take eight colors in order, `--redz-chart-1` to `-8`, chosen to stay apart for color-blind eyes in both themes; `data-tone` gives a segment a state's color instead. A row's `title` is its tooltip, a row with `data-empty` a stub on the axis, and a label wrapped in `visually-hidden` is read, not shown - label every few days when there are many. `--redz-chart-height` sets the height, 10rem by default; ninety days fit a card 700 px wide.
```html
Messages sent per day
Day
Free
Paid
Failed
Nov 1
120
30
4
Nov 2
132
28
2
Nov 3
98
41
6
Nov 4
0
0
0
Nov 5
144
35
3
Nov 6
160
22
1
Nov 7
110
30
9
Nov 8
90
25
2
Nov 9
0
0
0
Nov 10
150
40
5
Nov 11
170
12
0
Nov 12
125
33
4
Nov 13
140
29
3
Nov 14
155
31
2
```
Series without a tone take the chart colors by their column.
```html
Bookings by channel, this week
Day
Site
Partners
Walk-in
Mon
12
5
3
Tue
15
6
2
Wed
9
8
4
Thu
18
4
1
Fri
22
9
5
Sat
30
12
6
Sun
26
10
7
```
`chart-values` writes each column's number above it - for one series and a few columns, where the numbers are what a person reads.
```html
Guests per month
Month
Guests
Jul
220
Aug
280
Sep
180
Oct
240
Nov
340
Dec
400
```
## Shares of a whole
`chart-bar` with `chart` draws one row as a single bar across: each segment's `data-v` is its share of the whole, and the legend under it names the series - write the share in the legend's words too. The bar is 12 px thick; `--redz-chart-bar-height` sets another.
```html
Payments in November
Method
Card, 58%
PromptPay, 31%
Cash, 11%
November
58%
31%
11%
```
`table class="chart-rows"` breaks a whole into rows, longest first: each `tr` a label, its count and its share in words, and a bar under them whose length is the row's `data-v`. The header cells name the columns for a screen reader and are hidden from sight. The bars take the first chart color; a row's `data-tone` gives it a state's.
```html
Where bookings came from
Source
Bookings
Share
Search
182
52%
Partners
94
27%
Social networks
49
14%
Other
25
7%
```
## Sparklines
`span class="spark"` with `role="img"` and its summary in `aria-label` draws one bar per run, oldest first: `data-v` its share of the longest, `data-state` - `ok`, `running`, `timeout`, `failed` - its color, `title` its tooltip. 18 px high in a row, `spark-md` 34 px, `spark-lg` 64 px; `spark-median` with `data-median` draws the median as a dashed line.
```html
Agent
Last 20 runs
backup.nightly
Median 1.2 s · longest 3.9 s
```
## A board of lanes
`table class="lanes"` lays a time window across: a header cell `lanes-scale` holds the captions, each at its `data-at`, and each row is a lane - its name in the `th`, which may hold a button, and its track in the `td`. In a track `lanes-tick` marks a run at `data-at`, `lanes-tick-once` a single one, and `lanes-span` from `data-from` to `data-to` a run that goes on, hatched, with its caption. The red line is now, at the table's `data-now` - 0, the start, by default; the grid has `--redz-lanes-steps` parts, 8. A caption that would touch the one before it hides, in any language and at any width. Elements that share a [`data-highlight`](table.md#table-highlight) key light together: a lane, its track included, and its row in a table.
```html
The next 24 hours
now18:0021:0000:0003:0006:0009:0012:0015:00
mail.queue
continuous
backup.nightly
fx.rates
Agent
Next run
mail.queue
Every minute
backup.nightly
02:00
fx.rates
16:00
```
## Accessibility
- A chart is its table: the caption names it, the header cells name the series, each row says its day and its numbers. `charts.js` gives a `chart` or `chart-rows` table the table's roles, since WebKit drops them once CSS lays the table out otherwise.
- A share bar and breakdown rows say their shares in words - the legend's, the rows' - and the bar repeats them.
- A color never speaks alone: the legend names every series, a state's segment is named by its header cell, and a sparkline's summary is its name.
- Three of the light theme's series colors are under 3:1 against the page: the legend and the table are what tell them apart.
- In forced colors every bar is drawn in the text color; the numbers are in the table.