How to use the authenticated QuickChart API

You will receive an API key and account ID upon signup. The easiest way to authenticate your requests is to attach your API key as a GET or POST parameter.

Your key should only be used on the server-side, or by completely trusted clients. Do not put your API key in a place where it is publicly visible, as this will allow anyone to use your account. See signing requests for a way to secure your credentials with untrusted clients.

Basic authentication

To bypass rate limiting and access other paid account features, include your key in a chart URL like so:

https://quickchart.io/chart?key=YOUR_API_KEY&c=%7Btype%3A%27bar%27%2Cdata%3A%7Blabels%3A%5B%27January%27%2C%27February%27%2C%27March%27%2C%27April%27%2C%20%27May%27%5D%2C%20datasets%3A%5B%7Blabel%3A%27Dogs%27%2Cdata%3A%5B50%2C60%2C70%2C180%2C190%5D%7D%2C%7Blabel%3A%27Cats%27%2Cdata%3A%5B100%2C200%2C300%2C400%2C500%5D%7D%5D%7D%7D

You may include your key in a QR code request like so:

https://quickchart.io/qr?key=YOUR_API_KEY&text=Hello%20world

Note that the above chart definition and QR string are URL-encoded, as recommended in the main documentation.

POST requests

If you are constructing a chart with a POST request, you may include your key as a parameter within the POST body:

// POST to https://quickchart.io/chart
{
"key": "YOUR_API_KEY",
"backgroundColor": "transparent",
"width": 500,
"height": 300,
"format": "png",
"chart": {...},
}

Or simply as a query parameter:

// POST to https://quickchart.io/chart?key=YOUR_API_KEY
{
"backgroundColor": "transparent",
"width": 500,
"height": 300,
"format": "png",
"chart": {...},
}

Using short URLs

If you want to simplify your URLs and keep your key private, you may generate a URL for your chart using the short URL API. Include your key in a request to the /chart/create endpoint.

See complete short URL documentation for details. Note that short URLs are available for charts only, not QR codes.

Signing requests

If you need to render an image for an untrusted client, use your account ID and sign the request with your API key.

// Set up the signing function
const crypto = require('crypto');

function sign(apiKey, val) {
return crypto
.createHmac('sha256', API_KEY)
.update(chartObj)
.digest('hex');
}

// Add QuickChart credentials
const ACCOUNT_ID = '12345';
const API_KEY = 'abc123';

// Generate a URL for QR code
const qrText = 'Hello world';
const qrSignedParam = sign(API_KEY, qrText);

const qrPublicUrl = `https://quickchart.io/qr?text=${encodeURIComponent(qrText)}&sig=${qrSignedParam}&accountId=${ACCOUNT_ID}`;

console.log('Link to QR code:', qrPublicUrl);

We can generate a signed chart request like so:

// Generate a URL for chart
const chartObj = JSON.stringify({...});
const chartSignedParam = sign(API_KEY, chartObj);

const chartPublicUrl = `https://quickchart.io/chart?c=${encodeURIComponent(chartObj)}&sig=${chartSignedParam}&accountId=${ACCOUNT_ID}`;

console.log('Link to chart:', chartPublicUrl);

Note that chart objects must be converted to string format. JSON.stringify is suitable for this purpose if your chart doesn't contain Javascript. If your chart contains custom Javascript, see how to use Javascript functions.

Python

Here's the equivalent example in Python:

import hmac, hashlib, codecs
from urllib.parse import quote

# Set up signing function
def sign(api_key, val):
return codecs.getencoder("hex")(
hmac.new(api_key.encode("utf-8"), val.encode("utf-8"), hashlib.sha256).digest()
)[0].decode("utf-8")

# Set up credentials
ACCOUNT_ID = "12345"
API_KEY = "abc123"

# Generate a URL
qr_text = "Hello world"
sig = sign(API_KEY, qr_text)

url = f"https://quickchart.io/qr?text={quote(qr_text)}&sig={sig}&accountId={ACCOUNT_ID}"

print("Link to QR code:", url)

PHP

Signing a chart request in PHP with HMAC:

// Set up signing function
function sign($apiKey, $val) {
return hash_hmac('sha256', $val, $apiKey);
}

// Set up credentials
define('ACCOUNT_ID', '12345');
define('API_KEY', 'abc123');

// Generate a URL
$qrText = 'Hello world';

$sig = sign(API_KEY, $qrText);
$url = 'https://quickchart.io/qr?text=' . urlencode($qrText) . '&sig=' . $sig . '&accountId=' . ACCOUNT_ID;

echo 'Link to QR code: ' . $url;

Java

Signing a chart request in Java with HMAC:

import java.net.URLEncoder;
import java.security.InvalidKeyException;
import java.security.NoSuchAlgorithmException;
import java.security.SignatureException;
import java.util.Formatter;

import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;


class QuickchartAuth {
private static final String HMAC_ALGORITHM = "HmacSHA256";

private static String toHexString(byte[] bytes) {
Formatter formatter = new Formatter();
for (byte b: bytes) {
formatter.format("%02x", b);
}
return formatter.toString();
}

public static String sign(String key, String val)
throws SignatureException, NoSuchAlgorithmException, InvalidKeyException {
SecretKeySpec signingKey = new SecretKeySpec(key.getBytes(), HMAC_ALGORITHM);
Mac mac = Mac.getInstance(HMAC_ALGORITHM);
mac.init(signingKey);
return toHexString(mac.doFinal(val.getBytes()));
}
}

public class Main {
public static void main(String[] args) throws Exception {
// Set up credentials
String ACCOUNT_ID = "12345";
String API_KEY = "abc123";

// Generate a URL
String qrText = "Hello world";
String sig = QuickchartAuth.sign(API_KEY, qrText);

String url = String.format("https://quickchart.io/qr?text=%s&sig=%s&accountId=%s", URLEncoder.encode(qrText), sig, ACCOUNT_ID);

System.out.println(url);
}
}

Other languages

Signing requests can be done in any language. Just look up how to create an HMAC signature in your language of choice.

Feel free to reach out if you're having trouble.