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

Merge pull request #6895 from shanti2530/docs/xychart-plotcolorpalette-example

Browse Source 
Docs(xychart): added plotcolorpalette example
This commit is contained in:
Sidharth Vinod
2025-09-03 10:52:20 +00:00
committed by GitHub
parent 2972bf25bf 34fc8bddc4
commit e96614ab86
2 changed files with 73 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
docs/syntax/xyChart.md
View File

@@ -138,7 +138,7 @@ xychart
## Chart Theme Variables ## Chart Theme Variables
Themes for xychart resides inside xychart attribute so to set the variables use this syntax: Themes for xychart reside inside the `xychart` attribute, allowing customization through the following syntax:
```yaml ```yaml
--- ---
@@ -163,6 +163,52 @@ config:
| yAxisLineColor | Color of the y-axis line | | yAxisLineColor | Color of the y-axis line |
| plotColorPalette | String of colors separated by comma e.g. "#f3456, #43445" | | plotColorPalette | String of colors separated by comma e.g. "#f3456, #43445" |
### Setting Colors for Lines and Bars
To set the color for lines and bars, use the `plotColorPalette` parameter. Colors in the palette will correspond sequentially to the elements in your chart (e.g., first bar/line will use the first color specified in the palette).
```mermaid-example
---
config:
themeVariables:
xyChart:
plotColorPalette: '#000000, #0000FF, #00FF00, #FF0000'
---
xychart
title "Different Colors in xyChart"
x-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"]
y-axis "valuesY" 0 --> 50
%% Black line
line [10,20,30,40]
%% Blue bar
bar [20,30,25,35]
%% Green bar
bar [15,25,20,30]
%% Red line
line [5,15,25,35]
```
```mermaid
---
config:
themeVariables:
xyChart:
plotColorPalette: '#000000, #0000FF, #00FF00, #FF0000'
---
xychart
title "Different Colors in xyChart"
x-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"]
y-axis "valuesY" 0 --> 50
%% Black line
line [10,20,30,40]
%% Blue bar
bar [20,30,25,35]
%% Green bar
bar [15,25,20,30]
%% Red line
line [5,15,25,35]
```
## Example on config and theme ## Example on config and theme
```mermaid-example ```mermaid-example

27
packages/mermaid/src/docs/syntax/xyChart.md
View File

@@ -126,7 +126,7 @@ xychart
## Chart Theme Variables ## Chart Theme Variables
Themes for xychart resides inside xychart attribute so to set the variables use this syntax: Themes for xychart reside inside the `xychart` attribute, allowing customization through the following syntax:
```yaml ```yaml
--- ---
@@ -151,6 +151,31 @@ config:
| yAxisLineColor | Color of the y-axis line | | yAxisLineColor | Color of the y-axis line |
| plotColorPalette | String of colors separated by comma e.g. "#f3456, #43445" | | plotColorPalette | String of colors separated by comma e.g. "#f3456, #43445" |
### Setting Colors for Lines and Bars
To set the color for lines and bars, use the `plotColorPalette` parameter. Colors in the palette will correspond sequentially to the elements in your chart (e.g., first bar/line will use the first color specified in the palette).
```mermaid-example
---
config:
themeVariables:
xyChart:
plotColorPalette: '#000000, #0000FF, #00FF00, #FF0000'
---
xychart
title "Different Colors in xyChart"
x-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"]
y-axis "valuesY" 0 --> 50
%% Black line
line [10,20,30,40]
%% Blue bar
bar [20,30,25,35]
%% Green bar
bar [15,25,20,30]
%% Red line
line [5,15,25,35]
```
## Example on config and theme ## Example on config and theme
```mermaid-example ```mermaid-example