diff --git a/js/packages/react-ui/package.json b/js/packages/react-ui/package.json
index 4945f468..2d45b7be 100644
--- a/js/packages/react-ui/package.json
+++ b/js/packages/react-ui/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "name": "@crayonai/react-ui",
   "license": "MIT",
-  "version": "0.9.14",
+  "version": "0.9.15",
   "description": "Component library for Generative UI SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/js/packages/react-ui/src/components/Charts/AreaChart/AreaChart.tsx b/js/packages/react-ui/src/components/Charts/AreaChart/AreaChart.tsx
index d1c78b8b..e690de3d 100644
--- a/js/packages/react-ui/src/components/Charts/AreaChart/AreaChart.tsx
+++ b/js/packages/react-ui/src/components/Charts/AreaChart/AreaChart.tsx
@@ -5,7 +5,12 @@ import { usePrintContext } from "../../../context/PrintContext";
 import { useId } from "../../../polyfills";
 import { ChartConfig, ChartContainer, ChartTooltip } from "../Charts";
 import { SideBarChartData, SideBarTooltipProvider } from "../context/SideBarTooltipContext";
-import { useMaxLabelHeight, useTransformedKeys, useYAxisLabelWidth } from "../hooks";
+import {
+  useExportChartData,
+  useMaxLabelHeight,
+  useTransformedKeys,
+  useYAxisLabelWidth,
+} from "../hooks";
 import {
   ActiveDot,
   cartesianGrid,
@@ -229,6 +234,17 @@ const AreaChartComponent = <T extends AreaChartData>({
     return getLegendItems(dataKeys, colors, icons);
   }, [dataKeys, colors, icons]);
 
+  const exportData = useExportChartData({
+    type: "area",
+    data,
+    categoryKey: categoryKey as string,
+    dataKeys,
+    colors,
+    legend,
+    xAxisLabel,
+    yAxisLabel,
+  });
+
   const id = useId();
 
   const gradientID = useMemo(() => `area-chart-gradient-${id}`, [id]);
@@ -304,6 +320,7 @@ const AreaChartComponent = <T extends AreaChartData>({
       >
         <div
           className={clsx("crayon-area-chart-container", className)}
+          data-crayon-chart={exportData}
           style={{
             width: width ? `${width}px` : undefined,
           }}
diff --git a/js/packages/react-ui/src/components/Charts/AreaChartCondensed/AreaChartCondensed.tsx b/js/packages/react-ui/src/components/Charts/AreaChartCondensed/AreaChartCondensed.tsx
index b7d95b9b..54b3b253 100644
--- a/js/packages/react-ui/src/components/Charts/AreaChartCondensed/AreaChartCondensed.tsx
+++ b/js/packages/react-ui/src/components/Charts/AreaChartCondensed/AreaChartCondensed.tsx
@@ -9,6 +9,7 @@ import { DEFAULT_X_AXIS_HEIGHT, X_AXIS_PADDING } from "../constants";
 import { SideBarChartData, SideBarTooltipProvider } from "../context/SideBarTooltipContext";
 import {
   useAutoAngleCalculation,
+  useExportChartData,
   useMaxLabelWidth,
   useTransformedKeys,
   useYAxisLabelWidth,
@@ -134,6 +135,17 @@ const AreaChartCondensedComponent = <T extends AreaChartData>({
   }, [dataKeys, icons, colors, transformedKeys]);
 
   const id = useId();
+
+  const exportData = useExportChartData({
+    type: "area",
+    data,
+    categoryKey: categoryKey as string,
+    dataKeys,
+    colors,
+    legend,
+    xAxisLabel,
+    yAxisLabel,
+  });
   const gradientID = useMemo(() => `area-chart-condensed-gradient-${id}`, [id]);
 
   const chartMargin = useMemo(
@@ -279,6 +291,7 @@ const AreaChartCondensedComponent = <T extends AreaChartData>({
       >
         <div
           className={clsx("crayon-area-chart-condensed-container", className)}
+          data-crayon-chart={exportData}
           style={{
             width: width ? `${width}px` : undefined,
           }}
diff --git a/js/packages/react-ui/src/components/Charts/BarChart/BarChart.tsx b/js/packages/react-ui/src/components/Charts/BarChart/BarChart.tsx
index 51cfdd23..e8d069de 100644
--- a/js/packages/react-ui/src/components/Charts/BarChart/BarChart.tsx
+++ b/js/packages/react-ui/src/components/Charts/BarChart/BarChart.tsx
@@ -6,7 +6,12 @@ import { useId } from "../../../polyfills";
 import { useTheme } from "../../ThemeProvider";
 import { ChartConfig, ChartContainer, ChartTooltip } from "../Charts";
 import { SideBarChartData, SideBarTooltipProvider } from "../context/SideBarTooltipContext";
-import { useMaxLabelHeight, useTransformedKeys, useYAxisLabelWidth } from "../hooks";
+import {
+  useExportChartData,
+  useMaxLabelHeight,
+  useTransformedKeys,
+  useYAxisLabelWidth,
+} from "../hooks";
 import {
   cartesianGrid,
   CustomTooltipContent,
@@ -253,6 +258,17 @@ const BarChartComponent = <T extends BarChartData>({
     return getLegendItems(dataKeys, colors, icons);
   }, [dataKeys, colors, icons]);
 
+  const exportData = useExportChartData({
+    type: "bar",
+    data,
+    categoryKey: categoryKey as string,
+    dataKeys,
+    colors,
+    legend,
+    xAxisLabel,
+    yAxisLabel,
+  });
+
   const id = useId();
 
   const yAxis = useMemo(() => {
@@ -428,6 +444,7 @@ const BarChartComponent = <T extends BarChartData>({
       >
         <div
           className={clsx("crayon-bar-chart-container", className)}
+          data-crayon-chart={exportData}
           style={{
             width: width ? `${width}px` : undefined,
           }}
diff --git a/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx b/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx
index d8ca9aaf..8ece2598 100644
--- a/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx
+++ b/js/packages/react-ui/src/components/Charts/BarChartCondensed/BarChartCondensed.tsx
@@ -10,6 +10,7 @@ import { DEFAULT_X_AXIS_HEIGHT, X_AXIS_PADDING } from "../constants";
 import { SideBarChartData, SideBarTooltipProvider } from "../context/SideBarTooltipContext";
 import {
   useAutoAngleCalculation,
+  useExportChartData,
   useMaxLabelWidth,
   useTransformedKeys,
   useYAxisLabelWidth,
@@ -140,6 +141,17 @@ const BarChartCondensedComponent = <T extends BarChartData>({
 
   const id = useId();
 
+  const exportData = useExportChartData({
+    type: "bar",
+    data,
+    categoryKey: categoryKey as string,
+    dataKeys,
+    colors,
+    legend,
+    xAxisLabel,
+    yAxisLabel,
+  });
+
   const chartMargin = useMemo(
     () => ({
       top: 10,
@@ -378,6 +390,7 @@ const BarChartCondensedComponent = <T extends BarChartData>({
       >
         <div
           className={clsx("crayon-bar-chart-condensed-container", className)}
+          data-crayon-chart={exportData}
           style={{
             width: width ? `${width}px` : undefined,
           }}
diff --git a/js/packages/react-ui/src/components/Charts/Charts.tsx b/js/packages/react-ui/src/components/Charts/Charts.tsx
index ccd29b3a..44424d44 100644
--- a/js/packages/react-ui/src/components/Charts/Charts.tsx
+++ b/js/packages/react-ui/src/components/Charts/Charts.tsx
@@ -41,6 +41,34 @@ export type ChartConfig = {
   );
 };
 
+/**
+ * Data structure for chart export (e.g., to PPTX)
+ */
+export type ExportChartData = {
+  type: "line" | "bar" | "area" | "pie" | "radar" | "scatter";
+  data: {
+    name: string;
+    labels?: string[];
+    values?: number[];
+    x?: number[];
+    y?: number[];
+  }[];
+  options?: {
+    chartColors?: string[];
+    showLegend?: boolean;
+    legendPos?: "b" | "t" | "l" | "r";
+    title?: string;
+    showTitle?: boolean;
+    catAxisTitle?: string;
+    showCatAxisTitle?: boolean;
+    valAxisTitle?: string;
+    showValAxisTitle?: boolean;
+    lineSize?: number;
+    barDir?: "bar" | "col";
+    barGrouping?: "stacked" | "clustered" | "percent" | "standard";
+  };
+};
+
 /**
  * Context props for chart configuration
  */
diff --git a/js/packages/react-ui/src/components/Charts/HorizontalBarChart/HorizontalBarChart.tsx b/js/packages/react-ui/src/components/Charts/HorizontalBarChart/HorizontalBarChart.tsx
index 1cfcf1e2..09ab59f3 100644
--- a/js/packages/react-ui/src/components/Charts/HorizontalBarChart/HorizontalBarChart.tsx
+++ b/js/packages/react-ui/src/components/Charts/HorizontalBarChart/HorizontalBarChart.tsx
@@ -6,7 +6,7 @@ import { useId } from "../../../polyfills";
 import { useTheme } from "../../ThemeProvider";
 import { ChartConfig, ChartContainer, ChartTooltip } from "../Charts";
 import { SideBarChartData, SideBarTooltipProvider } from "../context/SideBarTooltipContext";
-import { useTransformedKeys } from "../hooks";
+import { useExportChartData, useTransformedKeys } from "../hooks";
 import { useHorizontalBarLabelHeight } from "../hooks/useMaxLabelHeight";
 import {
   CustomTooltipContent,
@@ -245,6 +245,20 @@ const HorizontalBarChartComponent = <T extends HorizontalBarChartData>({
     return getLegendItems(dataKeys, colors, icons);
   }, [dataKeys, colors, icons]);
 
+  const exportData = useExportChartData({
+    type: "bar",
+    data,
+    categoryKey: categoryKey as string,
+    dataKeys,
+    colors,
+    legend,
+    xAxisLabel,
+    yAxisLabel,
+    extraOptions: {
+      barDir: "bar",
+    },
+  });
+
   const id = useId();
 
   const xAxis = useMemo(() => {
@@ -347,7 +361,10 @@ const HorizontalBarChartComponent = <T extends HorizontalBarChartData>({
         data={sideBarTooltipData}
         setData={setSideBarTooltipData}
       >
-        <div className={clsx("crayon-horizontal-bar-chart-container", className)}>
+        <div
+          className={clsx("crayon-horizontal-bar-chart-container", className)}
+          data-crayon-chart={exportData}
+        >
           <div
             className="crayon-horizontal-bar-chart-container-inner-wrapper"
             style={{
diff --git a/js/packages/react-ui/src/components/Charts/LineChart/LineChart.tsx b/js/packages/react-ui/src/components/Charts/LineChart/LineChart.tsx
index ce90d833..aa87a198 100644
--- a/js/packages/react-ui/src/components/Charts/LineChart/LineChart.tsx
+++ b/js/packages/react-ui/src/components/Charts/LineChart/LineChart.tsx
@@ -5,7 +5,12 @@ import { usePrintContext } from "../../../context/PrintContext";
 import { useId } from "../../../polyfills";
 import { ChartConfig, ChartContainer, ChartTooltip } from "../Charts";
 import { SideBarChartData, SideBarTooltipProvider } from "../context/SideBarTooltipContext";
-import { useMaxLabelHeight, useTransformedKeys, useYAxisLabelWidth } from "../hooks";
+import {
+  useExportChartData,
+  useMaxLabelHeight,
+  useTransformedKeys,
+  useYAxisLabelWidth,
+} from "../hooks";
 import {
   ActiveDot,
   cartesianGrid,
@@ -228,6 +233,20 @@ export const LineChart = <T extends LineChartData>({
     return getLegendItems(dataKeys, colors, icons);
   }, [dataKeys, colors, icons]);
 
+  const exportData = useExportChartData({
+    type: "line",
+    data,
+    categoryKey: categoryKey as string,
+    dataKeys,
+    colors,
+    legend,
+    xAxisLabel,
+    yAxisLabel,
+    extraOptions: {
+      lineSize: strokeWidth,
+    },
+  });
+
   const id = useId();
 
   const onLineClick = useCallback(
@@ -314,6 +333,7 @@ export const LineChart = <T extends LineChartData>({
       >
         <div
           className={clsx("crayon-line-chart-container", className)}
+          data-crayon-chart={exportData}
           style={{
             width: width ? `${width}px` : undefined,
           }}
diff --git a/js/packages/react-ui/src/components/Charts/LineChartCondensed/LineChartCondensed.tsx b/js/packages/react-ui/src/components/Charts/LineChartCondensed/LineChartCondensed.tsx
index cb0d3119..8ee1fe9e 100644
--- a/js/packages/react-ui/src/components/Charts/LineChartCondensed/LineChartCondensed.tsx
+++ b/js/packages/react-ui/src/components/Charts/LineChartCondensed/LineChartCondensed.tsx
@@ -8,6 +8,7 @@ import { DEFAULT_X_AXIS_HEIGHT, X_AXIS_PADDING } from "../constants";
 import { SideBarChartData, SideBarTooltipProvider } from "../context/SideBarTooltipContext";
 import {
   useAutoAngleCalculation,
+  useExportChartData,
   useMaxLabelWidth,
   useTransformedKeys,
   useYAxisLabelWidth,
@@ -136,6 +137,20 @@ const LineChartCondensedComponent = <T extends LineChartData>({
 
   const id = useId();
 
+  const exportData = useExportChartData({
+    type: "line",
+    data,
+    categoryKey: categoryKey as string,
+    dataKeys,
+    colors,
+    legend,
+    xAxisLabel,
+    yAxisLabel,
+    extraOptions: {
+      lineSize: strokeWidth,
+    },
+  });
+
   const chartMargin = useMemo(
     () => ({
       top: 10,
@@ -279,6 +294,7 @@ const LineChartCondensedComponent = <T extends LineChartData>({
       >
         <div
           className={clsx("crayon-line-chart-condensed-container", className)}
+          data-crayon-chart={exportData}
           style={{
             width: width ? `${width}px` : undefined,
           }}
diff --git a/js/packages/react-ui/src/components/Charts/PieChart/PieChart.tsx b/js/packages/react-ui/src/components/Charts/PieChart/PieChart.tsx
index a63ac092..cff82234 100644
--- a/js/packages/react-ui/src/components/Charts/PieChart/PieChart.tsx
+++ b/js/packages/react-ui/src/components/Charts/PieChart/PieChart.tsx
@@ -4,7 +4,7 @@ import { Cell, Pie, PieChart as RechartsPieChart } from "recharts";
 import { usePrintContext } from "../../../context/PrintContext.js";
 import { useTheme } from "../../ThemeProvider/ThemeProvider.js";
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from "../Charts.js";
-import { useTransformedKeys } from "../hooks/index.js";
+import { useExportChartData, useTransformedKeys } from "../hooks/index.js";
 import { DefaultLegend } from "../shared/DefaultLegend/DefaultLegend.js";
 import { StackedLegend } from "../shared/StackedLegend/StackedLegend.js";
 import { LegendItem } from "../types/Legend.js";
@@ -146,6 +146,15 @@ const PieChartComponent = <T extends PieChartData>({
     dataLength: sortedProcessedData.length,
   });
 
+  const exportData = useExportChartData({
+    type: "pie",
+    data: sortedProcessedData,
+    categoryKey: categoryKey as string,
+    dataKeys: [dataKey as string],
+    colors,
+    legend,
+  });
+
   // Memoize expensive data transformations and configurations
   const transformedData = useMemo(
     () => transformDataWithPercentages(sortedProcessedData as T, dataKey),
@@ -445,7 +454,12 @@ const PieChartComponent = <T extends PieChartData>({
   }, [width, height]);
 
   return (
-    <div ref={wrapperRef} className={wrapperClassName} style={wrapperStyle}>
+    <div
+      ref={wrapperRef}
+      className={wrapperClassName}
+      style={wrapperStyle}
+      data-crayon-chart={exportData}
+    >
       <div className="crayon-pie-chart-container">
         <div className="crayon-pie-chart-container-inner">
           <div style={chartSizeStyle}>
diff --git a/js/packages/react-ui/src/components/Charts/RadarChart/RadarChart.tsx b/js/packages/react-ui/src/components/Charts/RadarChart/RadarChart.tsx
index a418534c..6f8579bf 100644
--- a/js/packages/react-ui/src/components/Charts/RadarChart/RadarChart.tsx
+++ b/js/packages/react-ui/src/components/Charts/RadarChart/RadarChart.tsx
@@ -10,7 +10,7 @@ import {
 import { usePrintContext } from "../../../context/PrintContext";
 import { ChartConfig, ChartContainer, ChartTooltip } from "../Charts";
 import { SideBarTooltipProvider } from "../context/SideBarTooltipContext";
-import { useTransformedKeys } from "../hooks/useTransformKey";
+import { useExportChartData, useTransformedKeys } from "../hooks";
 import { ActiveDot, CustomTooltipContent, DefaultLegend } from "../shared";
 import { LegendItem } from "../types";
 import { useChartPalette } from "../utils/PalletUtils";
@@ -77,6 +77,15 @@ const RadarChartComponent = <T extends RadarChartData>({
     return getLegendItems(dataKeys, colors, icons);
   }, [dataKeys, colors, icons]);
 
+  const exportData = useExportChartData({
+    type: "radar",
+    data,
+    categoryKey: categoryKey as string,
+    dataKeys,
+    colors,
+    legend,
+  });
+
   const [isLegendExpanded, setIsLegendExpanded] = useState(false);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const [wrapperRect, setWrapperRect] = useState({ width: 0, height: 0 });
@@ -195,7 +204,12 @@ const RadarChartComponent = <T extends RadarChartData>({
       data={undefined}
       setData={() => {}}
     >
-      <div ref={wrapperRef} className={wrapperClassName} style={wrapperStyle}>
+      <div
+        ref={wrapperRef}
+        className={wrapperClassName}
+        style={wrapperStyle}
+        data-crayon-chart={exportData}
+      >
         <div className="crayon-radar-chart-container">
           <div className="crayon-radar-chart-container-inner">
             <div style={chartSizeStyle}>
diff --git a/js/packages/react-ui/src/components/Charts/RadialChart/RadialChart.tsx b/js/packages/react-ui/src/components/Charts/RadialChart/RadialChart.tsx
index c12ec93d..930490e0 100644
--- a/js/packages/react-ui/src/components/Charts/RadialChart/RadialChart.tsx
+++ b/js/packages/react-ui/src/components/Charts/RadialChart/RadialChart.tsx
@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Cell, PolarGrid, RadialBar, RadialBarChart, ResponsiveContainer } from "recharts";
 import { usePrintContext } from "../../../context/PrintContext";
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from "../Charts";
-import { useTransformedKeys } from "../hooks";
+import { useExportChartData, useTransformedKeys } from "../hooks";
 import { DefaultLegend } from "../shared/DefaultLegend/DefaultLegend";
 import { StackedLegend } from "../shared/StackedLegend/StackedLegend";
 import { LegendItem } from "../types/Legend";
@@ -150,6 +150,15 @@ export const RadialChart = <T extends RadialChartData>({
     dataLength: sortedProcessedData.length,
   });
 
+  const exportData = useExportChartData({
+    type: "pie",
+    data: sortedProcessedData,
+    categoryKey: categoryKey as string,
+    dataKeys: [dataKey as string],
+    colors,
+    legend,
+  });
+
   // Memoize expensive data transformations and configurations
   const transformedData = useMemo(
     () => transformRadialDataWithPercentages(sortedProcessedData as T, dataKey, colors),
@@ -332,6 +341,7 @@ export const RadialChart = <T extends RadialChartData>({
       className={wrapperClassName}
       style={wrapperStyle}
       aria-description="radial-chart-wrapper"
+      data-crayon-chart={exportData}
     >
       <div className="crayon-radial-chart-container">
         <div className="crayon-radial-chart-container-inner">
diff --git a/js/packages/react-ui/src/components/Charts/ScatterChart/ScatterChart.tsx b/js/packages/react-ui/src/components/Charts/ScatterChart/ScatterChart.tsx
index 027b957d..9c78aa8c 100644
--- a/js/packages/react-ui/src/components/Charts/ScatterChart/ScatterChart.tsx
+++ b/js/packages/react-ui/src/components/Charts/ScatterChart/ScatterChart.tsx
@@ -5,7 +5,7 @@ import { usePrintContext } from "../../../context/PrintContext";
 import { useId } from "../../../polyfills";
 import { ChartConfig, ChartContainer, ChartTooltip } from "../Charts";
 import { SideBarChartData, SideBarTooltipProvider } from "../context/SideBarTooltipContext";
-import { useYAxisLabelWidth } from "../hooks";
+import { useExportChartData, useYAxisLabelWidth } from "../hooks";
 import {
   CustomTooltipContent,
   DefaultLegend,
@@ -189,6 +189,21 @@ export const ScatterChart = ({
     return getLegendItems(datasets, colors);
   }, [datasets, colors]);
 
+  const exportData = useExportChartData({
+    type: "scatter",
+    data,
+    colors,
+    legend,
+    xAxisLabel,
+    yAxisLabel,
+    customDataTransform: () =>
+      data.map((dataset) => ({
+        name: dataset.name,
+        x: dataset.data.map((p) => p[xAxisDataKey] as number),
+        y: dataset.data.map((p) => p[yAxisDataKey] as number),
+      })),
+  });
+
   const id = useId();
 
   const xAxis = useMemo(() => {
@@ -299,6 +314,7 @@ export const ScatterChart = ({
     >
       <div
         className={clsx("crayon-scatter-chart-container", className)}
+        data-crayon-chart={exportData}
         style={{
           width: typeof width === "number" ? `${width}px` : width || "100%",
           height: isFixedNumericHeight ? "auto" : height || "100%",
diff --git a/js/packages/react-ui/src/components/Charts/SingleStackedBarChart/SingleStackedBarChart.tsx b/js/packages/react-ui/src/components/Charts/SingleStackedBarChart/SingleStackedBarChart.tsx
index 09199201..8ba8ae81 100644
--- a/js/packages/react-ui/src/components/Charts/SingleStackedBarChart/SingleStackedBarChart.tsx
+++ b/js/packages/react-ui/src/components/Charts/SingleStackedBarChart/SingleStackedBarChart.tsx
@@ -1,6 +1,8 @@
 import clsx from "clsx";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { usePrintContext } from "../../../context/PrintContext";
 import { Separator } from "../../Separator";
+import { useExportChartData } from "../hooks";
 import { DefaultLegend } from "../shared/DefaultLegend/DefaultLegend";
 import { FloatingUIPortal } from "../shared/PortalTooltip";
 import { StackedLegend } from "../shared/StackedLegend/StackedLegend";
@@ -101,6 +103,22 @@ export const SingleStackedBar = <T extends SingleStackedBarData>({
     [segments, colors],
   );
 
+  const printContext = usePrintContext();
+  animated = printContext ? false : animated;
+
+  const exportData = useExportChartData({
+    type: "bar",
+    data,
+    categoryKey: categoryKey as string,
+    dataKeys: [dataKey as string],
+    colors,
+    legend,
+    extraOptions: {
+      barDir: "bar",
+      barGrouping: "stacked",
+    },
+  });
+
   // Handle legend item hover with tooltip positioning
   const handleLegendItemHover = useCallback(
     (hoverIndex: number | null) => {
@@ -142,6 +160,7 @@ export const SingleStackedBar = <T extends SingleStackedBarData>({
         "crayon-single-stacked-bar-chart-container-gap": legend && legendVariant === "default",
       })}
       style={style}
+      data-crayon-chart={exportData}
     >
       <div className="crayon-single-stacked-bar-chart">
         {segments.map((segment, index) => {
diff --git a/js/packages/react-ui/src/components/Charts/hooks/index.ts b/js/packages/react-ui/src/components/Charts/hooks/index.ts
index ad182fdf..e465f700 100644
--- a/js/packages/react-ui/src/components/Charts/hooks/index.ts
+++ b/js/packages/react-ui/src/components/Charts/hooks/index.ts
@@ -1,5 +1,6 @@
 export * from "./useAutoAngleCalculation";
 export * from "./useCanvasContextForLabelSize";
+export * from "./useExportChartData";
 export * from "./useMaxLabelHeight";
 export * from "./useMaxLabelWidth";
 export * from "./useTransformKey";
diff --git a/js/packages/react-ui/src/components/Charts/hooks/useExportChartData.ts b/js/packages/react-ui/src/components/Charts/hooks/useExportChartData.ts
new file mode 100644
index 00000000..c86ba39e
--- /dev/null
+++ b/js/packages/react-ui/src/components/Charts/hooks/useExportChartData.ts
@@ -0,0 +1,77 @@
+import { useMemo } from "react";
+import { usePrintContext } from "../../../context/PrintContext";
+import { ExportChartData } from "../Charts";
+
+export interface UseExportChartDataProps {
+  type: ExportChartData["type"];
+  data: any[];
+  categoryKey?: string;
+  dataKeys?: string[];
+  colors: string[];
+  legend?: boolean;
+  xAxisLabel?: React.ReactNode;
+  yAxisLabel?: React.ReactNode;
+  extraOptions?: Omit<
+    NonNullable<ExportChartData["options"]>,
+    "chartColors" | "showLegend" | "catAxisTitle" | "valAxisTitle"
+  >;
+  // For specialized charts like scatter
+  customDataTransform?: () => ExportChartData["data"];
+}
+
+export const useExportChartData = ({
+  type,
+  data,
+  categoryKey,
+  dataKeys,
+  colors,
+  legend,
+  xAxisLabel,
+  yAxisLabel,
+  extraOptions,
+  customDataTransform,
+}: UseExportChartDataProps): string | undefined => {
+  const printContext = usePrintContext();
+
+  return useMemo(() => {
+    if (!printContext) {
+      return undefined;
+    }
+
+    const chartData = customDataTransform
+      ? customDataTransform()
+      : (dataKeys || []).map((key) => ({
+          name: key,
+          labels: data.map((item) => (categoryKey ? String(item[categoryKey]) : "")),
+          values: data.map((item) => Number(item[key])),
+        }));
+
+    const exportData: ExportChartData = {
+      type,
+      data: chartData,
+      options: {
+        chartColors: colors,
+        showLegend: legend,
+        catAxisTitle: typeof xAxisLabel === "string" ? xAxisLabel : undefined,
+        showCatAxisTitle: typeof xAxisLabel === "string",
+        valAxisTitle: typeof yAxisLabel === "string" ? yAxisLabel : undefined,
+        showValAxisTitle: typeof yAxisLabel === "string",
+        ...extraOptions,
+      },
+    };
+
+    return JSON.stringify(exportData);
+  }, [
+    type,
+    data,
+    dataKeys,
+    categoryKey,
+    colors,
+    legend,
+    xAxisLabel,
+    yAxisLabel,
+    extraOptions,
+    customDataTransform,
+    printContext,
+  ]);
+};
diff --git a/js/packages/react-ui/src/index.ts b/js/packages/react-ui/src/index.ts
index c854d5a2..8249cab4 100644
--- a/js/packages/react-ui/src/index.ts
+++ b/js/packages/react-ui/src/index.ts
@@ -7,6 +7,7 @@ export * from "./components/Card";
 export * from "./components/CardHeader";
 export * from "./components/Carousel";
 export * from "./components/Charts";
+export type { ExportChartData } from "./components/Charts/Charts";
 export * from "./components/CheckBoxGroup";
 export * from "./components/CheckBoxItem";
 export * from "./components/CodeBlock";