Chart Controls Overview
Atlas Forms includes 9 chart and gauge controls for embedding data visualisations directly in forms. All chart controls are read-only — they render data from the binding source but do not collect user input. Use them in dashboard forms, KPI cards, approval summary screens, and analytics views.
The 9 Chart Control Types
chart-bar
Vertical or horizontal bars. Grouped or stacked. Axis labels, legend.
chart-line
Line chart for time series. Multiple series. Smooth curves option.
chart-area
Filled area chart. Stacked area. Gradient fill.
chart-pie
Pie and donut variants. Legend. Label positioning.
chart-scatter
X/Y data pairs. Bubble variant. Trend line.
chart-histogram
Distribution visualisation. Configurable bin count.
chart-heatmap
Matrix data with colour scale. Row/column labels.
gauge-radial
Speedometer-style gauge. Min/max/value. Colour zones.
gauge-linear
Progress bar style. Thresholds. Direction.
Read-Only Nature
Chart controls are display-only. They render data they receive through binding — they never write values back to the form data model. The underlying charting library (Apache ECharts) renders the charts as SVG or Canvas.
Common Chart Settings
| Setting | Type | Description |
|---|---|---|
binding | BindingConfig | Source and path to the data array |
height | string (CSS) | Chart container height (default: 300px) |
chartConfig | object | Chart-specific options (axes, colors, legend, tooltip) |
title | string | Chart title rendered above the canvas |
showLegend | boolean | Show/hide the chart legend |
showTooltip | boolean | Show data tooltip on hover |
responsive | boolean | Resize chart with container (default: true) |
animation | boolean | Enable entry animation (default: true) |
colors | string[] | Override color palette (CSS colors) |
Data Binding Pattern
Charts bind to an array of data points in the form context. The array structure depends on the chart type — bar and line charts expect [{ label, value }] or [{ x, y }] pairs:
{
"id": "revenue-chart",
"type": "chart-bar",
"width": "full",
"settings": {
"height": "350px",
"title": "Monthly Revenue",
"binding": {
"source": "$context",
"path": "analytics.monthlyRevenue"
},
"chartConfig": {
"xAxis": { "label": "Month" },
"yAxis": { "label": "Revenue ($)", "format": "currency" }
}
}
}Reactive Updates
Charts update reactively when their bound data changes. If a form field calculation changes an array in the context, the chart re-renders immediately without requiring a page refresh. This makes charts ideal for live KPI dashboards embedded in admin forms.
Using Charts in Dashboard Forms
The typical pattern is a form in view or admin mode that loads data via the form's initialValues (from an API), binds charts to arrays within that data, and uses modeVisibilitySettings to hide charts in edit mode:
{
"id": "kpi-chart",
"type": "chart-line",
"modeVisibilitySettings": {
"edit": false,
"view": true,
"admin": true,
"preview": true,
"design": true
}
}