## 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):

```json
[
  { "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.

<img
  src="https://res.cloudinary.com/zimple/image/upload/c_crop,w_1440,h_760,g_north_west/f_auto,q_auto/v1777374998/interface-docs/chart-chart-settings.png"
  alt="Chart Block Configuration sidebar: Chart Type set to Bar, Data Source bound to a 'custom_data.invoices' Data Picker tag, Data Keys 'amount', Name Key 'customer', Height 300, and Show Grid / Show Tooltip / Show Legend all toggled on. The canvas on the left shows the Chart block placed below a Title block."
  width="1440"
  height="760"
  loading="lazy"
/>

## 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)

<img
  src="https://res.cloudinary.com/zimple/image/upload/c_crop,w_800,h_380,x_290,y_70/f_auto,q_auto/v1777374999/interface-docs/chart-bar-chart.png"
  alt="Bar chart rendered from the live invoices feed. Four bars labelled by customer (Acme Corporation Ltd, Nordic Solutions AB, TechVenture GmbH, Greenfield Industries) show invoice amounts on a 0–16 000 EUR scale, with an 'amount' legend entry below."
  width="800"
  height="380"
  loading="lazy"
/>