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

xychart: repositioned the colours section

Browse Source
This commit is contained in:
Maria Stellini
2025-08-24 19:31:57 +02:00
committed by GitHub
parent 8ba7520acc
commit 231fcc700f
1 changed files with 4 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -149,13 +149,10 @@ config:
| yAxisTitleColor | Color of the y-axis title |
| yAxisTickColor | Color of the y-axis tick |
| yAxisLineColor | Color of the y-axis line |
| plotColorPalette | String of colors separated by commas, e.g., "#f3456, #43445" |
| plotColorPalette | String of colors separated by comma e.g. "#f3456, #43445" |
Using the `plotColorPalette`, you can apply a set of colors to the lines and bars in the `xyChart`. The order of colors in the palette corresponds to the order of bars or lines in the chart.
### Example
Here's how you can configure different colors for lines and bars. To add a legend, use corresponding colors in the legend description:
### 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
---
@@ -164,9 +161,7 @@ config:
xyChart:
plotColorPalette: "#000000, #0000FF, #00FF00, #FF0000"
---
```
```
xychart-beta
xychart
title "Different Colors in xyChart"
x-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"]
y-axis "valuesY" 0 --> 50
@@ -180,14 +175,6 @@ xychart-beta
line [5,15,25,35]
```
With this setup, the chart will use different colors specified in the palette for each line and bar.
**Legend Creation**
- Use colors from the `plotColorPalette` in the legend.
- Ensure the description aligns with the order of elements in the chart.
Thanks to contributors for identifying the need for comprehensive customization examples.
## Example on config and theme
```mermaid-example