12.0 KB268 lines
Blame
1> **Warning**
2>
3> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
4>
5> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/quadrantChart.md](../../packages/mermaid/src/docs/syntax/quadrantChart.md).
6
7# Quadrant Chart
8
9> A quadrant chart is a visual representation of data that is divided into four quadrants. It is used to plot data points on a two-dimensional grid, with one variable represented on the x-axis and another variable represented on the y-axis. The quadrants are determined by dividing the chart into four equal parts based on a set of criteria that is specific to the data being analyzed. Quadrant charts are often used to identify patterns and trends in data, and to prioritize actions based on the position of data points within the chart. They are commonly used in business, marketing, and risk management, among other fields.
10
11## Example
12
13```mermaid-example
14quadrantChart
15 title Reach and engagement of campaigns
16 x-axis Low Reach --> High Reach
17 y-axis Low Engagement --> High Engagement
18 quadrant-1 We should expand
19 quadrant-2 Need to promote
20 quadrant-3 Re-evaluate
21 quadrant-4 May be improved
22 Campaign A: [0.3, 0.6]
23 Campaign B: [0.45, 0.23]
24 Campaign C: [0.57, 0.69]
25 Campaign D: [0.78, 0.34]
26 Campaign E: [0.40, 0.34]
27 Campaign F: [0.35, 0.78]
28```
29
30```mermaid
31quadrantChart
32 title Reach and engagement of campaigns
33 x-axis Low Reach --> High Reach
34 y-axis Low Engagement --> High Engagement
35 quadrant-1 We should expand
36 quadrant-2 Need to promote
37 quadrant-3 Re-evaluate
38 quadrant-4 May be improved
39 Campaign A: [0.3, 0.6]
40 Campaign B: [0.45, 0.23]
41 Campaign C: [0.57, 0.69]
42 Campaign D: [0.78, 0.34]
43 Campaign E: [0.40, 0.34]
44 Campaign F: [0.35, 0.78]
45```
46
47## Syntax
48
49> **Note**
50> If there are no points available in the chart both **axis** text and **quadrant** will be rendered in the center of the respective quadrant.
51> If there are points **x-axis** labels will rendered from the left of the respective quadrant also they will be displayed at the bottom of the chart, and **y-axis** labels will be rendered at the bottom of the respective quadrant, the quadrant text will render at the top of the respective quadrant.
52
53> **Note**
54> For points x and y value min value is 0 and max value is 1.
55
56### Title
57
58The title is a short description of the chart and it will always render on top of the chart.
59
60#### Example
61
62```
63quadrantChart
64 title This is a sample example
65```
66
67### x-axis
68
69The x-axis determines what text would be displayed in the x-axis. In x-axis there is two part **left** and **right** you can pass **both** or you can pass only **left**. The statement should start with `x-axis` then the `left axis text` followed by the delimiter `-->` then `right axis text`.
70
71#### Example
72
731. `x-axis <text> --> <text>` both the left and right axis text will be rendered.
742. `x-axis <text>` only the left axis text will be rendered.
75
76### y-axis
77
78The y-axis determines what text would be displayed in the y-axis. In y-axis there is two part **top** and **bottom** you can pass **both** or you can pass only **bottom**. The statement should start with `y-axis` then the `bottom axis text` followed by the delimiter `-->` then `top axis text`.
79
80#### Example
81
821. `y-axis <text> --> <text>` both the bottom and top axis text will be rendered.
832. `y-axis <text>` only the bottom axis text will be rendered.
84
85### Quadrants text
86
87The `quadrant-[1,2,3,4]` determine what text would be displayed inside the quadrants.
88
89#### Example
90
911. `quadrant-1 <text>` determine what text will be rendered inside the top right quadrant.
922. `quadrant-2 <text>` determine what text will be rendered inside the top left quadrant.
933. `quadrant-3 <text>` determine what text will be rendered inside the bottom left quadrant.
944. `quadrant-4 <text>` determine what text will be rendered inside the bottom right quadrant.
95
96### Points
97
98Points are used to plot a circle inside the quadrantChart. The syntax is `<text>: [x, y]` here x and y value is in the range 0 - 1.
99
100#### Example
101
1021. `Point 1: [0.75, 0.80]` here the Point 1 will be drawn in the top right quadrant.
1032. `Point 2: [0.35, 0.24]` here the Point 2 will be drawn in the bottom left quadrant.
104
105## Chart Configurations
106
107| Parameter | Description | Default value |
108| --------------------------------- | -------------------------------------------------------------------------------------------------- | :-----------: |
109| chartWidth | Width of the chart | 500 |
110| chartHeight | Height of the chart | 500 |
111| titlePadding | Top and Bottom padding of the title | 10 |
112| titleFontSize | Title font size | 20 |
113| quadrantPadding | Padding outside all the quadrants | 5 |
114| quadrantTextTopPadding | Quadrant text top padding when text is drawn on top ( not data points are there) | 5 |
115| quadrantLabelFontSize | Quadrant text font size | 16 |
116| quadrantInternalBorderStrokeWidth | Border stroke width inside the quadrants | 1 |
117| quadrantExternalBorderStrokeWidth | Quadrant external border stroke width | 2 |
118| xAxisLabelPadding | Top and bottom padding of x-axis text | 5 |
119| xAxisLabelFontSize | X-axis texts font size | 16 |
120| xAxisPosition | Position of x-axis (top , bottom) if there are points the x-axis will always be rendered in bottom | 'top' |
121| yAxisLabelPadding | Left and Right padding of y-axis text | 5 |
122| yAxisLabelFontSize | Y-axis texts font size | 16 |
123| yAxisPosition | Position of y-axis (left , right) | 'left' |
124| pointTextPadding | Padding between point and the below text | 5 |
125| pointLabelFontSize | Point text font size | 12 |
126| pointRadius | Radius of the point to be drawn | 5 |
127
128## Chart Theme Variables
129
130| Parameter | Description |
131| -------------------------------- | --------------------------------------- |
132| quadrant1Fill | Fill color of the top right quadrant |
133| quadrant2Fill | Fill color of the top left quadrant |
134| quadrant3Fill | Fill color of the bottom left quadrant |
135| quadrant4Fill | Fill color of the bottom right quadrant |
136| quadrant1TextFill | Text color of the top right quadrant |
137| quadrant2TextFill | Text color of the top left quadrant |
138| quadrant3TextFill | Text color of the bottom left quadrant |
139| quadrant4TextFill | Text color of the bottom right quadrant |
140| quadrantPointFill | Points fill color |
141| quadrantPointTextFill | Points text color |
142| quadrantXAxisTextFill | X-axis text color |
143| quadrantYAxisTextFill | Y-axis text color |
144| quadrantInternalBorderStrokeFill | Quadrants inner border color |
145| quadrantExternalBorderStrokeFill | Quadrants outer border color |
146| quadrantTitleFill | Title color |
147
148## Example on config and theme
149
150```mermaid-example
151---
152config:
153 quadrantChart:
154 chartWidth: 400
155 chartHeight: 400
156 themeVariables:
157 quadrant1TextFill: "ff0000"
158---
159quadrantChart
160 x-axis Urgent --> Not Urgent
161 y-axis Not Important --> "Important ❤"
162 quadrant-1 Plan
163 quadrant-2 Do
164 quadrant-3 Delegate
165 quadrant-4 Delete
166```
167
168```mermaid
169---
170config:
171 quadrantChart:
172 chartWidth: 400
173 chartHeight: 400
174 themeVariables:
175 quadrant1TextFill: "ff0000"
176---
177quadrantChart
178 x-axis Urgent --> Not Urgent
179 y-axis Not Important --> "Important ❤"
180 quadrant-1 Plan
181 quadrant-2 Do
182 quadrant-3 Delegate
183 quadrant-4 Delete
184```
185
186### Point styling
187
188Points can either be styled directly or with defined shared classes
189
1901. Direct styling
191
192```md
193Point A: [0.9, 0.0] radius: 12
194Point B: [0.8, 0.1] color: #ff3300, radius: 10
195Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
196Point D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
197```
198
1992. Classes styling
200
201```md
202Point A:::class1: [0.9, 0.0]
203Point B:::class2: [0.8, 0.1]
204Point C:::class3: [0.7, 0.2]
205Point D:::class3: [0.7, 0.2]
206classDef class1 color: #109060
207classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
208classDef class3 color: #f00fff, radius : 10
209```
210
211#### Available styles:
212
213| Parameter | Description |
214| ------------ | ---------------------------------------------------------------------- |
215| color | Fill color of the point |
216| radius | Radius of the point |
217| stroke-width | Border width of the point |
218| stroke-color | Border color of the point (useless when stroke-width is not specified) |
219
220> **Note**
221> Order of preference:
222>
223> 1. Direct styles
224> 2. Class styles
225> 3. Theme styles
226
227## Example on styling
228
229```mermaid-example
230quadrantChart
231 title Reach and engagement of campaigns
232 x-axis Low Reach --> High Reach
233 y-axis Low Engagement --> High Engagement
234 quadrant-1 We should expand
235 quadrant-2 Need to promote
236 quadrant-3 Re-evaluate
237 quadrant-4 May be improved
238 Campaign A: [0.9, 0.0] radius: 12
239 Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10
240 Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
241 Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
242 Campaign E:::class2: [0.5, 0.4]
243 Campaign F:::class3: [0.4, 0.5] color: #0000ff
244 classDef class1 color: #109060
245 classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
246 classDef class3 color: #f00fff, radius : 10
247```
248
249```mermaid
250quadrantChart
251 title Reach and engagement of campaigns
252 x-axis Low Reach --> High Reach
253 y-axis Low Engagement --> High Engagement
254 quadrant-1 We should expand
255 quadrant-2 Need to promote
256 quadrant-3 Re-evaluate
257 quadrant-4 May be improved
258 Campaign A: [0.9, 0.0] radius: 12
259 Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10
260 Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
261 Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
262 Campaign E:::class2: [0.5, 0.4]
263 Campaign F:::class3: [0.4, 0.5] color: #0000ff
264 classDef class1 color: #109060
265 classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
266 classDef class3 color: #f00fff, radius : 10
267```
268