QuickChart Getting Started: Generate Charts and QR Codes

Getting started overview

QuickChart provides an API for generating static chart images, QR codes, and embeds from Chart.js configurations. This guide outlines the steps to get started, covering account creation, API key retrieval, and making your initial request.

The core process involves defining your chart's data and appearance using a JSON configuration, then sending this configuration to the QuickChart API. The API processes the request and returns a static image or a URL to the image, which can then be displayed in web applications, emails, or reports.

QuickChart supports several programming languages through official SDKs, including Node.js, Python, Ruby, PHP, Java, Go, and C#. For environments without a dedicated SDK, you can interact directly with the QuickChart API reference using standard HTTP requests.

The following table provides a quick reference for the steps covered in this guide:

Create an account and get keys

To begin using QuickChart, you need to create an account. QuickChart offers a free tier that supports up to 50,000 requests per month, which is suitable for initial development and testing.

1. Navigate to the QuickChart website: Go to the QuickChart homepage.

2. Sign up: Click on the 'Sign Up' or 'Get Started for Free' button. You can typically sign up using an email address, or through third-party authentication providers like Google.

3. Access your account dashboard: After signing up and logging in, you will be directed to your account dashboard.

4. Locate your API keys: Your API keys, consisting of a user ID and an API key, are essential for authenticating your requests. These can usually be found in your Account Settings or 'API' section of the dashboard. QuickChart uses these keys to track usage and apply any rate limits or subscription benefits.

   • User ID: A unique identifier for your account.
   • API Key: A secret key used to authenticate your requests. Keep this key secure and do not expose it in client-side code.

It is recommended to store your API key securely, for example, using environment variables, rather than hardcoding it directly into your application's source code. This practice aligns with general API key security recommendations.

Your first request

After obtaining your API key, you can make your first request to generate a chart. This example will demonstrate generating a simple bar chart using the QuickChart API. We will use the Node.js SDK for this example, but the underlying Chart.js configuration applies to all SDKs and direct API calls.

Using the Node.js SDK

First, ensure you have Node.js installed. Then, install the QuickChart Node.js library:

npm install quickchart-js

Next, create a JavaScript file (e.g., generateChart.js) and add the following code:

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

const qc = new QuickChart();

// Replace with your actual QuickChart User ID and API Key
qc.setApiKey('YOUR_API_KEY');
qc.setUserId('YOUR_USER_ID');

