Charts and diagrams
Write the numbers as text, and siv draws the chart when it builds the site. Charts are images inside the page: they need no JavaScript, they print, and they follow the visitor's dark mode.
A bar chart # ↑
Write the data in a block named bar. Separate the columns with one tab: the first row names the series, the first column labels the points.
A table copied from a spreadsheet is already tab-separated: paste it as it is. Under each chart, "Data" opens the numbers as a table, for screen readers and for anyone who wants the exact values.
A line chart # ↑
line draws one line for each series. An empty cell is a missing value, a gap in the line:
Data
| Month | 2024 | 2025 |
|---|---|---|
| May | 8,5 | 9,1 |
| Jun | 14,2 | 15,0 |
| Jul | 19,8 | |
| Aug | 18,1 | 20,3 |
Numbers can have a decimal comma, 8,5, and spaces between thousands, 12 000.
A stacked bar chart # ↑
stack puts the series on top of each other, to show the total:
Data
| Season | Day trips | Overnight |
|---|---|---|
| Spring | 120 | 40 |
| Summer | 480 | 210 |
| Autumn | 160 | 50 |
Options # ↑
After the name of the chart:
title="Text" the caption, also read by screen readers
unit=% added to the numbers on the axis: 50%
unit=" °C" quotes keep the space: 20 °C
The series get the colors of a palette that works for color-blind visitors and on dark backgrounds. To change a color, add to templates/layout.css:
}
A mistake in the data, like a word where a number should be, stops the build. The error tells the line to fix.
Sequence diagrams # ↑
A sequence block shows messages going back and forth, top to bottom:
Steps
- Browser → Server: GET /charts/
- Server → Server: find the file
- Server → Browser: 200 OK
-> is a message and --> a reply, drawn dashed. The participants are drawn in the order they first appear. Lines starting with # are comments. "Steps" opens the messages as a numbered list.
A table instead # ↑
A tsv block becomes a table instead of a chart: Tables.