Mermaid 11.15.0
A quadrant chart places items against two normalized dimensions, such as effort and value. Use a pie for parts of a total or a Gantt chart for a dated work schedule.
Build this in Mermaid Editor →Coordinates run from 0 to 1. X increases rightward; Y increases upward.
quadrantChart
title Editorial priorities
x-axis Low effort --> High effort
y-axis Low value --> High value
quadrant-1 Plan
quadrant-2 Do first
quadrant-3 Defer
quadrant-4 Reconsider
Fix links: [0.2, 0.8]
Rewrite guide: [0.8, 0.7]
Cosmetic change: [0.6, 0.2]Loading…
| Syntax | Meaning |
|---|---|
| quadrantChart / title Text | Declare a quadrant chart and optional heading. |
| x-axis Left --> Right / x-axis Left | Provide both horizontal endpoint labels or only the left label. |
| y-axis Bottom --> Top / y-axis Bottom | Provide both vertical endpoint labels or only the bottom label. |
| quadrant-1 / quadrant-2 / quadrant-3 / quadrant-4 | 1: upper right; 2: upper left; 3: lower left; 4: lower right. |
| Name: [0.25, 0.75] | Use normalized x,y coordinates in the inclusive range 0–1. |
| radius: 8 / color: #0070f3 / stroke-color: #171717 / stroke-width: 2px | Style a point directly; stroke color needs a visible stroke width. |
| classDef focus color: #0070f3 / Name:::focus: [x, y] | Define reusable point styles; inline styles take precedence over classes, then theme defaults. |
| config.quadrantChart.chartWidth / chartHeight / pointRadius / pointTextPadding | Configure dimensions, point radius and spacing from point to label. |
| quadrantPadding / quadrantTextTopPadding / quadrantLabelFontSize / quadrantInternalBorderStrokeWidth / quadrantExternalBorderStrokeWidth | Diagram configuration for quadrant padding, label placement and border widths. |
| xAxisLabelPadding / xAxisLabelFontSize / xAxisPosition / yAxisLabelPadding / yAxisLabelFontSize / yAxisPosition | Axis configuration; with points present, the horizontal axis is placed at the bottom. |
| titleFontSize / titlePadding / pointTextPadding / pointLabelFontSize | Configuration for title and point text dimensions and spacing. |
| quadrant1Fill…quadrant4Fill / quadrant1TextFill…quadrant4TextFill | Theme colors for quadrant backgrounds and their labels. |
| quadrantPointFill / quadrantPointTextFill | Theme defaults for point fill, labels and borders. |
| quadrantXAxisTextFill / quadrantYAxisTextFill / quadrantInternalBorderStrokeFill / quadrantExternalBorderStrokeFill / quadrantTitleFill | Theme colors for axis text, borders and title. |
| %% / accTitle: / accDescr: | Comments and accessible descriptions. |
Read Y labels from bottom to top. Quadrant numbers run counterclockwise from the upper right. One-label axes are valid when only one endpoint needs explaining; they do not change the coordinate range.
quadrantChart
title Two dimensions
x-axis Effort
y-axis Value
quadrant-1 Upper right
quadrant-2 Upper left
quadrant-3 Lower left
quadrant-4 Lower right
Option: [0.3, 0.7]Loading…
Normalize measurements before entering them: the diagram has no custom numeric axis range. Radius is a pixel size. Direct styles can distinguish a selected point; do not use area as a third quantitative scale without explaining it.
quadrantChart
title Selected work
x-axis Low --> High
y-axis Low --> High
Draft: [0.25, 0.65] radius: 7, color: #0070f3, stroke-color: #171717, stroke-width: 2px
Revision: [0.7, 0.4] radius: 5Loading…
Attach the class after the point name and before its coordinates. Inline styles override a class, and a class overrides theme defaults. Stroke color alone does not create a visible outline.
quadrantChart
title Review candidates
x-axis Low effort --> High effort
y-axis Low value --> High value
Links:::focus: [0.2, 0.8]
Rewrite:::focus: [0.8, 0.7]
classDef focus color: #0070f3, radius: 6, stroke-color: #171717, stroke-width: 2pxLoading…
Use quadrantChart for geometry and themeVariables for colors. With points present, labels and axes adapt automatically. Increase dimensions for crowded labels rather than assuming pointTextPadding alone prevents every collision.
---
config:
theme: base
quadrantChart:
chartWidth: 420
chartHeight: 360
pointRadius: 6
pointTextPadding: 8
themeVariables:
quadrant1Fill: "#d3e5ff"
quadrant2Fill: "#f5f5f5"
quadrantPointFill: "#0070f3"
---
quadrantChart
title Planned work
x-axis Effort
y-axis Value
Guide: [0.65, 0.8]Loading…
Convert percentages to fractions: 80 becomes 0.8.
Invalid syntax — corrected example below
quadrantChart
Guide: [80, 60]quadrantChart
Guide: [0.8, 0.6]Loading…
The first y-axis label is the bottom, not the top. Quadrant 1 is the upper-right corner.