Interface Builder

Appearance

Chart Block ​

Type: Reference | Audience: Interface builder user

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

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.

Settings ​

SettingDescription
Chart TypePick Bar, Line, Area, or Pie (default: Bar).
Data SourceBind to an array using the Data Picker. Each item in the array becomes a data point.
Data KeysProperty 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 KeyThe property used for the category label on the X axis or pie segment (for example customer or name). Default: name.
HeightChart height in pixels, between 100 and 800 (default: 300).
Show GridShow background grid lines. On by default.
Show TooltipShow a tooltip when hovering a data point. On by default.
Show LegendShow 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.

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.

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 and Conditional Visibility.