Chart
A display-only data visualization field supporting bar, line, and pie chart types.
The Chart field renders a data visualization directly on the form canvas. It does not collect user input. Use it to display statistics, survey results, performance metrics, or any data that benefits from a visual representation.
Configuration
| Property | Type | Default | Description |
|---|---|---|---|
| label | string | -- | Heading text displayed above the chart |
| width | LayoutWidth | "full" | Horizontal space the field occupies |
| chartType | string | -- | Chart visualization type: "bar", "line", or "pie" |
| xLabel | string | -- | Label for the X axis (bar and line charts) |
| yLabel | string | -- | Label for the Y axis (bar and line charts) |
| data | ChartDatum[] | -- | Array of data points (see below) |
| dataJson | string | -- | Raw JSON string of the data array, editable in the chart editor |
ChartDatum Object
Each data point in the data array has the following properties:
| Property | Type | Description |
|---|---|---|
| x | string or number | The X-axis value or category label |
| y | number | The Y-axis numeric value |
Chart Types
- bar -- Vertical bar chart. Best for comparing discrete categories.
- line -- Line chart with connected data points. Best for showing trends over time.
- pie -- Pie chart showing proportions. Best for part-to-whole relationships.
Example Usage
A bar chart showing monthly signups:
{
"type": "chart",
"label": "Monthly Signups",
"chartType": "bar",
"xLabel": "Month",
"yLabel": "Users",
"data": [
{ "x": "Jan", "y": 120 },
{ "x": "Feb", "y": 185 },
{ "x": "Mar", "y": 240 },
{ "x": "Apr", "y": 310 }
]
}