KPI with a sparkline

A big number, a chip that says how much it changed, and a small trend line. One image for a weekly metrics message.

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

KPI card with the latest MRR value, a change chip and a sparkline of eight weeks — The kpi preset with the config below.

Who this is for

People who build n8n workflows, and agents that send metrics to Slack or email. You have a series of numbers, such as revenue by week, and you want a card, not a full chart.

What the kpi preset draws

A big number: the last value of the first dataset.
A change chip. It compares that value with previous when you set it, and with the first value of the dataset when you do not.
A sparkline of the dataset, without axes.

Send a line config with one dataset. The first dataset is the one that counts.

The config

{
  "type": "line",
  "data": {
    "labels": ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8"],
    "datasets": [{ "label": "MRR", "data": [8200, 8650, 8400, 8900, 9100, 9350, 9100, 9840] }]
  },
  "options": {
    "plugins": { "chartpng": { "preset": "kpi", "previous": 9100, "prefix": "$" } }
  }
}

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

Option	What it does
`preset`	`"kpi"`.
`previous`	A number. The value to compare with, such as last week's total. Only for kpi.
`prefix`	A string put before the big number, such as `"$"`.
`suffix`	A string put after the big number, such as `" users"`.

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%22line%22%2C%22data%22%3A%7B%22labels%22%3A%5B%22W1%22%2C%22W2%22%2C%22W3%22%2C%22W4%22%2C%22W5%22%2C%22W6%22%2C%22W7%22%2C%22W8%22%5D%2C%22datasets%22%3A%5B%7B%22label%22%3A%22MRR%22%2C%22data%22%3A%5B8200%2C8650%2C8400%2C8900%2C9100%2C9350%2C9100%2C9840%5D%7D%5D%7D%2C%22options%22%3A%7B%22plugins%22%3A%7B%22chartpng%22%3A%7B%22preset%22%3A%22kpi%22%2C%22previous%22%3A9100%2C%22prefix%22%3A%22%24%22%7D%7D%7D%7D&w=800&h=400&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":"line","data":{"labels":["W1","W2","W3","W4","W5","W6","W7","W8"],"datasets":[{"label":"MRR","data":[8200,8650,8400,8900,9100,9350,9100,9840]}]},"options":{"plugins":{"chartpng":{"preset":"kpi","previous":9100,"prefix":"$"}}}}, "w": 800, "h": 400, "dpr": 2}' \
  -o kpi-sparkline.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.