diff --git a/packages/ui-chart-components/src/components/CartesianChart.tsx b/packages/ui-chart-components/src/components/CartesianChart.tsx
index 2c750707f0..0a69071410 100644
--- a/packages/ui-chart-components/src/components/CartesianChart.tsx
+++ b/packages/ui-chart-components/src/components/CartesianChart.tsx
@@ -145,7 +145,7 @@ export const CartesianChart = ({
     }, 50);
   }, []);
 
-  const isMobileSize = isMobile();
+  const isMobileSize = isMobile(isExporting);
 
   const {
     chartType: defaultChartType,
diff --git a/packages/ui-chart-components/src/components/Charts/GaugeChart.tsx b/packages/ui-chart-components/src/components/Charts/GaugeChart.tsx
index 824452a9ce..d55b425b09 100644
--- a/packages/ui-chart-components/src/components/Charts/GaugeChart.tsx
+++ b/packages/ui-chart-components/src/components/Charts/GaugeChart.tsx
@@ -51,7 +51,7 @@ export const GaugeChart = ({
   onItemClick = () => {},
 }: GaugeChartProps) => {
   const { data, color = BLUE, ...restOfConfigs } = viewContent;
-  const isMobileSize = isMobile();
+  const isMobileSize = isMobile(isExporting);
 
   const generateElements = () => {
     const denominator = 0.05;
diff --git a/packages/ui-chart-components/src/components/Charts/PieChart.tsx b/packages/ui-chart-components/src/components/Charts/PieChart.tsx
index 2d9d62ff80..432fb330a5 100644
--- a/packages/ui-chart-components/src/components/Charts/PieChart.tsx
+++ b/packages/ui-chart-components/src/components/Charts/PieChart.tsx
@@ -121,7 +121,7 @@ export const PieChart = ({
   // eslint-disable-next-line no-unused-vars
   const [_, setLoaded] = useState(false);
 
-  const isMobileSize = isMobile();
+  const isMobileSize = isMobile(isExporting);
 
   // Trigger rendering of the chart to fix an issue with the legend overlapping the chart.
   // This is a work around for a recharts bug. @see https://github.com/recharts/recharts/issues/511
diff --git a/packages/ui-chart-components/src/components/Reference/Legend.tsx b/packages/ui-chart-components/src/components/Reference/Legend.tsx
index 93b43b50e5..f510197b40 100644
--- a/packages/ui-chart-components/src/components/Reference/Legend.tsx
+++ b/packages/ui-chart-components/src/components/Reference/Legend.tsx
@@ -140,7 +140,7 @@ export const getPieLegend = ({
   legendPosition,
   viewContent,
 }: PieLegendProps) => ({ payload }: any) => {
-  const isMobileSize = isMobile();
+  const isMobileSize = isMobile(isExporting);
   return (
     <PieLegendContainer $position={legendPosition} $isExporting={isExporting}>
       {payload.map(({ color, value, payload: item }: TooltipPayload) => {
@@ -189,7 +189,7 @@ export const getCartesianLegend = ({
   isExporting,
   legendPosition,
 }: CartesianLegendProps) => ({ payload }: any) => {
-  const isMobileSize = isMobile();
+  const isMobileSize = isMobile(isExporting);
   return (
     <LegendContainer $position={legendPosition} $isExporting={isExporting}>
       {payload.map(({ color, value, dataKey }: TooltipPayload) => {
diff --git a/packages/ui-chart-components/src/utils/utils.ts b/packages/ui-chart-components/src/utils/utils.ts
index 0c719bbc89..bd25f49fb3 100644
--- a/packages/ui-chart-components/src/utils/utils.ts
+++ b/packages/ui-chart-components/src/utils/utils.ts
@@ -9,8 +9,14 @@ import { GRANULARITY_CONFIG } from '@tupaia/utils';
 import { DataProps, ChartType, ViewContent, VizPeriodGranularity } from '../types';
 
 // tupaia-web uses a responsive approach, so we need to check the window width
-export const isMobile = () => {
+export const isMobile = (isExporting: boolean = false) => {
   const appType = process.env.REACT_APP_APP_TYPE;
+
+  // Always use the desktop styles when exporting
+  if (isExporting) {
+    return false;
+  }
+
   return appType === 'mobile' || window.innerWidth < 900;
 };