diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md index c1f3c0591..785d95d81 100644 --- a/packages/mermaid/src/docs/syntax/xyChart.md +++ b/packages/mermaid/src/docs/syntax/xyChart.md @@ -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