Skip to content


Switch branches/tags

Latest commit

Bumps [moment]( from 2.29.1 to 2.29.2.
- [Release notes](
- [Changelog](
- [Commits](moment/moment@2.29.1...2.29.2)

- dependency-name: moment
  dependency-type: indirect

Signed-off-by: dependabot[bot] <>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]>

Git stats


Failed to load latest commit information.

QuickChart for Javascript

npm npm Build Status

This is a Javascript client for, a web service for generating static charts. View the main QuickChart repository here.


If you are using npm:

npm install quickchart-js


This library provides a QuickChart object. Import it, instantiate it, and set your Chart.js config:

const QuickChart = require('quickchart-js');

const myChart = new QuickChart();
  type: 'bar',
  data: { labels: ['Hello world', 'Foo bar'], datasets: [{ label: 'Foo', data: [1, 2] }] },

Use getUrl() on your quickchart object to get the encoded URL that renders your chart:

// Prints:

If you have a large or complicated chart, use getShortUrl() on your quickchart object to get a fixed-length URL using the web service:

const url = await myChart.getShortUrl();
// Prints:

Or write it to disk:


The URLs produce this chart image:

Creating a QuickChart object

If you have an account ID and API key, authenticate using the QuickChart constructor:

const qc = new QuickChart(apiKey, accountId);

To use the free (community) version, leave it blank:

const qc = new QuickChart();

Customizing your chart

setConfig(chart: Object | string)

Use this config to customize the Chart.js config object that defines your chart. You must set this before generating a URL!

setWidth(width: int)

Sets the width of the chart in pixels. Defaults to 500.

setHeight(height: int)

Sets the height of the chart in pixels. Defaults to 300.

setFormat(format: string)

Sets the format of the chart. Defaults to png. svg is also valid.

setBackgroundColor(color: string)

Sets the background color of the chart. Any valid HTML color works. Defaults to #ffffff (white). Also takes rgb, rgba, and hsl values.

setDevicePixelRatio(ratio: float)

Sets the device pixel ratio of the chart. This will multiply the number of pixels by the value. This is usually used for retina displays. Defaults to 1.0.

setVersion(version: string)

Sets the Chart.js version to use (e.g. 2.9.4 or 3.4.0). Valid options are shown in the documentation.

Getting outputs

There are two ways to get a URL for your chart object.

getUrl(): string

Returns a URL that will display the chart image when loaded.

getShortUrl(): Promise

Uses the web service to create a fixed-length chart URL that displays the chart image. The Promise resolves with a URL such as

Note that short URLs expire after a few days for users of the free service. You can subscribe to keep them around longer.

getSignedUrl(): string

Returns a URL that displays the chart image. It is signed with your user account to bypass rate limitations.

toBinary(): Promise

Creates a binary buffer that contains your chart image.

toDataUrl(): Promise

Returns a base 64 data URL beginning with data:image/png;base64.

toFile(pathOrDescriptor: PathLike | FileHandle): Promise

Given a filepath string or a writable file handle, creates a file containing your chart image.

More examples

Check out the examples/ directory to see other usage. Here's a simple test that uses some of the custom parameters:

const qc = new QuickChart();

  type: 'bar',
  data: { labels: ['Hello world', 'Foo bar'], datasets: [{ label: 'Foo', data: [1, 2] }] },


Here's a more complicated chart that includes some Javascript:

  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [
        label: 'Dogs',
        data: [50, 60, 70, 180, 190],
  options: {
    scales: {
      yAxes: [
          ticks: {
            callback: function (value) {
              return '$' + value;


As we customize these charts, the URLs are getting a little long for my liking. There's a getShortUrl function that uses the web service to generate a short(er), fixed-length URL:

// Fill the chart with data from 0 to 100
const data = [...Array(100).keys()];
  type: 'bar',
  data: { labels: ['Hello world', 'Foo bar'], datasets: [{ label: 'Foo', data }] },

async function printShortUrl() {
  const url = await qc.getShortUrl();

Using built-in QuickChart functions

QuickChart has builtin functions: getImageFill, getGradientFill, getGradientFillHelper, and pattern.draw. These functions can be accessed via the QuickChart class. For example:

const qc = new QuickChart();
  type: 'bar',
  data: {
    labels: ['Hello world', 'Foo bar'],
    datasets: [
        label: 'Foo',
        data: [1, 2],
        backgroundColor: QuickChart.getGradientFillHelper('horizontal', ['red', 'green']),

Building the library

To build this library locally, run:

yarn build

To run tests:

yarn test

If you're editing the library and running examples, you may want to continuously build the library in the background:

yarn build:watch

# ...

node examples/simple_example.js