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 ?

Dna

Are you targeting a specific email client? – Rid

@Rid basically phone clients - iPhone and Android. – Dna

AlphaMail has a feature to generate charts in transactional email (I'm one of the developers). – Myongmyopia

Embedded image charts work well on the majority of clients, as the attachment makes it past some common security filters. You can find a short python implementation here datamakessense.com/… – Goosegog

👋 If you are looking for image based charts for email embedding with (gif) animation support, we've built just that, take a look at image-charts.com – Dhumma

Answer 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.

Marvelofperu

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

Answer 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.

Dhumma

Answer 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!

Presence

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

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

Answer 4

If you're used to building charts in Javascript, rendering large amounts of these charts to images is quite technically involved. You'll need to choose some render service (e.g. a headless browser or canvas implementation) and do a lot of troubleshooting.

I went through this process and released open-source QuickChart, a web API that takes data and generates static images suitable for email. You can see the project here: https://github.com/typpo/quickchart

It's based on the Chart.js API. Given a chart config like this one:

{
  type: 'bar',
  data: {
    labels: [2012, 2013, 2014, 2015, 2016],
    datasets: [{
      label: 'Data',
      data: [12, 6, 5, 18, 12]
    }]
  }
}

Stuff it into a URL: https://quickchart.io/chart?bkg=white&c={ type: 'bar', data: { labels: [2012, 2013, 2014, 2015, 2016], datasets: [{ label: 'Data', data: [12, 6, 5, 18, 12] }] }}

And it will return a static image:

There is a hosted (also free) version at Quickchart.io, but you can run the web service yourself on Docker or directly from source.

Diaeresis

Answer 5

I have another solution and it don't need any external services or JS-library. But this solution has platform dependency (outlook/windows?).

My solution is to use VML. And for drawing pie chart, you can use VML-ARC to achieve it.

In below example, I made a pie chart by two ARC shapes. Those shapes have the same width and height. And the strokeweight is closed to the width (make the shape fat and similar to a pieces of a circle). Then, I setup proper startangle and endangle to those shapes, and then overlapped those shapes by setting their z-index.

<!--[if mso]>
<v:arc xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="top: 50px; left: 50px; width:40pt; height:40pt; position: relative; z-index: 1;" startangle="0" endangle="55" strokecolor="red" strokeweight="38pt"/>
<v:arc xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="top: 50px; left: 50px; width:40pt; height:40pt; position: relative; z-index: 2;" startangle="50" endangle="365" strokecolor="green" strokeweight="38pt"/>
<![endif]-->

It is suggested to add 5 more degrees to the endangle otherwise the pie chart will have some empty zone.

I did not draw bar charts but I think it is quite easy to draw by using VML-RECT.

Asben

Answer 6

Disclaimer: I am founder of Charty

You can try using Charty , which creates interactive charts in seconds and 25+ chart types were supported.

Link: Charty

Wallboard