Home›Bar›Dumbbell Plot (DNA / Range Comparison)
NEWPOPULARBar

Dumbbell Plot (DNA / Range Comparison)

Connected dot plot comparing before vs after metrics, baseline vs current performance shifts, and percentage deltas across categories.

Loading chart…
#dumbbell#dna#range#comparison#before-after#shift
Customization Guides & Code Snippets

◆Positioning Connected Range Dots

Render a central connecting span bar between baseline and current values with transform: translateX(-50%) on absolute circular endpoints.

<div style={{ position: 'absolute', left: `${row.baseline}%`, width: `${row.current - row.baseline}%`, height: 4, background: '#5c6370' }} />
<div style={{ position: 'absolute', left: `${row.baseline}%`, transform: 'translateX(-50%)', width: 12, height: 12, borderRadius: '50%', background: '#4a9eff' }} />
<div style={{ position: 'absolute', left: `${row.current}%`, transform: 'translateX(-50%)', width: 14, height: 14, borderRadius: '50%', background: '#00e5a0' }} />
When to use a Dumbbell Plot (DNA / Range Comparison)

A Dumbbell Plot (DNA / Range Comparison) is ideal for developers and designers who need to display data clearly and effectively. Use this chart type when:

  • ✓Comparing values across multiple categories (e.g. monthly revenue per region)
  • ✓Showing ranked data where order matters (e.g. top 10 products by sales)
  • ✓Displaying survey results or poll responses
  • ✓Visualizing before/after comparisons
Tips for Recharts Dumbbell Plot (DNA / Range Comparison)
TIP 1Always start the Y-axis at zero to avoid misleading comparisons
TIP 2Use rounded corners (radius prop) for a modern, polished look
TIP 3Add a Tooltip component so users can see exact values on hover
TIP 4Use Cell components to color individual bars differently
TIP 5For long category names, switch to a horizontal bar chart layout
Key Recharts Props
PROPTYPEDESCRIPTION
dataarrayArray of objects with your data values
dataKeystringThe key in your data objects to use for bar height
fillstringBar color — accepts hex, rgb, or CSS variable
radius[number,number,number,number]Corner radius [topLeft, topRight, bottomRight, bottomLeft]
stackIdstringGroup bars with the same stackId into a stacked bar
Frequently Asked Questions

What is a dumbbell plot (dumbbell chart react)?

A dumbbell plot (also known as a DNA chart, range plot, or barbell chart) connects two data points per category with a horizontal bar. It is the premier visualization for illustrating 'Before vs After' changes, baseline vs current performance shifts, and disparity gaps.

When should you use a dumbbell plot instead of a grouped bar chart?

Use a dumbbell plot when comparing two points in time (e.g. 2023 vs 2024) across 5 to 15 categories. It reduces visual clutter compared to double the number of rectangular bars and directs the reader's eye immediately to the magnitude and direction of the change.

How do you implement a dumbbell chart in React?

Position baseline and current circular dots using percentage coordinates along an SVG or CSS flex track, and connect them with a colored span bar representing the delta.

Related Charts