Atlas Forms
Line Chart
The chart-line type renders a line chart ideal for time series data. Supports multiple series, smooth curves, data point markers, and reference lines. Use it to visualise trends over time, compare metrics across time periods, and show forecasts alongside actuals.
Minimal Example
{
"id": "usage-trend",
"type": "chart-line",
"label": "Usage Over Time",
"width": "full",
"settings": {
"height": "300px",
"binding": {
"source": "$context",
"path": "metrics.dailyUsage"
}
}
}
// Data shape (single series):
// [{ "label": "2025-01-01", "value": 1240 }, ...]Settings Reference
| Setting | Type | Default | Description |
|---|---|---|---|
smooth | boolean | false | Render smooth curved lines instead of straight segments |
showPoints | boolean | true | Show data point markers on the line |
pointSize | number | 4 | Radius of data point markers in pixels |
lineWidth | number | 2 | Line stroke width in pixels |
series | SeriesDef[] | — | Multi-series: [{ key, label }] |
referenceLines | ReferenceLine[] | — | Horizontal threshold lines: [{ value, label, color }] |
chartConfig.xAxis | object | — | X axis settings: label, type (category/time), dateFormat |
chartConfig.yAxis | object | — | Y axis settings: label, format, min, max |
Multi-Series with Reference Line
{
"id": "actuals-vs-forecast",
"type": "chart-line",
"settings": {
"height": "350px",
"title": "Actuals vs Forecast",
"smooth": true,
"showPoints": true,
"labelKey": "month",
"series": [
{ "key": "actual", "label": "Actual" },
{ "key": "forecast", "label": "Forecast" }
],
"referenceLines": [
{ "value": 100000, "label": "Target", "color": "#22c55e" }
],
"chartConfig": {
"yAxis": { "label": "Revenue", "format": "currency" }
},
"binding": { "source": "$context", "path": "report.trend" }
}
}Time Series with Date X-Axis
{
"id": "stock-price",
"type": "chart-line",
"settings": {
"smooth": true,
"showPoints": false,
"chartConfig": {
"xAxis": {
"type": "time",
"dateFormat": "MMM DD"
},
"yAxis": {
"label": "Price (USD)",
"format": "currency"
}
},
"binding": { "source": "$context", "path": "stock.priceHistory" }
}
}
// Data: [{ "label": "2025-01-15T00:00:00Z", "value": 145.23 }, ...]