diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md
index 235b4e337..d40aacd2b 100644
--- a/docs/syntax/xyChart.md
+++ b/docs/syntax/xyChart.md
@@ -138,9 +138,15 @@ xychart-beta
 
 ## Chart Theme Variables
 
-> **Note**
-> Themes for xychart resides inside xychart attribute so to set the variables use this syntax
-> %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
+Themes for xychart resides inside xychart attribute so to set the variables use this syntax:
+
+```yaml
+config:
+    themeVariables:
+        xyChart:
+            titleColor: "#ff0000"
+---
+```
 
 | Parameter        | Description                                               |
 | ---------------- | --------------------------------------------------------- |
diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md
index 96a56e2a7..4da763e38 100644
--- a/packages/mermaid/src/docs/syntax/xyChart.md
+++ b/packages/mermaid/src/docs/syntax/xyChart.md
@@ -126,9 +126,15 @@ xychart-beta
 
 ## Chart Theme Variables
 
-```note
-Themes for xychart resides inside xychart attribute so to set the variables use this syntax
-%%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
+Themes for xychart resides inside xychart attribute so to set the variables use this syntax:
+
+```yaml
+---
+config:
+  themeVariables:
+    xyChart:
+      titleColor: "#ff0000"
+---
 ```
 
 | Parameter        | Description                                               |