Quadrant chart
A quadrant chart is a type of visualization that divides data into four quadrants. It is used to plot data points on a two-dimensional grid, with one variable on the x-axis and another variable on the y-axis. The division of the quadrants is determined by a set of criteria specific to the data being analyzed, dividing the chart into four equal parts. Quadrant charts are commonly used to identify patterns and trends in data and to prioritize actions based on the position of data points in the chart. They are commonly used in scenarios such as business, marketing, and risk management.
Example
Copy
Embed
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
Syntax
If there are no data points available in the chart, the axis text and quadrant names are rendered at the center of the corresponding quadrant. If there are data points, the x-axis labels are rendered from the left of the corresponding quadrant, and the quadrant text is displayed at the bottom of the chart. The y-axis labels are rendered at the bottom of the corresponding quadrant, and the quadrant text is rendered at the top of the corresponding quadrant.
For the coordinate values of data points, the minimum value is 0 and the maximum value is 1.
Title
The title is a short description of the chart, and it is always rendered at the top of the chart.
Example
Copy
Embed
quadrantChart
title This is a sample example
x-axis
The x-axis determines the text displayed on the x-axis. The x-axis is divided into two parts, 'left' and 'right'; you can enter both or only the 'left'. The statement should begin with x-axis, followed by left axis text, then the separator -->, and finally right axis text.
Example
1. x-axis --> both the left axis and right axis text will be rendered.
2. x-axis renders only the left axis text.
y-axis
The y-axis determines the text displayed on the y-axis. The y-axis is divided into two parts, 'top' and 'bottom'; you can enter both or only the 'bottom'. The statement should begin with y-axis, followed by bottom axis text, then the separator -->, and finally top axis text.
Example
1. y-axis --> both the bottom and top axis text will be rendered.
2. y-axis renders only the bottom axis text.
Quadrant text
quadrant-[1,2,3,4] determines the text content displayed in each quadrant.
Example
1. quadrant-1 determines the text that will be displayed in the top-right quadrant
2. quadrant-2 determines the text that will be displayed in the top-left quadrant.
3. quadrant-3 determines the text that will be displayed in the bottom-left quadrant.
4. quadrant-4 determines the text that will be displayed in the bottom-right quadrant.
Point
Used to draw a circle within a quadrant chart. The syntax is : [x, y], where x and y range from 0 to 1.
Example
1. Point 1: [0.75, 0.80] , point 1 will be drawn in the top-right quadrant.
2. Point 2: [0.35, 0.24] , point 2 will be drawn in the bottom-left quadrant.
Chart configuration
| Parameter | Description | Default value |
|---|---|---|
| chartWidth | The width of the chart | 500 |
| chartHeight | The height of the chart | 500 |
| titlePadding | The top and bottom padding of the title | 10 |
| titleFontSize | Title font size | 20 |
| quadrantPadding | The padding outside all quadrants | 5 |
| quadrantTextTopPadding | The top margin of the quadrant text when the text is drawn at the top (not on a data point) | 5 |
| quadrantLabelFontSize | Quadrant text font size | 16 |
| quadrantInternalBorderStrokeWidth | The width of the inner border of the quadrants | 1 |
| quadrantExternalBorderStrokeWidth | The stroke width of the outer border of the quadrants | 2 |
| xAxisLabelPadding | The top and bottom padding of the x-axis text | 5 |
| xAxisLabelFontSize | x-axis text font size | 16 |
| xAxisPosition | The position of the x-axis (top, bottom). If data points exist, the x-axis will always be rendered at the bottom | top |
| yAxisLabelPadding | The left and right padding of the y-axis text | 5 |
| yAxisLabelFontSize | y-axis text font size | 16 |
| yAxisPosition | y-axis position (left, right) | left |
| pointTextPadding | The spacing between a data point and the text below it | 5 |
| pointLabelFontSize | Data point text font size | 12 |
| pointRadius | Data point radius | 5 |
Chart theme variables
| Parameter | Description |
|---|---|
| quadrant1Fill | The fill color of the top-right quadrant |
| quadrant2Fill | The fill color of the top-left quadrant |
| quadrant3Fill | The fill color of the bottom-left quadrant |
| quadrant4Fill | The fill color of the bottom-right quadrant |
| quadrant1TextFill | The text color of the top-right quadrant |
| quadrant2TextFill | The text color of the top-left quadrant |
| quadrant3TextFill | The text color of the bottom-left quadrant |
| quadrant4TextFill | The text color of the bottom-right quadrant |
| quadrantPointFill | Data point fill color |
| quadrantPointTextFill | Data point text color |
| quadrantXAxisTextFill | x-axis text color |
| quadrantYAxisTextFill | y-axis text color |
| quadrantInternalBorderStrokeFill | Quadrant inner border color |
| quadrantExternalBorderStrokeFill | Quadrant outer border color |
| quadrantTitleFill | Title color |
Configuration and theme example
Copy
Embed
---
config:
quadrantChart:
chartWidth: 400
chartHeight: 400
themeVariables:
quadrant1TextFill: "ff0000"
---
quadrantChart
x-axis Urgent --> Not Urgent
y-axis Not Important --> "Important ❤"
quadrant-1 Plan
quadrant-2 Do
quadrant-3 Delegate
quadrant-4 Delete
Data point styles
Data points can be styled directly, or by using a defined shared class
Direct style
Copy
Embed
Point A: [0.9, 0.0] radius: 12
Point B: [0.8, 0.1] color: #ff3300, radius: 10
Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Point D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
Class style
Copy
Embed
Point A:::class1: [0.9, 0.0]
Point B:::class2: [0.8, 0.1]
Point C:::class3: [0.7, 0.2]
Point D:::class3: [0.7, 0.2]
classDef class1 color: #109060
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
classDef class3 color: #f00fff, radius : 10
Available styles:
| Parameter | Description |
|---|---|
| color | The fill color of data points |
| radius | Data point radius |
| stroke-width | Data point border width |
| stroke-color | Data point border color (has no effect when stroke-width is not specified) |
Priority order: 1. Direct style 2. Class style 3. Theme style
Style example
Copy
Embed
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.9, 0.0] radius: 12
Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10
Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
Campaign E:::class2: [0.5, 0.4]
Campaign F:::class3: [0.4, 0.5] color: #0000ff
classDef class1 color: #109060
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
classDef class3 color: #f00fff, radius : 10
