diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md
index dec16a518..a981fe5e9 100644
--- a/docs/syntax/xyChart.md
+++ b/docs/syntax/xyChart.md
@@ -138,7 +138,7 @@ xychart
 
 ## 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
 ---
@@ -163,6 +163,31 @@ config:
 | yAxisLineColor   | Color of the y-axis line                                  |
 | 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
 
 ```mermaid-example
diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md
index 785d95d81..b070fbafe 100644
--- a/packages/mermaid/src/docs/syntax/xyChart.md
+++ b/packages/mermaid/src/docs/syntax/xyChart.md
@@ -152,27 +152,28 @@ config:
 | 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"
+  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]
+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