Charts > Dumbbell plot ​

A dumbbell plot uses two markers connected by a line to represent the comparison or change in values between two distinct data points, often illustrating the before-and-after or the difference between two categories.

The Chart ​

Randomize dataUpload data

Download example CSV

Copy HTML

Playground ​

Animation

Style

<template>
  <DumbbellPlot :data="data" @hover="setTooltip" />

  <OTTooltip :info="tooltip">
    <div>
      From {{ tooltip.data.x1 }}% to {{ tooltip.data.x2 }}% ({{
        tooltip.data.x1 > tooltip.data.x2 ? "-" : "+"
      }}{{ Math.abs(tooltip.data.x1 - tooltip.data.x2) }}%)
    </div>
  </OTTooltip>
</template>

<script setup>
import useTooltip from "@/functions/useTooltip.js";

const [tooltip, setTooltip] = useTooltip();
</script>

Component API ​

The dumbbell plot shows a difference in value between two categories. It is built with SVG and d3. The horizontal position of the dumbbells animates when the data changes, using d3 transition.

Data ​

[
 { id: "Category 1", name: "Category 1", x1: 20, x2: 40 },
 { id: "Category 2", name: "Category 2", x1: 80, x2: 30 },
 ...
]

Props ​

Events ​

Dependencies ​

• d3

Featured in ​

• Wellbeing Index of Generalitat de Catalunya
• Fecyt
• Odismet ONCE