ChartPNG

Ranking chart

Who is first, and by how much. Horizontal bars from highest to lowest, with the first one highlighted.

A report preset. Reference: Report presets. More workflows: n8n guide.

Horizontal bar chart of the share of signups by channel, ordered from highest to lowest
The ranking preset with the config below.

Who this is for

People who build n8n workflows, and agents that send a top list to Slack or email: signups by channel, sales by rep, errors by endpoint. Send the rows in any order.

What the ranking preset draws

Use a bar config with one dataset. Keep the list short: five to ten rows read well.

The config

{
  "type": "bar",
  "data": {
    "labels": ["Newsletter", "Organic search", "Direct", "Referral", "Social"],
    "datasets": [{ "label": "Share of signups", "data": [27, 38, 12, 17, 6] }]
  },
  "options": {
    "plugins": { "chartpng": { "preset": "ranking", "suffix": "%" } }
  }
}

The preset and its options live under options.plugins.chartpng:

OptionWhat it does
preset"ranking".
prefixA string put before each value, such as "$".
suffixA string put after each value, such as "%".

Anything your config sets wins over the preset, the same as with the theme.

The GET URL

The whole config goes in c, URL-encoded. Paste the URL in an <img>, an email or a Slack image block. Past a few thousand characters, use a POST.

https://chartpng.dev/chart?c=%7B%22type%22%3A%22bar%22%2C%22data%22%3A%7B%22labels%22%3A%5B%22Newsletter%22%2C%22Organic%20search%22%2C%22Direct%22%2C%22Referral%22%2C%22Social%22%5D%2C%22datasets%22%3A%5B%7B%22label%22%3A%22Share%20of%20signups%22%2C%22data%22%3A%5B27%2C38%2C12%2C17%2C6%5D%7D%5D%7D%2C%22options%22%3A%7B%22plugins%22%3A%7B%22chartpng%22%3A%7B%22preset%22%3A%22ranking%22%2C%22suffix%22%3A%22%25%22%7D%7D%7D%7D&w=800&h=450&dpr=2

The same chart with a POST

A POST takes the same fields in a JSON body. Use it from a server, or whenever the URL gets too long. The response is the PNG.

curl https://chartpng.dev/chart \
  -H "Content-Type: application/json" \
  -d '{"c": {"type":"bar","data":{"labels":["Newsletter","Organic search","Direct","Referral","Social"],"datasets":[{"label":"Share of signups","data":[27,38,12,17,6]}]},"options":{"plugins":{"chartpng":{"preset":"ranking","suffix":"%"}}}}, "w": 800, "h": 450, "dpr": 2}' \
  -o ranking-chart.png

In n8n

Build the config in a Code node and call https://chartpng.dev/chart with the HTTP Request node, as then8n guide shows. The templateweekly KPI report to Slack builds a KPI and a comparison and posts both images in one Slack message.

If a model wrote the config

Models often send near-JSON: a code fence around it, single quotes, a trailing comma. ChartPNG repairs the usual cases and lists what it changed in the X-ChartPNG-Fixes response header. Functions written as text are removed, never run. See lenient parsing.

Other report templates