Modern SaaS applications are loaded with impressive data visualizations. For years, in my role as the head of a product design agency, I helped clients design new dashboards for their products with every imaginable type of chart: line charts, bar charts, radar charts, heatmaps, you name it. And there's an incredible amount of tooling out there for generating dynamic charts in your web apps. There are libraries like ChartJS that make it easy to get something stood up quickly, and D3 for the hardcore, custom data visualizations, and Apache eCharts (which we use under the hood at ChartJuice) that live somewhere in between.
But if you want to bring these charts into an environment that doesn't support JavaScript, you've got an uphill battle on your hands. For things like automated email reports, Slackbots, and dynamically generated PDFs generating a usable chart with custom data is still a challenge. You've got to:
All of that can suck up valuable time from your development team, time that could be spent on other features that move the needle. Not to mention, every time you want to make tweaks to the charts you've got to update all of your code.
That's why we built the ChartJuice image charts API.
With the ChartJuice image API generating a custom chart image with unique data becomes a breeze.
The image charts API will take this:
<img src='https://img.chartjuice.com/api/render?data=[["Aug 2",120],["Aug 3",200],["Aug 4",150],["Aug 5",100],["Aug 6",70],["Aug 7",110],["Aug 8",130]]&chart=589059a1-9df7-4696-bfb6-a8c643889274' />
And return this (this is a live example of the API in use):
The image API endpoint is:
img.chartjuice.com/api/render
The image API provides several simple parameters you can use to customize your chart image.
data
: The data you want to include in your chart image. Enclose each individual data pair in brackets like ["Aug 2",120] then separate the pairs with commas and enclose the entire lists in an additional set of brackets.
[["Aug 2",120],["Aug 3",200],["Aug 4",150],["Aug 5",100],["Aug 6",70],["Aug 7",110],["Aug 8",130]]
chart
: The id of your ChartJuice chart. Get this from the URL of the web app or by clicking the embed button.
type
: The file type for your image chart response in lowercase. Supported file types include: png, svg, jpeg, tiff, webp, gif. Defaults to png if no type is included.
Every time you or your users hit the API to generate an image that counts as one image credit towards your account limit. The number of monthly limits you get depends on which pricing tier you sign up for. Note: certain email providers load remote images every time the user opens the email, which can result in more credits being used. If you're interested in an alternative API endpoint to generate the image once and store it on our servers, email us at [email protected].
If you go over your credit limit by a small amount once or twice, no big deal. We monitor limits, but we don't currently employ hard cut offs. However, if you are consistently going over your limits, we'll reach out to you to talk to you about upgrading your account.
If you are using our render endpoint, then we act as a passthrough. No customer data is stored on any of our servers, and we won't impact your compliance in any way. This changes if you want us to store images on our servers.
The chartkit blog is where data visualization and email marketing meet and form a weird love child. 📊 💌