marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-18 23:09:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added documentation for the quadrantChart

Browse Source
This commit is contained in:
Subhash Halder
2023-05-13 17:33:31 +05:30
parent 816800adcd
commit b2a5ddcd85
6 changed files with 446 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
docs/intro/index.md
View File

@@ -235,6 +235,42 @@ journey
Sit down: 5: Me Sit down: 5: Me
``` ```
### [Quadrant Chart](../syntax/quadrantChart.md)
```mermaid-example
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]
```
```mermaid
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]
```
## Installation ## Installation
**In depth guides and examples can be found at [Getting Started](./n00b-gettingStarted.md) and [Usage](../config/usage.md).** **In depth guides and examples can be found at [Getting Started](./n00b-gettingStarted.md) and [Usage](../config/usage.md).**

171
docs/syntax/quadrantChart.md Normal file
View File

@@ -0,0 +1,171 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/quadrantChart.md](../../packages/mermaid/src/docs/syntax/quadrantChart.md).
# Quadrant Chart
> 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.
## Example
```mermaid-example
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]
```
```mermaid
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
> **Note**
> In place of `<text>` you can use text like `this is a sample text` or inside **double quotes** like `"This type of text may contain unicode like ❤"`.
> **Note**
> If there is no points available in the chart both **axis** text and **quadrant** will be rendered in the center of the respective quadrant.
> If there are points **x-axis** labels will rendered from left of the respective quadrant also they will be displayed in bottom of the chart, and **y-axis** lables will be rendered in bottom of the respective quadrant, the quadrant text will render at top of the respective quadrant.
> **Note**
> For points x and y value min value is 0 and max value is 1.
### Title
The title is a short description of the chart and it will always render on top of the chart.
#### Example
quadrantChart
title This is a sample example
### x-axis
The x-axis determine 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`.
#### Example
1. `x-axis <text> --> <text>` both the left and right axis text will be rendered.
2. `x-axis <text>` only the left axis text will be rendered.
### y-axis
The y-axis determine 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`.
#### Example
1. `y-axis <text> --> <text>` both the bottom and top axis text will be rendered.
2. `y-axis <text>` only the bottom axis text will be rendered.
### Quadrants text
The `quadrant-[1,2,3,4]` determine what text would be displayed inside the quadrants.
#### Example
1. `quadrant-1 <text>` determine what text will be rendered inside the top right quadrant.
2. `quadrant-2 <text>` determine what text will be rendered inside the top left quadrant.
3. `quadrant-3 <text>` determine what text will be rendered inside the bottom left quadrant.
4. `quadrant-4 <text>` determine what text will be rendered inside the bottom right quadrant.
### Points
Points 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.
#### Example
1. `Point 1: [0.75, 0.80]` here the Point 1 will be drawn in the top right quadrant.
2. `Point 2: [0.35, 0.24]` here the Point 2 will be drawn in the bottom left quadrant.
## Chart Configurations
| Parameter | Description | Default value |
| --------------------------------- | ------------------------------------------------------------------------------------------------- | :-----------: |
| chartWidth | Width of the chart | 500 |
| chartHeight | Height of the chart | 500 |
| titlePadding | Top and Bottom padding of the title | 10 |
| titleFontSize | Title font size | 20 |
| quadrantPadding | Padding outside all the quadrants | 5 |
| quadrantTextTopPadding | Quadrant text top padding when text is drawn on top ( not data points are there) | 5 |
| quadrantLabelFontSize | Quadrant text font size | 16 |
| quadrantInternalBorderStrokeWidth | Border stroke width inside the quadrants | 1 |
| quadrantExternalBorderStrokeWidth | Quadrant external border stroke width | 2 |
| xAxisLabelPadding | Top and bottom padding of x-axis text | 5 |
| xAxisLabelFontSize | X-axis texts font size | 16 |
| xAxisPosition | Position of x-axis (top , bottom) if there are points the x-axis will alway be rendered in bottom | 'top' |
| yAxisLabelPadding | Left and Right padding of y-axis text | 5 |
| yAxisLabelFontSize | Y-axis texts font size | 16 |
| yAxisPosition | Position of y-axis (left , right) | 'left' |
| pointTextPadding | Padding between point and the below text | 5 |
| pointLabelFontSize | Point text font size | 12 |
| pointRadius | Radius of the point to be drawn | 5 |
## Chart Theme Variables
| Parameter | Description |
| -------------------------------- | --------------------------------------- |
| quadrant1Fill | Fill color of the top right quadrant |
| quadrant2Fill | Fill color of the top left quadrant |
| quadrant3Fill | Fill color of the bottom left quadrant |
| quadrant4Fill | Fill color of the bottom right quadrant |
| quadrant1TextFill | Text color of the top right quadrant |
| quadrant2TextFill | Text color of the top left quadrant |
| quadrant3TextFill | Text color of the bottom left quadrant |
| quadrant4TextFill | Text color of the bottom right quadrant |
| quadrantPointFill | Points fill color |
| quadrantPointTextFill | Points text color |
| quadrantXAxisTextFill | X-axis text color |
| quadrantYAxisTextFill | Y-axis text color |
| quadrantInternalBorderStrokeFill | Quadrants inner border color |
| quadrantExternalBorderStrokeFill | Quadrants outer border color |
| quadrantTitleFill | Title color |
## Example on config and theme
```mermaid-example
%%{init: {"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 Deligate
quadrant-4 Delete
```
```mermaid
%%{init: {"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 Deligate
quadrant-4 Delete
```

154
packages/mermaid/src/defaultConfig.ts
View File

@@ -1299,6 +1299,24 @@ const config: Partial<MermaidConfig> = {
* Default value: 500 * Default value: 500
*/ */
chartHeight: 500, chartHeight: 500,
/**
* | Parameter | Description | Type | Required | Values |
* | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
* | titlePadding | Chart title top and bottom padding | number | Optional | Any positive number |
*
* **Notes:**
* Default value: 10
*/
titlePadding: 10,
/**
* | Parameter | Description | Type | Required | Values |
* | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
* | titleFontSize | Chart title font size | number | Optional | Any positive number |
*
* **Notes:**
* Default value: 20
*/
titleFontSize: 20,
/** /**
* | Parameter | Description | Type | Required | Values | * | Parameter | Description | Type | Required | Values |
* | --------------- | ---------------------------------- | ------- | -------- | ------------------- | * | --------------- | ---------------------------------- | ------- | -------- | ------------------- |
@@ -1308,6 +1326,42 @@ const config: Partial<MermaidConfig> = {
* Default value: 5 * Default value: 5
*/ */
quadrantPadding: 5, quadrantPadding: 5,
/**
* | Parameter | Description | Type | Required | Values |
* | ---------------------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------- |
* | quadrantTextTopPadding | quadrant title padding from top if the quadrant is rendered on top | number | Optional | Any positive number |
*
* **Notes:**
* Default value: 5
*/
quadrantTextTopPadding: 5,
/**
* | Parameter | Description | Type | Required | Values |
* | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
* | quadrantLabelFontSize | quadrant title font size | number | Optional | Any positive number |
*
* **Notes:**
* Default value: 16
*/
quadrantLabelFontSize: 16,
/**
* | Parameter | Description | Type | Required | Values |
* | --------------------------------- | ------------------------------------------------------------- | ------- | -------- | ------------------- |
* | quadrantInternalBorderStrokeWidth | stroke width of edges of the box that are inside the quadrant | number | Optional | Any positive number |
*
* **Notes:**
* Default value: 1
*/
quadrantInternalBorderStrokeWidth: 1,
/**
* | Parameter | Description | Type | Required | Values |
* | --------------------------------- | -------------------------------------------------------------- | ------- | -------- | ------------------- |
* | quadrantExternalBorderStrokeWidth | stroke width of edges of the box that are outside the quadrant | number | Optional | Any positive number |
*
* **Notes:**
* Default value: 2
*/
quadrantExternalBorderStrokeWidth: 2,
/** /**
* | Parameter | Description | Type | Required | Values | * | Parameter | Description | Type | Required | Values |
* | --------------- | ---------------------------------- | ------- | -------- | ------------------- | * | --------------- | ---------------------------------- | ------- | -------- | ------------------- |
@@ -1317,6 +1371,24 @@ const config: Partial<MermaidConfig> = {
* Default value: 5 * Default value: 5
*/ */
xAxisLabelPadding: 5, xAxisLabelPadding: 5,
/**
* | Parameter | Description | Type | Required | Values |
* | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
* | xAxisLabelFontSize | x-axis label font size | number | Optional | Any positive number |
*
* **Notes:**
* Default value: 16
*/
xAxisLabelFontSize: 16,
/**
* | Parameter | Description | Type | Required | Values |
* | ------------- | ------------------------------- | ------- | -------- | ------------------- |
* | xAxisPosition | position of x-axis labels | string | Optional | 'top' or 'bottom' |
*
* **Notes:**
* Default value: top
*/
xAxisPosition: 'top',
/** /**
* | Parameter | Description | Type | Required | Values | * | Parameter | Description | Type | Required | Values |
* | --------------- | ---------------------------------- | ------- | -------- | ------------------- | * | --------------- | ---------------------------------- | ------- | -------- | ------------------- |
@@ -1326,33 +1398,6 @@ const config: Partial<MermaidConfig> = {
* Default value: 5 * Default value: 5
*/ */
yAxisLabelPadding: 5, yAxisLabelPadding: 5,
/**
* | Parameter | Description | Type | Required | Values |
* | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
* | titlePadding | Chart title top and bottom padding | number | Optional | Any positive number |
*
* **Notes:**
* Default value: 5
*/
titlePadding: 5,
/**
* | Parameter | Description | Type | Required | Values |
* | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
* | titleFontSize | Chart title font size | number | Optional | Any positive number |
*
* **Notes:**
* Default value: 20
*/
titleFontSize: 20,
/**
* | Parameter | Description | Type | Required | Values |
* | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
* | xAxisLabelFontSize | x-axis label font size | number | Optional | Any positive number |
*
* **Notes:**
* Default value: 16
*/
xAxisLabelFontSize: 16,
/** /**
* | Parameter | Description | Type | Required | Values | * | Parameter | Description | Type | Required | Values |
* | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
@@ -1363,23 +1408,14 @@ const config: Partial<MermaidConfig> = {
*/ */
yAxisLabelFontSize: 16, yAxisLabelFontSize: 16,
/** /**
* | Parameter | Description | Type | Required | Values | * | Parameter | Description | Type | Required | Values |
* | ------------------ | ---------------------------------- | ------- | -------- | ------------------- | * | ------------- | ------------------------------- | ------- | -------- | ------------------- |
* | quadrantLabelFontSize | quadrant title font size | number | Optional | Any positive number | * | yAxisPosition | position of y-axis labels | string | Optional | 'left' or 'right' |
* *
* **Notes:** * **Notes:**
* Default value: 16 * Default value: left
*/ */
quadrantLabelFontSize: 16, yAxisPosition: 'left',
/**
* | Parameter | Description | Type | Required | Values |
* | ---------------------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------- |
* | quadrantTextTopPadding | quadrant title padding from top if the quadrant is rendered on top | number | Optional | Any positive number |
*
* **Notes:**
* Default value: 5
*/
quadrantTextTopPadding: 5,
/** /**
* | Parameter | Description | Type | Required | Values | * | Parameter | Description | Type | Required | Values |
* | ---------------------- | -------------------------------------- | ------- | -------- | ------------------- | * | ---------------------- | -------------------------------------- | ------- | -------- | ------------------- |
@@ -1407,42 +1443,6 @@ const config: Partial<MermaidConfig> = {
* Default value: 5 * Default value: 5
*/ */
pointRadius: 5, pointRadius: 5,
/**
* | Parameter | Description | Type | Required | Values |
* | ------------- | ------------------------------- | ------- | -------- | ------------------- |
* | xAxisPosition | position of x-axis labels | string | Optional | 'top' or 'bottom' |
*
* **Notes:**
* Default value: top
*/
xAxisPosition: 'top',
/**
* | Parameter | Description | Type | Required | Values |
* | ------------- | ------------------------------- | ------- | -------- | ------------------- |
* | yAxisPosition | position of y-axis labels | string | Optional | 'left' or 'right' |
*
* **Notes:**
* Default value: left
*/
yAxisPosition: 'left',
/**
* | Parameter | Description | Type | Required | Values |
* | --------------------------------- | ------------------------------------------------------------- | ------- | -------- | ------------------- |
* | quadrantInternalBorderStrokeWidth | stroke width of edges of the box that are inside the quadrant | number | Optional | Any positive number |
*
* **Notes:**
* Default value: 1
*/
quadrantInternalBorderStrokeWidth: 1,
/**
* | Parameter | Description | Type | Required | Values |
* | --------------------------------- | -------------------------------------------------------------- | ------- | -------- | ------------------- |
* | quadrantExternalBorderStrokeWidth | stroke width of edges of the box that are outside the quadrant | number | Optional | Any positive number |
*
* **Notes:**
* Default value: 2
*/
quadrantExternalBorderStrokeWidth: 2,
/** /**
* | Parameter | Description | Type | Required | Values | * | Parameter | Description | Type | Required | Values |
* | ----------- | ----------- | ------- | -------- | ----------- | * | ----------- | ----------- | ------- | -------- | ----------- |

2
packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts
View File

@@ -150,7 +150,7 @@ export class QuadrantBuilder {
showTitle: true, showTitle: true,
chartHeight: defaultConfig.quadrantChart?.chartWidth || 500, chartHeight: defaultConfig.quadrantChart?.chartWidth || 500,
chartWidth: defaultConfig.quadrantChart?.chartHeight || 500, chartWidth: defaultConfig.quadrantChart?.chartHeight || 500,
titlePadding: defaultConfig.quadrantChart?.titlePadding || 5, titlePadding: defaultConfig.quadrantChart?.titlePadding || 10,
titleFontSize: defaultConfig.quadrantChart?.titleFontSize || 20, titleFontSize: defaultConfig.quadrantChart?.titleFontSize || 20,
quadrantPadding: defaultConfig.quadrantChart?.quadrantPadding || 5, quadrantPadding: defaultConfig.quadrantChart?.quadrantPadding || 5,
xAxisLabelPadding: defaultConfig.quadrantChart?.xAxisLabelPadding || 5, xAxisLabelPadding: defaultConfig.quadrantChart?.xAxisLabelPadding || 5,

19
packages/mermaid/src/docs/intro/examples.md
View File

@@ -98,3 +98,22 @@ journey
Go downstairs: 5: Me Go downstairs: 5: Me
Sit down: 5: Me Sit down: 5: Me
``` ```
### [Quadrant Chart](../syntax/quadrantChart.md)
```mermaid-example
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]
```

142
packages/mermaid/src/docs/syntax/quadrantChart.md Normal file
View File

@@ -0,0 +1,142 @@
# Quadrant Chart
> 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.
## Example
```mermaid-example
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
```note
In place of `<text>` you can use text like `this is a sample text` or inside **double quotes** like `"This type of text may contain unicode like ❤"`.
```
```note
If there is no points available in the chart both **axis** text and **quadrant** will be rendered in the center of the respective quadrant.
If there are points **x-axis** labels will rendered from left of the respective quadrant also they will be displayed in bottom of the chart, and **y-axis** lables will be rendered in bottom of the respective quadrant, the quadrant text will render at top of the respective quadrant.
```
```note
For points x and y value min value is 0 and max value is 1.
```
### Title
The title is a short description of the chart and it will always render on top of the chart.
#### Example
```
quadrantChart
title This is a sample example
```
### x-axis
The x-axis determine 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`.
#### Example
1. `x-axis <text> --> <text>` both the left and right axis text will be rendered.
2. `x-axis <text>` only the left axis text will be rendered.
### y-axis
The y-axis determine 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`.
#### Example
1. `y-axis <text> --> <text>` both the bottom and top axis text will be rendered.
2. `y-axis <text>` only the bottom axis text will be rendered.
### Quadrants text
The `quadrant-[1,2,3,4]` determine what text would be displayed inside the quadrants.
#### Example
1. `quadrant-1 <text>` determine what text will be rendered inside the top right quadrant.
2. `quadrant-2 <text>` determine what text will be rendered inside the top left quadrant.
3. `quadrant-3 <text>` determine what text will be rendered inside the bottom left quadrant.
4. `quadrant-4 <text>` determine what text will be rendered inside the bottom right quadrant.
### Points
Points 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.
#### Example
1. `Point 1: [0.75, 0.80]` here the Point 1 will be drawn in the top right quadrant.
2. `Point 2: [0.35, 0.24]` here the Point 2 will be drawn in the bottom left quadrant.
## Chart Configurations
| Parameter | Description | Default value |
| --------------------------------- | ------------------------------------------------------------------------------------------------- | :-----------: |
| chartWidth | Width of the chart | 500 |
| chartHeight | Height of the chart | 500 |
| titlePadding | Top and Bottom padding of the title | 10 |
| titleFontSize | Title font size | 20 |
| quadrantPadding | Padding outside all the quadrants | 5 |
| quadrantTextTopPadding | Quadrant text top padding when text is drawn on top ( not data points are there) | 5 |
| quadrantLabelFontSize | Quadrant text font size | 16 |
| quadrantInternalBorderStrokeWidth | Border stroke width inside the quadrants | 1 |
| quadrantExternalBorderStrokeWidth | Quadrant external border stroke width | 2 |
| xAxisLabelPadding | Top and bottom padding of x-axis text | 5 |
| xAxisLabelFontSize | X-axis texts font size | 16 |
| xAxisPosition | Position of x-axis (top , bottom) if there are points the x-axis will alway be rendered in bottom | 'top' |
| yAxisLabelPadding | Left and Right padding of y-axis text | 5 |
| yAxisLabelFontSize | Y-axis texts font size | 16 |
| yAxisPosition | Position of y-axis (left , right) | 'left' |
| pointTextPadding | Padding between point and the below text | 5 |
| pointLabelFontSize | Point text font size | 12 |
| pointRadius | Radius of the point to be drawn | 5 |
## Chart Theme Variables
| Parameter | Description |
| -------------------------------- | --------------------------------------- |
| quadrant1Fill | Fill color of the top right quadrant |
| quadrant2Fill | Fill color of the top left quadrant |
| quadrant3Fill | Fill color of the bottom left quadrant |
| quadrant4Fill | Fill color of the bottom right quadrant |
| quadrant1TextFill | Text color of the top right quadrant |
| quadrant2TextFill | Text color of the top left quadrant |
| quadrant3TextFill | Text color of the bottom left quadrant |
| quadrant4TextFill | Text color of the bottom right quadrant |
| quadrantPointFill | Points fill color |
| quadrantPointTextFill | Points text color |
| quadrantXAxisTextFill | X-axis text color |
| quadrantYAxisTextFill | Y-axis text color |
| quadrantInternalBorderStrokeFill | Quadrants inner border color |
| quadrantExternalBorderStrokeFill | Quadrants outer border color |
| quadrantTitleFill | Title color |
## Example on config and theme
```mermaid-example
%%{init: {"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 Deligate
quadrant-4 Delete
```