Home / Comparison Charts / Dumbbell Chart
Dumbbell Chart in HTML, CSS and JavaScript
A dumbbell chart shows two values for each item as two dots joined by a line. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows commute times before and after a new tram line.
What is a dumbbell chart?
A dumbbell chart shows two values for each item as two dots joined by a line. It looks like a dumbbell from the gym. The length of the line shows the gap, and the side of each dot shows which value is higher.
It is the clearest way to show a before and after change, or the gap between two groups, for many items at once. Sorting by the size of the change puts the biggest story at the top.
At a glance
- Best for
- Before and after, or the gap between two groups
- Data you need
- A name and two numbers for each item
- Skip it when
- More than two values per item. Use a dot plot.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a dumbbell chart
- Results before and after a change or project
- This year against last year for many items
- The gap between two groups, like men and women
- Planned against actual time or cost
When to pick another chart
- Grouped Bar Chart: the values are amounts and you have few items
- Diverging Bar Chart: only the change matters, not the two values
What you get in this template
- A gray dot for before and a blue dot for after
- The after dot slides into place so the change is felt
- The minutes saved are written at the end of every row
- Sort by biggest time saved or by district name
- Separate tooltips for the before and after dot
- Keyboard support and a data table with the change
How the code works
Here is a short version of the idea behind this dumbbell chart. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const districts = [['Millbrook', 61, 43], ['Cathedral', 29, 27]];
const x = min => 110 + (min - 20) / 50 * 450; // 20 to 70 minutes
districts.forEach(([name, before, after], row) => {
const y = 30 + row * 40;
drawLine(x(before), y, x(after), y, '#0077b6', 3);
drawCircle(x(before), y, 9, '#9aa9b6');
drawCircle(x(after), y, 9, '#0077b6');
drawText(x(before) + 16, y + 4, '-' + (before - after) + ' min');
});The example uses four tiny helpers that create SVG shapes. Put them above the code and it runs as is.
const svg = document.querySelector('svg');
function make(tag, attrs) {
const n = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (const k in attrs) n.setAttribute(k, attrs[k]);
svg.appendChild(n);
return n;
}
function drawRect(x, y, width, height, fill) { return make('rect', { x, y, width, height, fill }); }
function drawCircle(cx, cy, r, fill) { return make('circle', { cx, cy, r, fill }); }
function drawLine(x1, y1, x2, y2, stroke, width, dash) {
return make('line', { x1, y1, x2, y2, stroke, 'stroke-width': width || 1, 'stroke-dasharray': dash || 'none' });
}
function drawText(x, y, str, anchor) {
const t = make('text', { x, y, 'text-anchor': anchor || 'start' });
t.textContent = str;
return t;
}How to add it to your website
- Download the file. Click Download HTML file above. You get one file called dumbbell-chart.html with everything inside.
- Change the data. Open the file in any code editor and find the DATA list near the bottom. Replace the names and numbers with your own.
- Change the colors and text. Colors are at the top of the style tag. The title, subtitle and main point are plain HTML near the top of the body.
- Put it online. Upload the file to any host, such as GitHub Pages, Netlify or your own server, or paste it into your site. There is no build step.
Questions people ask
What is a dumbbell chart used for?
It shows the change between two values for each item, like before and after, or the gap between two groups. It is great when you have many items to compare.
What is another name for a dumbbell chart?
People also call it a dumbbell plot, a connected dot plot, a gap chart or a barbell chart.
How is a dumbbell chart different from a slope chart?
A dumbbell chart puts both values on the same row, which is easy to scan. A slope chart draws a line from a left axis to a right axis, which is better for showing who went up and who went down.
How should I sort a dumbbell chart?
Sort by the size of the gap so the biggest change is at the top. Offer a second sort by name so people can find their own item.
More comparison charts
001. Bar Chart
Example: weekly bread sales at a bakery
002. Grouped Bar Chart
Example: cinema ticket sales for three locations per quarter
003. Stacked Bar Chart
Example: website visits by source for an outdoor shop
004. 100% Stacked Bar Chart
Example: customer survey results for five grocery stores
005. Horizontal Bar Chart
Example: the most borrowed library books of the year
006. Lollipop Chart
Example: average delivery time by city with a 24 hour target
007. Dot Plot
Example: small, medium and large latte prices in eight cities
009. Bullet Chart
Example: solar panel installs against target for six regions