Home / Comparison Charts / Bar Chart
Bar Chart in HTML, CSS and JavaScript
A bar chart is a chart that compares amounts using bars of different heights. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows weekly bread sales at a bakery.
What is a bar chart?
A bar chart is a chart that compares amounts using bars of different heights. Each bar stands for one item, and the taller the bar, the bigger the number. It is the most used chart in the world because almost anyone can read it in a second.
Bar charts work best when you have a list of separate things, like products, cities or teams, and one number for each. The bars always start at zero, so the length of each bar is honest about the size of the value.
At a glance
- Best for
- Comparing one number across 3 to 15 items
- Data you need
- A name and a number for each item
- Skip it when
- Showing change over many dates. Use a line chart.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a bar chart
- Sales by product or by store
- Votes, sign ups or orders by category
- Survey answers with one number each
- Any ranking where the reader wants the biggest item
When to pick another chart
- Stacked Bar Chart: your bars are made of parts, like sales by channel
- Horizontal Bar Chart: your labels are long, like book titles
- Lollipop Chart: you have many bars and want a lighter look
What you get in this template
- Pure SVG bars drawn with about 60 lines of plain JavaScript
- A sort switch that reorders bars from most to least
- The top value is highlighted so the main point stands out
- Tooltips on hover and on keyboard focus
- Labels tilt on small screens so nothing overlaps
- A hidden data table for screen readers and copying
How the code works
Here is a short version of the idea behind this bar chart. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const data = [['Sourdough', 412], ['Rye', 268], ['Baguette', 355]];
const h = 300, gap = 20, barWidth = 120;
const max = Math.max(...data.map(d => d[1]));
data.forEach(([name, value], i) => {
const barHeight = value / max * (h - 40);
const x = gap + i * (barWidth + gap);
drawRect(x, h - 20 - barHeight, barWidth, barHeight, '#3d6b4f');
drawText(x + barWidth / 2, h - 4, name, 'middle');
});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 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
How do I make a bar chart in HTML without a library?
Draw it with SVG. Create one rect element per value, set its height from the value, and place it along the bottom. This template does exactly that in plain JavaScript, so there is nothing to install.
Should a bar chart always start at zero?
Yes. People judge bars by their length. If the axis starts at 100 instead of 0, a small difference looks huge. Start at zero so the bars tell the truth.
What is the difference between a bar chart and a histogram?
A bar chart compares separate items, like breads or cities, and the bars have gaps. A histogram shows how numbers are spread across ranges, like ages 20 to 29 and 30 to 39, and the bars touch.
How many bars can a bar chart have?
Up to about 15 is comfortable. With more than that, sort the bars, show the top 10, or switch to a horizontal bar chart so the labels fit.
More comparison charts
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
009. Bullet Chart
Example: solar panel installs against target for six regions