Home / Distribution / Error Bar Chart
Error Bar Chart in HTML, CSS and JavaScript
An error bar chart shows an average for each group plus a line that shows how sure we are about it. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows battery life test results for five phones.
What is a error bar chart?
An error bar chart shows an average for each group plus a line that shows how sure we are about it. The longer the line, the less certain the average. Here the line is a 95% confidence interval.
It stops people from reading too much into small differences. If two lines overlap a lot, the test cannot really say which group is better, even if one average is a little higher.
At a glance
- Best for
- Averages from tests or samples, with their uncertainty
- Data you need
- An average and a margin of error for each group
- Skip it when
- Data with no measure of uncertainty.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a error bar chart
- Product tests and reviews
- A and B tests on a website
- Survey results with a margin of error
- Science and lab results
What you get in this template
- A big dot for each average and a line with end caps for the 95% range
- Every single test shown as a faint dot behind
- A switch to hide the tests and show averages only
- Phones sorted from longest to shortest battery life
- Tooltips with the likely range and number of tests
- Keyboard support and a data table
How the code works
Here is a short version of the idea behind this error bar chart. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const phones = [['Arc One', 23.2, 1.0], ['Nova 12', 22.1, 1.2], ['Lumo 5', 17.3, 0.7]];
const x = h => 100 + (h - 12) * 30;
phones.forEach(([name, mean, margin], row) => {
const y = 40 + row * 60;
drawLine(x(mean - margin), y, x(mean + margin), y, '#172424', 2.5); // range
drawLine(x(mean - margin), y - 8, x(mean - margin), y + 8, '#172424', 2.5); // caps
drawLine(x(mean + margin), y - 8, x(mean + margin), y + 8, '#172424', 2.5);
drawCircle(x(mean), y, 8, '#0f766e');
drawText(90, y + 4, name, 'end');
});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 error-bars.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 do error bars show?
Error bars show how uncertain a value is. They can show a confidence interval, the standard error or the standard deviation, so always say which one you use. This template uses 95% confidence intervals.
What does a 95% confidence interval mean?
If you ran the same test many times, about 95% of the ranges worked out this way would contain the true average. In short, the true average is very likely inside the line.
If error bars overlap, is there no difference?
Not always, but a large overlap means the data cannot clearly show a difference. Small overlaps need a proper statistical test to judge.
How do I work out a 95% confidence interval?
Take the standard deviation of your results, divide by the square root of the number of results, and multiply by a value from the t table, about 2.2 for 12 tests.
More distribution
031. Histogram
Example: delivery times for 600 pizza orders
032. Box Plot
Example: monthly rent for flats in six neighborhoods
033. Violin Plot
Example: coffee order waits at four cafes
034. Density Plot
Example: sunflower heights with and without plant feed
035. Ridgeline Plot
Example: daily high temperatures for each month of the year
036. Beeswarm Plot
Example: finish times for 300 marathon runners
037. Strip Plot
Example: train delays on five lines over 60 weekdays
038. Population Pyramid
Example: the age of a town in 2006 and 2026