qc.setConfig({
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [{
      label: 'Sales',
      data: [50, 60, 70, 180, 190],
      backgroundColor: [
        'rgba(255, 99, 132, 0.5)',
        'rgba(255, 159, 64, 0.5)',
        'rgba(255, 205, 86, 0.5)',
        'rgba(75, 192, 192, 0.5)',
        'rgba(54, 162, 235, 0.5)'
      ],
      borderColor: [
        'rgb(255, 99, 132)',
        'rgb(255, 159, 64)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(54, 162, 235)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    title: {
      display: true,
      text: 'Monthly Sales Data'
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

// Set output image width and height
qc.setWidth(500);
qc.setHeight(300);
qc.setBackgroundColor('transparent'); // Optional: 'transparent' or a hex color

// Get the chart URL
const chartUrl = qc.getUrl();
console.log('Chart URL:', chartUrl);

// You can also get a direct image buffer (Node.js only)
qc.toBuffer().then((imageBuffer) => {
  console.log('Image buffer created. Length:', imageBuffer.length);
  // In a real application, you might save this buffer to a file or send it as a response.
}).catch((error) => {
  console.error('Error generating image buffer:', error);
});

Run the script:

node generateChart.js

The script will output a URL to your generated chart image. You can paste this URL into a web browser to view the chart. The QuickChart documentation provides further examples for various chart types and customization options.

Direct API Call (without SDK)

For environments where an SDK is not preferred or available, you can make a direct HTTP POST request to the QuickChart API. The endpoint for chart generation is https://quickchart.io/chart.

Here's an example using curl:

curl -X POST \
  https://quickchart.io/chart \
  -H 'Content-Type: application/json' \
  -d '{ 
    "userId": "YOUR_USER_ID", 
    "apiKey": "YOUR_API_KEY", 
    "width": 500, 
    "height": 300, 
    "backgroundColor": "transparent",
    "chart": {
      "type": "doughnut",
      "data": {
        "labels": ["Red", "Blue", "Yellow"],
        "datasets": [{
          "label": "My First Dataset",
          "data": [300, 50, 100],
          "backgroundColor": [
            "rgb(255, 99, 132)",
            "rgb(54, 162, 235)",
            "rgb(255, 205, 86)"
          ],
          "hoverOffset": 4
        }]
      }
    }
  }'

This curl command sends a JSON payload containing the chart configuration, user ID, and API key. The API will return a JSON object with the url of the generated chart image, or an error if the request was malformed or unauthorized.

Common next steps

Once you have successfully generated your first chart, consider these next steps:

• Explore chart types: QuickChart supports all Chart.js chart types. Experiment with line charts, pie charts, radar charts, and more by modifying the type property in your chart configuration.

• Dynamic data: Integrate your application's real-time or database-driven data into the chart configuration. This is typically done by fetching data from your backend and dynamically constructing the Chart.js JSON object before sending it to QuickChart.

• Advanced customization: QuickChart exposes the full range of Chart.js configuration options. Explore titles, legends, tooltips, scales, and plugins to tailor your charts precisely.

• QR code generation: QuickChart can also generate QR codes. The process is similar to chart generation, but you'll use the QR code specific API endpoint and configure the content you want to embed in the QR code. Refer to the QuickChart QR code documentation for details.

• Error handling: Implement robust error handling in your application. The QuickChart API will return specific error codes and messages for issues like invalid configurations, missing API keys, or rate limit exceedances.

• Security considerations: Ensure your API key is kept confidential. For server-side applications, use environment variables. For client-side applications that need to generate charts directly, consider proxying requests through your own backend to hide the API key, or use QuickChart's public chart feature if the data is not sensitive and you don't require authentication.

• Embed charts in emails: QuickChart is particularly useful for embedding charts in emails, as email clients often have limited JavaScript support. The static image URLs generated by QuickChart can be directly used in <img> tags within HTML email templates.

Troubleshooting the first call

Encountering issues during your first API call is common. Here are some troubleshooting tips:

• Check API Key and User ID: Double-check that you have correctly copied and pasted your QuickChart User ID and API Key. A common mistake is swapping them or having typos.

• Verify Chart.js Configuration: QuickChart relies on valid Chart.js JSON configurations. Use a JSON linter or validator to ensure your configuration is well-formed. Incorrect syntax (e.g., missing commas, unquoted keys) is a frequent source of errors.

• Review API Documentation: Consult the QuickChart API reference for the specific endpoint you are using. Pay attention to required parameters and expected data types.

• Inspect Network Requests: If using a browser or an HTTP client, inspect the network request and response. Look for HTTP status codes (e.g., 400 Bad Request, 401 Unauthorized, 403 Forbidden, 500 Internal Server Error) and any error messages returned in the response body.

  • 400 Bad Request: Often indicates an issue with your chart configuration JSON.
  • 401 Unauthorized / 403 Forbidden: Suggests an issue with your API key or user ID, or that your account lacks the necessary permissions.

• Check Rate Limits: If you are making many requests in a short period, you might hit rate limits. QuickChart's free tier has a limit of 50,000 requests per month. The API response headers usually indicate if you are approaching or have exceeded your limit. See the QuickChart pricing page for details on limits.

• Minimal Example: Try generating the simplest possible chart (e.g., a single data point bar chart) to isolate whether the issue is with your account setup or the complexity of your chart configuration.

• SDK-specific issues: If using an SDK, ensure it is correctly installed and imported. Sometimes, outdated SDK versions can cause compatibility issues. Check the SDK installation guides for the latest version and usage examples.