diff --git a/docs/data/charts/map/ExportMap.js b/docs/data/charts/map/ExportMap.js
new file mode 100644
index 0000000000000..0097c03829de5
--- /dev/null
+++ b/docs/data/charts/map/ExportMap.js
@@ -0,0 +1,81 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import { interpolateBlues } from 'd3-scale-chromatic';
+import { feature as topojsonFeature } from 'topojson-client';
+import countriesTopology from 'visionscarto-world-atlas/world/110m.json';
+import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium';
+import { GeoDataPlot } from '@mui/x-charts-premium/Map';
+import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+import { useChartRootRef } from '@mui/x-charts/hooks';
+import { useChartPremiumApiRef } from '@mui/x-charts-premium/hooks';
+import { PiecewiseColorLegend } from '@mui/x-charts-premium/ChartsLegend';
+
+import { countryData } from '../dataset/countryData';
+import { internetUsageByCountry } from '../dataset/internetUsageByCountry';
+
+const countries = topojsonFeature(countriesTopology, 'countries');
+
+const data = Object.keys(countryData).map((code) => ({
+ name: code,
+ label: countryData[code].country,
+ colorValue: internetUsageByCountry[code],
+}));
+
+function CustomChartWrapper({ children }) {
+ const chartRootRef = useChartRootRef();
+
+ return
{children}
;
+}
+
+export default function ExportMap() {
+ const apiRef = useChartPremiumApiRef();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/data/charts/map/ExportMap.tsx b/docs/data/charts/map/ExportMap.tsx
new file mode 100644
index 0000000000000..77e7f1e5ff894
--- /dev/null
+++ b/docs/data/charts/map/ExportMap.tsx
@@ -0,0 +1,84 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import { interpolateBlues } from 'd3-scale-chromatic';
+import { feature as topojsonFeature } from 'topojson-client';
+import countriesTopology from 'visionscarto-world-atlas/world/110m.json';
+import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium';
+import { GeoDataPlot } from '@mui/x-charts-premium/Map';
+import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+import { useChartRootRef } from '@mui/x-charts/hooks';
+import { useChartPremiumApiRef } from '@mui/x-charts-premium/hooks';
+import { PiecewiseColorLegend } from '@mui/x-charts-premium/ChartsLegend';
+import { type ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo';
+import { countryData } from '../dataset/countryData';
+import { internetUsageByCountry } from '../dataset/internetUsageByCountry';
+
+const countries = topojsonFeature(
+ countriesTopology as any,
+ 'countries',
+) as unknown as ExtendedFeatureCollection;
+
+const data = Object.keys(countryData).map((code) => ({
+ name: code,
+ label: countryData[code].country,
+ colorValue: internetUsageByCountry[code],
+}));
+
+function CustomChartWrapper({ children }: React.PropsWithChildren) {
+ const chartRootRef = useChartRootRef();
+
+ return {children}
;
+}
+
+export default function ExportMap() {
+ const apiRef = useChartPremiumApiRef<'mapShape'>();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/data/charts/map/map.md b/docs/data/charts/map/map.md
index 9fc0972e7ddf4..9484b1e8cf86a 100644
--- a/docs/data/charts/map/map.md
+++ b/docs/data/charts/map/map.md
@@ -178,3 +178,10 @@ its visibility. Hidden series are skipped by `MapShapePlot` so the underlying ba
stays visible.
{{"demo": "VisibleMapShape.js"}}
+
+## Exporting
+
+Maps can be exported as an image or as a PDF, like any other chart.
+See the [Export](/x/react-charts/export/) page for the complete documentation.
+
+{{"demo": "ExportMap.js"}}
diff --git a/packages/x-charts-premium/src/context/ChartPremiumApi.ts b/packages/x-charts-premium/src/context/ChartPremiumApi.ts
index 558c24b82d460..035b9fb3e4536 100644
--- a/packages/x-charts-premium/src/context/ChartPremiumApi.ts
+++ b/packages/x-charts-premium/src/context/ChartPremiumApi.ts
@@ -2,9 +2,12 @@ import type { ProPluginsPerSeriesType } from '@mui/x-charts-pro/internals';
import type { ChartAnyPluginSignature, ChartPublicAPI } from '@mui/x-charts/internals';
import type { BarChartPremiumPluginSignatures } from '../BarChartPremium/BarChartPremium.plugins';
import type { AllPluginSignatures } from '../internals/plugins/allPlugins';
+import type { GeoPremiumPluginSignatures } from '../ChartsGeoDataProviderPremium/ChartsGeoDataProviderPremium.plugins';
export type PremiumPluginsPerSeriesType = Omit & {
bar: BarChartPremiumPluginSignatures;
+ rangeBar: BarChartPremiumPluginSignatures;
+ mapShape: GeoPremiumPluginSignatures;
};
/**
@@ -15,9 +18,9 @@ export type PremiumPluginsPerSeriesType = Omit &
* @example ChartProApi<'composition'>
*/
export type ChartPremiumApi<
- ChartType extends keyof ProPluginsPerSeriesType | undefined = undefined,
+ ChartType extends keyof PremiumPluginsPerSeriesType | undefined = undefined,
Signatures extends readonly ChartAnyPluginSignature[] =
- ChartType extends keyof ProPluginsPerSeriesType
+ ChartType extends keyof PremiumPluginsPerSeriesType
? PremiumPluginsPerSeriesType[ChartType]
: AllPluginSignatures,
> = ChartPublicAPI;