How to Add Charts

Type: How-to | Audience: End-user | Goal: Create bar, line, area, or pie charts

Adding a Chart Block

1. Hover the gap between two rows and click the + button to add a row (pick any layout in the Add row dialog).
2. Click an empty column inside the row, then pick Chart in the Add block dialog.
3. Click the new block to open its settings in the sidebar.

Selecting Chart Type

Choose the chart type from the Chart Type dropdown:

• Bar -- vertical bar chart (default)
• Line -- line chart
• Area -- filled area chart
• Pie -- pie/donut chart

Configuring Data Source

Use the Data Source field to bind the chart to an array data source. The Data Picker only allows array-typed values here; pick the array field that holds your data points (it will appear as a blue tag, for example a custom field that resolves to a list of invoices).

Each item in the array must be an object whose properties supply the values and labels for the chart.

Setting Keys

• Data Keys -- comma-separated list of property names to plot as values. For a single series, enter one key (for example amount). For multi-series charts, separate with commas (for example paid,open,overdue).
• Name Key -- the property used for labels on the X-axis or pie segments. Defaults to name.

Example data structure (matching the screenshot):

[
  { "invoice_number": "INV-2026-001", "customer": "Acme Corporation Ltd", "amount": 12500, "status": "Paid" },
  { "invoice_number": "INV-2026-002", "customer": "Nordic Solutions AB",  "amount":  2400, "status": "Paid" },
  { "invoice_number": "INV-2026-003", "customer": "TechVenture GmbH",     "amount":  8750, "status": "Open" },
  { "invoice_number": "INV-2026-004", "customer": "Greenfield Industries","amount": 15000, "status": "Open" }
]

With Data Keys = amount and Name Key = customer, each row becomes one bar/segment labelled by customer name.

Visual Options

• Height -- chart height in pixels (100--800, default 300)
• Show Grid -- toggle background grid lines on/off (default on)
• Show Tooltip -- toggle hover tooltips on/off (default on)
• Show Legend -- toggle the chart legend on/off (default off)