Home / Comparison Charts / Lollipop Chart
Lollipop Chart in HTML, CSS and JavaScript
A lollipop chart is a bar chart where each bar is replaced by a thin stick with a dot on top. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows average delivery time by city with a 24 hour target.
What is a lollipop chart?
A lollipop chart is a bar chart where each bar is replaced by a thin stick with a dot on top. It shows the same thing as a bar chart, but with far less ink, so a chart with many items still looks clean.
The dot draws the eye to the exact value. That makes lollipop charts a good fit when you also have a target or limit line, because the dots above and below the line are easy to spot.
At a glance
- Best for
- Many items where a bar chart feels heavy
- Data you need
- A name and a number for each item
- Skip it when
- Very small differences. Bars show those better.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a lollipop chart
- Delivery or response times against a target
- Scores for 10 or more teams
- Monthly figures on a dashboard with little space
- Rankings in reports and slides
What you get in this template
- Sticks and dots that grow up from the axis
- A dashed target line with its own label
- Dots turn orange when they miss the target
- Sort by fastest or slowest
- Tooltips say how far each city is from the target
- Keyboard support and a data table
How the code works
Here is a short version of the idea behind this lollipop chart. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const cities = [['Leeds', 18.4], ['Belfast', 31.2]];
const target = 24;
const y = hours => 280 - hours / 35 * 260;
cities.forEach(([city, hours], i) => {
const x = 60 + i * 60;
const color = hours <= target ? '#0e7c66' : '#d9480f';
drawLine(x, 280, x, y(hours), color, 3); // the stick
drawCircle(x, y(hours), 10, color); // the dot
});
drawLine(40, y(target), 600, y(target), '#d9480f', 1.5, '6 5');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 lollipop-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 lollipop chart used for?
It is used in the same places as a bar chart, when you compare one number across items. It looks lighter, so it works well with many items or next to a target line.
Is a lollipop chart better than a bar chart?
Not better, just lighter. Bars are easier for judging small differences. Lollipops are cleaner when there are many items or when the exact point matters.
How do I add a target line to a chart?
Draw a horizontal line at the target value across the full width of the chart and add a small label. Color the items above or below it so the result is obvious.
Does a lollipop chart need to start at zero?
Yes. The stick length stands for the value, just like a bar, so the axis should start at zero.
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
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