QuickChart

https://quickchart.io/documentation
Admin
QuickChart is a web service that generates customizable chart images on-the-fly from Chart.js...
Tokens:105,095
Snippets:446
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### QuickChart.io Apex Charts GET Request URL

Source: https://quickchart.io/documentation/apex-charts-image-rendering

An example URL demonstrating how to render an Apex Chart using a GET request to QuickChart.io, passing the chart configuration directly as a query parameter. Suitable for simple configurations.

```HTTP Request
https://quickchart.io/apex-charts/render?config={ chart: { type: 'line' }, series: [{ name: 'sales', data: [31,40,35,50,49,60,70,91,125] }], xaxis: { categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999] } }
```

--------------------------------

### Generate QuickChart URL with quickchart-python

Source: https://quickchart.io/documentation/usage/client-libraries

This Python example shows how to use the `quickchart.io` library to define a bar chart's configuration, set its dimensions and pixel ratio, and then print the URL for the generated chart. Install the library via pip.

```Python
from quickchart import QuickChart

qc = QuickChart()
qc.width = 500
qc.height = 300
qc.device_pixel_ratio = 2.0
qc.config = {
    "type": "bar",
    "data": {
        "labels": ["Hello world", "Test"],
        "datasets": [{
            "label": "Foo",
            "data": [1, 2]
        }]
    }
}

# Print the chart URL
print(qc.get_url())
```

--------------------------------

### QuickChart Word Cloud API Reference

Source: https://quickchart.io/documentation/word-cloud-api

Comprehensive documentation for the QuickChart Word Cloud API, detailing both GET and POST methods for generating word cloud images, including parameters and usage examples.

```APIDOC
QuickChart Word Cloud API:

GET /wordcloud?text=<string>&removeStopwords=<boolean>
  - Generates a word cloud from text provided in URL query parameters.
  - Parameters:
    - text: The input text for the word cloud. (string, required)
    - removeStopwords: Whether to remove common stopwords. (boolean, optional, default: 0/false)
  - Returns: An image (e.g., PNG).
  - Usage Example:
    https://quickchart.io/wordcloud?text=Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.But, in a larger sense, we can not dedicate—we can not consecrate—we can not hallow—this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us—that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion—that we here highly resolve that these dead shall not have died in vain—that this nation, under God, shall have a new birth of freedom—and that government of the people, by the people, for the people, shall not perish from the earth.&removeStopwords=1

POST /wordcloud
  - Generates a word cloud from text and configuration provided in a JSON payload.
  - Content-Type: application/json
  - Request Body (JSON):
    {
      "format": "png",
      "width": 1000,
      "height": 1000,
      "fontFamily": "sans-serif",
      "fontScale": 15,
      "scale": "linear",
      "text": "<churchill's full speech...>"
    }
  - Returns: An image (e.g., PNG).
  - Usage Example (cURL):
    curl -X POST -H 'Content-Type: application/json' https://quickchart.io/wordcloud -d @churchill.json -o churchill.png
```

--------------------------------

### Install QuickChart Python Library

Source: https://quickchart.io/documentation/python-chart-example

This command installs the `quickchart.io` Python library using pip. This library provides the necessary tools and classes to interact with the QuickChart API and generate chart images programmatically from Python.

```Shell
pip install quickchart.io
```

--------------------------------

### Google Image Charts API - Pie Chart Examples

Source: https://quickchart.io/documentation/integrations/google-image-charts/examples

Illustrates how to generate simple pie charts by specifying data and dimensions through Google Image Charts query parameters.

```APIDOC
cht=pc&chd=s:Helo,Wrld&chs=200x100
```

--------------------------------

### Google Image Charts API - Line Chart Examples

Source: https://quickchart.io/documentation/integrations/google-image-charts/examples

Provides examples for creating line charts with multiple data series, custom colors, and detailed axis configurations using Google Image Charts query parameters.

```APIDOC
cht=lc&chco=FF0000,00FF00,0000FF&chs=300x200&chd=s:FOETHECat,lkjtf3asv,KATYPSNXJ&chxt=x,y&chxl=0:|Oct|Nov|Dec|1:||20K||60K||100K
```

```APIDOC
chxt=x,y&chxl=0:%7CJan%7CFeb%7CMarch%7CApril%7CMay%7C1:%7CMin%7CMid%7CMax&cht=lc&chd=s:cEAELFJHHHKUju9uuXUc&chco=76A4FB&chls=2.0&chs=300x200
```

--------------------------------

### Send QuickChart Image via Mailgun

Source: https://quickchart.io/documentation/send-email-charts-with-mailgun

These examples demonstrate how to generate a chart configuration using QuickChart, encode it for a URL, and then send an HTML email containing the chart image via Mailgun. Both Node.js and Python implementations are provided, illustrating the setup of Mailgun, defining chart data, and constructing the email message for dispatch.

