Charts

Pango keeps a logbook, and numbers in a table are precise but hard to feel. A chart makes the shape obvious at a glance. In docolin you do not learn a charting syntax: you write a normal table and add one line.

How it works

Put a { .chart ... } line under a table, on its own line with a blank line between the two (like any Markdown block). docolin draws the chart on top and visually hides the table, but the table stays in the page. That table is the source of truth: the no-JS fallback, the SEO content, the screen-reader view, and what an AI reads. You get the picture without giving up the data.

The first column is the x-axis; every other column is a series named by its header.

Bar

| Month | Ants | Termites || ----- | ---- | -------- || Jan   | 186  | 80       || Feb   | 305  | 200      || Mar   | 237  | 120      |{ .chart type=bar title="Snacks eaten per month" }

The types

Set type= to one of five. The same table works across all of them, so try a couple and keep the one that reads best.

• bar compares values across categories.
• line shows a trend over an ordered axis like time.
• area is a line with the space below it filled, good for volume.
• pie shows parts of a whole, one value column, one slice per row.
• donut is a pie with a hole in the middle.

| Day | Curls | Rolls || --- | ----- | ----- || Mon | 12    | 4     || Tue | 19    | 7     || Wed | 15    | 11    || Thu | 22    | 9     |{ .chart type=line title="Reps over the week" }

For a part-of-whole, use one value column:

| Snack    | Share || -------- | ----- || Ants     | 70    || Termites | 20    || Grubs    | 10    |{ .chart type=donut title="Diet" }

Options

Stack them after type on the same line:

• title="..." captions the chart.
• stacked stacks the series instead of grouping them (bar and area).
• horizontal lays bars on their side, handy for long category names (bar).
• legend=false hides the legend, useful with a single series.

| Time    | Ants | Termites || ------- | ---- | -------- || Morning | 40   | 10       || Midday  | 30   | 25       || Evening | 50   | 15       |{ .chart type=bar stacked title="Foraging by time of day" }

Hidden until revealed

A chart inside a tab or callout starts with no width to measure, so it is drawn the moment you reveal it rather than at load. There is nothing extra to do; it just works.

Gotchas

• The table is the data. Keep it correct and readable on its own; everything the chart shows comes from it, and it is what survives without JavaScript.
• First column is the axis. Put your categories or time steps in column one and your numbers in the rest.
• Pie and donut want one value column. Extra numeric columns are ignored for those types; use bar or line to compare multiple series.
• Numbers, not prose, in value cells. A cell like 1,284 is fine, but about 1k is not a number and won't plot.

See also

• Tables, the foundation every chart is built on.
• Diagrams, for relationships and flows rather than quantities.