Skip to main content
A quadrant chart is a visual representation of data divided into four quadrants. It plots data points on a two-dimensional grid to identify patterns, trends, and prioritize actions.

​
Basic example

Point values (x and y) must be in the range 0 to 1.

​
Syntax

​
Title

Add a title to describe the chart: 
quadrantChart
    title This is a sample example

​
X-axis

Define x-axis labels: 
x-axis Left Text --> Right Text
Or just the left label: 
x-axis Left Text

​
Y-axis

Define y-axis labels: 
y-axis Bottom Text --> Top Text
Or just the bottom label: 
y-axis Bottom Text

​
Quadrant labels

Label each quadrant: 
quadrant-1 Top Right Text
quadrant-2 Top Left Text
quadrant-3 Bottom Left Text
quadrant-4 Bottom Right Text

​
Points

Plot points with x,y coordinates (0-1 range): 
Point 1: [0.75, 0.80]
Point 2: [0.35, 0.24]

​
Point styling

​
Direct styling

Style individual points:

​
Class styling

Define reusable styles:
ParameterDescription
colorFill color of the point
radiusRadius of the point
stroke-widthBorder width of the point
stroke-colorBorder color of the point
Style precedence order:
  1. Direct styles
  2. Class styles
  3. Theme styles

​
Configuration

Customize chart appearance:
ParameterDescriptionDefault
chartWidthWidth of the chart500
chartHeightHeight of the chart500
titlePaddingTop and bottom padding of title10
titleFontSizeTitle font size20
quadrantPaddingPadding outside quadrants5
quadrantLabelFontSizeQuadrant text font size16
quadrantInternalBorderStrokeWidthInternal border width1
quadrantExternalBorderStrokeWidthExternal border width2
xAxisLabelFontSizeX-axis text font size16
xAxisLabelPaddingX-axis text padding5
yAxisLabelFontSizeY-axis text font size16
yAxisLabelPaddingY-axis text padding5
pointTextPaddingPadding between point and text5
pointLabelFontSizePoint text font size12
pointRadiusDefault point radius5
VariableDescription
quadrant1FillTop right quadrant fill color
quadrant2FillTop left quadrant fill color
quadrant3FillBottom left quadrant fill color
quadrant4FillBottom right quadrant fill color
quadrant1TextFillTop right quadrant text color
quadrant2TextFillTop left quadrant text color
quadrant3TextFillBottom left quadrant text color
quadrant4TextFillBottom right quadrant text color
quadrantPointFillPoints fill color
quadrantPointTextFillPoints text color
quadrantXAxisTextFillX-axis text color
quadrantYAxisTextFillY-axis text color
quadrantInternalBorderStrokeFillInternal border color
quadrantExternalBorderStrokeFillExternal border color
quadrantTitleFillTitle color

​
Examples

​
Priority matrix

​
Product positioning

Build docs developers (and LLMs) love

Get started for freeTalk to us