diff --git a/demos/xychart.html b/demos/xychart.html
index 1a8d8c291..4fc3a1249 100644
--- a/demos/xychart.html
+++ b/demos/xychart.html
@@ -66,7 +66,7 @@
 
     <h1>XY Charts demos</h1>
     <pre class="mermaid">
-    %%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%%
+    %%{init: {"xyChart": {"width": 600, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
     xychart-beta
     title "Basic xychart with many categories"
     x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md
index 7e4303ba9..6ec12e9fe 100644
--- a/docs/syntax/xyChart.md
+++ b/docs/syntax/xyChart.md
@@ -131,8 +131,8 @@ Every grammer are optional other than the chart name and one data set, so you wi
 ## Chart Theme Variables
 
 > **Note**
-> theames 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
+> %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
 
 | Parameter        | Description                                            |
 | ---------------- | ------------------------------------------------------ |
@@ -150,7 +150,7 @@ Every grammer are optional other than the chart name and one data set, so you wi
 ## Example on config and theme
 
 ```mermaid-example
-%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%%
+%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
 xychart-beta
     title "Sales Revenue"
     x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
@@ -160,7 +160,7 @@ xychart-beta
 ```
 
 ```mermaid
-%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%%
+%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
 xychart-beta
     title "Sales Revenue"
     x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts
index b8c7dd0a2..297a2b30d 100644
--- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts
+++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts
@@ -27,10 +27,6 @@ import { getThemeVariables } from '../../themes/theme-default.js';
 
 export type SVGGType = Selection<SVGGElement, unknown, Element | null, unknown>;
 
-const defaultThemeVariables = getThemeVariables();
-
-const config = configApi.getConfig();
-
 let plotIndex = 0;
 
 let tmpSVGGElem: SVGGType;
@@ -48,12 +44,15 @@ interface NormalTextType {
 }
 
 function getChartDefaultThemeConfig(): XYChartThemeConfig {
+  const defaultThemeVariables = getThemeVariables();
+  const config = configApi.getConfig();
   return {
     ...defaultThemeVariables.xyChart,
     ...config.themeVariables?.xyChart,
   };
 }
 function getChartDefaultConfig(): XYChartConfig {
+  const config = configApi.getConfig();
   return {
     ...(defaultConfig.xyChart as XYChartConfig),
     ...config.xyChart,
@@ -87,6 +86,7 @@ function getChartDefalutData(): XYChartData {
 }
 
 function textSanitizer(text: string) {
+  const config = configApi.getConfig();
   return sanitizeText(text.trim(), config);
 }
 
diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md
index 5e65cb670..060cf8ae8 100644
--- a/packages/mermaid/src/docs/syntax/xyChart.md
+++ b/packages/mermaid/src/docs/syntax/xyChart.md
@@ -125,8 +125,8 @@ xychart-beta
 ## Chart Theme Variables
 
 ```note
-theames 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
+%%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
 ```
 
 | Parameter        | Description                                           |
@@ -145,7 +145,7 @@ theames for xychart resides inside xychart attribute so to set the variables use
 ## Example on config and theme
 
 ```mermaid-example
-%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%%
+%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
 xychart-beta
     title "Sales Revenue"
     x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]