Home / Comparison Charts / Diverging Bar Chart
Diverging Bar Chart in HTML, CSS and JavaScript
A diverging bar chart shows positive and negative values going in opposite directions from a center line. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows visitor gains and losses for ten city parks.
What is a diverging bar chart?
A diverging bar chart shows positive and negative values going in opposite directions from a center line. Bars for gains go right, bars for losses go left, and each side gets its own color.
It makes growth and decline clear at a glance. Use it for percent change, profit and loss, or any number that can be above or below zero or a target.
At a glance
- Best for
- Values that can be positive or negative
- Data you need
- A name and one number for each item, above or below zero
- Skip it when
- Values that are all positive. Use a normal bar chart.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a diverging bar chart
- Percent change against last year
- Profit and loss by product or store
- Budget over or under by department
- Temperature or score above or below average
When to pick another chart
- Dumbbell Chart: you want to show both the old and new values
- 100% Stacked Bar Chart: you have agree and disagree shares for survey questions
What you get in this template
- A center line at zero with bars growing both ways
- Green for growth, red for decline
- Park names sit on the opposite side of each bar so they never overlap
- Values with a plus or minus sign at the end of every bar
- Sort by change or by park name
- Tooltips, keyboard support and a data table
How the code works
Here is a short version of the idea behind this diverging bar chart. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const parks = [['Beacon Hill', 24.1], ['Heron Marsh', -19.3]];
const zero = 320;
const x = pct => zero + pct / 30 * 280; // -30% to +30%
parks.forEach(([name, change], row) => {
const y = 20 + row * 40;
const up = change >= 0;
drawRect(Math.min(zero, x(change)), y, Math.abs(x(change) - zero), 28, up ? '#13806b' : '#d1495b');
drawText(up ? zero - 10 : zero + 10, y + 19, name, up ? 'end' : 'start');
});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 diverging-bar-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 diverging bar chart?
It is a bar chart where bars go left or right from a center line, depending on whether the value is negative or positive. It is used for change, profit and loss, and anything above or below a baseline.
How do I show negative values in a bar chart?
Put zero in the middle and let negative bars grow to the left and positive bars to the right, each in its own color. That is exactly what a diverging bar chart does.
Where should labels go in a diverging bar chart?
Put each label on the other side of the center line from its bar. That way labels never sit on top of bars, even when values are large.
Which colors work best for gains and losses?
Use two clearly different colors, like green and red or blue and orange. Blue and orange are safer for people with red and green color blindness.
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
008. Dumbbell Chart
Example: commute times before and after a new tram line