docs: Add quadrant point styling
Co-authored-by: ilyes-ced <109927235+ilyes-ced@users.noreply.github.com>
This commit is contained in:
parent
3357844a1f
commit
eb4a6fd2ed
|
@ -168,3 +168,86 @@ quadrantChart
|
||||||
quadrant-3 Delegate
|
quadrant-3 Delegate
|
||||||
quadrant-4 Delete
|
quadrant-4 Delete
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Point styling
|
||||||
|
|
||||||
|
Points can either be styled directly or with defined shared classes
|
||||||
|
|
||||||
|
1. Direct styling
|
||||||
|
|
||||||
|
```md
|
||||||
|
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
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Classes styling
|
||||||
|
|
||||||
|
```md
|
||||||
|
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 | Fill color of the point |
|
||||||
|
| radius | Radius of the point |
|
||||||
|
| stroke-width | Border width of the point |
|
||||||
|
| stroke-color | Border color of the point (useless when stroke-width is not specified) |
|
||||||
|
|
||||||
|
> **Note**
|
||||||
|
> Order of preference:
|
||||||
|
>
|
||||||
|
> 1. Direct styles
|
||||||
|
> 2. Class styles
|
||||||
|
> 3. Theme styles
|
||||||
|
|
||||||
|
## Example on styling
|
||||||
|
|
||||||
|
```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.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
|
||||||
|
```
|
||||||
|
|
||||||
|
```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.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
|
||||||
|
```
|
||||||
|
|
|
@ -136,3 +136,66 @@ quadrantChart
|
||||||
quadrant-3 Delegate
|
quadrant-3 Delegate
|
||||||
quadrant-4 Delete
|
quadrant-4 Delete
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Point styling
|
||||||
|
|
||||||
|
Points can either be styled directly or with defined shared classes
|
||||||
|
|
||||||
|
1. Direct styling
|
||||||
|
|
||||||
|
```md
|
||||||
|
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
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Classes styling
|
||||||
|
|
||||||
|
```md
|
||||||
|
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 | Fill color of the point |
|
||||||
|
| radius | Radius of the point |
|
||||||
|
| stroke-width | Border width of the point |
|
||||||
|
| stroke-color | Border color of the point (useless when stroke-width is not specified) |
|
||||||
|
|
||||||
|
```note
|
||||||
|
Order of preference:
|
||||||
|
1. Direct styles
|
||||||
|
2. Class styles
|
||||||
|
3. Theme styles
|
||||||
|
```
|
||||||
|
|
||||||
|
## Example on styling
|
||||||
|
|
||||||
|
```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.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
|
||||||
|
```
|
||||||
|
|
Loading…
Reference in New Issue