Convert your chart to an image with the ChartJuice image charts API

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:

• Build the chart in the JavaScript library of your choice
• Build a backend that will render the chart (which often means messing with finicky virtual DOM libraries)
• Convert the rendered chart to the correct image type
• Write the automation code to call your backend with the necessary data

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.

How the image charts API works

With the ChartJuice image API generating a custom chart image with unique data becomes a breeze.

1. First, design your chart in our easy no-code chart maker.
2. Then grab your embed link, and drop it into your email template or other automation code.
3. Pass our API the right data, and we'll return a customized image of your chart in whatever file type you need.
4. Anytime you need to tweak your chart design, just tweak it in our app and hit save.

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):

‍

API endpoint and parameters

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.

• Example: [["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.

What kind of usage limits does the API have?

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 support@chartjuice.com.

What happens if I go over my credit limit for the month?

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.

Am I still X-compliant if I use the ChartJuice image charts API?

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.