Home / Comparison Charts / Dot Plot
Dot Plot in HTML, CSS and JavaScript
A dot plot shows values as dots on a line, one row per item. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows small, medium and large latte prices in eight cities.
What is a dot plot?
A dot plot shows values as dots on a line, one row per item. It is a simple way to compare several values for each item, like three sizes of coffee, without drawing three sets of bars.
Because a dot is a point and not a length, a dot plot does not need to start at zero. You can zoom in on the range where your data lives, which makes small differences easier to see.
At a glance
- Best for
- Two or three values per item, side by side
- Data you need
- A name and 2 or 3 numbers for each item
- Skip it when
- Showing amounts as size. Use bars for that.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a dot plot
- Prices of the same product in different cities
- Low, average and high scores per class
- Men and women, or two age groups, per country
- Planned and actual values per project
When to pick another chart
- Dumbbell Chart: you have exactly two values, like before and after
- Grouped Bar Chart: the values are amounts that should start at zero
What you get in this template
- One row per city with a soft line from lowest to highest price
- Three dot colors for small, medium and large
- Hide a size from the key and the lines adjust
- Sort by medium price or by city name
- An axis zoomed to the price range, from $3 to $6
- Tooltips, keyboard support and a data table
How the code works
Here is a short version of the idea behind this dot plot. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const cities = [['Boston', [4.1, 4.9, 5.6]], ['Phoenix', [3.2, 3.8, 4.4]]];
const colors = ['#c7a8e8', '#8a5cc7', '#4b2a86'];
const x = price => 100 + (price - 3) / 3 * 480; // $3 to $6
cities.forEach(([city, prices], row) => {
const y = 30 + row * 40;
drawLine(x(Math.min(...prices)), y, x(Math.max(...prices)), y, '#e8e2ee', 6);
prices.forEach((p, i) => drawCircle(x(p), y, 9, colors[i]));
});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 dot-plot.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 dot plot?
A dot plot is a chart that shows values as dots along a line, one row per item. It is often used to compare two or three values for each item.
What is a Cleveland dot plot?
It is the same chart, named after the statistician William Cleveland, who showed that people read dot positions more accurately than bar areas.
Does a dot plot need to start at zero?
No. Dots mark a position, not a length, so you can start the axis near your lowest value. Bar charts are different and must start at zero.
What is the difference between a dot plot and a scatter plot?
A dot plot has categories on one side, like cities. A scatter plot has numbers on both axes and shows how two numbers relate.
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
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