3

Dumbbell Chart

PreviousNext

Connected dot chart for comparing two values per category.

2023
2024
MarketingSalesEngineeringSupportHRFinance30405060708090100
"use client"

import { DumbbellChart } from "@/components/ui/charts"

const data = [
  { category: "Marketing", start: 45, end: 72 },
  { category: "Sales", start: 68, end: 85 },
  { category: "Engineering", start: 82, end: 78 },
  { category: "Support", start: 55, end: 88 },
  { category: "HR", start: 40, end: 65 },
  { category: "Finance", start: 72, end: 80 },
]

export function DumbbellChartDemo() {
  return <DumbbellChart data={data} startLabel="2023" endLabel="2024" />
}

About

The Dumbbell Chart (also known as a DNA chart or barbell chart) shows the change or difference between two data points. It's excellent for before/after comparisons, showing gaps between groups, or visualizing ranges.

Installation

pnpm dlx shadcn@latest add https://ui.simplifyingai.com/r/dumbbell-chart.json

Usage

import { DumbbellChart } from "@/components/ui/charts"
 
const data = [
  { category: "Marketing", start: 45, end: 72 },
  { category: "Sales", start: 68, end: 85 },
  { category: "Engineering", start: 82, end: 78 },
]
 
export function Example() {
  return <DumbbellChart data={data} startLabel="2023" endLabel="2024" />
}

API Reference

PropTypeDefaultDescription
dataDumbbellDataPoint[]requiredArray of data points
dotSizenumber8Size of dots in pixels
showGridbooleantrueShow grid lines
startColorstring"#94a3b8"Color for start dots
endColorstring"#3b82f6"Color for end dots
connectorColorstring"#cbd5e1"Color for connecting line
startLabelstring"Start"Label for start values (legend)
endLabelstring"End"Label for end values (legend)
valueFormatterfunctiontoLocaleStringFormat values in tooltip

Data Format

interface DumbbellDataPoint {
  category: string // Label for the row
  start: number // Starting value
  end: number // Ending value
}

Notes

  • Dumbbell charts excel at showing before/after comparisons, growth/decline, or gaps between groups
  • The connecting line makes it easy to see the magnitude of change at a glance
  • Hover over any row to see detailed values and the change amount
  • Tooltip shows both values and the difference (positive or negative)
  • Works best with 3-12 categories for optimal readability
  • Categories are displayed horizontally for easy reading