Generate chart images with a simple, open API

Create chart images by concatenating URL parameters and embedding them in an image tag. For example:

Learn more about URL parameters

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

const chart = new QuickChart();

chart.setWidth(500)
chart.setHeight(300);

// Config can be set as string or as a Javascript object
chart.setConfig(`{
  type: 'bar',
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [{
      label: 'Users',
      data: [50, 60, 70, 180]
    }]
  }
}`);

// Print the chart URL
console.log(chart.getUrl());

// Get the image...
const image = await chart.toBinary();

// Or write it to a file
chart.toFile('chart.png');

from quickchart import QuickChart

qc = QuickChart()
qc.width = 500
qc.height = 300

# Config can be set as a string or as a nested dict
qc.config = """{
  type: 'bar',
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [{
      label: 'Users',
      data: [50, 60, 70, 180]
    }]
  }
}"""

# You can get the chart URL...
print(qc.get_url())

# Get the image as a variable...
image = qc.get_image()

# Or write the chart to a file
qc.to_file('mychart.png')

namespace QuickChartExample
{
    public class SimpleExample
    {
        static void Main(string[] args) {
            Chart qc = new Chart();

            qc.Width = 500;
            qc.Height = 300;
            qc.Config = @"{
              type: 'bar',
              data: {
                labels: ['Q1', 'Q2', 'Q3', 'Q4'],
                datasets: [{
                  label: 'Users',
                  data: [50, 60, 70, 180]
                }]
              }
            }";

            // Get the URL
            Console.WriteLine(qc.GetUrl());

            // Or get the image
            byte[] imageBytes = qc.ToByteArray();

            // Or write it to a file
            qc.ToFile("chart.png");
        }
    }
}`;

import io.quickchart.QuickChart;

public class PrintUrlExample {

    public static void main(String[] args) {
        QuickChart chart = new QuickChart();
        chart.setWidth(500);
        chart.setHeight(300);
        chart.setConfig("<chart config>");

        // Print the chart image URL
        System.out.println(chart.getUrl());

        // Or get the image
        byte[] imageBytes = chart.toByteArray();

        // Or write it to disk
        chart.toFile("chart.png");
    }
}

require 'quickchart'

# Chart config can be set as a string or as a nested hash
config = <<~EOS
{
  type: 'bar',
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [{
      label: 'Users',
      data: [50, 60, 70, 180]
    }]
  }
}
EOS

qc = QuickChart.new(config)

# Print the chart URL
puts qc.get_url

# Get the image
image = qc.to_blob

# Or write it to a file
qc.to_file("chart.png")

require 'quickchart'

$qc = new QuickChart(array(
  'width': 500,
  'height': 300,
));

// Chart config can be set as a string or as a nested array
$config = <<<EOD
{
  type: 'bar',
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [{
      label: 'Users',
      data: [50, 60, 70, 180]
    }]
  }
}
EOD;

$qc->setConfig(config);

// Print the chart URL
echo $qc->getUrl();

// Get the image
$image = $qc->toBinary();

// Or write it to a file
$qc->toFile('chart.png')

qc := quickchartgo.New()

qc.Config = chartConfig
qc.Config := `{
  type: 'bar',
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [{
    label: 'Users',
    data: [50, 60, 70, 180]
    }]
  }
}`

qc.Width = 500;
qc.Height = 300;
qc.Version = "2.9.4";

// Print the chart URL
fmt.Println(qc.GetUrl());

// Or write it to a file
file, err := os.Create("output.png")
if err != nil {
  panic(err)
}

defer file.Close()
qc.Write(file)

Because chart URLs are built by string concatenation, you can create a QuickChart URL in any programming language by building a URL string. In most cases it is not necessary to use a library.

See the API Parameters documentation to learn how to build a URL that renders a chart image. If you need help, please reach out and we will help you implement in your preferred programming language.

QuickChart's Chart Maker offers no-code support for generating dynamic charts in spreadsheets, Airtable, Bubble, AppSheet, Thunkable, and many other platforms.

We also offer chart integrations with Zapier and Make.

View the no-code chart tutorial