```javascript
const mailgunGenerator = require('mailgun-js');
const mailgun = mailgunGenerator({
  apiKey: 'abc123',
  domain: 'xyz.com',
});

const chartConfig = encodeURIComponent(
  JSON.stringify({
    type: 'bar',
    data: {
      labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
      datasets: [
        {
          label: 'Retweets',
          data: [12, 5, 40, 5],
        },
        {
          label: 'Likes',
          data: [80, 42, 215, 30],
        },
      ],
    },
  }),
);

const message = `Hello, please see the chart below:
<br><br>
<img src="https://quickchart.io/chart?c=${chartConfig}" />
`;

const data = {
  from: '[email@example.com]',
  to: '[email@example.com]',
  subject: 'Updated Chart Report',
  html: message,
};

mailgun.messages().send(data, (err, body) => {
  console.log(body);
});
```

```python
import json
from urllib.parse import quote

import requests

API_KEY = "abc123"
DOMAIN = "xyz.com"

chart_config = quote(json.dumps({
  "type": "bar",
  "data": {
    "labels": ["Week 1", "Week 2", "Week 3", "Week 4"],
    "datasets": [{
      "label": "Retweets",
      "data": [12, 5, 40, 5]
    }, {
      "label": "Likes",
      "data": [80, 42, 215, 30]
    }]
  }
}))

message = f"""Hello, please see the chart below:
<br><br>
<img src="https://quickchart.io/chart?c={chart_config}" />
"""

request_url = f"https://api.mailgun.net/v2/{DOMAIN}/messages"
request = requests.post(request_url, auth=("api", API_KEY), data={
    "from": "[email@example.com]",
    "to": "[email@example.com]",
    "subject": "Updated Chart Report",
    "html": message,
})

print(f"Status: {request.status_code}")
print(f"Body:   {request.text}")
```

--------------------------------

### QuickChart Barcode API Reference and Usage Examples

Source: https://quickchart.io/documentation/barcode-api

Comprehensive documentation for the QuickChart Barcode API, detailing the base URL, supported parameters, their types, descriptions, and options for generating various barcode types. Includes examples for basic usage, custom sizing, and rotation with text inclusion.

```APIDOC
Base URL: https://quickchart.io/barcode

To generate a barcode, append parameters to the base URL as query strings.

Supported Parameters:
- type (Required): Specifies the type of barcode to generate (e.g., datamatrix, upca, ean-13, code-128).
- text (Required): The data or text you want to encode in the barcode.
- width (Optional): Desired width of the barcode in pixels.
- height (Optional): Desired height of the barcode in pixels.
- scale (Optional): A scaling factor for the barcode, affecting both width and height.
- includeText (Optional): If set, includes human-readable text (if supported by the barcode type). Options: true, false.
- rotate (Optional): Controls the rotation of the barcode. Options: N (Normal), R (Right), L (Left), I (Inverted).

Note on width and height: The width and height parameters are approximate for some barcode types due to specifications and drawing methods. The service aims to match the specified size as closely as possible, but the resulting barcode may be marginally larger or smaller.

Usage Examples:

1. Basic Datamatrix Barcode:
   To generate a basic datamatrix barcode with the text "Hello, World!":
   https://quickchart.io/barcode?type=datamatrix&text=Hello, World!

2. Custom Size Barcode:
   To create a barcode with a specific width and height:
   https://quickchart.io/barcode?type=datamatrix&text=Custom Size&width=200&height=200

3. Barcode with Text and Rotation:
   To generate a barcode that includes human-readable text and is rotated 90 degrees clockwise:
   https://quickchart.io/barcode?type=upca&text=12345678900&includeText=true&rotate=R
```

--------------------------------

### Install Google Charts Node.js Library

Source: https://quickchart.io/documentation/google-charts-image-server

This snippet provides the command to install the `google-charts-node` library using npm, making it available for server-side Google Charts rendering in Node.js projects.

```bash
npm install google-charts-node
```

--------------------------------

### QuickChart Google Charts Render API Reference

Source: https://quickchart.io/documentation/google-charts-image-server

Comprehensive documentation for the QuickChart Google Charts render API endpoint (`https://quickchart.io/google-charts/render`), detailing accepted parameters, request methods (GET and POST), and example payloads for various programming languages.

