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

Monthly active users

Monthly active usersBar chart with 2 series (2025, 2026) and 3 categories.0%10%20%30%40%50%JanFebMar
  • 2025
  • 2026
Show data
Month 2025 (%) 2026 (%)
Jan 12 34
Feb 15 41
Mar 18 39
<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

Response timeLine chart with 2 series (API, Site) and 4 categories.300 ms400 ms500 ms600 ms700 msSprint 1Sprint 2Sprint 3Sprint 4
  • API
  • Site
Median over each sprint.
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: bar or line. Required.
  • title: shown above the chart.
  • caption: shown under it, for a source or a one-line takeaway.
  • unit: such as %, $ or ms. 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.