Scatter component
Datatype: "scatter"A scatter / XY plot — points on shared X and Y axes, optionally sized and colored by field, with an optional trend line and a categorical legend. Key each point by { x, y } and swap the data per API call to build correlation, distribution and bubble-plot images.
Edit it — this is the actual editor panel
Design JSON
{
"title": "Scatter sample",
"description": "Spend vs revenue by channel, with a trend line",
"dimensions": {
"width": 660,
"height": 440
},
"background": {
"color": "#ffffff"
},
"components": [
{
"id": "sample-scatter",
"key": "scatter",
"type": "scatter",
"position": {
"x": 20,
"y": 20
},
"rotation": 0,
"size": {
"width": 620,
"height": 400
},
"dynamic": true,
"properties": {
"data": [
{
"x": 5,
"y": 12,
"category": "Search"
},
{
"x": 9,
"y": 18,
"category": "Search"
},
{
"x": 14,
"y": 20,
"category": "Social"
},
{
"x": 18,
"y": 28,
"category": "Search"
},
{
"x": 22,
"y": 26,
"category": "Social"
},
{
"x": 27,
"y": 35,
"category": "Search"
},
{
"x": 31,
"y": 33,
"category": "Social"
},
{
"x": 36,
"y": 44,
"category": "Search"
},
{
"x": 42,
"y": 47,
"category": "Social"
},
{
"x": 48,
"y": 55,
"category": "Search"
}
],
"showTrend": true,
"showGrid": true,
"xLabel": "Ad spend ($k)",
"yLabel": "Revenue ($k)",
"opacity": 1
}
}
]
}Like what you built? The full editor — canvas, templates and the render API — is free to start.
Open the editorScatter examples
Real renders of the scatter — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.
Spend vs revenue
Two channels with a shared trend line.
API overrides for this example
{
"scatter.data": [
{
"x": 5,
"y": 12,
"category": "Search"
},
{
"x": 9,
"y": 18,
"category": "Search"
},
{
"x": 14,
"y": 20,
"category": "Social"
},
{
"x": 18,
"y": 28,
"category": "Search"
},
{
"x": 22,
"y": 26,
"category": "Social"
},
{
"x": 27,
"y": 35,
"category": "Search"
},
{
"x": 31,
"y": 33,
"category": "Social"
},
{
"x": 36,
"y": 44,
"category": "Search"
},
{
"x": 42,
"y": 47,
"category": "Social"
},
{
"x": 48,
"y": 55,
"category": "Search"
}
],
"scatter.showTrend": true,
"scatter.xLabel": "Ad spend ($k)",
"scatter.yLabel": "Revenue ($k)"
}Price vs rating
A single-series scatter with a trend line.
API overrides for this example
{
"scatter.data": [
{
"x": 12,
"y": 3.9
},
{
"x": 19,
"y": 4.2
},
{
"x": 24,
"y": 4
},
{
"x": 30,
"y": 4.4
},
{
"x": 38,
"y": 4.3
},
{
"x": 45,
"y": 4.6
},
{
"x": 52,
"y": 4.5
},
{
"x": 60,
"y": 4.8
}
],
"scatter.showTrend": true,
"scatter.pointColor": "#0d9488",
"scatter.xLabel": "Price ($)",
"scatter.yLabel": "Rating"
}All scatter styles
Every style rendered live — each is just a different set of property values on the same component, and each has its own page with a dedicated preview, use cases and API example.
Use cases
What developers typically build with the scatter component.
- Correlations — spend vs revenue, price vs rating
- Distributions and clusters colored by segment
- Bubble charts with a third value as point size
- Quadrant and prioritization plots
- Experiment and benchmark result scatters
Use it dynamically via the API
Push fresh points per render with '<key>.data' (or just '<key>') as [{ x, y, r?, category? }]; x and y are numbers and the axes rescale to fit.
Full API request with the sample design's current values — the playground above sends only the properties you change
curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
"scatter.data": [
{
"x": 5,
"y": 12,
"category": "Search"
},
{
"x": 9,
"y": 18,
"category": "Search"
},
{
"x": 14,
"y": 20,
"category": "Social"
},
{
"x": 18,
"y": 28,
"category": "Search"
},
{
"x": 22,
"y": 26,
"category": "Social"
},
{
"x": 27,
"y": 35,
"category": "Search"
},
{
"x": 31,
"y": 33,
"category": "Social"
},
{
"x": 36,
"y": 44,
"category": "Search"
},
{
"x": 42,
"y": 47,
"category": "Social"
},
{
"x": 48,
"y": 55,
"category": "Search"
}
],
"scatter.showTrend": true,
"scatter.showGrid": true,
"scatter.xLabel": "Ad spend ($k)",
"scatter.yLabel": "Revenue ($k)",
"scatter.opacity": 1
}'Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.
Property reference
Every property the scatter component accepts — in the editor, in design JSON, and as API overrides.
| Property | Type | Edits as | Default | Description |
|---|---|---|---|---|
| data | object[] | text | [] | Points: array of { x, y, r?, label?, color?, category? }. x and y are numbers; r sizes a bubble, category colors the point and adds a legend. |
| pointColor | color | #6366f1 | "#6366f1" | Default point fill. |
| pointSize | number | 6 | 6 | Default point radius in px (per-point `r` overrides). |
| pointOpacity | number | 0.85 | 0.85 | Point fill opacity (0–1). |
| showTrend | boolean | false | false | Draw a least-squares trend line through the points. |
| trendColor | color | #4f46e5 | "#4f46e5" | Trend-line color. |
| showGrid | boolean | true | true | Draw background gridlines. |
| gridColor | color | #e5e7eb | "#e5e7eb" | Gridline color. |
| axisColor | color | #94a3b8 | "#94a3b8" | Axis line and tick-label color. |
| labelColor | color | #334155 | "#334155" | Axis-title and point-label text color. |
| xLabel | string | text | "" | X-axis title. |
| yLabel | string | text | "" | Y-axis title. |
| showLabels | boolean | false | false | Draw each point's `label` beside its dot. |
| showLegend | boolean | true | true | Show a categorical legend when points carry a `category`. |
| xMin | number | 0 | — | Fixed x-axis minimum (auto when omitted). |
| xMax | number | 0 | — | Fixed x-axis maximum (auto when omitted). |
| yMin | number | 0 | — | Fixed y-axis minimum (auto when omitted). |
| yMax | number | 0 | — | Fixed y-axis maximum (auto when omitted). |
| opacity | number | 1 | 1 | Overall component opacity from 0 (transparent) to 1 (opaque). |
| borderWidth | number | 0 | 0 | Border thickness in pixels around the component. |
| borderColor | color | transparent | "transparent" | Border color (any CSS color). |
| borderStyle | 'solid' | 'dashed' | 'dotted' | 'double' | 'none' | soliddasheddotteddoublenone | "solid" | Border line style. |
| borderRadius | number | 0 | 0 | Corner radius in pixels. |
| boxShadow | string | text | — | CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)". |
Frequently Asked Questions
Send '<key>.data' as an array of { x, y } objects. Add an optional r to size a bubble, a category to color the point and build a legend, or a color for an explicit fill. The axes scale to fit the data automatically.
Yes. Turn on showTrend and the chart draws a least-squares line through the points, so a correlation reads at a glance. It works best when the relationship is roughly linear.
Give each point an r value and it becomes the point radius, so a third number sets the bubble size. Combine r with category coloring to show three dimensions in one plot.
Yes. Add a category to each point and points sharing a category get the same color from the palette, with a small legend added automatically. A per-point color overrides its category color.