```APIDOC
QuickChart Google Charts Render API:

Endpoint: https://quickchart.io/google-charts/render

Parameters:
  - code (string, required): Javascript contents of the drawChart function. This code is executed by the chart renderer.
  - packages (string or array of strings, optional): List of Google Visualization packages to load (e.g., 'corechart', 'timeline'). Defaults to 'corechart'.
  - width (string or number, optional): CSS width of the chart canvas (e.g., '100%', 400). Defaults to '100%'.
  - height (string or number, optional): CSS height of the chart canvas (e.g., '100%', 300). Defaults to '100%'.
  - mapsApiKey (string, optional): Google Maps API key for geochart and map chart types.

Request Methods:

GET Request:
  URL-encode 'code' and other parameters as query strings.
  Example:
  https://quickchart.io/google-charts/render?packages=timeline&code=var%20container%20%3D%20document.getElementById('timeline');var%20chart%20%3D%20new%20google.visualization.Timeline(container);var%20dataTable%20%3D%20new%20google.visualization.DataTable();dataTable.addColumn(%7B%20type%3A%20'string'%2C%20id%3A%20'President'%20%7D);dataTable.addColumn(%7B%20type%3A%20'date'%2C%20id%3A%20'Start'%20%7D);dataTable.addColumn(%7B%20type%3A%20'date'%2C%20id%3A%20'End'%20%7D);dataTable.addRows(%5B%5B%20'Washington'%2C%20new%20Date(1789%2C%203%2C%2030)%2C%20new%20Date(1797%2C%202%2C%204)%20%5D%2C%5B%20'Adams'%2C%20new%20Date(1797%2C%202%2C%204)%2C%20new%20Date(1801%2C%202%2C%204)%20%5D%2C%5B%20'Jefferson'%2C%20new%20Date(1801%2C%202%2C%204)%2C%20new%20Date(1809%2C%202%2C%204)%20%5D%5D);chart.draw(dataTable);

POST Request:
  Send parameters in JSON format in the request body. Recommended for complex or larger charts.
  Example Payload:
  {
    "width": 600,
    "height": 300,
    "packages": "timeline",
    "code": "var container = document.getElementById('timeline');var chart = new google.visualization.Timeline(container);var dataTable = new google.visualization.DataTable();dataTable.addColumn({ type: 'string', id: 'President' });dataTable.addColumn({ type: 'date', id: 'Start' });dataTable.addColumn({ type: 'date', id: 'End' });dataTable.addRows([[ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],[ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],[ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);chart.draw(dataTable);"
  }
```

```python
resp = requests.post('https://quickchart.io/google-charts/render', json={
    'width': 600,
    'height': 300,
    'packages': '...',   # optional
    'code': 'var chart = ...',
})

with open('chart.png', 'wb') as f:
    f.write(resp.content)
```

```javascript
const headers = new Headers();
headers.append('Content-Type', 'application/json');

const body = JSON.stringify({
  width: 600,
  height: 300,
  packages: '...',
  code: '...',
});

const requestOptions = {
  method: 'POST',
  headers,
  body,
};

fetch('https://quickchart.io/google-charts/render', requestOptions)
  .then((response) => response.text())
  .then((result) => console.log('Got', result.length, 'bytes'))
  .catch((error) => console.error(error));
```

--------------------------------

### Generate QuickChart URL with quickchart-ruby

Source: https://quickchart.io/documentation/usage/client-libraries

This Ruby example demonstrates how to initialize a `QuickChart` object with chart configuration and dimensions, then retrieve the chart's URL. The `quickchart` gem is required for this functionality.

```Ruby
require 'quickchart'

qc = QuickChart.new(
  {
    type: "bar",
    data: {
      labels: ["Hello world", "Test"],
      datasets: [{
        label: "Foo",
        data: [1, 2]
      }]
    }
  },
  width: 600,
  height: 300,
  device_pixel_ratio: 2.0,
)

# Print the chart URL
puts qc.get_url
```

--------------------------------

### QuickChart API URL Example

Source: https://quickchart.io/documentation/usage/parameters

Demonstrates how to construct a basic QuickChart API URL with width, height, and chart configuration parameters for image generation.

```HTTP Request
https://quickchart.io/chart?width=500&height=300&chart={...}
```

--------------------------------

### Generate QuickChart URL in C#

Source: https://quickchart.io/documentation/usage/client-libraries

This C# example demonstrates how to initialize the QuickChart client, set chart dimensions, configure chart data using a JSON string, and retrieve the chart URL. It utilizes the `QuickChart` NuGet package for integration.

```C#
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: ['Hello world', 'Test'],
                datasets: [{
                  label: 'Foo',
                  data: [1, 2]
                }]
              }
            }"

            Console.WriteLine(qc.GetUrl());
        }
    }
}
```

--------------------------------

### Client Examples for QuickChart Short URL Generation

Source: https://quickchart.io/documentation/usage/short-urls-and-templates

Practical code examples demonstrating how to interact with the QuickChart API's `/chart/create` endpoint to generate short chart URLs. Includes implementations using cURL for command-line usage and Python's `requests` library for programmatic integration.

```bash
curl -X POST \
     -H 'Content-Type: application/json' \
     -d '{"chart": {"type": "bar", "data": {"labels": ["Hello", "World"], "datasets": [{"label": "Foo", "data": [1, 2]}]}}}' \
     https://quickchart.io/chart/create
```

```python
import json
import requests

quickchart_url = 'https://quickchart.io/chart/create'
post_data = {'chart': {'type': 'bar', 'data': {'labels': ['Hello', 'World'],
             'datasets': [{'label': 'Foo', 'data': [1, 2]}]}}}

response = requests.post(
    quickchart_url,
    json=post_data,
)

if (response.status_code != 200):
    print('Error:', response.text)
else:
    chart_response = json.loads(response.text)
    print(chart_response)
```

--------------------------------

### Generate QuickChart URL in Java

Source: https://quickchart.io/documentation/usage/client-libraries

This Java example illustrates how to use the `io.quickchart.QuickChart` class to set chart properties like width, height, and configuration, then print the generated chart URL. It requires the QuickChart library added via Maven or Gradle.

