How to use Chart.js in emails

Chart.js is a best-in-class library that does a great job rendering charts for the browser. But emails can't contain Javascript, only static HTML. If you want to send emails that contain charts rendered by Chart.js, you'll have to render them as images.

The image requirement means you'll have to jump through a few hoops:

  1. Render the charts on a backend capable of executing Javascript
  2. Upload the rendered chart image
  3. Send the email containing the image

The rendering part is a real bummer. It takes a lot of work to set up a robust render farm that can stay online and process lots of charts efficiently. QuickChart is a web service that takes care of this rendering for you.


You too can render Chart.js in emails.

Using QuickChart to render Chart.js

You can take your existing Chart.js config and send it to QuickChart. The main QuickChart endpoint is https://quickchart.io/chart. Use this as the base URL, then specify some query parameters:

Take this config for example:

{
type: 'bar',
data: {
labels: [2012, 2013, 2014, 2015, 2016],
datasets: [{
label: 'Users',
data: [120, 60, 50, 180, 120]
}]
}
}

Place this config into the URL:

https://quickchart.io/chart?c={type:'bar',data:{labels:[2012,2013,2014,2015,2016],datasets:[{label:'Users',data:[120,60,50,180,120]}]}}

Now, place the URL in an image tag:

<img src="https://quickchart.io/chart?c={type:'bar',data:{labels:[2012,2013,2014,2015,2016],datasets:[{label:'Users',data:[120,60,50,180,120]}]}}" />

And you'll get a chart image:

You can safely embed this chart directly in your email. It doesn't require any Javascript, and anyone with an email client that can show images will be able to see your chart.

For more advanced usage and many other chart types and customization, view the documentation.