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 ?

Solution 1

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.

Solution 2

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.

Solution 3

3.5 years late, but my team at Ramen recently spun out some internal functionality into a standalone product that does just this: https://ChartURL.com

You can generate charts on the fly using an "Encrypted URL" scheme, or you can send us huge amounts of data and we return a Short URL that'll resolve to an image.

There is a free tier, but once you get over a few hundred images per month, we'll ask you to start paying. We've really strived to make the pricing as friendly as possible, though. So it should be a no-brainer if the use case is critical to your business.

It was built on top of http://C3js.org so there's a ton of flexibility in what you can generate.

These URLs can be used in web apps & mobile apps, but the original intent was email charts so I hope this helps!

Comments

[Ryan Hamilton]

For reliability image based charts are probably still the preferred option. You can generate charts from the command line using sqlchart sqldashboards.com/sqlchart

[Zoot]

Good answer, but note that although there is a free tier, this is (for the most part) a product that you pay to use.

[Ryan Angilly]

Yeah good point @zoot I'll edit the answer to reflect that more clearly.