--- title: "Bubble Chart Image API — Sized scatter points | Imejis" description: "Render bubble chart images — scatter points sized by a third value and colored by segment, with a legend. Fresh data per API call. Try Imejis free." url: "https://www.imejis.io/components/scatter/bubble" --- # Bubble Chart Image API — Sized scatter points | Imejis Points sized by a third value, colored by segment. ## Use cases - Market segments sized by deal count - Priorities sized by effort or reach - Any XY plot with a third value as size ## Properties | Name | Type | Default | Description | | --- | --- | --- | --- | | `data` | `object[]` | `[]` | 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"` | Default point fill. | | `pointSize` | `number` (min 0) | `6` | Default point radius in px (per-point `r` overrides). | | `pointOpacity` | `number` (min 0, max 1) | `0.85` | Point fill opacity (0–1). | | `showTrend` | `boolean` | `false` | Draw a least-squares trend line through the points. | | `trendColor` | `color` | `"#4f46e5"` | Trend-line color. | | `showGrid` | `boolean` | `true` | Draw background gridlines. | | `gridColor` | `color` | `"#e5e7eb"` | Gridline color. | | `axisColor` | `color` | `"#94a3b8"` | Axis line and tick-label color. | | `labelColor` | `color` | `"#334155"` | Axis-title and point-label text color. | | `xLabel` | `string` | `""` | X-axis title. | | `yLabel` | `string` | `""` | Y-axis title. | | `showLabels` | `boolean` | `false` | Draw each point's `label` beside its dot. | | `showLegend` | `boolean` | `true` | Show a categorical legend when points carry a `category`. | | `xMin` | `number` | — | Fixed x-axis minimum (auto when omitted). | | `xMax` | `number` | — | Fixed x-axis maximum (auto when omitted). | | `yMin` | `number` | — | Fixed y-axis minimum (auto when omitted). | | `yMax` | `number` | — | Fixed y-axis maximum (auto when omitted). | | `opacity` | `number` | `1` | Overall component opacity from 0 (transparent) to 1 (opaque). | | `borderWidth` | `number` | `0` | Border thickness in pixels around the component. | | `borderColor` | `color` | `"transparent"` | Border color (any CSS color). | | `borderStyle` | `'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'none'` | `"solid"` | Border line style. | | `borderRadius` | `number` | `0` | Corner radius in pixels. | | `boxShadow` | `string` | — | CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)". | ## Design JSON (this variant) ```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": 20, "y": 30, "r": 10, "category": "SMB" }, { "x": 35, "y": 55, "r": 18, "category": "Mid-market" }, { "x": 55, "y": 40, "r": 14, "category": "SMB" }, { "x": 70, "y": 72, "r": 26, "category": "Enterprise" }, { "x": 82, "y": 60, "r": 12, "category": "Mid-market" } ], "showTrend": true, "showGrid": true, "xLabel": "Ad spend ($k)", "yLabel": "Revenue ($k)", "opacity": 1, "pointOpacity": 0.7, "showLegend": true } } ] } ``` ## Examples ### Segments by size Bubbles sized by deal count, colored by segment. API overrides that reproduce this example: ```json { "scatter.data": [ { "x": 20, "y": 30, "r": 10, "category": "SMB" }, { "x": 35, "y": 55, "r": 18, "category": "Mid-market" }, { "x": 55, "y": 40, "r": 14, "category": "SMB" }, { "x": 70, "y": 72, "r": 26, "category": "Enterprise" }, { "x": 82, "y": 60, "r": 12, "category": "Mid-market" } ], "scatter.pointOpacity": 0.7, "scatter.showLegend": true } ``` ### Bubbles, no legend The same bubbles with the legend hidden. API overrides that reproduce this example: ```json { "scatter.data": [ { "x": 20, "y": 30, "r": 10, "category": "SMB" }, { "x": 35, "y": 55, "r": 18, "category": "Mid-market" }, { "x": 55, "y": 40, "r": 14, "category": "SMB" }, { "x": 70, "y": 72, "r": 26, "category": "Enterprise" }, { "x": 82, "y": 60, "r": 12, "category": "Mid-market" } ], "scatter.pointOpacity": 0.7, "scatter.showLegend": false } ``` ## API overrides Push fresh points per render with '.data' (or just '') as [{ x, y, r?, category? }]; x and y are numbers and the axes rescale to fit. Flat override payload (`key.property` addressing) with the sample design's current values — send only the keys you want to change: ```json { "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 } ``` ```bash 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 }' ``` `{{YOUR_DESIGN_ID}}` and `{{YOUR_API_KEY}}` are placeholders: first create the design in your account (paste the sample design JSON above into the editor at https://app.imejis.io, or create it programmatically via the imejis MCP server's `create_design` + `update_design` tools), then render it with the design's id and one of your API keys. Agents: the MCP server at https://api.imejis.io/api/mcp exposes this same catalog as structured data via the `list_component_types` tool (property kinds, allowed values, bounds, ready-to-use sample designs). ## Related - [Scatter component](https://www.imejis.io/components/scatter.md) — full reference and FAQs - [Dark](https://www.imejis.io/components/scatter/dark.md) — A scatter on a dark card with bright points — built for social.