```Java
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("{"
                + "    type: 'bar',"
                + "    data: {"
                + "        labels: ['Q1', 'Q2', 'Q3', 'Q4'],"
                + "        datasets: [{"
                + "            label: 'Users',"
                + "            data: [50, 60, 70, 180]"
                + "        }]"
                + "    }"
                + "}"
        );

        System.out.println(chart.getUrl());
    }
}
```

--------------------------------

### Example Short Chart URL

Source: https://quickchart.io/documentation/python-chart-example

This snippet provides an example of a short URL generated by QuickChart's internal URL shortener. These URLs are concise but are subject to expiration and rely on the shortener service.

```URL
https://quickchart.io/chart/render/f-a1d3e804-dfea-442c-88b0-9801b9808401
```

--------------------------------

### QuickChart.io Apex Charts URL-Encoded GET Request

Source: https://quickchart.io/documentation/apex-charts-image-rendering

An example URL demonstrating a URL-encoded GET request for rendering an Apex Chart. URL encoding is crucial for configurations containing special characters to ensure correct parsing by the API.

```HTTP Request
https://quickchart.io/apex-charts/render?config={%20chart:%20{%20type:%20%27line%27%20},%20series:%20[{%20name:%20%27sales%27,%20data:%20[31,40,35,50,49,60,70,91,125]%20}],%20xaxis:%20{%20categories:%20[1991,1992,1993,1994,1995,1996,1997,%201998,1999]%20}%20}
```

--------------------------------

### QuickChart GET Request URL for Chart Generation

Source: https://quickchart.io/documentation/index

This URL demonstrates how to generate a chart image using QuickChart via a simple GET request. The Chart.js configuration is URL-encoded and passed as the 'c' query parameter to the `https://quickchart.io/chart` endpoint.

```URL
https://quickchart.io/chart?c={type:'bar',data:{labels:[2012,2013,2014,2015, 2016],datasets:[{label:'Users',data:[120,60,50,180,120]}]}}
```

--------------------------------

### QuickChart.io Configuration Example

Source: https://quickchart.io/documentation/chart-js/custom-pie-doughnut-chart-labels

An example of a QuickChart.io configuration object, specifying chart type, data, and various styling options for the chart's appearance and behavior.

```json
{
  "type": "line",
  "data": {
    "labels": ["January", "February", "March", "April", "May", "June", "July"],
    "datasets": [
      {
        "label": "My First Dataset",
        "backgroundColor": "rgba(255,99,132,0.2)",
        "borderColor": "rgb(255,99,132)",
        "borderWidth": 2,
        "borderRadius": 4,
        "padding": 0,
        "align": "bottom"
      }
    ]
  },
  "options": {
    "legend": {
      "display": false
    },
    "layout": {
      "padding": {
        "top": 30,
        "bottom": 30
      }
    },
    "plugins": {
      "datalabels": {
        "display": true
      }
    }
  }
}
```

--------------------------------

### Generate QuickChart URL with quickchart-js

Source: https://quickchart.io/documentation/usage/client-libraries

This JavaScript example demonstrates how to use the `quickchart-js` library to configure a bar chart, set its dimensions and background, and then retrieve the generated chart URL. It requires the `quickchart-js` npm package.

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

const myChart = new QuickChart();
myChart
  .setConfig({
    type: 'bar',
    data: {
      labels: ['Hello world', 'Foo bar'],
      datasets: [{ label: 'Foo', data: [1, 2] }],
    },
  })
  .setWidth(800)
  .setHeight(400)
  .setBackgroundColor('transparent');

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

--------------------------------

### Generate QuickChart URL with quickchart-php

Source: https://quickchart.io/documentation/usage/client-libraries

This PHP example illustrates how to use the `QuickChart` library to set chart dimensions and configuration, then obtain the chart's URL. The `ianw/quickchart` Composer package is a prerequisite.

```PHP
require 'quickchart'

$qc = new QuickChart(array(
  'width' => 600,
  'height' => 300,
));

$qc->setConfig('{
  type: "bar",
  data: {
    labels: ["Hello world", "Test"],
    datasets: [{
      label: "Foo",
      data: [1, 2]
    }]
  }
}');

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

--------------------------------

### Example Airtable Base URL

Source: https://quickchart.io/documentation/integrations/airtable

An example URL for an Airtable base, which serves as an input for the QuickChart Airtable plugin to fetch data. This URL typically points to a specific table or view within an Airtable application.

```Text
https://airtable.com/app25n6qlMCLecXGt/tbl8XldnwZE46uDUe/viwOAP1aFeL0INi0v?blocks=hide
```

--------------------------------

### Generate QuickChart URL in Go

Source: https://quickchart.io/documentation/usage/client-libraries

This Go example demonstrates how to use the `quickchartgo` library to configure a chart with specific dimensions and data, and then retrieve its URL. This snippet utilizes a third-party QuickChart Go library for chart generation.

```Go
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";

