Dark scatter

Scatter styletype: "scatter"

Generate dark-mode scatter / XY plot images — bright points on a dark card with an optional trend line — for reports and social cards. Fresh data per API call. Create scatter images free with Imejis.

Edit it — this is the actual editor panel

Design JSON — “Dark” variant

{
  "title": "Scatter sample",
  "description": "Spend vs revenue by channel, with a trend line",
  "dimensions": {
    "width": 660,
    "height": 440
  },
  "background": {
    "color": "#0d1117"
  },
  "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,
        "trendColor": "#22d3ee",
        "gridColor": "#1e293b",
        "labelColor": "#e2e8f0",
        "axisColor": "#64748b"
      }
    }
  ]
}

Scatter examples

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

Dark correlation

Spend vs revenue in bright points on a near-black card.

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.trendColor": "#22d3ee",
  "scatter.gridColor": "#1e293b",
  "scatter.labelColor": "#e2e8f0",
  "scatter.axisColor": "#64748b"
}

Dark bubbles

Segment bubbles on dark.

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.showTrend": true,
  "scatter.trendColor": "#22d3ee",
  "scatter.gridColor": "#1e293b",
  "scatter.labelColor": "#e2e8f0",
  "scatter.axisColor": "#64748b"
}

When to use the dark style

Dark-theme dashboards and status cards
Correlation graphics on dark
Social cards with an XY plot

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": 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,
    "scatter.trendColor": "#22d3ee",
    "scatter.gridColor": "#1e293b",
    "scatter.labelColor": "#e2e8f0",
    "scatter.axisColor": "#64748b"
}'

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

Other scatter styles

Default BubbleDark

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