---
title: "New Component - Dumbbell / Range Plots"
description: "Show before-and-after in one clean row. Two dots and a connecting bar per category, with gains and losses auto-tinted green and red."
url: "https://www.imejis.io/changelogs/dumbbell-component"
image: "https://www.imejis.io/og/components/dumbbell.jpg"
published: "2026-07-20"
author: "imejis"
---

# New Component - Dumbbell / Range Plots

## New Component: Dumbbell

When you want to show change between two points, last quarter vs this quarter, min vs max, before vs after, a grouped bar chart is overkill and a line chart is noise. The dumbbell component nails it. One row per category, two dots, and a bar connecting them.

### The data

Each row is `{ label, from, to }`. The two dots mark the start and end value, and the bar between them shows the gap at a glance. Turn on `colorByDirection` and increases tint green while decreases tint red, so the story reads before anyone reads a number.

### Styling

You get independent colors for the "from" and "to" dots, an optional `fromLabel`/`toLabel` legend, value labels, and a compact/number/currency value format. The margins auto-reserve space so long value labels don't clip at the axis extremes.

### Dynamic data, per render

```http
POST https://render.imejis.io/v1/<design-id>
{ "salaries.data": [
  { "label": "Junior", "from": 60000, "to": 72000 },
  { "label": "Senior", "from": 120000, "to": 145000 }
] }
```

Salary-band cards, YoY regional comparisons, Q1 to Q2 metric shifts, before/after benchmarks. One template, fresh rows each render.

### Try it

It's under Data in the editor palette, with a live playground on the [dumbbell component page](/components/dumbbell).