How to Make Charts Understandable to AI With Clear Text Descriptions
To make charts understandable to AI, give every chart three layers of text. First, a sentence in the page that states what the chart shows and its key finding. Second, short alt text identifying the chart. Third, the underlying numbers in an HTML table with headers, units, dates and a source. AI crawlers read text, not pixels. Many chart libraries draw on a canvas element or render with JavaScript, which most AI crawlers cannot see at all. For comparisons, a real HTML table beats an infographic every time. This follows the W3C's accessibility guidance for complex images such as graphs and charts, which calls for a two-part text alternative: a short description and a long one. The same text serves readers who cannot see the chart.
Why can't AI systems read charts on their own?
- Crawlers fetch HTML. Most AI crawlers, including OpenAI's and Anthropic's, do not run JavaScript. A chart drawn by a script, or on an HTML canvas, leaves nothing in the page source for them to read.
- Images are weak evidence. Models can interpret an image they are given, but search pipelines that retrieve passages to answer questions work from text. A chart saved as a PNG is a weak signal: Google says it uses alt text, computer vision and the surrounding page content to understand images, but no AI company documents whether the values inside a chart image are read into answers.
- Numbers need labels. Even when text is extracted from a chart, values without axis labels, units and dates are easy to misread.
The fix is not to stop using charts. It is to state in text what each chart says.
What should each layer say?
1. The takeaway sentence in the page text
Put it directly before or after the chart, as ordinary text:
"Heat pump installations in [region] rose from about 30,000 in 2019 to about 98,000 in 2025, with the fastest growth between 2021 and 2023."
This is the sentence an assistant is most likely to quote. It should contain the main numbers, the time period and the direction.
2. Short alt text
Identify the chart and point to the fuller description:
alt="Line chart of heat pump installations in [region] per year, 2019 to 2025. Data in the table below."
The W3C's example for a bar chart of visitor statistics does the same: it states the chart type, the measures and the period, then leaves the detail to the long description.
3. The long description: an HTML table
| Year | Installations | Change since previous row |
|---|---|---|
| 2019 | 30,000 | — |
| 2021 | 44,000 | +47% |
| 2023 | 67,000 | +52% |
| 2025 | 98,000 | +46% |
Illustrative figures. In a real page, fill the table with your data, state the unit in the header, and name the source below it, for example "Source: [organisation], annual installation statistics, 2026."
Use real table markup with header cells and a caption, not an image of a table or a grid of styled boxes.
HTML tables vs infographic images for AI-readable product comparisons
For product comparisons, choose an HTML table. An infographic comparing three products may look better, but to a crawler it is one image. The prices, features and verdicts inside it are invisible. An HTML table puts every value in the page, labelled by its row and column, where it can be retrieved and quoted accurately.
| Question | HTML table | Infographic image |
|---|---|---|
| Can AI crawlers read the values? | Yes | Only what the alt text says |
| Are values tied to their labels? | Yes, through header cells | No |
| Can it be updated easily? | Yes, edit the text | Needs a redesign |
| Does it work on mobile and with screen readers? | Yes, if marked up properly | Poorly |
| Can assistants quote a single cell accurately? | Yes | Rarely |
If you like the infographic for social sharing, keep it, and put the same data in an HTML table on the page. How to write comparison and product content that AI can match is covered in how to write clear product descriptions that AI can match to buyer queries.
How should the chart itself be built?
- Prefer SVG to canvas for charts on the web. Text inside SVG, such as axis labels and titles, is real text in the page. Canvas is a bitmap.
- If you use a JavaScript chart library, make sure the data table and takeaway sentence are in the server-rendered HTML, not generated by the same script.
- Wrap the chart in a
<figure>with a<figcaption>that states what it shows. - Label axes with units and dates, and title the chart with its subject and period.
- Keep the data source and date visible under the chart.
How long should the description be?
Match it to what the chart carries. A simple chart with one trend needs one takeaway sentence and a small table. A complex chart, such as one comparing several products across many measures, needs a fuller description: what is compared, which option leads on each measure, and any surprising result. Write it for someone who will never see the chart. If the description becomes longer than the chart is useful, the chart may be doing too much. Split it into two simpler charts, each with its own takeaway.
What mistakes are common?
- Alt text that says "chart" or "graph" and nothing else.
- The key finding only in the chart title, inside the image.
- Data tables loaded when a user clicks "show data", which crawlers never trigger.
- Numbers in the text that do not match the chart, after one was updated and the other was not.
- No dates, so assistants cannot tell whether the data is current.
- Missing units, such as "30" when the chart means thousands.
How do you check a chart page?
- View the page source, or fetch it with scripts switched off, and search for the key numbers. If they are not there, most AI crawlers cannot see them.
- Read only the text around the chart. Does it state the finding without the image?
- Ask an assistant a question the chart answers, such as "how many heat pumps were installed in the UK in 2025?", and see whether your page is cited with the right figure.
- Run an accessibility check for missing alt text and table headers.
How to keep content easy for machines without hurting readability is covered in how content can be easy for AI to parse without hurting human readability.
What might an illustrative case look like?
Consider an illustrative energy consultancy whose annual report page showed its findings in eight interactive charts built with a JavaScript library. AI answers to questions about UK commercial energy prices cited a trade association instead, quoting older figures. The page source contained almost no numbers. The consultancy added a takeaway sentence under each chart and a data table with sources and dates, rendered on the server. It also rewrote the alt text. Within six weeks, ChatGPT and Perplexity cited the report for questions on commercial energy price trends and quoted the current figures.
What do people ask about charts and AI?
Do AI models read images of charts?
Some can when an image is given to them directly, but search-based answers rely on page text. Do not depend on image reading.
Should every chart have a full data table?
Every chart with figures someone might quote should. Decorative charts need only a sentence.
Can the data table be collapsed to save space?
Only if it is still in the HTML when the page loads. Tables fetched on click are invisible to crawlers.
Does structured data help for charts?
Not in a documented way. Visible text and tables are what matter.
Published by The Kovmere Team · updated Sep 29, 2026 · More resources