Atlas Forms
Scatter Plot
The chart-scatter type renders a scatter plot using x/y data pairs. Ideal for correlation analysis, outlier detection, and risk vs. impact matrices. Supports a bubble variant (point size encodes a third dimension), multiple series for group comparison, and an optional linear trend line.
Data Shape
Scatter plots use { x, y } pairs rather than the { label, value } shape used by bar and line charts. For bubble charts, add a size property:
// Standard scatter: [{ x, y, label? }, ...]
[
{ "x": 2.4, "y": 85, "label": "Product A" },
{ "x": 1.8, "y": 62, "label": "Product B" },
{ "x": 3.1, "y": 91, "label": "Product C" }
]
// Bubble chart: [{ x, y, size, label? }, ...]
[
{ "x": 2.4, "y": 85, "size": 42000, "label": "Product A" },
{ "x": 1.8, "y": 62, "size": 18000, "label": "Product B" }
]Settings Reference
| Setting | Type | Default | Description |
|---|---|---|---|
bubble | boolean | false | Enable bubble mode — point size is proportional to the size property |
maxBubbleSize | number | 50 | Maximum bubble radius in pixels |
minBubbleSize | number | 5 | Minimum bubble radius in pixels |
showTrendLine | boolean | false | Overlay a linear regression trend line |
trendLineColor | string | "#ef4444" | CSS colour for the trend line |
pointSize | number | 8 | Fixed point radius (non-bubble mode) in pixels |
pointOpacity | number | 0.7 | Point fill opacity (0.0–1.0) |
series | SeriesDef[] | — | Multi-series groups: [{ key, label }] — each group is coloured separately |
chartConfig.xAxis | object | — | X axis: label, format, min, max |
chartConfig.yAxis | object | — | Y axis: label, format, min, max |
Basic Scatter with Trend Line
{
"id": "conversion-vs-spend",
"type": "chart-scatter",
"settings": {
"height": "350px",
"title": "Conversion Rate vs Ad Spend",
"showTrendLine": true,
"trendLineColor": "#f59e0b",
"pointSize": 8,
"pointOpacity": 0.65,
"chartConfig": {
"xAxis": { "label": "Ad Spend ($)", "format": "currency" },
"yAxis": { "label": "Conversion Rate (%)" }
},
"binding": { "source": "$context", "path": "campaigns.data" }
}
}Bubble Chart — Risk Matrix
A classic risk matrix uses x for probability, y for impact, and bubble size for exposure value:
{
"id": "risk-matrix",
"type": "chart-scatter",
"settings": {
"height": "400px",
"title": "Risk Matrix",
"bubble": true,
"maxBubbleSize": 60,
"minBubbleSize": 10,
"pointOpacity": 0.6,
"colors": ["#ef4444", "#f59e0b", "#22c55e"],
"chartConfig": {
"xAxis": { "label": "Probability", "min": 0, "max": 100 },
"yAxis": { "label": "Impact", "min": 0, "max": 100 }
},
"binding": { "source": "$context", "path": "risks.matrix" }
}
}
// Data:
// [
// { "x": 85, "y": 90, "size": 250000, "label": "Regulatory Change" },
// { "x": 40, "y": 60, "size": 120000, "label": "Supply Disruption" },
// { "x": 20, "y": 30, "size": 40000, "label": "Staff Turnover" }
// ]Multi-Series Scatter — Group Comparison
{
"id": "segment-scatter",
"type": "chart-scatter",
"settings": {
"height": "360px",
"title": "Revenue vs Growth by Segment",
"series": [
{ "key": "enterprise", "label": "Enterprise" },
{ "key": "smb", "label": "SMB" },
{ "key": "startup", "label": "Startup" }
],
"chartConfig": {
"xAxis": { "label": "YoY Growth (%)" },
"yAxis": { "label": "Revenue ($K)", "format": "number" }
},
"binding": { "source": "$context", "path": "segments.scatter" }
}
}
// Multi-series data shape — each series key is an array of {x, y}:
// {
// "enterprise": [{ "x": 12, "y": 840 }, { "x": 8, "y": 1200 }],
// "smb": [{ "x": 28, "y": 180 }, { "x": 35, "y": 210 }],
// "startup": [{ "x": 95, "y": 42 }, { "x": 72, "y": 68 }]
// }
Axis Bounds
Always set explicit
min and max on both axes for scatter plots used as analytical matrices (like risk grids or BCG quadrant charts). Without bounds, ECharts auto-scales to the data range, which makes the visual quadrants misleading.