fmt.Println(qc.GetUrl());
```

--------------------------------

### Generate Chart Image via QuickChart Web Service using Client Libraries

Source: https://quickchart.io/documentation/chart-js/image-export

This section illustrates how to generate chart images by interacting with the QuickChart web service using its official client libraries. Examples are provided for both JavaScript (`quickchart-js`) and Python (`quickchart-python`). This approach offloads rendering to a cloud service, offering benefits like scalability, simplified setup, and shareable URLs. The code configures a chart, retrieves its URL, and saves the image to disk.

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

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

// You can send the URL to someone...
const chartImageUrl = myChart.getUrl();

// Or download to disk
myChart.toFile('/tmp/mychart.png');
```

```python
from quickchart import QuickChart

chart = QuickChart()
chart.width = 300
chart.height = 150
chart.config = {
    "type": "bar",
    "data": {
        "labels": ["Hello world", "Test"],
        "datasets": [{
            "label": "Foo",
            "data": [1, 2]
        }]
    }
}

# Get the url...
image_url = chart.get_url()

# Or write to disk...
chart.to_file('/tmp/mychart.png')
```

--------------------------------

### DOT Language Example for Directed Graphs

Source: https://quickchart.io/documentation/graphviz-api

An example of a directed graph definition written in the DOT language. This snippet illustrates how to define nodes and directed edges, which can then be rendered by a GraphViz engine or API like QuickChart.

```DOT
digraph {
  main->parse->execute;
  main->init;
  main->cleanup;
  execute->make_string;
  execute->printf
  init->make_string;
  main->printf;
  execute->compare;
}
```

--------------------------------

### Initialize NPM project and install MJML dependencies

Source: https://quickchart.io/documentation/integrations/mjml

This command initializes a new Node.js project using npm and installs the necessary MJML, mjml-chart, and mjml-chartjs packages. These packages are required to compile MJML templates and integrate chart functionality into emails.

```Shell
npm init -y
npm install mjml mjml-chart mjml-chartjs
```

--------------------------------

### QuickChart.io Watermark API Reference

Source: https://quickchart.io/documentation/watermark-api

Comprehensive documentation for the QuickChart.io watermark API, detailing both POST and GET methods, their respective parameters for image URLs, watermark sizing, positioning, opacity, and output image dimensions.

```APIDOC
QuickChart.io Watermark API:

POST /watermark
  - Description: Adds a watermark to an image using a JSON request body.
  - Request Body (application/json):
    - mainImageUrl: string (required) - URL of the main image.
    - markImageUrl: string (required) - URL of the watermark image.
    - markRatio: float (optional) - Ratio of watermark size to main image size (e.g., 0.25, 0.5).
  - Returns: Binary image data (watermarked image).

GET /watermark
  - Description: Adds a watermark to an image using URL query parameters.
  - Query Parameters:
    - mainImageUrl: string (required) - URL of the main image.
    - markImageUrl: string (required) - URL of the watermark image.
    - markRatio: float (optional) - Ratio of watermark size to main image size (e.g., 0.25, 0.5).
    - position: string (optional) - Position of the watermark (e.g., 'bottomLeft', 'topLeft', 'center').
    - opacity: float (optional) - Opacity of the watermark (0.0 to 1.0, e.g., 0.2).
    - imageWidth: integer (optional) - Desired width of the output image in pixels.
  - Returns: Binary image data (watermarked image).
```

--------------------------------

### Google Image Charts API - Bar Chart Examples

Source: https://quickchart.io/documentation/integrations/google-image-charts/examples

Demonstrates how to generate vertical and horizontal bar charts using Google Image Charts query parameters, including data encoding, colors, axis labels, and chart sizing.

```APIDOC
chxt=x,y&cht=bvs&chd=s:cEj9U&chco=76A4FB&chls=2.0&chs=300x200&chxl=0:|2001|2002|2003&chxp=0,0
```

```APIDOC
cht=bhs&chs=300x200&chd=t:10,50,60,80,40|50,60,100,40,20&chco=4d89f9,c6d9fd&chbh=20&chds=0,160
```

```APIDOC
cht=bhs&chco=000000,FF0000|00FF00|0000FF&chs=300x200&chd=s:FOE,elo&chxt=x,y&chxl=1:|Dec|Nov|Oct|0:||20K||60K||100K|
```

```APIDOC
cht=bhs&chco=FF0000|00FF00|0000FF,FFC6A5|DEF3BD|C6EFF7&chs=300x200&chd=s:FOE,elo&chxt=x,y&chxl=1:|Dec|Nov|Oct|0:||20K||60K||100K|
```

--------------------------------

### Example Chart.js Configuration for QuickChart

Source: https://quickchart.io/documentation/index

This JSON object represents a basic Chart.js configuration for a bar chart. It defines the chart type, labels for the X-axis, and a single dataset with its label and data points. This configuration is the primary input for QuickChart's image generation.

```JSON
{
  type: 'bar',                                
  data: {
    labels: [2012, 2013, 2014, 2015, 2016],   
    datasets: [{
      label: 'Users',                         
      data: [120, 60, 50, 180, 120]           
    }]
  }
}
```

--------------------------------

### Generate Apex Chart Image via URL Example

Source: https://quickchart.io/documentation/apex-charts-image-rendering

