Quadrant charts

TL;DR

Ask your agent

Use Plotwork to draw a quadrant chart of what to build next. Put effort across and impact up. Name the zones Quick wins, Big bets, Fill-ins and Time sinks, and highlight the quick wins. Place twelve ideas, with an icon on the ones that need a name to stand out.

Use Plotwork to draw a risk register as a quadrant chart: likelihood across, impact up. Name the top right "Act now" in red and the top left "Watch" in amber, and place these risks: key engineer leaves, data breach, supplier misses delivery, scope creep.

Example

Fourteen ideas, the four zones named and washed, the quick wins highlighted, and an icon on the ones that carry one. A point takes the tone of its zone, so each zone's items match its wash.

PictureSourceOutline

The language

One statement to a line. Text is always in double quotes, options are key=value, and # starts a comment. A point is written with x= and y= and never with two bare numbers, so the two axes cannot be swapped by writing them in the other order.

A point has no id, because a chart has no cross references. A habit from flow diagrams such as point dark "Dark mode" x=0.2 y=0.8 is refused with E100, and the hint gives the form to write.

Reading a point

The values run from 0 to 1 on both axes. A value on another scale is refused, and the hint gives the number it most likely meant.

Zones and options

The four positions are top-right, top-left, bottom-left, and bottom-right. A zone you do not name is drawn with no name and a neutral wash.

Colour

A zone with a tone mixes a tenth of it into the surface. The highlighted zone gets a sixth and an outline in its tone, so the zone to act on stands out. A neutral zone takes the quiet group colour, and a neutral zone that is highlighted is a little darker. A point takes the tone of its zone unless it chooses another with tone=, so a tone= on a point is a meaning, such as which team owns it. Nobody writes a colour value: the theme owns every colour, in light and in dark.

A risk register uses the tones for meaning, and the zones you do not tone stay plain plates that the dashed lines divide:

PictureSourceOutline

How it is laid out

The plot is a little under square. It is 600px wide for up to 12 points and grows by 12px for each point after that, up to 960px, so a crowded chart gets room for its labels. A point is a chip with its icon, or a dot, at the place its two values say, and the values 0 and 1 land a little inside the edges so that a point on an edge keeps its whole mark on the plot.

Each label goes beside its point, to the right when there is room, and then to the left, above, below, or off a corner. A label stays inside the zone of its point, and clears every mark, every zone name, and every other label. A zone name sits in its zone's top-left corner, and slides right along the edge when a point lies under it. A label that cannot be placed is left out of the picture and kept in the text description, and lint says so.

Limits and warnings

Every mistake comes back as a result with a code, a line, a column, and a hint. Warnings never stop the drawing.

From Mermaid

Mermaid quadrantChart converts to a quadrant chart. Ask your agent to convert it, or use the convert_mermaid tool. The migration guide covers the converter in full. Mermaid numbers its zones counter-clockwise from the top right, and the converter maps them to the four positions.

1quadrantChart2    title Reach and engagement of campaigns3    x-axis Low Reach --> High Reach4    y-axis Low Engagement --> High Engagement5    quadrant-1 We should expand6    quadrant-2 Need to promote7    quadrant-3 Re-evaluate8    quadrant-4 May be improved9    Campaign A: [0.3, 0.6]10    Campaign B: [0.45, 0.23]11    Campaign C:::error: [0.57, 0.69] color: #ff3300, radius: 10

The converter reports the style it dropped (M200) and the tone it took from the class (M207):

1quadrant "Reach and engagement of campaigns"2
3x low="Low Reach" high="High Reach"4y low="Low Engagement" high="High Engagement"5
6zone top-right "We should expand"7zone top-left "Need to promote"8zone bottom-left "Re-evaluate"9zone bottom-right "May be improved"10
11point "Campaign A" x=0.3 y=0.612point "Campaign B" x=0.45 y=0.2313point "Campaign C" x=0.57 y=0.69 tone=red

The converter sets a tone only from a class that names one. Choose a tone= on a point where its colour should mean something, and an icon= where a glyph helps.

See also