score:22

Accepted answer

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.

score:-1

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

score:0

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:

Chart image for email

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

score: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!

score:4

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.

enter image description here

enter image description here

enter image description here

enter image description here


Related Query

More Query from same tag