How do I put a chart in an email that survives Outlook and Gmail?

You cannot embed an interactive chart in an email. Gmail, Outlook, Apple Mail and the rest strip JavaScript and iframes before they render a message, and most strip SVG too, so anything that depends on running code in the reader's client is removed. The working pattern is a static image in the body that links through to the interactive version on the web.

That is the opposite of the answer for every content management system. In WordPress or Ghost the job is getting an iframe past the editor intact. In email there is no iframe to get past anything, and the work moves entirely into making one image carry the argument. Finance charts fail at that in a handful of specific ways.

Freeze the image, do not hotlink a live chart

This is the one that quietly does damage, and it is specific to charts of live data. It is tempting to point the image tag at a URL that renders your chart on request, so the chart is always current. In a web page that is a feature. In an email it is a defect, because an email is a dated document and it does not stop existing when the data moves.

Send a note in March saying the curve inverted, with a hotlinked image, and by June the sentence still reads "the curve inverted" above a picture of a curve that no longer is. Nothing errored. The archive on your site now shows it too. Anyone who reads back through your last six months sees six months of prose describing charts that have all silently updated to today.

So render the image at send time and host that file at its own stable URL, one per send. The link underneath is what carries the reader to the live version, and it is honest about doing so: the picture is what the data looked like when you wrote, the link is what it looks like now. Say that in the caption and the reader will understand the chart better than a live image would have let them.

Make it legible at 600 pixels

Email bodies are narrow, and around 600 pixels is the width most templates settle on. Phones are narrower still. That budget does not fit what finance charts habitually put on a page: a forty-row options chain, a rotatable volatility surface, a twelve-series legend. Shrink one of those to fit an inbox and it becomes texture.

Choose a chart that reads small, then cut it further. One or two series, direct labels on the lines rather than a legend, larger type than feels right on a desktop screen, and axis labels you could read at arm's length. If the point needs the full grid, the email is not the place for the grid. Put the summary view in the message and let the link carry the detail.

Export at twice the display size and set the width attribute to the intended one, or the chart will look soft on every high-density screen it lands on.

Assume the images are switched off

Plenty of readers, and plenty of corporate mail configurations, block remote images until someone clicks to load them. Those readers see your alt text and nothing else, which makes alt text the second version of the chart rather than an accessibility checkbox.

"Chart of two-year and ten-year Treasury yields" tells a reader with images off precisely nothing. "Two-year yield 30bp above the ten-year, the widest since March" tells them the whole point. Write the alt text as the sentence you would have written if you had no chart at all.

For the same reason, put the number that matters in the body copy as text too. Text survives image blocking, forwarding, screen readers and the reader who is skimming on a phone and never waits for anything to load.

Dark mode, and the transparent background trap

Several clients recolour message backgrounds in dark mode. A PNG exported with a transparent background inherits whatever they choose, so a chart drawn with dark grey axis labels and no fill can arrive as dark grey text on a near-black panel. Export on an opaque background you have chosen yourself, and the chart looks the same everywhere regardless of what the client does around it.

Send yourself the message and read it in at least Gmail on a phone and Outlook on a desktop before it goes to a list. Those two disagree with each other often enough to be worth the two minutes.

Where the interactive version lives

If you publish a newsletter, the image-plus-link pattern is not a workaround, it is the design. It is exactly what Substack forces on you, since it allows no custom iframes at all. Platforms like Beehiiv and Ghost accept iframes on the web version of a post while the emailed version still arrives as an image, so the same post has two forms and you should check both.

Quadesto publishes each chart as both an interactive view at a stable link and a static image, which is the pair this pattern needs: the PNG goes in the email, the link goes under it, and the reader who wants to slice the data can.

[QUADESTO-EMBED: the same yield curve chart shown twice, as the 600px email PNG and as the interactive view it links to]

Build the chart once and take the image and the link from it.