Bubble scatter

Scatter styletype: "scatter"

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.

Edit it — this is the actual editor panel

Design JSON — “Bubble” variant

{
  "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
      }
    }
  ]
}

Scatter examples

Real renders of the bubble scatter — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

Segments by size

Bubbles sized by deal count, colored by segment.

API overrides for this example

{
  "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 for this example

{
  "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
}

When to use the bubble style

Market segments sized by deal count
Priorities sized by effort or reach
Any XY plot with a third value as size

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 this variant'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": 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.showTrend": true,
    "scatter.showGrid": true,
    "scatter.xLabel": "Ad spend ($k)",
    "scatter.yLabel": "Revenue ($k)",
    "scatter.opacity": 1,
    "scatter.pointOpacity": 0.7,
    "scatter.showLegend": true
}'

Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.

Other scatter styles

DefaultBubbleDark

See the scatter component page for the full property reference and FAQs.