Home / Relationships / Quadrant Chart
Quadrant Chart in HTML, CSS and JavaScript
A quadrant chart is a scatter plot split into four boxes by two lines. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows app features sorted by effort and impact.
What is a quadrant chart?
A quadrant chart is a scatter plot split into four boxes by two lines. Each box is a group with its own meaning, like do first, plan it, maybe later and skip for now.
It is the chart behind the effort and impact matrix used by product and project teams. Placing every idea on one grid makes it easy to agree on what to do next, and dragging the dots makes it a working planning tool.
At a glance
- Best for
- Sorting items into four clear groups
- Data you need
- Two scores for each item
- Skip it when
- Data where the dividing lines have no real meaning.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a quadrant chart
- Product roadmaps and feature planning
- Task lists by urgency and importance
- Suppliers by cost and quality
- Customers by value and growth
When to pick another chart
- Bubble Chart: you also want to show a third number as size
- Scatter Plot: there are no natural groups
What you get in this template
- Four tinted areas with titles and short explanations
- Drag any dot to a new place and its group updates
- Tab to a dot and move it with the arrow keys
- Labels that move to avoid overlapping
- The data table updates as you move dots
- Tooltips with both scores and the group
How the code works
Here is a short version of the idea behind this quadrant chart. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const features = [['Faster search', 3, 8], ['Offline mode', 8, 8], ['CSV export', 2, 4.4], ['Team chat', 9, 4]];
const x = v => 40 + v * 54, y = v => 290 - v * 27;
const groups = ['#16a34a', '#2563eb', '#ca8a04', '#dc2626'];
drawLine(x(5), y(0), x(5), y(10), '#5c6377');
drawLine(x(0), y(5), x(10), y(5), '#5c6377');
features.forEach(([name, effort, impact]) => {
const g = impact > 5 ? (effort <= 5 ? 0 : 1) : (effort <= 5 ? 2 : 3);
drawCircle(x(effort), y(impact), 9, groups[g]);
drawText(x(effort) + 14, y(impact) + 4, name);
});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 quadrant-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 quadrant chart?
A quadrant chart is a scatter plot divided into four areas by a horizontal and a vertical line. Each area represents a group, like quick wins or big projects.
What is an effort and impact matrix?
It is a quadrant chart with effort on one axis and impact on the other. It helps teams pick work that gives the most value for the least effort.
Where should the dividing lines go?
Usually at the middle of each scale, or at a meaningful value like a target or an average. Say what the lines mean so readers trust the groups.
Can I move the dots in this template?
Yes. Drag any dot with a mouse or finger, or tab to it and use the arrow keys. The group and the data table update as you go.
More relationships
041. Scatter Plot
Example: used car prices against mileage
042. Bubble Chart
Example: ad campaigns compared on cost, conversion and budget
043. Heatmap
Example: gym check-ins by day and hour
044. Correlation Matrix
Example: what drives daily sales at a cafe
045. Connected Scatter Plot
Example: monthly bike share trips against average temperature
046. Hexbin Plot
Example: distance and fare for 3,000 taxi rides
047. Contour Plot
Example: a hill walk with height lines and a trail
048. Radar Chart
Example: three laptops scored on six features