Home / Comparison Charts / Horizontal Bar Chart
Horizontal Bar Chart in HTML, CSS and JavaScript
A horizontal bar chart is a bar chart turned on its side. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows the most borrowed library books of the year.
What is a horizontal bar chart?
A horizontal bar chart is a bar chart turned on its side. The bars grow from left to right, and the labels sit on the left where there is plenty of room to read them.
It is the best choice for rankings and for long labels, like book titles, product names or survey questions. People read top to bottom, so a sorted horizontal chart reads like a top 10 list.
At a glance
- Best for
- Rankings and items with long names
- Data you need
- A name and a number for each item, sorted
- Skip it when
- Dates or time. Time should run left to right.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a horizontal bar chart
- Top 10 products, pages or search terms
- Survey questions with long wording
- Country or city rankings
- Most read articles or most borrowed books
When to pick another chart
- Bar Chart: your labels are short and you have few items
- Lollipop Chart: you have many items and want less ink
What you get in this template
- Labels on the left with up to 250 pixels of room
- On phones the label moves above each bar
- A Top 5 and Top 10 switch
- The top three are highlighted in a stronger color
- Values written at the end of every bar
- Tooltips with the rank, keyboard support and a data table
How the code works
Here is a short version of the idea behind this horizontal bar chart. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const books = [['The Quiet Orchard', 876], ['Salt and Silver', 1163]];
books.sort((a, b) => b[1] - a[1]); // biggest first
const max = books[0][1];
books.forEach(([title, count], i) => {
const y = i * 36;
drawText(240, y + 20, title, 'end'); // label on the left
drawRect(250, y + 6, count / max * 400, 22, '#3b4cca');
});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 horizontal-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
When should I use a horizontal bar chart instead of a vertical one?
Use horizontal bars when your labels are long or when you are showing a ranking. Use vertical bars for short labels and for anything over time.
Should horizontal bars be sorted?
Almost always. Sorting from largest to smallest turns the chart into a ranked list that people can read in one pass.
How do I stop long labels from being cut off?
Give the left side a fixed width for labels, and on small screens put the label above the bar. This template does both.
Is a horizontal bar chart the same as a row chart?
Yes. Row chart and horizontal bar chart are two names for the same thing.
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
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
009. Bullet Chart
Example: solar panel installs against target for six regions