This example demonstrates how to generate an Apex Chart image by constructing a URL with a URL-encoded Apex Charts configuration. The resulting URL can be used directly in an `<img>` tag or similar contexts to display the chart.

```URL
http://quickchart.io/apex-charts/render?config=%7B%20series%3A%5B%7B%20name%3A%27series1%27%2C%20data%3A%5B31%2C40%2C28%2C51%2C42%2C109%2C100%5D%20%7D%2C%7B%20name%3A%27series2%27%2C%20data%3A%5B11%2C32%2C45%2C32%2C34%2C52%2C41%5D%20%7D%5D%2C%20chart%3A%7B%20height%3A350%2C%20type%3A%27area%27%20%7D%2C%20dataLabels%3A%7B%20enabled%3Afalse%20%7D%2C%20stroke%3A%7B%20curve%3A%27smooth%27%20%7D%2C%20xaxis%3A%7B%20type%3A%27datetime%27%2C%20categories%3A%5B%222018-09-19T00%3A00%3A00.000Z%22%2C%222018-09-19T01%3A30%3A00.000Z%22%2C%222018-09-19T02%3A30%3A00.000Z%22%2C%222018-09-19T03%3A30%3A00.000Z%22%2C%222018-09-19T04%3A30%3A00.000Z%22%2C%222018-09-19T05%3A30%3A00.000Z%22%2C%222018-09-19T06%3A30%3A00.000Z%22%5D%20%7D%2C%20tooltip%3A%7B%20x%3A%7B%20format%3A%27dd%2FMM%2FyyHH%3Amm%27%20%7D%2C%20%7D%2C%20%7D
```

--------------------------------

### Sparkline Chart.js Configuration Example

Source: https://quickchart.io/documentation/sparkline-api

Defines a basic sparkline chart configuration using Chart.js syntax, specifying the chart type as 'sparkline' and providing a dataset of numerical values for the chart.

```JSON
{
  type: 'sparkline',
  data: {
    datasets: [{
      data: [140, 60, 274, 370, 199]
    }]
  }
}
```

--------------------------------

### Basic vCard Format Example

Source: https://quickchart.io/documentation/vcard-qr-codes

Illustrates the fundamental structure of a vCard, a standard text-based format for electronic business cards. This example includes common fields such as name, organization, contact details, and URL, serving as a template for generating QR codes.

```vCard
BEGIN:VCARD
VERSION:3.0
N:Lastname;Firstname
FN:Firstname Lastname
ORG:CompanyName
TITLE:JobTitle
ADR:;;123 Sesame St;SomeCity;CA;12345;USA
TEL;WORK;VOICE:1234567890
TEL;CELL:Mobile
TEL;FAX:
EMAIL;WORK;INTERNET:foo@email.com
URL:http://website.com
END:VCARD
```

--------------------------------

### QuickChart WiFi QR Code API Specification and Examples

Source: https://quickchart.io/documentation/qr-codes/wifi-qr-codes

Defines the `WIFI:` string format used by QuickChart's QR code API to embed WiFi network credentials. Includes examples of API calls for generating basic and customized WiFi QR codes.

```APIDOC
WIFI:T:network_type;S:network_name;P:password;H:hidden;;

Parameters:
  T: Network type (WPA, WEP, or nopass for open networks. WPA is most common.)
  S: Network name (SSID)
  P: Password
  H: Whether the network is hidden (true or false)

Example 1 (Basic):
https://quickchart.io/qr?text=WIFI:T:WPA;S:MyHomeNetwork;P:MySecurePassword123;H:false;;

Example 2 (Customized):
https://quickchart.io/qr?text=WIFI:T:WPA;S:GuestNetwork;P:Welcome2023;H:false;;&dark=4285f4&caption=Scan to Connect&captionFontSize=15
```

--------------------------------

### QuickChart.io GraphViz Chart API

Source: https://quickchart.io/documentation/integrations/google-image-charts/examples

API for generating GraphViz charts using the DOT language. It supports various layout engines like 'dot', 'neato', 'fdp', and 'twopi', and allows specifying output format (SVG or PNG) and dimensions.

```APIDOC
Endpoint: https://quickchart.io/chart

Parameters:
  cht=gv[:<opt_engine>]
    - Description: Specifies GraphViz chart type.
    - <opt_engine>: Optional layout engine. If omitted, 'dot' is default.
      - dot (default): Hierarchical or layered drawings of directed graphs.
      - neato: Spring model layout, good for graphs up to ~100 nodes.
      - fdp: Spring model layout, works by reducing forces.
      - twopi: Radial layouts with nodes on concentric circles.

  chl=<DOT_language_string>
    - Description: The GraphViz DOT language string defining the graph structure.

  chof=png
    - Description: Optional. Sets the output image format to PNG. Default is SVG.

  chs=<width>x<height>
    - Description: Optional. Sets the dimensions (width x height) for PNG output. E.g., '300x200'.

Example Usage:
https://quickchart.io/chart?cht=gv&chl=digraph{C_0[shape=box];C_0->H_0[type=s];C_0->H_1[type=s];C_0->H_2[type=s];C_0->C_1[type=s];C_1->H_3[type=s];C_1->H_4[type=s];C_1->H_5[color=blue]}
```

