<!-- BusyBot node reference — https://busybot.net/tools/quickchart/ -->

> Node: QuickChart (`quickchart`) · Action (binary) · v1
> Category: Utility · Credentials: none
> Updated: 2026-08-16

# QuickChart

> Generate chart images from data via QuickChart.io

## Overview

The QuickChart tool generates chart images by sending a Chart.js configuration to the QuickChart.io public API. It aggregates all input items into datasets for a single chart, supports bar, line, pie, doughnut, and polar area chart types, and outputs a binary image in PNG, SVG, PDF, or WebP format. No authentication is required — the public QuickChart.io API is free. Optionally supports a self-hosted QuickChart instance via a configurable base URL.

**Category:** Utility  
**Tool Name:** `quickchart`  
**Version:** 1

**Appearance:** Icon: `lucide-BarChart` | Color: `#4285F4`

## Node Type

**Action (Binary)** — handles file/binary data operations

## Input / Output

| Direction | Port(s) |
|-----------|--------|
| Input | `Input` |
| Output | `Output`, `Error` |

## Credentials

This tool does not require any credentials.

### Parameters

| Parameter | Type | Required | Default | Description |
|-----------|------|----------|---------|-------------|
| Chart Type | `options` | No | `bar` | The type of chart to create. |
| | | | | Options: `bar`, `doughnut`, `line`, `pie`, `polarArea` (shown as "Polar Chart") |
| Add Labels | `options` | No | `manually` | How to provide chart labels — manually or as a JSON array. |
| | | | | Options: `manually`, `array` (shown as "From Array") |
| Labels | `fixedCollection` | Yes | `{}` | Labels for the chart X axis or segments. Add one entry per label, in order. _(shown when Add Labels is `manually`)_ |
| — Label | `string` | No | — | One label for the chart X axis or segment. |
| Labels Array | `string` | Yes | — | A JSON array of label strings for the chart, e.g. `["Berlin", "Paris", "Rome", "New York"]`. _(shown when Add Labels is `array`)_ |
| Data | `json` | Yes | — | Data values as a JSON array. Each input item contributes one dataset. See https://quickchart.io/documentation/chart-types/ for examples. |
| Put Output In Field | `string` | Yes | `data` | Name of the binary property to store the chart image in. |
| Chart Options | `collection` | No | `{}` | Chart-level rendering options. Add only the ones you need. |
| — Background Color | `string` | No | — | Background color of the chart canvas (CSS color, hex, rgba). |
| — Device Pixel Ratio | `number` | No | `2` | Pixel ratio for rendering resolution (1 or 2). |
| — Format | `options` | No | `png` | Output image format. |
| | | | | Options: `png`, `pdf`, `svg`, `webp` |
| — Height | `number` | No | `300` | Height of the chart image in pixels. |
| — Horizontal | `boolean` | No | `false` | Whether to render the chart with a horizontal Y axis. Only applicable to bar charts. _(shown when Chart Type is `bar`)_ |
| — Width | `number` | No | `500` | Width of the chart image in pixels. |
| Dataset Options | `collection` | No | `{}` | Per-dataset styling options. Applied to the dataset contributed by each input item. |
| — Background Color | `string` | No | — | Fill color for the dataset (area of a line graph, fill of a bar chart, etc.). |
| — Border Color | `string` | No | — | Color used for lines/borders of the dataset. |
| — Fill | `boolean` | No | `true` | Whether to fill the area under a line chart. _(shown when Chart Type is `line`)_ |
| — Label | `string` | No | — | Legend label for this dataset. Defaults to `Chart` when left empty. |
| — Point Style | `options` | No | `circle` | Style of data points on line charts. _(shown when Chart Type is `line`)_ |
| | | | | Options: `circle`, `cross`, `crossRot`, `dash`, `line`, `rect`, `rectRot`, `rectRounded`, `star`, `triangle` |
| Base URL | `string` | No | `https://quickchart.io` | Base URL for the QuickChart API. Change this if using a self-hosted QuickChart instance. |
| Max Concurrency | `number` | No | `10` | Maximum number of items to process concurrently. |

## Output Data

This node does not process items one by one. It **aggregates every input item into a single chart and emits exactly one output item**, no matter how many items arrived.

That one item's JSON **replaces** the input item JSON rather than merging onto it — incoming fields do **not** pass through. The output JSON is only the Chart.js configuration that was rendered:

```json
{
  "chart": {
    "type": "bar",
    "data": {
      "labels": ["Q1", "Q2", "Q3", "Q4"],
      "datasets": [
        {
          "label": "Weekly Sales",
          "data": [65, 59, 80, 81],
          "type": "bar",
          "backgroundColor": "#42a5f5"
        }
      ]
    }
  }
}
```

