How to Save a Chart or Dashboard from Claude as an Image
6 October 2026 · 7 minute read
To save a chart from Claude as an image, use Copy as image on a chart drawn inline in the conversation, or get a chart artifact's HTML and render it as a PNG. An inline chart also has a Download option for .svg or .html, but no PNG file. A chart artifact or dashboard has no image export at all, so its HTML (from the artifact's controls, from Share > Export > HTML, or by asking Claude) is the way out. For a sharp PNG at a known size, the HTML route is the one to use for both.
Is your chart an inline visual or an artifact?
It matters because they save differently. Claude has drawn small charts and diagrams straight into its replies since March 2026 (a beta, on the web and desktop apps, not mobile). Larger charts and dashboards come as artifacts, which open in their own panel or page.
| Kind | How to recognise it | Ways to save it |
|---|---|---|
| Inline visual | Drawn inside the reply, in the flow of the chat | Copy as image; Download as .svg or .html; Save as artifact |
| Chat artifact made before 16 Sept 2026 | Opens in a panel beside the chat | Controls at the top of the panel copy or download the code |
| Artifact made since 16 Sept 2026 | Saved in the Artifacts tab in the sidebar | Share > Export > HTML |
| Claude Code artifact | A claude.ai/code/artifact link | No download: ask Claude Code for the HTML file |
| Claude Design artifact | Artboards on a design canvas | PNG at 1x or 2x from each artboard's menu |
Anthropic describes inline visuals as temporary unless you save them, so if a chart matters, download it or use Save as artifact before the conversation moves on.
Which save option gives the sharpest image?
| Route | What you get | Good for | Watch out for |
|---|---|---|---|
| Copy as image | A picture on your clipboard | Pasting into a slide, document or email | Anthropic does not document its resolution, so check it before using it large |
| Download .svg | A vector file that stays sharp at any size | Design tools, documents and web pages | Social platforms do not accept SVG, and text can change font on another computer |
| Download .html | The chart as a small web page | Rendering a PNG at a known size | Needs a render or screenshot step |
| Screenshot | Whatever is on your screen | A quick share in a chat | Screen resolution, and the chat around the chart |
An SVG keeps its text as text. That is why it scales perfectly, and also why a chart can change typeface when it opens on a computer without the same font. A PNG fixes everything as pixels, so it looks the same everywhere; it just needs enough of them, which is what a 2x render gives you.
How do you turn an inline chart into a sharp PNG?
- Download the chart as .html. The file is the chart as a small web page.
- Drop the file on a renderer. Renda's Claude Artifact to PNG page takes the .html file, or the code pasted in.
- Keep Full page and download. A chart page renders at twice its size, so it stays sharp in a full-screen slide and on high-density screens.
If the chart needs a particular shape, such as 1080x1350 for an Instagram post or 16:9 for a slide, ask Claude to redraw it at that size first (the prompt below does this) rather than cropping afterwards. The free alternative is to open the .html file in Chrome and use the full-size screenshot in DevTools; the pixel size then depends on your screen.
How do you save a chart artifact or dashboard as a PNG?
Dashboards are where screenshots fail: the page is taller than your screen and the artifact panel crops it. Get the HTML instead.
- Chat artifact made before 16 September 2026: use the controls at the top of the artifact panel to copy the code or download it.
- Newer artifact: Share, then Export, then HTML.
- Claude Code artifact, or no export option: ask Claude "send me the HTML file for this artifact". In the Claude Code terminal or desktop app, ask it to "save the HTML file for this artifact to my Desktop".
Paste or drop it on the same artifact tool and keep Full page: the whole dashboard comes out as one PNG at its own width, at 2x up to 4,096 pixels tall and 1x up to 8,192. Anything longer is cut at 8,192 pixels, so ask Claude to split a very long report in two. For one tall PDF page instead, pick PDF, fit to design. The guide to saving any Claude artifact as an image covers every artifact type in more detail.
One thing that often fails: asking Claude to add a "Download PNG" button to a Claude Code artifact. Anthropic's artifact documentation says the viewer blocks downloads a page starts itself, including data: and blob: links, unless the page declares a downloads capability that claude.ai enables per account.
Why does my chart come out blank, dark or half-drawn?
Charts are drawn by JavaScript after the page loads, usually with Chart.js, Recharts or D3, and most of them animate in. Four things go wrong.
| What you see | Why | Fix |
|---|---|---|
| Empty or half-drawn bars | The capture came before the animation finished | Ask Claude to turn chart animations off, or say "wait longer" in the artifact tool's chat (Pro or a Render Pack) |
| Dark colours | Some artifacts switch to a dark theme to match your device | Ask for a light background with fixed colours, or say "keep it light" in the same chat |
| Only one view of a dashboard | A render captures the page as it first loads: the first tab, the default filters | Ask for a static version that shows every view at once |
| A blank page, or code instead of a chart | A library failed to load, or React component code was pasted | Ask for a single standalone HTML file with libraries from cdnjs |
The blank artifact troubleshooting guide covers rarer causes, such as images that fail to load and pages cut off at the edge.
How do you ask Claude for a chart that exports cleanly?
Fix the size, the library and the colours in the request, and give the data as exact values so nothing gets rounded or invented.
Make a [bar] chart from this data as a single standalone HTML file, ready to save as an image. Data, exactly these values: [Label 1: 120] [Label 2: 95] [Label 3: 60] - Size: the chart and its title fill exactly [1600x900] pixels (16:9, for a slide). For an Instagram post use [1080x1350]. - Title: [Your chart title]. Axis labels: [x label], [y label]. Write each value on its bar. - Use Chart.js loaded from cdnjs, with animations turned off. - Font: [Inter] from Google Fonts, no smaller than [20px]. - A light background with fixed colours, no dark mode. Bars in [#1F6F4A], text in [#1A1A1A]. - Every number visible without hovering: no information only in tooltips.
At 1600x900, a 2x render gives a 3200x1800 PNG, more than enough for a full-screen slide.
Frequently asked questions
Can Claude give me a PNG file of the chart directly?
Yes, if Cloud code execution and file creation is turned on in Settings > Capabilities. Ask Claude to "plot this data with Python and give me a PNG file". It draws a new chart with a plotting library, so it will not look like the inline version, and Anthropic attaches a content credential to .png files Claude makes in its apps.
Why can't I see Copy as image on my phone?
Inline visuals are a beta on the web and desktop apps, not the mobile apps. Open the conversation on a computer to save the chart.
Can I edit the chart after saving it?
An SVG can be edited in a vector tool such as Figma or Illustrator. A PNG cannot, beyond cropping. It is usually quicker to ask Claude for the change and save the chart again.
Turn your Claude chart into a sharp PNG
Paste the chart's HTML or drop the .html file, and download the whole page as a 2x PNG or a PDF. Five free PNGs a month, with no account and no watermark.
Paste your chart