--------------------------------

### Basic Chart.js Image Generation with ChartJsNodeCanvas

Source: https://quickchart.io/documentation/chart-js/image-export

Provides a basic example of initializing and using `ChartJsNodeCanvas` in Node.js to render Chart.js configurations into various output formats such as a buffer, data URL, or stream.

```JavaScript
const { CanvasRenderService } = require('chartjs-node-canvas');

const width = 300; //px
const height = 150; //px
const canvasRenderService = new CanvasRenderService(width, height);

(async () => {
  const configuration = {
    // Add your Chart.js config here (see above for example config)
  };

  // Create outputs
  const image = await canvasRenderService.renderToBuffer(configuration);
  const dataUrl = await canvasRenderService.renderToDataURL(configuration);
  const stream = canvasRenderService.renderToStream(configuration);
})();
```

--------------------------------

### Define a Chart.js Bar Chart Configuration

Source: https://quickchart.io/documentation/send-charts-in-email

An example Chart.js configuration object for a bar chart, showing how to define chart type, labels, and datasets with data. This configuration is used as the 'c' parameter for the QuickChart.io API.

```JSON
{
  "type": "bar",
  "data": {
    "labels": [2012, 2013, 2014, 2015, 2016],
    "datasets": [{
      "label": "Users",
      "data": [120, 60, 50, 180, 120]
    }]
  }
}
```

--------------------------------

### Configure Chart.js Legend Display and Position

Source: https://quickchart.io/documentation/reference/legend

This JSON configuration demonstrates how to enable the legend, set its position to 'right', and align it to 'start' within a line chart. It includes example data for 'Dollars' and 'Users' datasets.

```JSON
{
  "type": "line",
  "data": {
    "labels": [2016, 2017, 2018, 2019, 2020],
    "datasets": [
      {
        "label": "Dollars",
        "data": [1000, 1234, 2020, 2005, 1300]
      },
      {
        "label": "Users",
        "data": [50, 150, 250, 350, 400]
      }
    ]
  },
  "options": {
    "legend": {
      "display": true,
      "position": "right",
      "align": "start"
    }
  }
}
```

--------------------------------

### Generate Google Maps Directions URLs for QR Codes

Source: https://quickchart.io/documentation/qr-codes/location-qr-codes

Provides the structure and examples for creating Google Maps directions URLs. These URLs can be embedded in QR codes to guide users with specific travel modes like driving, walking, bicycling, or transit. The `travelmode` parameter is detailed with its possible values.

```APIDOC
Google Maps Directions URL:

https://www.google.com/maps/dir/?api=1&destination=destination&travelmode=mode
  - destination: The target location (e.g., Empire+State+Building,+New+York)
  - travelmode: The mode of transportation (driving, walking, bicycling, or transit)

Example:
https://quickchart.io/qr?text=https://www.google.com/maps/dir/?api=1&destination=Empire+State+Building,+New+York&travelmode=walking
```

--------------------------------

### QuickChart QR URL with Google Play Store Referral and UTM Parameters

Source: https://quickchart.io/documentation/qr-codes/app-store-qr-codes

This example illustrates how to build a QuickChart QR code URL that integrates referral and UTM parameters for Google Play Store links. It includes a `referrer` parameter to track installs from QR codes and standard UTM parameters for comprehensive campaign tracking and analytics.

```URL
https://quickchart.io/qr?text=https://play.google.com/store/apps/details?id=com.instagram.android&referrer=utm_source%3Dqrcode%26utm_medium%3Dmarketing%26utm_campaign%3Dspring_promo
```

--------------------------------

### QuickChart Chart Generation API Endpoint Parameters

Source: https://quickchart.io/documentation/index

Detailed documentation for the `https://quickchart.io/chart` API endpoint, which supports both GET and POST methods. This section describes the various parameters available to control the output chart's dimensions, resolution, background color, Chart.js version, image format, and encoding.

```APIDOC
Endpoint: https://quickchart.io/chart
Methods: GET, POST
Description: Generates chart images from Chart.js configurations.

Parameters:
  chart:
    Type: string
    Description: Chart.js configuration object to render. This is the definition of the chart in Javascript or JSON format.
  width:
    Type: integer
    Description: Width of image in pixels. Defaults to 500.
  height:
    Type: integer
    Description: Height of image in pixels. Defaults to 300.
  devicePixelRatio:
    Type: integer
    Description: Device pixel ratio of output. Set to 1 for normal resolution, 2 for retina. Defaults to 2.
  backgroundColor:
    Type: string
    Description: RGB, HEX, HSL, or color name. Defaults to transparent.
  version:
    Type: string
    Description: Chart.js version. Default to 2. Setting to 4 enables latest stable Chart.js v4 support.
  format:
    Type: string
    Description: png, webp, svg, or pdf. Defaults to png.
  encoding:
    Type: string
    Description: url or base64. Defaults to url.
```

--------------------------------

### Generate QuickChart.io Table Image with Custom Styling via URL

