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:

{
  "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:

{
  "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:

{
  "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:

{
  "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:

{
  "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.