Email Charts - Bar, Area and Pie Charts

Question

I want to display Charts in my email - Bar, Area, Pie Charts. I tried a few CSS based Charts with inline styles but it still doesnt show up. Which is the best way to display Charts in email.

Are images the only option ?

Answer 1

Disclaimer: I'm Image-Charts founder.

As a indiehacker, I had the same question as you each time I started a new SaaS (rewrite from scratch an image generation backend to then send charts through emails).

That's why I've built a drop-in-replacement for Google Image Charts 👍 and added gif animation on top of it 🚀(chart animations in emails are awesome!!).

It's called Image-charts. No more server-side chart rendering pain, no scaling issues, it's blazing fast, 1 URL = 1 image chart.

Answer 2

Sending HTML email by itself is a tricky job. Various standards and limitations of various mail clients and loads of security restrictions make creating a cross-browser/client HTML email delivery difficult. As a thumb-rule, I feel that the older technology you use, the better it is uniformly reproduced across mail clients. By "older" technology I mean table-driven HTML, inline CSS with very basic CSS attributes, no scripting, etc.

Your possibilities for charts in email:

1. Flash charts - this would be blocked by almost all mail clients.
2. HTML5 charts - most email clients (including web based ones) will block SVG and also would make "canvas"-driven charts useless as JavaScript will definitely be blocked.
3. Pure HTML and CSS charts may work, but since most popular charting libraries use advanced HTML features, most of the charts would not render fine within email.
4. Image based charts - Your best bet would be an image of the chart. Since, inline images are widely sent across email clients, my suggestion would be to generate a chart as image and then include it as a part of your HTML mail. Most charting components (like FusionCharts, Highcharts, etc) allow you to generate charts as image.

In case you intend to use image-based charts and yet want it to be dynamically generated, a good trick would be to create a server-side script, to which you would send data via query-string and it would return the image of a chart generated using this data.

If you have any problem deploying image based charts, then you may think about pure HTML based charts that use simple <table>, <div> and inline CSS to generate charts. Sadly, I do not think there is a readily available component in the market for that.