ChartPNG

Comparison with the previous period

This period against the one before it, with the change in percent.

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

Bar chart of signups by day, this week against last week in grey, with the percentage change
The comparison preset with the config below.

Who this is for

People who build n8n workflows, and agents that send a weekly or monthly report to Slack or email. You have two series of the same length, such as this week and last week, and the reader wants to know if it went up.

What the comparison preset draws

Put the current period first. Both datasets use the same labels.

The config

{
  "type": "bar",
  "data": {
    "labels": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    "datasets": [
      { "label": "This week", "data": [42, 55, 38, 61, 70, 33, 29] },
      { "label": "Last week", "data": [36, 48, 41, 52, 58, 35, 24] }
    ]
  },
  "options": {
    "plugins": { "chartpng": { "preset": "comparison" } }
  }
}

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

OptionWhat it does
preset"comparison".

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%22Mon%22%2C%22Tue%22%2C%22Wed%22%2C%22Thu%22%2C%22Fri%22%2C%22Sat%22%2C%22Sun%22%5D%2C%22datasets%22%3A%5B%7B%22label%22%3A%22This%20week%22%2C%22data%22%3A%5B42%2C55%2C38%2C61%2C70%2C33%2C29%5D%7D%2C%7B%22label%22%3A%22Last%20week%22%2C%22data%22%3A%5B36%2C48%2C41%2C52%2C58%2C35%2C24%5D%7D%5D%7D%2C%22options%22%3A%7B%22plugins%22%3A%7B%22chartpng%22%3A%7B%22preset%22%3A%22comparison%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":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],"datasets":[{"label":"This week","data":[42,55,38,61,70,33,29]},{"label":"Last week","data":[36,48,41,52,58,35,24]}]},"options":{"plugins":{"chartpng":{"preset":"comparison"}}}}, "w": 800, "h": 450, "dpr": 2}' \
  -o period-comparison.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