diff --git a/change/@fluentui-react-docsite-components-7f162818-fcb4-4cbe-8dc1-6d855e04b980.json b/change/@fluentui-react-docsite-components-7f162818-fcb4-4cbe-8dc1-6d855e04b980.json
new file mode 100644
index 00000000000000..e2cdde7c9ca42f
--- /dev/null
+++ b/change/@fluentui-react-docsite-components-7f162818-fcb4-4cbe-8dc1-6d855e04b980.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Enable export to codepen for react charting",
+  "packageName": "@fluentui/react-docsite-components",
+  "email": "atishay.jain@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-monaco-editor-eacbbb2f-ad95-4072-81d7-0d97fa23090f.json b/change/@fluentui-react-monaco-editor-eacbbb2f-ad95-4072-81d7-0d97fa23090f.json
new file mode 100644
index 00000000000000..a14c3d39ca0a15
--- /dev/null
+++ b/change/@fluentui-react-monaco-editor-eacbbb2f-ad95-4072-81d7-0d97fa23090f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add react charting to support export to codepen",
+  "packageName": "@fluentui/react-monaco-editor",
+  "email": "atishay.jain@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-docsite-components/src/components/CodepenComponent/CodepenComponent.tsx b/packages/react-docsite-components/src/components/CodepenComponent/CodepenComponent.tsx
index d3593c6aa29d96..d7032f452a6489 100644
--- a/packages/react-docsite-components/src/components/CodepenComponent/CodepenComponent.tsx
+++ b/packages/react-docsite-components/src/components/CodepenComponent/CodepenComponent.tsx
@@ -48,6 +48,10 @@ const CodepenComponentBase: React.FunctionComponent<ICodepenProps> = props => {
       jsContentStr.indexOf('window.FluentUIExampleData') !== -1
         ? script('@fluentui/example-data@8/dist/example-data.js')
         : '',
+      // load charting bundle only if used
+      jsContentStr.indexOf('window.FluentUIReactCharting') !== -1
+        ? script('@fluentui/react-charting@5/dist/react-charting.js')
+        : '',
       `<div id="${CONTENT_ID}"></div>`,
     ]
       .filter(line => !!line)
diff --git a/packages/react-monaco-editor/src/utilities/defaultSupportedPackages.ts b/packages/react-monaco-editor/src/utilities/defaultSupportedPackages.ts
index 71715d02e3fb0d..1a096a6ada1447 100644
--- a/packages/react-monaco-editor/src/utilities/defaultSupportedPackages.ts
+++ b/packages/react-monaco-editor/src/utilities/defaultSupportedPackages.ts
@@ -18,6 +18,11 @@ const exampleDataGroup: IPackageGroup = {
   loadGlobal: cb => require.ensure([], require => cb(require('@fluentui/example-data'))),
   packages: [],
 };
+const chartingGroup: IPackageGroup = {
+  globalName: 'FluentUIReactCharting',
+  loadGlobal: cb => require.ensure([], require => cb(require('@fluentui/react-charting'))),
+  packages: [],
+};
 
 let typesContext: __WebpackModuleApi.RequireContext | undefined;
 try {
@@ -32,6 +37,7 @@ try {
 } catch (ex) {
   // We're probably running in jest, which doesn't have webpack's require.context
 }
+const loadTypes = () => '';
 if (typesContext) {
   typesContext.keys().forEach(dtsPath => {
     // The api-extractor .d.ts rollups use the package's unscoped name (such as "utilities")
@@ -57,7 +63,6 @@ if (typesContext) {
   });
 } else {
   // Use some defaults for jest tests (real types won't be loaded)
-  const loadTypes = () => '';
   fabricGroup.packages.push(
     { packageName: '@fluentui/date-time-utilities', loadTypes },
     { packageName: '@fluentui/dom-utilities', loadTypes },
@@ -74,9 +79,12 @@ if (typesContext) {
   hooksGroup.packages.push({ packageName: '@fluentui/react-hooks', loadTypes });
   exampleDataGroup.packages.push({ packageName: '@fluentui/example-data', loadTypes });
 }
+if (typeof window === 'object' && window.location.href.indexOf('react-charting') !== -1) {
+  chartingGroup.packages.push({ packageName: '@fluentui/react-charting', loadTypes });
+}
 
 /**
  * Default supported packages for imports: `@fluentui/react` and everything it exports,
  * plus `@fluentui/example-data`. (React is implicitly supported.)
  */
-export const SUPPORTED_PACKAGES: IPackageGroup[] = [fabricGroup, hooksGroup, exampleDataGroup];
+export const SUPPORTED_PACKAGES: IPackageGroup[] = [fabricGroup, hooksGroup, exampleDataGroup, chartingGroup];