Atlas Forms
Bar Chart
The chart-bar type renders a bar chart with vertical or horizontal orientation. Supports single series, grouped multi-series, and stacked configurations. Use it for category comparisons, monthly metrics, and ranking visualisations.
Minimal Example
{
"id": "monthly-sales",
"type": "chart-bar",
"label": "Monthly Sales",
"width": "full",
"settings": {
"height": "300px",
"binding": {
"source": "$context",
"path": "report.monthlySales"
}
}
}
// Data shape expected:
// [{ "label": "Jan", "value": 12500 }, { "label": "Feb", "value": 18200 }, ...]Settings Reference
| Setting | Type | Default | Description |
|---|---|---|---|
orientation | vertical | horizontal | vertical | Bar direction |
mode | grouped | stacked | grouped | How multi-series bars are rendered |
seriesKey | string | "value" | Property name for the value in single-series data |
labelKey | string | "label" | Property name for the category label |
series | SeriesDef[] | — | Multi-series configuration (key + label for each series) |
showDataLabels | boolean | false | Show value labels on top of each bar |
barWidth | string (CSS %) | "60%" | Width of each bar relative to category width |
chartConfig.xAxis | object | — | X axis: label, tickRotation, format |
chartConfig.yAxis | object | — | Y axis: label, format (currency/number), min, max |
Grouped Multi-Series Bar Chart
{
"id": "revenue-comparison",
"type": "chart-bar",
"settings": {
"height": "350px",
"title": "Revenue vs Target by Quarter",
"mode": "grouped",
"labelKey": "quarter",
"series": [
{ "key": "actual", "label": "Actual Revenue" },
{ "key": "target", "label": "Target Revenue" }
],
"colors": ["#6c8cff", "#22c55e"],
"chartConfig": {
"yAxis": { "label": "USD", "format": "currency" }
},
"binding": { "source": "$context", "path": "report.quarterly" }
}
}
// Data shape:
// [
// { "quarter": "Q1 2025", "actual": 145000, "target": 130000 },
// { "quarter": "Q2 2025", "actual": 162000, "target": 145000 }
// ]Horizontal Bar Chart
{
"id": "top-products",
"type": "chart-bar",
"settings": {
"orientation": "horizontal",
"title": "Top Products by Revenue",
"showDataLabels": true,
"height": "280px",
"chartConfig": {
"xAxis": { "label": "Revenue ($)", "format": "currency" },
"yAxis": { "label": "Product" }
},
"binding": { "source": "$context", "path": "report.topProducts" }
}
}Stacked Bar Chart
{
"id": "cost-breakdown",
"type": "chart-bar",
"settings": {
"mode": "stacked",
"title": "Cost Breakdown by Department",
"labelKey": "month",
"series": [
{ "key": "staffing", "label": "Staffing" },
{ "key": "infra", "label": "Infrastructure" },
{ "key": "software", "label": "Software" }
],
"binding": { "source": "$context", "path": "costs.byDepartment" }
}
}