Why do JavaScript charts not work in email?
Mail clients strip script tags and sandbox the message body, so anything that has to execute never runs. A pre-rendered image needs nothing but an img tag.
Charts that survive an email client
Mail clients strip scripts and block most remote styling, which is why a JavaScript chart never appears in an inbox. An image does. A PlotLark chart is an ordinary image URL, so the tag you already know is the whole integration.
- Plain <img>, no scripts
- Explicit width and height
- Alt text that carries the number
HTML
<img src="https://www.plotlark.com/api/chart?type=bar&title=Weekly+active+accounts&labels=W1%2CW2%2CW3%2CW4&values=1240%2C1385%2C1502%2C1710&width=600&height=320&color=%23ff7b5c&background=%23ffffff&grid=true&valuesOn=true" alt="Weekly active accounts" width="600" height="320" />URL
https://www.plotlark.com/api/chart?type=bar&title=Weekly+active+accounts&labels=W1%2CW2%2CW3%2CW4&values=1240%2C1385%2C1502%2C1710&width=600&height=320&color=%23ff7b5c&background=%23ffffff&grid=true&valuesOn=trueNo account and no key needed for these requests. Swap /api/chart for / to reopen the same configuration in the studio.
Writing the tag
- Use an absolute https URL
- Relative paths have no meaning inside a mail client. The copied snippet already contains the full address.
- Set width and height
- Explicit attributes reserve the space before the image arrives, which stops the layout jumping and keeps the chart from being stretched by a client's default styling.
- Write real alt text
- Describe the trend and the headline number, not the file. Alt text is what a screen reader announces and what many recipients see before images load.
Design for a blocked image
Many clients hide remote images until the reader asks for them. Plan for the version of the email where the chart never appears.
- Keep the number in the copy
- Put the figure the chart makes in the surrounding sentence. The chart should confirm the point, not be the only place it exists.
- Choose a solid background
- Charts render on a six-digit hex background of your choosing and are not theme aware, so pick one colour that reads well against both light and dark inbox themes.
- Prefer PNG for the widest support
- Add format=png when a campaign has to look identical everywhere. SVG is smaller and sharper, but a few clients still refuse it.
Sending the same chart twice
- Save it first
- A saved chart gets a short stable URL. Correcting the numbers updates every message that already points at it, allowing for the five-minute cache window and whatever your recipients' mail providers have already cached.
- Expect the counter to undercount
- Mail providers cache and proxy images aggressively, so the visible origin-render count is a floor, not an open rate.
What PlotLark does not do
These limits apply before you start, so nothing on this page promises more than the renderer delivers.
- One non-negative numeric series per chart, from 1 to 12 points.
- Bar, line, area, and donut. No stacked, dual-axis, or time-series grammar.
- 320–1600 px wide and 240–1200 px tall, on a solid six-digit hex background.
- Anonymous rendering is capped at 60 origin requests a minute per address.
Common questions
Should I send SVG or PNG in an email?
PNG has the broadest client support and is the safer default for a campaign. SVG is smaller and sharper where you know the client renders it.
Can I update a chart after the email is sent?
Yes, if you used a saved stable URL. Editing the chart changes what that URL renders, so unopened messages show the corrected image. A self-describing request URL is fixed once it has been sent.