- The rendered image lands in **binary** data, under the property named by **Put Output In Field** (default `data`), with the file name `chart.{format}` and a MIME type matching the chosen Format.
- Binary data from the **first** input item is merged in alongside the chart, so a file carried by that item is still available downstream under its own property name.
- If an input item arrives carrying an upstream error, it is routed out on its own instead of being drawn, and the remaining items still produce a chart.

Attach the image downstream by pointing a file, email or upload node at the same binary property name.

## Usage Examples

- Generate a bar chart from sales data
- Create a pie chart showing market share
- Render a line chart of monthly revenue
- Generate a doughnut chart as SVG
- Create a chart image and attach it to an email

## Example Configuration

Bar chart with labels typed in one by one:

```json
{
  "type": "quickchart",
  "parameters": {
    "chartType": "bar",
    "labelsMode": "manually",
    "output": "chart_image",
    "data": "[65, 59, 80, 81, 56, 55, 40]",
    "labelsUi": {
      "labelsValues": [
        { "label": "Monday" },
        { "label": "Tuesday" },
        { "label": "Wednesday" },
        { "label": "Thursday" },
        { "label": "Friday" },
        { "label": "Saturday" },
        { "label": "Sunday" }
      ]
    },
    "datasetOptions": {
      "label": "Weekly Sales",
      "backgroundColor": "#42a5f5"
    }
  }
}
```

Pie chart with labels supplied as a JSON array, on a light canvas:

```json
{
  "type": "quickchart",
  "parameters": {
    "chartType": "pie",
    "labelsMode": "array",
    "output": "pie_chart",
    "data": "[30, 25, 20, 15, 10]",
    "labelsArray": "[\"Product A\", \"Product B\", \"Product C\", \"Product D\", \"Product E\"]",
    "chartOptions": {
      "width": 500,
      "height": 500,
      "backgroundColor": "#f8f9fa",
      "format": "png"
    },
    "datasetOptions": {
      "label": "Market Share",
      "backgroundColor": "#ff6384"
    }
  }
}
```

Filled line chart at high resolution:

```json
{
  "type": "quickchart",
  "parameters": {
    "chartType": "line",
    "labelsMode": "array",
    "output": "trend_chart",
    "data": "[12, 19, 3, 5, 2, 3, 9, 15, 10, 8, 13, 7]",
    "labelsArray": "[\"Jan\",\"Feb\",\"Mar\",\"Apr\",\"May\",\"Jun\",\"Jul\",\"Aug\",\"Sep\",\"Oct\",\"Nov\",\"Dec\"]",
    "chartOptions": {
      "width": 800,
      "height": 400,
      "devicePixelRatio": 2,
      "format": "png"
    },
    "datasetOptions": {
      "label": "Monthly Revenue (k$)",
      "borderColor": "#4bc0c0",
      "backgroundColor": "rgba(75, 192, 192, 0.2)",
      "fill": true,
      "pointStyle": "circle"
    }
  }
}
```

Horizontal bar chart rendered as SVG:

```json
{
  "type": "quickchart",
  "parameters": {
    "chartType": "bar",
    "labelsMode": "array",
    "output": "horizontal_bars",
    "data": "[45, 67, 89, 23, 12]",
    "labelsArray": "[\"Team A\", \"Team B\", \"Team C\", \"Team D\", \"Team E\"]",
    "chartOptions": {
      "horizontal": true,
      "width": 600,
      "height": 300,
      "format": "svg"
    },
    "datasetOptions": {
      "label": "Performance Score",
      "backgroundColor": "#ff9f40"
    }
  }
}
```

### Error Handling

| Mode | Behavior |
|------|----------|
| **stop** | Halts workflow on first error |
| **continue** | Skips failed items, passes successful ones through |
| **errorPort** | Routes failed items to Error output port |

## Tips

Generate chart images (bar, line, pie, doughnut, polar area) via QuickChart.io — no authentication required.

### Behavior notes

- **The node emits one item, not one per input.** Anything downstream should be built around a single chart item; do not expect the incoming items to survive the node.
- **Data and Labels are node-level values.** They are read from the node configuration, not from each incoming item, and `{{ }}` expressions in them are not evaluated — put literal JSON in **Data** and **Labels Array**. Feeding the node several items therefore repeats the same series rather than producing one series per item; send one item and put the whole series in **Data**.
- **Labels and data must line up.** The chart takes as many bars/points/segments as there are entries in **Data**; extra labels are ignored and missing ones render blank.
- **Horizontal only applies to bar charts** — the option is hidden for every other chart type, and setting it flips the rendered chart to a horizontal bar.
- **Format drives everything downstream** — the file extension, the MIME type and the binary payload. Pick `svg` or `pdf` if the chart will be scaled or printed; `png` is the default and is safest for email.

### Chart type considerations

- **Bar** — set `horizontal: true` in Chart Options for horizontal bars.
- **Line** — `fill` and `pointStyle` in Dataset Options only appear for this type.
- **Pie / Doughnut** — segment colors come from Dataset Options' Background Color.
- **Polar Area** — behaves like a pie chart with a different visual representation.