Chart to PNG

Pick where the chart is going, and the builder sizes it for that place. Paste your data, then download a PNG (sharp at 2x) or an SVG.

Your data

Data format

Paste from a spreadsheet, a CSV file or an API response. The first row (or the keys) name the columns.

12 rows, 3 columns. Comma-separated, first row is the header.

Try a sample:
Reading options

Your data stays in your browser. Nothing you paste is uploaded. Share links carry the data after the #, which browsers never send to a server.

Chart

600 × 300 px

Size
Chart type
Weekly signupsLine chart: New accounts, and accounts that finished setup (sample data). 12 categories, from Jul 6 to Sep 21. Signups: lowest 182 (Jul 6), highest 398 (Sep 21). Activated: lowest 96 (Jul 6), highest 241 (Sep 21). Values: Jul 6: Signups 182, Activated 96; Jul 13: Signups 205, Activated 112; Jul 20: Signups 198, Activated 104; Jul 27: Signups 240, Activated 131; Aug 3: Signups 262, Activated 150; Aug 10: Signups 251, Activated 139; Aug 17: Signups 298, Activated 171; Aug 24: Signups 315, Activated 186; Aug 31: Signups 302, Activated 179; Sep 7: Signups 344, Activated 205; Sep 14: Signups 371, Activated 226; Sep 21: Signups 398, Activated 241.Weekly signupsNew accounts, and accounts that finished setup (sample data)SignupsActivated0100200300400Jul 6Jul 13Jul 20Jul 27Aug 3Aug 10Aug 17Aug 24Aug 31Sep 7Sep 14Sep 21

Export

PNG resolution

Settings

Columns
Series to chart
Titles
Numbers
Style

Which size, for where

The size presets in the builder, and why each one is that size.

Chart sizes by destination
Destination Size (px) Format Why
Email 600 × 300PNG at 2xMost email layouts are 600px wide, and most email apps don’t show SVG. Set width="600" on the image so the 2x file stays sharp.
Slack 800 × 400PNGSlack previews PNG images in the message. An SVG arrives as a file to download.
README 1200 × 600SVG or PNGGitHub shows both. SVG stays sharp when zoomed; outline its text so it doesn’t depend on fonts.
Slide 1600 × 900PNG at 2x, or SVG16:9 fills a slide. Every slide app takes PNG; some, like PowerPoint, also take SVG.
Square 1080 × 1080PNGThe usual size for social posts.

Choices that matter when you export

PNG or SVG

PNG is a picture made of pixels: it works everywhere, but blurs if blown up past its size. SVG is drawn from shapes: sharp at any size and small, but email apps and some chat apps won’t display it.

1x or 2x

High-density screens (most phones and laptops) show two pixels for every pixel in a layout. A 2x PNG has twice the width and height, so it stays crisp when shown at the 1x size. The file also records that it is 2x, so apps that read that note place it at the intended size.

Fonts in SVG

An SVG names its fonts, and the viewer’s computer draws the text with what it has. To look the same everywhere, tick “Outline the text in SVG files” (the text becomes shapes), or use the Plain theme, which uses system fonts on purpose. PNGs always keep the font you see.

Transparent backgrounds

Handy on slides with their own background. In email and chat, check dark mode: dark text on a transparent background can vanish on a dark screen. A solid background is the safe choice there.

Early access

Get a hosted link

Some places can’t run a chart script or take a file upload: email, Slack messages, PDFs, pull request descriptions. A hosted link is a plain image URL that draws your chart when it’s opened.

What it will do:

  • An image URL per chart. Put it in an <img> tag or a Markdown image and the chart shows up, SVG or PNG.
  • Signed. Nobody can change the chart by editing the link.
  • Cached close to readers, so a newsletter sent to thousands loads quickly.
  • The same renderer as this builder, so the link and the file you download look the same.

Not built yet: we’re checking that enough people want it first. Leave your email and we’ll tell you when it opens. Nothing else.

You confirm your address first. Then one email when hosted links open.

What a hosted link could look like (format not final)
![Weekly signups](https://boringutils.com/c/…/weekly-signups.png)

<img src="https://boringutils.com/c/…/weekly-signups.png"
     width="600" height="300" alt="Weekly signups, July to September">

Questions

Short answers to the usual ones.

Anything else: hello@boringutils.com

Should I export PNG or SVG?

PNG for email, chat and anything you are not sure about. SVG for web pages, READMEs and documents where it is supported, because it stays sharp at any size and is usually smaller.

Why is my 2x PNG twice as big as the size I chose?

That is the point of 2x: a 600 × 300 chart exports as 1200 × 600 pixels. Show it at 600 × 300 (for example width="600" in HTML) and it looks sharp on high-density screens. Choose 1x if you need the exact pixel size.

Why does my SVG look different in another app?

The other app may not have the chart’s font, so it substitutes one. Tick “Outline the text in SVG files” before downloading, or pick the Plain theme, which is designed around system fonts.

Can I get a PNG with a transparent background?

Yes: Settings, Style, Transparent background. Check how it looks in dark mode before sending it, since dark text on a transparent background can disappear on dark screens.

Will the chart show up in Outlook and Gmail?

A PNG will, as an ordinary image. SVG is not shown by Gmail or Outlook. Our charts in email guide covers attaching versus linking images, and sizing for both.

How big can the image be?

Custom sizes go up to 3000 × 3000 pixels. At 2x, the browser has to fit the whole image in memory, so very large 2x exports are refused with a message: choose 1x or a smaller size then.