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

[autofix.ci] apply automated fixes

Browse Source
This commit is contained in:
autofix-ci[bot]
2025-08-24 17:49:14 +00:00
committed by GitHub
parent 231fcc700f
commit 11c8848e1f
2 changed files with 41 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
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,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).
```yaml
---
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

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

@@ -152,27 +152,28 @@ config:
| 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 ### 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). 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).
```yaml ```yaml
--- ---
config: config:
themeVariables: themeVariables:
xyChart: xyChart:
plotColorPalette: "#000000, #0000FF, #00FF00, #FF0000" plotColorPalette: '#000000, #0000FF, #00FF00, #FF0000'
--- ---
xychart xychart
title "Different Colors in xyChart" title "Different Colors in xyChart"
x-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"] x-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"]
y-axis "valuesY" 0 --> 50 y-axis "valuesY" 0 --> 50
%% Black line %% Black line
line [10,20,30,40] line [10,20,30,40]
%% Blue bar %% Blue bar
bar [20,30,25,35] bar [20,30,25,35]
%% Green bar %% Green bar
bar [15,25,20,30] bar [15,25,20,30]
%% Red line %% Red line
line [5,15,25,35] line [5,15,25,35]
``` ```
## Example on config and theme ## Example on config and theme