Chart: Generate (SVG)

action_generate_chart · action · Data & Transform · Available · v1.0.0

Description

Generate an SVG chart (line, bar, pie, area) from a data array — the primitive for any workflow that VISUALIZES numbers: email reports with trends, periodic summaries, historical comparisons. Pure server-side SVG rendering (zero native deps: no canvas/chart.js/sharp) → lightweight, sandbox-safe, and embeddable DIRECTLY in HTML email as a base64 data-URI (a ready-made <img> tag in the imgTag field). Fully configurable from the visual editor with sensible defaults: chart type, data expression, label/value field, title, size, colour palette. Enterprise robustness: empty/non-array data → "No data" placeholder instead of crash; non-numeric/NaN → treated as 0; negative values → zero-baseline scale; every user-supplied text is XSS-escaped (the SVG ends up in an HTML email). Output: { svg, dataUri, imgTag, width, height, pointCount }. Use case: weekly SEO report with a historical error trend vs last week (data from an upstream db_query), monthly sales pie by product category, support-ticket trend bars for management.

⚙️ Configuration parameters

Fields shown in the editor when configuring the node. Generated directly from the NodeDefconfigFields.

Field	Type	Required	Default	Description
`chartType` Tipo di grafico	`enum` `barlineareapie`	no	`bar`	Barre (categorie), linea/area (andamento nel tempo), torta (composizione %).
`dataJson` Dati (array)	`expression`	yes	— {{$node.db_query_1.json.rows}}	Espressione che risolve a un ARRAY: di oggetti [{label, value}], di numeri [10,20,30], o di coppie [["Lun",10],...]. Se vuoto, usa l'input del nodo.
`labelField` Campo etichetta	`string`	no	`label` label	Nome del campo da usare come etichetta (asse X / fetta). Default "label". Ignorato se i dati sono numeri grezzi.
`valueField` Campo valore	`string`	no	`value` value	Nome del campo numerico da plottare. Default "value".
`title` Titolo	`string`	no	— es. Errori SEO — ultime 8 settimane	Titolo mostrato in alto. Supporta {{espressioni}}.
`width` Larghezza (px)	`number`	no	`800`	Larghezza in pixel (100–4000). Default 800.
`height` Altezza (px)	`number`	no	`400`	Altezza in pixel (100–4000). Default 400.
`palette` Palette colori	`enum` `defaultbluesgreenswarm`	no	`default`	Schema colori del grafico.
`outputFormat` Formato output principale	`enum` `dataUrisvg`	no	`dataUri`	dataUri (base64, per <img> in email HTML) o svg (markup grezzo). Entrambi sono sempre disponibili nell'output.

⬆️ Node output

Fields available to downstream nodes via $node.<alias>.json.<field>:

svg
dataUri
imgTag
width
height
pointCount
primary

💡 Configuration example

JSON snippet of the node as it appears in the workflow. Values are derived fromdefaultValue and from required parameters.

{
  "id": "node-action_generate_chart-1",
  "defId": "action_generate_chart",
  "label": "Chart: Generate (SVG)",
  "config": {
    "chartType": "bar",
    "dataJson": "{{$node.db_query_1.json.rows}}",
    "labelField": "label",
    "valueField": "value",
    "width": 800,
    "height": 400,
    "palette": "default",
    "outputFormat": "dataUri"
  }
}

🔗 Related nodes in the same category

Ready to use Chart: Generate (SVG)?

Available now on all FlowForge plans. Try it free without a credit card.

Start free Browse all nodes