marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-24 17:59:39 +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 | | yAxisTitleColor | Color of the y-axis title |
| yAxisTickColor | Color of the y-axis tick | | yAxisTickColor | Color of the y-axis tick |
| yAxisLineColor | Color of the y-axis line | | 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. ### 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).
### Example
Here's how you can configure different colors for lines and bars. To add a legend, use corresponding colors in the legend description:
```yaml ```yaml
--- ---
@@ -164,9 +161,7 @@ config:
xyChart: xyChart:
plotColorPalette: "#000000, #0000FF, #00FF00, #FF0000" plotColorPalette: "#000000, #0000FF, #00FF00, #FF0000"
--- ---
``` xychart
```
xychart-beta
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
@@ -180,14 +175,6 @@ xychart-beta
line [5,15,25,35] 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 ## Example on config and theme
```mermaid-example ```mermaid-example