Charts
Turn a table of numbers on a Page into a bar or line chart.
Last updated
On this page
A chart on a Page is a Markdown table inside a <Chart> tag. Claude already knows the format, so you can simply ask: "Show the monthly usage as a bar chart."
A bar chart
<Chart type="bar" title="Monthly active users" unit="%">
| Month | 2025 | 2026 |
| ----- | ---- | ---- |
| Jan | 12 | 34 |
| Feb | 15 | 41 |
| Mar | 18 | 39 |
</Chart>
The first column holds the labels along the bottom, shown exactly as written. Each other column is one series, with its header as its name in the legend. Bars start at zero, and negative values hang below the zero line.
A line chart
Response time
- API
- Site
Show data
| Sprint | API (ms) | Site (ms) |
|---|---|---|
| Sprint 1 | 420 | 610 |
| Sprint 2 | 380 | 590 |
| Sprint 3 | 350 | |
| Sprint 4 | 310 | 520 |
<Chart type="line" title="Response time" unit="ms" caption="Median over each sprint.">
| Sprint | API | Site |
| -------- | --- | ---- |
| Sprint 1 | 420 | 610 |
| Sprint 2 | 380 | 590 |
| Sprint 3 | 350 | |
| Sprint 4 | 310 | 520 |
</Chart>
A line chart fits its range to the data instead of starting at zero, so small changes in large numbers stay visible. An empty cell is a gap in the line, not a zero.
Attributes
type:barorline. Required.title: shown above the chart.caption: shown under it, for a source or a one-line takeaway.unit: such as%,$orms. It goes on the value axis and in the table's headers.
Values
A value can have thousands separators (1,234.5), decimals, a minus sign, and %, $, € or £. The table under the chart keeps them as you wrote them. A chart has at most 6 series and 50 rows.
What your client sees
The chart is a picture drawn with the Page, with no scripts, so it has no hover. It scales to a phone's width and follows the light or dark theme. Under it, a closed Show data section holds the table, for exact values and screen readers. When a client prints the Page or saves it as a PDF, the chart prints in black on white, along with its table.
When a chart can't be drawn
If a value isn't a number, the table goes over a limit, or the tag holds anything other than one table, the Page shows the plain table instead. Claude is told why when it saves the Page, so it can fix the data. In the review page's preview, you see the plain table in place of the chart as you type.