Diagrams & charts

Mermaid diagrams and Chart.js charts straight from MDX.

Drop a Mermaid diagram or a chart directly into your content. Each library loads only on the pages that use it, so pages without a diagram never pay for one.

Mermaid

graph LR
A[Content] --> B[Astro]
A --> C[Next]
B --> D[HTML]
C --> D

Chart

Write the numbers inline when there are only a few of them:

Charts from a data file

When the numbers live in a file, point <DataChart> at it instead. Drop the file in packages/content/data/ and reference it by name. JSON, YAML, TOML and CSV all work, and all normalise to the same rows.

A file usually holds more than the one series you want to plot, so add a # fragment to select the node, here quarters out of traffic.yml:

The same file renders as a sortable, filterable table with <DataTable>:

Counting rows

Exports often have one row per event rather than pre-totalled numbers. countBy tallies a column, so you can chart a raw export without a spreadsheet step in between:

Only CSV and TSV are read directly. See Working with spreadsheets for converting an Excel workbook in a couple of clicks.