The Chart block renders a bar, line, area, or pie chart from an array in your data.

<img
  src="https://res.cloudinary.com/zimple/image/upload/c_crop,w_780,h_380,x_330,y_80/f_auto,q_auto/v1777374999/interface-docs/chart-bar-chart.png"
  alt="A Bar Chart titled 'test' with four customer names along the X axis -- Acme Corporation Ltd, Nordic Solutions AB, TechVenture GmbH, Greenfield Industries -- and a single 'amount' series shown as blue bars with a legend underneath."
  width="780"
  height="380"
  loading="lazy"
/>

## Settings

| Setting | Description |
|---|---|
| **Chart Type** | Pick **Bar**, **Line**, **Area**, or **Pie** (default: Bar). |
| **Data Source** | Bind to an array using the Data Picker. Each item in the array becomes a data point. |
| **Data Keys** | Property names to plot, comma-separated. One name for a single series (for example `amount`), multiple for a multi-series chart (for example `desktop,mobile`). Default: `value`. |
| **Name Key** | The property used for the category label on the X axis or pie segment (for example `customer` or `name`). Default: `name`. |
| **Height** | Chart height in pixels, between 100 and 800 (default: 300). |
| **Show Grid** | Show background grid lines. On by default. |
| **Show Tooltip** | Show a tooltip when hovering a data point. On by default. |
| **Show Legend** | Show a legend below the chart. Off by default. |

## Data Shape

**Data Source** must resolve to an array of objects. Each object needs:

- A property whose name matches **Name Key** -- this is the category label.
- One or more properties whose names match the entries in **Data Keys** -- these are the numeric values plotted.

Single-series example (matches the chart above):

```json
[
  { "customer": "Acme Corporation Ltd", "amount": 12500 },
  { "customer": "Nordic Solutions AB", "amount": 2400 },
  { "customer": "TechVenture GmbH", "amount": 8750 },
  { "customer": "Greenfield Industries", "amount": 15000 }
]
```

With **Name Key** = `customer` and **Data Keys** = `amount`, this renders one bar per customer.

Multi-series example:

```json
[
  { "name": "Jan", "desktop": 186, "mobile": 80 },
  { "name": "Feb", "desktop": 305, "mobile": 200 }
]
```

With **Name Key** = `name` and **Data Keys** = `desktop,mobile`, the same data renders as a two-series chart with one bar (or line/area) per series per month.

<img
  src="https://res.cloudinary.com/zimple/image/upload/c_crop,w_1440,h_780,x_0,y_0/f_auto,q_auto/v1777374998/interface-docs/chart-chart-settings.png"
  alt="Builder view 'Charts demo' with a Title block in Row 1 and a selected Chart block in Row 2. The Block Settings sidebar on the right shows the Configuration sub-tab with 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 enabled."
  width="1440"
  height="780"
  loading="lazy"
/>

## Style and Visibility

The Chart block uses the standard **Style** sub-tab (background, borders, radius) and **Visibility** sub-tab in Block Settings, the same as every other block. See [Block Styles](/docs/buttons/interface-button/interface-builder/reference/styles/block-styles) and [Conditional Visibility](/docs/buttons/interface-button/interface-builder/how-to/visibility/conditional-visibility).