diff --git a/docs/data/charts/heat-map/BasicHeatmap.js b/docs/data/charts/heat-map/BasicHeatmap.js
new file mode 100644
index 0000000000000..2eccd7516a3ae
--- /dev/null
+++ b/docs/data/charts/heat-map/BasicHeatmap.js
@@ -0,0 +1,72 @@
+import * as React from 'react';
+import '@mui/x-charts-pro/typeOverloads';
+import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
+import { HeatmapContainer, HeatmapPlot } from '@mui/x-charts-pro/Heatmap';
+
+export default function BasicHeatmap() {
+  return (
+    <HeatmapContainer
+      height={400}
+      width={600}
+      xAxis={[{ scaleType: 'band', data: [1, 2, 3, 4, 5] }]}
+      yAxis={[
+        { scaleType: 'band', data: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] },
+      ]}
+      zAxis={[
+        {
+          colorMap: {
+            type: 'continuous',
+            min: -2,
+            max: 4,
+            color: ['green', 'orange'],
+          },
+        },
+      ]}
+      series={[
+        {
+          type: 'heatmap',
+          data: [
+            [0, 0, 1],
+            [0, 1, 2],
+            [0, 2, 3],
+            [0, 3, 4],
+            [0, 4, 1],
+            [0, 5, 2],
+            [0, 6, 3],
+            [1, 0, 4],
+            [1, 1, 1],
+            [1, 2, 2],
+            [1, 3, 3],
+            [1, 4, 4],
+            [1, 5, 1],
+            [1, 6, 2],
+            [2, 0, 3],
+            [2, 1, 4],
+            [2, 2, 1],
+            [2, 3, 2],
+            [2, 4, 3],
+            [2, 5, 4],
+            [2, 6, 1],
+            [3, 0, 2],
+            [3, 1, 3],
+            [3, 2, 4],
+            [3, 3, 1],
+            [3, 4, 2],
+            [3, 5, 3],
+            [3, 6, 4],
+            [4, 0, 1],
+            [4, 1, 2],
+            [4, 2, 3],
+            [4, 3, 1],
+            [4, 4, 2],
+            [4, 5, 3],
+            [4, 6, 4],
+          ],
+        },
+      ]}
+    >
+      <ChartsAxis />
+      <HeatmapPlot />
+    </HeatmapContainer>
+  );
+}
diff --git a/docs/data/charts/heat-map/BasicHeatmap.tsx b/docs/data/charts/heat-map/BasicHeatmap.tsx
new file mode 100644
index 0000000000000..867f16ae9392f
--- /dev/null
+++ b/docs/data/charts/heat-map/BasicHeatmap.tsx
@@ -0,0 +1,78 @@
+import * as React from 'react';
+import '@mui/x-charts-pro/typeOverloads';
+import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
+import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
+import { HeatmapContainer, HeatmapPlot } from '@mui/x-charts-pro/Heatmap';
+
+export default function BasicHeatmap() {
+  return (
+    <HeatmapContainer
+      height={400}
+      width={600}
+      xAxis={[{ scaleType: 'band', data: [1, 2, 3, 4, 5] }]}
+      yAxis={[
+        { scaleType: 'band', data: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] },
+      ]}
+      zAxis={[
+        {
+          id: 'color-map-id',
+          colorMap: {
+            type: 'continuous',
+            min: -2,
+            max: 4,
+            color: ['green', 'orange'],
+          },
+        },
+      ]}
+      series={[
+        {
+          type: 'heatmap',
+          data: [
+            [0, 0, 1],
+            [0, 1, 2],
+            [0, 2, 3],
+            [0, 3, 4],
+            [0, 4, 1],
+            [0, 5, 2],
+            [0, 6, 3],
+            [1, 0, 4],
+            [1, 1, 1],
+            [1, 2, 2],
+            [1, 3, 3],
+            [1, 4, 4],
+            [1, 5, 1],
+            [1, 6, 2],
+            [2, 0, 3],
+            [2, 1, 4],
+            [2, 2, 1],
+            [2, 3, 2],
+            [2, 4, 3],
+            [2, 5, 4],
+            [2, 6, 1],
+            [3, 0, 2],
+            [3, 1, 3],
+            [3, 2, 4],
+            [3, 3, 1],
+            [3, 4, 2],
+            [3, 5, 3],
+            [3, 6, 4],
+            [4, 0, 1],
+            [4, 1, 2],
+            [4, 2, 3],
+            [4, 3, 1],
+            [4, 4, 2],
+            [4, 5, 3],
+            [4, 6, 4],
+          ],
+        },
+      ]}
+    >
+      <ChartsAxis />
+      <HeatmapPlot />
+      <ChartsTooltip
+        trigger="item"
+        //   {...tooltip} slots={slots} slotProps={slotProps}
+      />
+    </HeatmapContainer>
+  );
+}
diff --git a/docs/data/charts/heat-map/heat-map.md b/docs/data/charts/heat-map/heat-map.md
index 6d6413b064b8e..d81cc95e4ad4a 100644
--- a/docs/data/charts/heat-map/heat-map.md
+++ b/docs/data/charts/heat-map/heat-map.md
@@ -13,3 +13,5 @@ The Heatmap Chart component isn't available yet, but you can upvote [**this GitH
 Don't hesitate to leave a comment there to influence what gets built.
 Especially if you already have a use case for this component, or if you're facing a pain point with your current solution.
 :::