Source: https://quickchart.io/documentation/apis/table-image-api

This example demonstrates constructing an HTTP GET request to the QuickChart.io `/v1/table` endpoint. It includes `data` for the table content and an `options` parameter to apply custom styling such as vertical/horizontal padding, background color, and font family. All query parameters, especially JSON objects, must be URL-encoded.

```HTTP
https://api.quickchart.io/v1/table?data={"title":"Marketing Summary","columns":[{"width":200,"title":"Campaign","dataIndex":"campaign"},{"width":100,"title":"Install","dataIndex":"install","align":"right"},{"width":100,"title":"Cost","dataIndex":"cost","align":"right"}],"dataSource":["-",{"campaign":"Google CPC","install":"12","cost":"$ 400"},{"campaign":"Facebook CPC","install":"3","cost":"$ 60"},{"campaign":"Youtube Video","install":"131","cost":"$ 1,230"},"-",{"campaign":"Total","install":"146","cost":"$ 1,690"}]}&options={"paddingVertical":20,"paddingHorizontal":20,"backgroundColor":"%23eee","fontFamily":"mono"}
```

--------------------------------

### Create Styled Subgraphs for Complex Processes in GraphViz DOT

Source: https://quickchart.io/documentation/graphviz-api

This GraphViz DOT language example showcases more elaborate subgraphs, including custom styling for filled backgrounds and node colors. It demonstrates how to represent multi-stage processes with inter-subgraph connections and special node shapes for 'start' and 'end' points, enhancing visual clarity for complex flows.

```GraphViz DOT
digraph G {
  subgraph cluster_0 {
    style=filled;
    color=lightgrey;
    node [style=filled,color=white];
    a0 -> a1 -> a2 -> a3;
    label = "process #1";
  }

  subgraph cluster_1 {
    node [style=filled];
    b0 -> b1 -> b2 -> b3;
    label = "process #2";
    color=blue
  }
  start -> a0;
  start -> b0;
  a1 -> b3;
  b2 -> a3;
  a3 -> a0;
  a3 -> end;
  b3 -> end;

  start [shape=Mdiamond];
  end [shape=Msquare];
}
```

--------------------------------

### Configure and Generate Chart URL using QuickChart Python

Source: https://quickchart.io/documentation/python-chart-example

This Python code demonstrates the basic usage of the `quickchart-python` library. It initializes a `QuickChart` object, sets properties like width, height, and device pixel ratio, and assigns a Chart.js configuration. The snippet then retrieves and prints the URL from which the generated chart image can be accessed.

```Python
from quickchart import QuickChart

qc = QuickChart()
qc.width = 500
qc.height = 300
qc.device_pixel_ratio = 2.0
qc.config = {
    "type": "bar",
    "data": {
        "labels": ["Hello world", "Test"],
        "datasets": [{
            "label": "Foo",
            "data": [1, 2]
        }]
    }
}

# Print a chart URL
print(qc.get_url())
```

--------------------------------

### QuickChart QR URL for Android App Link Deep Linking

Source: https://quickchart.io/documentation/qr-codes/app-store-qr-codes

This example demonstrates generating a QR code for an Android App Link. Scanning this QR code will direct users to a specific content within an Android app, even if the app is not installed. Proper configuration of the Android app and its associated domain is required for App Links to function correctly.

```URL
https://quickchart.io/qr?text=https://yourdomain.com/special-offer
```

--------------------------------

### QuickChart QR URL for iOS Universal Link Deep Linking

Source: https://quickchart.io/documentation/qr-codes/app-store-qr-codes

This example shows how to create a QR code that points to an iOS Universal Link. When scanned, this QR code directs users to a specific path within an iOS app, even if the app is not yet installed. For this to function, the app and its associated website must be correctly configured to handle Universal Links.

```URL
https://quickchart.io/qr?text=https://yourappwebsite.com/special-offer
```

--------------------------------

### QuickChart.io Chart Creation API Reference

Source: https://quickchart.io/documentation/python-chart-example

API documentation for generating chart images and short URLs using QuickChart.io. This section details the HTTP POST endpoint for creating charts and receiving a short URL.

```APIDOC
POST /chart/create
  - Description: Generates a chart image and returns a short URL for it.
  - Request Body (JSON):
    - chart (string, required): JSON string of the Chart.js configuration.
    - width (integer, optional): Width of the chart image in pixels. Default: 500.
    - height (integer, optional): Height of the chart image in pixels. Default: 300.
    - backgroundColor (string, optional): Background color of the chart image (e.g., 'white', 'transparent', '#RRGGBB'). Default: 'white'.
  - Response (JSON):
    - url (string): The short URL pointing to the generated chart image.
```

--------------------------------

### Import Modules for Manual QuickChart URL Construction

Source: https://quickchart.io/documentation/python-chart-example

This Python snippet imports the `json` and `urllib.parse.urlencode` modules. These are essential for manually constructing QuickChart URLs by encoding chart configuration into the URL parameters, providing an alternative to the official `quickchart.io` library.

```Python
import json
from urllib.parse import urlencode  # python 3
```
Tokens:
Raw