diff --git a/change/@fluentui-react-charting-c1fdbc01-292c-4f2d-b96e-1e417b7c89da.json b/change/@fluentui-react-charting-c1fdbc01-292c-4f2d-b96e-1e417b7c89da.json
deleted file mode 100644
index 5bb51902a8b00b..00000000000000
--- a/change/@fluentui-react-charting-c1fdbc01-292c-4f2d-b96e-1e417b7c89da.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "Initialization of state variables and updating for HorizontalBarChartWithAxis chart",
-  "packageName": "@fluentui/react-charting",
-  "email": "120183316+srmukher@users.noreply.github.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@fluentui-react-charting-d2171258-9397-47d2-b063-9e1b96df4f2d.json b/change/@fluentui-react-charting-d2171258-9397-47d2-b063-9e1b96df4f2d.json
deleted file mode 100644
index 00e6d7bf7d5211..00000000000000
--- a/change/@fluentui-react-charting-d2171258-9397-47d2-b063-9e1b96df4f2d.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "HeatMap chart bug fixes",
-  "packageName": "@fluentui/react-charting",
-  "email": "74965306+Anush2303@users.noreply.github.com",
-  "dependentChangeType": "patch"
-}
diff --git a/packages/charts/react-charting/CHANGELOG.json b/packages/charts/react-charting/CHANGELOG.json
index ddcfa2ec48af4f..a9340f949230d2 100644
--- a/packages/charts/react-charting/CHANGELOG.json
+++ b/packages/charts/react-charting/CHANGELOG.json
@@ -1,6 +1,42 @@
 {
   "name": "@fluentui/react-charting",
   "entries": [
+    {
+      "date": "Thu, 02 Jan 2025 07:22:03 GMT",
+      "tag": "@fluentui/react-charting_v5.23.36",
+      "version": "5.23.36",
+      "comments": {
+        "patch": [
+          {
+            "author": "kumarkshitij@microsoft.com",
+            "package": "@fluentui/react-charting",
+            "commit": "6bd14a98fb5bec1eb26dfbada654fc1588249fa8",
+            "comment": "fix: resolve css variables in svg image data"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 01 Jan 2025 07:21:09 GMT",
+      "tag": "@fluentui/react-charting_v5.23.35",
+      "version": "5.23.35",
+      "comments": {
+        "patch": [
+          {
+            "author": "74965306+Anush2303@users.noreply.github.com",
+            "package": "@fluentui/react-charting",
+            "commit": "bf1b91f1fd3cfb580185870b6a4b77738384f9d2",
+            "comment": "HeatMap chart bug fixes"
+          },
+          {
+            "author": "120183316+srmukher@users.noreply.github.com",
+            "package": "@fluentui/react-charting",
+            "commit": "db1eb859113249615f1de99d409d330231761420",
+            "comment": "Initialization of state variables and updating for HorizontalBarChartWithAxis chart"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 31 Dec 2024 07:21:44 GMT",
       "tag": "@fluentui/react-charting_v5.23.34",
diff --git a/packages/charts/react-charting/CHANGELOG.md b/packages/charts/react-charting/CHANGELOG.md
index 8f09347b7dd607..106671d1bf5b26 100644
--- a/packages/charts/react-charting/CHANGELOG.md
+++ b/packages/charts/react-charting/CHANGELOG.md
@@ -1,9 +1,28 @@
 # Change Log - @fluentui/react-charting
 
-This log was last generated on Tue, 31 Dec 2024 07:21:44 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Jan 2025 07:22:03 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [5.23.36](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.36)
+
+Thu, 02 Jan 2025 07:22:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.35..@fluentui/react-charting_v5.23.36)
+
+### Patches
+
+- fix: resolve css variables in svg image data ([PR #33538](https://github.com/microsoft/fluentui/pull/33538) by kumarkshitij@microsoft.com)
+
+## [5.23.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.35)
+
+Wed, 01 Jan 2025 07:21:09 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.34..@fluentui/react-charting_v5.23.35)
+
+### Patches
+
+- HeatMap chart bug fixes ([PR #33525](https://github.com/microsoft/fluentui/pull/33525) by 74965306+Anush2303@users.noreply.github.com)
+- Initialization of state variables and updating for HorizontalBarChartWithAxis chart ([PR #33532](https://github.com/microsoft/fluentui/pull/33532) by 120183316+srmukher@users.noreply.github.com)
+
 ## [5.23.34](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.34)
 
 Tue, 31 Dec 2024 07:21:44 GMT 
diff --git a/packages/charts/react-charting/package.json b/packages/charts/react-charting/package.json
index 379d68ccea7676..a23ec043789145 100644
--- a/packages/charts/react-charting/package.json
+++ b/packages/charts/react-charting/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-charting",
-  "version": "5.23.34",
+  "version": "5.23.36",
   "description": "React web charting controls for Microsoft fluentui system.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx
index 4ddf1a198b19d6..63f472a281be77 100644
--- a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx
+++ b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx
@@ -127,7 +127,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
   const exportAsImage = React.useCallback(
     (opts?: IImageExportOptions) => {
       return toImage(chartRef.current?.chartContainer, {
-        background: theme.palette.white,
+        background: theme.semanticColors.bodyBackground,
         ...opts,
       });
     },
diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/imageExporter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/imageExporter.ts
index 3bad277b20a08b..cab5167bf6ccb2 100644
--- a/packages/charts/react-charting/src/components/DeclarativeChart/imageExporter.ts
+++ b/packages/charts/react-charting/src/components/DeclarativeChart/imageExporter.ts
@@ -17,7 +17,8 @@ export function toImage(chartContainer?: HTMLElement | null, opts: IImageExportO
     }
 
     try {
-      const background = 'white'; // Background is coming as --var(xxx) when used with v8 wrapper in v9
+      const background =
+        typeof opts.background === 'string' ? resolveCSSVariables(chartContainer, opts.background) : 'transparent';
       const svg = toSVG(chartContainer, background);
 
       const svgData = new XMLSerializer().serializeToString(svg.node);
@@ -65,7 +66,7 @@ function toSVG(chartContainer: HTMLElement, background: string) {
 
   const svgElements = svg.getElementsByTagName('*');
   const styleSheets = document.styleSheets;
-  const styleRules: string[] = [];
+  let styleRules: string = '';
 
   for (let i = svgElements.length - 1; i--; ) {
     svgElements[i].classList.forEach(className => {
@@ -81,14 +82,15 @@ function toSVG(chartContainer: HTMLElement, background: string) {
         const hasClassName = selectorText.split(' ').some(word => classNames.has(word));
 
         if (hasClassName) {
-          styleRules.push(rules[j].cssText);
+          styleRules += rules[j].cssText + ' ';
         }
       }
     }
   }
+  styleRules = resolveCSSVariables(chartContainer, styleRules);
 
   const xmlDocument = new DOMParser().parseFromString('<svg></svg>', 'image/svg+xml');
-  const styleNode = xmlDocument.createCDATASection(styleRules.join(' '));
+  const styleNode = xmlDocument.createCDATASection(styleRules);
   clonedSvg.insert('defs', ':first-child').append('style').attr('type', 'text/css').node()!.appendChild(styleNode);
 
   clonedSvg.attr('width', w1).attr('height', h1).attr('viewBox', `0 0 ${w1} ${h1}`);
@@ -161,12 +163,14 @@ function cloneLegendsToSVG(chartContainer: HTMLElement, svgWidth: number, svgHei
       textOffset = 8;
     }
 
+    const { color: textColor } = getComputedStyle(legendText!);
     legendItem
       .append('text')
       .attr('x', legendX + textOffset)
       .attr('y', svgHeight + legendY + 8)
       .attr('dominant-baseline', 'hanging')
       .attr('class', legendText!.getAttribute('class'))
+      .attr('fill', textColor)
       .text(legendText!.textContent);
     legendX += legendWidth;
   }
@@ -192,6 +196,15 @@ function cloneLegendsToSVG(chartContainer: HTMLElement, svgWidth: number, svgHei
   };
 }
 
+const cssVarRegExp = /var\((--[a-zA-Z0-9\-]+)\)/g;
+
+function resolveCSSVariables(chartContainer: HTMLElement, styleRules: string) {
+  const containerStyles = getComputedStyle(chartContainer);
+  return styleRules.replace(cssVarRegExp, (match, group1) => {
+    return containerStyles.getPropertyValue(group1);
+  });
+}
+
 function svgToPng(svgDataUrl: string, opts: IImageExportOptions = {}): Promise<string> {
   return new Promise((resolve, reject) => {
     const scale = opts.scale || 1;
diff --git a/packages/react-docsite-components/CHANGELOG.json b/packages/react-docsite-components/CHANGELOG.json
index 9fc5d851998480..369529298ae34c 100644
--- a/packages/react-docsite-components/CHANGELOG.json
+++ b/packages/react-docsite-components/CHANGELOG.json
@@ -1,6 +1,36 @@
 {
   "name": "@fluentui/react-docsite-components",
   "entries": [
+    {
+      "date": "Thu, 02 Jan 2025 07:22:03 GMT",
+      "tag": "@fluentui/react-docsite-components_v8.13.156",
+      "version": "8.13.156",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-docsite-components",
+            "comment": "Bump @fluentui/react-monaco-editor to v1.7.274",
+            "commit": "6bd14a98fb5bec1eb26dfbada654fc1588249fa8"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 01 Jan 2025 07:21:10 GMT",
+      "tag": "@fluentui/react-docsite-components_v8.13.155",
+      "version": "8.13.155",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-docsite-components",
+            "comment": "Bump @fluentui/react-monaco-editor to v1.7.273",
+            "commit": "bf1b91f1fd3cfb580185870b6a4b77738384f9d2"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 31 Dec 2024 07:21:45 GMT",
       "tag": "@fluentui/react-docsite-components_v8.13.154",
diff --git a/packages/react-docsite-components/CHANGELOG.md b/packages/react-docsite-components/CHANGELOG.md
index 3dbe092f93ea2d..92fe1d2bcb1a9c 100644
--- a/packages/react-docsite-components/CHANGELOG.md
+++ b/packages/react-docsite-components/CHANGELOG.md
@@ -1,9 +1,27 @@
 # Change Log - @fluentui/react-docsite-components
 
-This log was last generated on Tue, 31 Dec 2024 07:21:45 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Jan 2025 07:22:03 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.13.156](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.13.156)
+
+Thu, 02 Jan 2025 07:22:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-docsite-components_v8.13.155..@fluentui/react-docsite-components_v8.13.156)
+
+### Patches
+
+- Bump @fluentui/react-monaco-editor to v1.7.274 ([PR #33538](https://github.com/microsoft/fluentui/pull/33538) by beachball)
+
+## [8.13.155](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.13.155)
+
+Wed, 01 Jan 2025 07:21:10 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-docsite-components_v8.13.154..@fluentui/react-docsite-components_v8.13.155)
+
+### Patches
+
+- Bump @fluentui/react-monaco-editor to v1.7.273 ([PR #33525](https://github.com/microsoft/fluentui/pull/33525) by beachball)
+
 ## [8.13.154](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.13.154)
 
 Tue, 31 Dec 2024 07:21:45 GMT 
diff --git a/packages/react-docsite-components/package.json b/packages/react-docsite-components/package.json
index fd02d5636d90de..5055f86a40b8f8 100644
--- a/packages/react-docsite-components/package.json
+++ b/packages/react-docsite-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-docsite-components",
-  "version": "8.13.154",
+  "version": "8.13.156",
   "description": "Fluent UI React components for building documentation sites.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -42,7 +42,7 @@
     "@fluentui/public-docsite-setup": "^0.3.34",
     "@fluentui/react-hooks": "^8.8.16",
     "@fluentui/set-version": "^8.2.23",
-    "@fluentui/react-monaco-editor": "^1.7.272",
+    "@fluentui/react-monaco-editor": "^1.7.274",
     "color-check": "0.0.2",
     "markdown-to-jsx": "^7.0.0",
     "office-ui-fabric-core": "^11.0.0",
diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json
index 03b0b6a8bf9ea5..126c99d3cfd634 100644
--- a/packages/react-examples/package.json
+++ b/packages/react-examples/package.json
@@ -36,8 +36,8 @@
     "@fluentui/merge-styles": "^8.6.13",
     "@fluentui/react": "^8.122.3",
     "@fluentui/react-cards": "^0.205.192",
-    "@fluentui/react-charting": "^5.23.34",
-    "@fluentui/react-docsite-components": "^8.13.154",
+    "@fluentui/react-charting": "^5.23.36",
+    "@fluentui/react-docsite-components": "^8.13.156",
     "@fluentui/react-experiments": "^8.14.189",
     "@fluentui/react-file-type-icons": "^8.12.7",
     "@fluentui/react-focus": "^8.9.20",
diff --git a/packages/react-monaco-editor/CHANGELOG.json b/packages/react-monaco-editor/CHANGELOG.json
index f7ceba4cf6470d..dcec359eb1ec73 100644
--- a/packages/react-monaco-editor/CHANGELOG.json
+++ b/packages/react-monaco-editor/CHANGELOG.json
@@ -1,6 +1,36 @@
 {
   "name": "@fluentui/react-monaco-editor",
   "entries": [
+    {
+      "date": "Thu, 02 Jan 2025 07:22:03 GMT",
+      "tag": "@fluentui/react-monaco-editor_v1.7.274",
+      "version": "1.7.274",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-monaco-editor",
+            "comment": "Bump @fluentui/react-charting to v5.23.36",
+            "commit": "6bd14a98fb5bec1eb26dfbada654fc1588249fa8"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 01 Jan 2025 07:21:10 GMT",
+      "tag": "@fluentui/react-monaco-editor_v1.7.273",
+      "version": "1.7.273",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-monaco-editor",
+            "comment": "Bump @fluentui/react-charting to v5.23.35",
+            "commit": "bf1b91f1fd3cfb580185870b6a4b77738384f9d2"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 31 Dec 2024 07:21:45 GMT",
       "tag": "@fluentui/react-monaco-editor_v1.7.272",
diff --git a/packages/react-monaco-editor/CHANGELOG.md b/packages/react-monaco-editor/CHANGELOG.md
index 6efd247be7a918..8bc85adcb9fa12 100644
--- a/packages/react-monaco-editor/CHANGELOG.md
+++ b/packages/react-monaco-editor/CHANGELOG.md
@@ -1,9 +1,27 @@
 # Change Log - @fluentui/react-monaco-editor
 
-This log was last generated on Tue, 31 Dec 2024 07:21:45 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Jan 2025 07:22:03 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [1.7.274](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.274)
+
+Thu, 02 Jan 2025 07:22:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-monaco-editor_v1.7.273..@fluentui/react-monaco-editor_v1.7.274)
+
+### Patches
+
+- Bump @fluentui/react-charting to v5.23.36 ([PR #33538](https://github.com/microsoft/fluentui/pull/33538) by beachball)
+
+## [1.7.273](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.273)
+
+Wed, 01 Jan 2025 07:21:10 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-monaco-editor_v1.7.272..@fluentui/react-monaco-editor_v1.7.273)
+
+### Patches
+
+- Bump @fluentui/react-charting to v5.23.35 ([PR #33525](https://github.com/microsoft/fluentui/pull/33525) by beachball)
+
 ## [1.7.272](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.272)
 
 Tue, 31 Dec 2024 07:21:45 GMT 
diff --git a/packages/react-monaco-editor/package.json b/packages/react-monaco-editor/package.json
index 20ad8b6fd18f0f..01dd61381ec33a 100644
--- a/packages/react-monaco-editor/package.json
+++ b/packages/react-monaco-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-monaco-editor",
-  "version": "1.7.272",
+  "version": "1.7.274",
   "description": "Live React example editing using monaco",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,7 +34,7 @@
     "@fluentui/example-data": "^8.4.25",
     "@fluentui/monaco-editor": "^1.3.24",
     "@fluentui/react-hooks": "^8.8.16",
-    "@fluentui/react-charting": "^5.23.34",
+    "@fluentui/react-charting": "^5.23.36",
     "raw-loader": "4.0.2",
     "react-syntax-highlighter": "^10.1.3",
     "tslib": "^2.1.0"