tools-only Quadrant Chart
Back to Style Guide — Read the style guide first for emoji, color, and accessibility rules.
Syntax keyword: quadrantChart
Best for: Prioritization matrices, risk assessment, two-axis comparisons, effort/impact analysis
When NOT to use: Time-based data (use Gantt or XY Chart), simple rankings (use a table)
⚠️ Accessibility: Quadrant charts do not support
accTitle/accDescr. Always place a descriptive italic Markdown paragraph directly above the code block.
Exemplar Diagram
Priority matrix plotting engineering initiatives by effort required versus business impact, helping teams decide what to build next:
quadrantChart
title 🎯 Engineering Priority Matrix
x-axis Low Effort --> High Effort
y-axis Low Impact --> High Impact
quadrant-1 Do First
quadrant-2 Plan Carefully
quadrant-3 Reconsider
quadrant-4 Quick Wins
Upgrade auth library: [0.3, 0.9]
Migrate to new DB: [0.9, 0.8]
Fix typos in docs: [0.1, 0.2]
Add dark mode: [0.4, 0.6]
Rewrite legacy API: [0.95, 0.95]
Update CI cache: [0.15, 0.5]
Add unit tests: [0.5, 0.7]
Tips
- Label axes with
Low X --> High Xformat - Name all four quadrants with actionable labels
- Plot items as
Name: [x, y]with values 0.0–1.0 - Limit to 5–10 items — more becomes cluttered
- Quadrant numbering: 1=top-right, 2=top-left, 3=bottom-left, 4=bottom-right
- Always pair with a Markdown text description above for screen readers
Template
Description of the two axes and what the quadrant placement means:
quadrantChart
title 🎯 Your Matrix Title
x-axis Low X Axis --> High X Axis
y-axis Low Y Axis --> High Y Axis
quadrant-1 High Both
quadrant-2 High Y Only
quadrant-3 Low Both
quadrant-4 High X Only
Item A: [0.3, 0.8]
Item B: [0.7, 0.6]
Item C: [0.2, 0.3]