Dark dumbbell

Dumbbell styletype: "dumbbell"

Generate dark-mode dumbbell / range-plot images — bright dots on a dark canvas for social. Fresh before→after data per API call. Try Imejis free.

Edit it — this is the actual editor panel

Design JSON — “Dark” variant

{
  "title": "Dumbbell sample",
  "description": "Region revenue, Q1 → Q2",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#0f172a"
  },
  "components": [
    {
      "id": "sample-dumbbell",
      "key": "change",
      "type": "dumbbell",
      "position": {
        "x": 120,
        "y": 60
      },
      "rotation": 0,
      "size": {
        "width": 560,
        "height": 300
      },
      "dynamic": true,
      "properties": {
        "data": [
          {
            "label": "North",
            "from": 120,
            "to": 180
          },
          {
            "label": "South",
            "from": 90,
            "to": 140
          },
          {
            "label": "East",
            "from": 160,
            "to": 150
          },
          {
            "label": "West",
            "from": 70,
            "to": 130
          }
        ],
        "fromColor": "#64748b",
        "toColor": "#38bdf8",
        "colorByDirection": true,
        "showValues": true,
        "fromLabel": "Q1",
        "toLabel": "Q2",
        "showLegend": true,
        "valueFormat": "compact",
        "showAxis": true,
        "showGrid": true,
        "opacity": 1,
        "lineColor": "#334155",
        "gridColor": "#1e293b",
        "textColor": "#e2e8f0"
      }
    }
  ]
}

Dumbbell examples

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

Dark YoY revenue

Year-over-year revenue change on slate, compact-formatted.

API overrides for this example

{
  "change.fromColor": "#64748b",
  "change.toColor": "#38bdf8",
  "change.lineColor": "#334155",
  "change.gridColor": "#1e293b",
  "change.textColor": "#e2e8f0",
  "change.data": [
    {
      "label": "US",
      "from": 3.2,
      "to": 4.6
    },
    {
      "label": "EU",
      "from": 2.1,
      "to": 2.9
    },
    {
      "label": "APAC",
      "from": 1.4,
      "to": 2.3
    }
  ],
  "change.valueFormat": "compact",
  "change.fromLabel": "2023",
  "change.toLabel": "2024",
  "change.showLegend": true,
  "change.colorByDirection": false
}

Dark price bands

Product price ranges as bright dumbbells on a near-black card.

API overrides for this example

{
  "change.fromColor": "#94a3b8",
  "change.toColor": "#f472b6",
  "change.lineColor": "#334155",
  "change.gridColor": "#1f2937",
  "change.textColor": "#e2e8f0",
  "change.data": [
    {
      "label": "Basic",
      "from": 9,
      "to": 19
    },
    {
      "label": "Pro",
      "from": 29,
      "to": 49
    },
    {
      "label": "Team",
      "from": 79,
      "to": 149
    }
  ],
  "change.valueFormat": "currency"
}

When to use the dark style

Dark-theme year-over-year cards
Night-mode change graphics
Dashboard exports on dark backgrounds

Use it dynamically via the API

Push fresh rows per render with '<key>.data' (or just '<key>') as [{ label, from, to }]; colors, labels and format are overridable too.

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 '{
    "change.data": [
        {
            "label": "North",
            "from": 120,
            "to": 180
        },
        {
            "label": "South",
            "from": 90,
            "to": 140
        },
        {
            "label": "East",
            "from": 160,
            "to": 150
        },
        {
            "label": "West",
            "from": 70,
            "to": 130
        }
    ],
    "change.fromColor": "#64748b",
    "change.toColor": "#38bdf8",
    "change.colorByDirection": true,
    "change.showValues": true,
    "change.fromLabel": "Q1",
    "change.toLabel": "Q2",
    "change.showLegend": true,
    "change.valueFormat": "compact",
    "change.showAxis": true,
    "change.showGrid": true,
    "change.opacity": 1,
    "change.lineColor": "#334155",
    "change.gridColor": "#1e293b",
    "change.textColor": "#e2e8f0"
}'

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

Other dumbbell styles

Default Before / afterDark

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