+
+{{"demo": "BasicHeatmap.js"}}
diff --git a/packages/x-charts-pro/src/Heatmap/HeatmapContainer.tsx b/packages/x-charts-pro/src/Heatmap/HeatmapContainer.tsx
index 7d687d488499e..820b547239b4a 100644
--- a/packages/x-charts-pro/src/Heatmap/HeatmapContainer.tsx
+++ b/packages/x-charts-pro/src/Heatmap/HeatmapContainer.tsx
@@ -18,7 +18,7 @@ import {
   ZAxisContextProvider,
 } from '@mui/x-charts/internals';
 import { AllSeriesType } from '@mui/x-charts/models';
-import { ZAxisContextProviderProps } from 'packages/x-charts/build';
+import { ZAxisContextProviderProps } from '@mui/x-charts/context';
 
 export type HeatmapContainerProps = Omit<
   ChartsSurfaceProps &
@@ -49,9 +49,14 @@ const yExtremumGetters = {
 const formatSeries: SeriesFormatterType<'heatmap'> = (series: AllSeriesType[]) => {
   // Group series by type
   const seriesGroups: { heatmap?: FormatterParams<'heatmap'> } = {};
+
   series.forEach((seriesData, seriesIndex: number) => {
     const { id = `auto-generated-id-${seriesIndex}`, type } = seriesData;
 
+    if (type !== 'heatmap') {
+      throw new Error('Heatmap does nto suport other series type that "heatmap"');
+    }
+
     if (seriesGroups[type] === undefined) {
       seriesGroups[type] = { series: {}, seriesOrder: [] };
     }
diff --git a/packages/x-charts-pro/src/Heatmap/HeatmapPlot.tsx b/packages/x-charts-pro/src/Heatmap/HeatmapPlot.tsx
index f2e49f2e554d9..a0357869d1cc2 100644
--- a/packages/x-charts-pro/src/Heatmap/HeatmapPlot.tsx
+++ b/packages/x-charts-pro/src/Heatmap/HeatmapPlot.tsx
@@ -27,7 +27,7 @@ export function HeatmapPlot() {
             height={yScale.bandwidth()}
             x={xScale(xDomain[xIndex])}
             y={yScale(yDomain[yIndex])}
-            fill={colorScale(value)}
+            fill={colorScale(value) ?? undefined}
           />
         );
       })}
diff --git a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx
index c65b9e1e17866..8f4ca252a020c 100644
--- a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx
+++ b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx
@@ -78,12 +78,12 @@ function ChartsAxisTooltipContent(props: {
 
             let getColor: (index: number) => string;
             switch (seriesToAdd.type) {
-              case 'scatter':
+              case 'line':
+              case 'bar':
                 getColor = colorGetter(
                   seriesToAdd,
                   xAxis[seriesToAdd.xAxisKey ?? xAxisIds[0]],
                   yAxis[seriesToAdd.yAxisKey ?? yAxisIds[0]],
-                  zAxis[seriesToAdd.zAxisKey ?? zAxisIds[0]],
                 );
                 break;
               default:
@@ -91,6 +91,7 @@ function ChartsAxisTooltipContent(props: {
                   seriesToAdd,
                   xAxis[seriesToAdd.xAxisKey ?? xAxisIds[0]],
                   yAxis[seriesToAdd.yAxisKey ?? yAxisIds[0]],
+                  zAxis[seriesToAdd.zAxisKey ?? zAxisIds[0]],
                 );
                 break;
             }
diff --git a/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx
index 2f7183a6fd938..7e9d32f9e742a 100644
--- a/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx
+++ b/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx
@@ -53,17 +53,18 @@ function ChartsItemTooltipContent<T extends ChartSeriesType>(props: {
   const defaultYAxisId = yAxisIds[0];
   const defaultZAxisId = zAxisIds[0];
 
+  
   let getColor: (index: number) => string;
   switch (series.type) {
     case 'pie':
       getColor = colorGetter(series);
       break;
-    case 'scatter':
+    case 'line':
+    case 'bar':
       getColor = colorGetter(
         series,
         xAxis[series.xAxisKey ?? defaultXAxisId],
         yAxis[series.yAxisKey ?? defaultYAxisId],
-        zAxis[series.zAxisKey ?? defaultZAxisId],
       );
       break;
     default:
@@ -71,6 +72,7 @@ function ChartsItemTooltipContent<T extends ChartSeriesType>(props: {
         series,
         xAxis[series.xAxisKey ?? defaultXAxisId],
         yAxis[series.yAxisKey ?? defaultYAxisId],
+        zAxis[series.zAxisKey ?? defaultZAxisId],
       );
       break;
   }
diff --git a/packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx
index 72bba158688b4..29fb6f74338b1 100644
--- a/packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx
+++ b/packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx
@@ -28,7 +28,7 @@ function DefaultChartsItemTooltipContent<T extends ChartSeriesType = ChartSeries
           displayedLabel: getLabel(series.data[itemData.dataIndex].label, 'tooltip'),
         }
       : {
-          color: getColor(itemData.dataIndex) ?? series.color,
+          color: getColor(itemData.dataIndex),
           displayedLabel: getLabel(series.label, 'tooltip'),
         };
 
diff --git a/packages/x-charts/src/ChartsTooltip/utils.tsx b/packages/x-charts/src/ChartsTooltip/utils.tsx
index 8d465635c61f5..24deb6f38607b 100644
--- a/packages/x-charts/src/ChartsTooltip/utils.tsx
+++ b/packages/x-charts/src/ChartsTooltip/utils.tsx
@@ -96,7 +96,7 @@ export function getTooltipHasData(
 }
 
 export function isCartesianSeriesType(seriesType: string): seriesType is CartesianChartSeriesType {
-  return ['bar', 'line', 'scatter'].includes(seriesType);
+  return ['bar', 'line', 'scatter', 'heatmap'].includes(seriesType);
 }
 
 export function isCartesianSeries(
diff --git a/packages/x-charts/src/internals/colorGetter.ts b/packages/x-charts/src/internals/colorGetter.ts
index 0b022ff91e258..928c0a762281e 100644
--- a/packages/x-charts/src/internals/colorGetter.ts
+++ b/packages/x-charts/src/internals/colorGetter.ts
@@ -2,33 +2,31 @@ import getBarColor from '../BarChart/getColor';
 import getLineColor from '../LineChart/getColor';
 import getScatterColor from '../ScatterChart/getColor';
 import getPieColor from '../PieChart/getColor';
-import {
-  DefaultizedBarSeriesType,
-  DefaultizedLineSeriesType,
-  DefaultizedPieSeriesType,
-  DefaultizedScatterSeriesType,
-} from '../models';
+import { DefaultizedSeriesType } from '../models';
 import { AxisDefaultized } from '../models/axis';
 import { ZAxisDefaultized } from '../models/z-axis';
 
-function getColor(series: DefaultizedPieSeriesType): (dataIndex: number) => string;
+export type ColorGetterType = (
+  series: DefaultizedSeriesType,
+  xAxis?: AxisDefaultized,
+  yAxis?: AxisDefaultized,
+  zAxis?: ZAxisDefaultized,
+) => string;
+
+function getColor(series: DefaultizedSeriesType<'pie'>): (dataIndex: number) => string;
 function getColor(
-  series: DefaultizedBarSeriesType | DefaultizedLineSeriesType,
+  series: DefaultizedSeriesType<'line' | 'bar'>,
   xAxis: AxisDefaultized,
   yAxis: AxisDefaultized,
 ): (dataIndex: number) => string;
 function getColor(
-  series: DefaultizedScatterSeriesType,
+  series: DefaultizedSeriesType<'scatter'>,
   xAxis: AxisDefaultized,
   yAxis: AxisDefaultized,
   zAxis?: ZAxisDefaultized,
 ): (dataIndex: number) => string;
 function getColor(
-  series:
-    | DefaultizedBarSeriesType
-    | DefaultizedLineSeriesType
-    | DefaultizedScatterSeriesType
-    | DefaultizedPieSeriesType,
+  series: DefaultizedSeriesType,
   xAxis?: AxisDefaultized,
   yAxis?: AxisDefaultized,
   zAxis?: ZAxisDefaultized,
@@ -50,6 +48,20 @@ function getColor(
     return getPieColor(series);
   }
 
+  if (series.type === 'heatmap') {
+    const colorScale = zAxis?.colorScale;
+
+    if (colorScale) {
+      return (dataIndex: number) => {
+        const value = series.data[dataIndex][2];
+        if (value !== undefined) {
+          return colorScale(value) ?? '';
+        }
+        return '';
+      };
+    }
+  }
+
   throw Error(
     `MUI X Charts: getColor called with unexpected arguments for series with id "${series.id}"`,
   );