Dumbbell Chart

Dumbbell Chart

Show the gap between two values per category. Perfect for before/after comparisons, range displays, and paired data.

Usage

example.tsx

import { DumbbellChart } from "@chartts/react"

<DumbbellChart
  data={yearOverYear}
  x="metric"
  start="lastYear"
  end="thisYear"
/>

Props

Prop	Type	Description
data	T[]	Array of data objects
x	keyof T	Key for categories
start	keyof T	Key for start values
end	keyof T	Key for end values
dotSize	number	Dot radius. Default: 6

Features

Before/after comparison
Color-coded direction
Gap value labels
Horizontal layout
Sorted by gap size
Animated connector draw

Other Charts