@mui/x-charts-pro 8.4.0 → 8.5.1

package/esm/FunnelChart/curves/bump.js

@@ -11,64 +11,96 @@
 export class Bump {
   constructor(context, {
     isHorizontal,
-    gap
+    gap,
+    min,
+    max,
+    isIncreasing
   }) {
     this.context = void 0;
-    this.x = NaN;
-    this.y = NaN;
-    this.currentPoint = 0;
     this.isHorizontal = false;
     this.gap = 0;
+    this.min = {
+      x: 0,
+      y: 0
+    };
+    this.max = {
+      x: 0,
+      y: 0
+    };
+    this.points = [];
     this.context = context;
     this.isHorizontal = isHorizontal ?? false;
     this.gap = (gap ?? 0) / 2;
+    this.min = min ?? {
+      x: 0,
+      y: 0
+    };
+    this.max = max ?? {
+      x: 0,
+      y: 0
+    };
+    if (isIncreasing) {
+      const currentMin = this.min;
+      const currentMax = this.max;
+      this.min = currentMax;
+      this.max = currentMin;
+    }
   }
   areaStart() {}
   areaEnd() {}
   lineStart() {}
   lineEnd() {}
   point(x, y) {
-    x = +x;
-    y = +y;
-
-    // 0 is the top-left corner.
-    if (this.isHorizontal) {
-      if (this.currentPoint === 0) {
-        this.context.moveTo(x + this.gap, y);
-        this.context.lineTo(x + this.gap, y);
-      } else if (this.currentPoint === 1) {
-        this.context.bezierCurveTo((this.x + x) / 2, this.y, (this.x + x) / 2, y, x - this.gap, y);
-      } else if (this.currentPoint === 2) {
-        this.context.lineTo(x - this.gap, y);
-      } else {
-        this.context.bezierCurveTo((this.x + x) / 2, this.y, (this.x + x) / 2, y, x + this.gap, y);
-      }
-      if (this.currentPoint === 3) {
-        this.context.closePath();
-      }
-      this.currentPoint += 1;
-      this.x = x;
-      this.y = y;
+    this.points.push({
+      x,
+      y
+    });
+    if (this.points.length < 4) {
       return;
     }
 
-    // 0 is the top-right corner.
-    if (this.currentPoint === 0) {
-      // X from Y
-      this.context.moveTo(x, y + this.gap);
-      this.context.lineTo(x, y + this.gap);
-    } else if (this.currentPoint === 1) {
-      this.context.bezierCurveTo(this.x, (this.y + y) / 2, x, (this.y + y) / 2, x, y - this.gap);
-    } else if (this.currentPoint === 2) {
-      this.context.lineTo(x, y - this.gap);
+    // Draw the path using bezier curves
+    this.drawPath();
+  }
+  drawPath() {
+    if (this.isHorizontal) {
+      this.drawHorizontalPath();
     } else {
-      this.context.bezierCurveTo(this.x, (this.y + y) / 2, x, (this.y + y) / 2, x, y + this.gap);
-    }
-    if (this.currentPoint === 3) {
-      this.context.closePath();
+      this.drawVerticalPath();
     }
-    this.currentPoint += 1;
-    this.x = x;
-    this.y = y;
+  }
+  drawHorizontalPath() {
+    const [p0, p1, p2, p3] = this.points;
+
+    // 0 is the top-left corner
+    this.context.moveTo(p0.x + this.gap, p0.y);
+    this.context.lineTo(p0.x + this.gap, p0.y);
+
+    // Bezier curve to point 1
+    this.context.bezierCurveTo((p0.x + p1.x) / 2, p0.y, (p0.x + p1.x) / 2, p1.y, p1.x - this.gap, p1.y);
+
+    // Line to point 2
+    this.context.lineTo(p2.x - this.gap, p2.y);
+
+    // Bezier curve back to point 3
+    this.context.bezierCurveTo((p2.x + p3.x) / 2, p2.y, (p2.x + p3.x) / 2, p3.y, p3.x + this.gap, p3.y);
+    this.context.closePath();
+  }
+  drawVerticalPath() {
+    const [p0, p1, p2, p3] = this.points;
+
+    // 0 is the top-right corner
+    this.context.moveTo(p0.x, p0.y + this.gap);
+    this.context.lineTo(p0.x, p0.y + this.gap);
+
+    // Bezier curve to point 1
+    this.context.bezierCurveTo(p0.x, (p0.y + p1.y) / 2, p1.x, (p0.y + p1.y) / 2, p1.x, p1.y - this.gap);
+
+    // Line to point 2
+    this.context.lineTo(p2.x, p2.y - this.gap);
+
+    // Bezier curve back to point 3
+    this.context.bezierCurveTo(p2.x, (p2.y + p3.y) / 2, p3.x, (p2.y + p3.y) / 2, p3.x, p3.y + this.gap);
+    this.context.closePath();
   }
 }

package/esm/FunnelChart/curves/curve.types.d.ts

@@ -34,8 +34,13 @@ export type CurveOptions = {
    * The maximum point for all the segments.
    */
   max?: Point;
+  /**
+   * The shape of the point of the funnel for the curves that support it.
+   */
+  pointShape?: FunnelPointShape;
 };
-export type FunnelCurveType = 'linear' | 'step' | 'bump' | 'pyramid' | 'step-pyramid';
+export type FunnelCurveType = 'linear' | 'linear-sharp' | 'step' | 'bump' | 'pyramid' | 'step-pyramid';
+export type FunnelPointShape = 'square' | 'sharp';
 export type Point = {
   x: number;
   y: number;

package/esm/FunnelChart/curves/getFunnelCurve.js

@@ -19,5 +19,8 @@ const curveConstructor = curve => {
   return Linear;
 };
 export const getFunnelCurve = (curve, options) => {
+  if (curve === 'linear-sharp') {
+    options.pointShape = 'sharp';
+  }
   return context => new (curveConstructor(curve))(context, options);
 };

package/esm/FunnelChart/curves/linear.d.ts

@@ -13,15 +13,23 @@ export declare class Linear implements CurveGenerator {
   private position;
   private sections;
   private isHorizontal;
+  private isIncreasing;
   private gap;
   private borderRadius;
+  private min;
+  private max;
   private points;
+  private pointShape;
   constructor(context: CanvasRenderingContext2D, {
     isHorizontal,
     gap,
     position,
     sections,
-    borderRadius
+    borderRadius,
+    min,
+    max,
+    isIncreasing,
+    pointShape
   }: CurveOptions);
   areaStart(): void;
   areaEnd(): void;

package/esm/FunnelChart/curves/linear.js

@@ -17,21 +17,51 @@ export class Linear {
     gap,
     position,
     sections,
-    borderRadius
+    borderRadius,
+    min,
+    max,
+    isIncreasing,
+    pointShape
   }) {
     this.context = void 0;
     this.position = 0;
     this.sections = 0;
     this.isHorizontal = false;
+    this.isIncreasing = false;
     this.gap = 0;
     this.borderRadius = 0;
+    this.min = {
+      x: 0,
+      y: 0
+    };
+    this.max = {
+      x: 0,
+      y: 0
+    };
     this.points = [];
+    this.pointShape = 'square';
     this.context = context;
     this.isHorizontal = isHorizontal ?? false;
     this.gap = (gap ?? 0) / 2;
     this.position = position ?? 0;
     this.sections = sections ?? 1;
     this.borderRadius = borderRadius ?? 0;
+    this.isIncreasing = isIncreasing ?? false;
+    this.min = min ?? {
+      x: 0,
+      y: 0
+    };
+    this.max = max ?? {
+      x: 0,
+      y: 0
+    };
+    this.pointShape = pointShape ?? 'square';
+    if (isIncreasing) {
+      const currentMin = this.min;
+      const currentMax = this.max;
+      this.min = currentMax;
+      this.max = currentMin;
+    }
   }
   areaStart() {}
   areaEnd() {}
@@ -41,11 +71,34 @@ export class Linear {
     if (this.gap > 0) {
       return this.borderRadius;
     }
-    if (this.position === 0) {
-      return [0, 0, this.borderRadius, this.borderRadius];
+    if (this.isIncreasing) {
+      // Is largest section
+      if (this.position === this.sections - 1) {
+        return [this.borderRadius, this.borderRadius];
+      }
+      // Is smallest section and shaped like a triangle
+      if (this.position === 0 && this.pointShape === 'sharp') {
+        return [0, 0, this.borderRadius];
+      }
+      // Is smallest section
+      if (this.position === 0) {
+        return [0, 0, this.borderRadius, this.borderRadius];
+      }
     }
-    if (this.position === this.sections - 1) {
-      return [this.borderRadius, this.borderRadius];
+    if (!this.isIncreasing) {
+      // Is largest section
+      if (this.position === 0) {
+        return [0, 0, this.borderRadius, this.borderRadius];
+      }
+      // Is smallest section and shaped like a triangle
+      if (this.position === this.sections - 1 && this.pointShape === 'sharp') {
+        return [this.borderRadius];
+      }
+
+      // Is smallest section
+      if (this.position === this.sections - 1) {
+        return [this.borderRadius, this.borderRadius];
+      }
     }
     return 0;
   }
@@ -77,6 +130,30 @@ export class Linear {
         y: yGap
       };
     });
+    if (this.pointShape === 'sharp') {
+      // In the last section, to form a triangle we need 3 points instead of 4
+      // Else the algorithm will break.
+      const isLastSection = this.position === this.sections - 1;
+      const isFirstSection = this.position === 0;
+      if (isFirstSection && this.isIncreasing) {
+        this.points = [this.isHorizontal ? {
+          x: this.max.x + this.gap,
+          y: (this.max.y + this.min.y) / 2
+        } : {
+          x: (this.max.x + this.min.x) / 2,
+          y: this.max.y + this.gap
+        }, this.points[1], this.points[2]];
+      }
+      if (isLastSection && !this.isIncreasing) {
+        this.points = [this.points[0], this.isHorizontal ? {
+          x: this.max.x - this.gap,
+          y: (this.max.y + this.min.y) / 2
+        } : {
+          x: (this.max.x + this.min.x) / 2,
+          y: this.max.y - this.gap
+        }, this.points[3]];
+      }
+    }
     borderRadiusPolygon(this.context, this.points, this.getBorderRadius());
   }
 }

package/esm/FunnelChart/funnel.types.d.ts

@@ -47,6 +47,7 @@ export interface FunnelSeriesType extends Omit<CommonSeriesType<FunnelValueType>
    *
    * - `bump`: A curve that creates a smooth transition between points, with a bump in the middle.
    * - `linear`: A straight line between points.
+   * - `linear-sharp`: A straight line between points, the smaller end of the funnel is a triangle.
    * - `step`: A step line that creates a staircase effect.
    * - `pyramid`: A pyramid shape that connects the points.
    * - `step-pyramid`: A step line that creates a staircase effect, with a pyramid shape.

package/esm/FunnelChart/funnelPlotSlots.types.d.ts

@@ -1,10 +1,21 @@
 import * as React from 'react';
 import type { FunnelSectionProps } from "./FunnelSection.js";
+import { FunnelSectionLabelProps } from "./FunnelSectionLabel.js";
 export interface FunnelPlotSlots {
+  /**
+   * Custom component for funnel section.
+   * @default FunnelSection
+   */
   funnelSection?: React.ElementType<FunnelSectionProps>;
+  /**
+   * Custom component for funnel section label.
+   * @default FunnelSectionLabel
+   */
+  funnelSectionLabel?: React.ElementType<FunnelSectionLabelProps>;
 }
 export interface FunnelPlotSlotProps {
   funnelSection?: FunnelSectionProps;
+  funnelSectionLabel?: FunnelSectionLabelProps;
 }
 export interface FunnelPlotSlotExtension {
   /**

package/esm/FunnelChart/funnelSectionClasses.d.ts

@@ -1,4 +1,5 @@
 import type { FunnelSectionProps } from "./FunnelSection.js";
+import type { FunnelSectionLabelProps } from "./FunnelSectionLabel.js";
 export interface FunnelSectionClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -19,4 +20,5 @@ export interface FunnelSectionClasses {
   series: string;
 }
 export declare const useUtilityClasses: (props: FunnelSectionProps) => Record<"label" | "filled" | "outlined" | "highlighted" | "faded" | "root", string>;
+export declare const useLabelUtilityClasses: (props: FunnelSectionLabelProps) => Record<"label", string>;
 export declare const funnelSectionClasses: FunnelSectionClasses;

package/esm/FunnelChart/funnelSectionClasses.js

@@ -8,10 +8,11 @@ export const useUtilityClasses = props => {
   const {
     classes,
     seriesId,
-    variant
+    variant,
+    dataIndex
   } = props;
   const slots = {
-    root: ['root', `series-${seriesId}`],
+    root: ['root', `series-${seriesId}`, `data-index-${dataIndex}`],
     highlighted: ['highlighted'],
     faded: ['faded'],
     outlined: variant === 'outlined' ? ['outlined'] : [],
@@ -20,4 +21,15 @@ export const useUtilityClasses = props => {
   };
   return composeClasses(slots, getFunnelSectionUtilityClass, classes);
 };
-export const funnelSectionClasses = generateUtilityClasses('MuiFunnelSection', ['root', 'highlighted', 'faded', 'filled', 'outlined', 'label', 'series']);
+export const useLabelUtilityClasses = props => {
+  const {
+    classes,
+    seriesId,
+    dataIndex
+  } = props;
+  const slots = {
+    label: ['label', `series-${seriesId}`, `data-index-${dataIndex}`]
+  };
+  return composeClasses(slots, getFunnelSectionUtilityClass, classes);
+};
+export const funnelSectionClasses = generateUtilityClasses('MuiFunnelSection', ['root', 'highlighted', 'faded', 'filled', 'outlined', 'label', 'series', 'data-index']);

package/esm/FunnelChart/funnelSlots.types.d.ts

@@ -1,10 +1,11 @@
 import { ChartsOverlaySlotProps, ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
 import { ChartsTooltipSlotProps, ChartsTooltipSlots } from '@mui/x-charts/ChartsTooltip';
-import { ChartsAxisSlotProps, ChartsAxisSlots } from '@mui/x-charts/internals';
+import { ChartsAxisSlotProps, ChartsAxisSlots, ChartsSlotProps, ChartsSlots } from '@mui/x-charts/internals';
 import { ChartsLegendSlotProps, ChartsLegendSlots } from '@mui/x-charts/ChartsLegend';
+import { ChartsToolbarSlotProps, ChartsToolbarSlots } from '@mui/x-charts/Toolbar';
 import { FunnelPlotSlotProps, FunnelPlotSlots } from "./funnelPlotSlots.types.js";
-export interface FunnelChartSlots extends ChartsAxisSlots, FunnelPlotSlots, ChartsLegendSlots, ChartsTooltipSlots, ChartsOverlaySlots, ChartsAxisSlots {}
-export interface FunnelChartSlotProps extends ChartsAxisSlotProps, FunnelPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps, ChartsAxisSlotProps {}
+export interface FunnelChartSlots extends ChartsAxisSlots, FunnelPlotSlots, ChartsLegendSlots, ChartsTooltipSlots, ChartsOverlaySlots, ChartsAxisSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
+export interface FunnelChartSlotProps extends ChartsAxisSlotProps, FunnelPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps, ChartsAxisSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export interface FunnelChartSlotExtension {
   /**
    * Overridable component slots.

package/esm/FunnelChart/index.d.ts

@@ -6,4 +6,6 @@ export * from "./categoryAxis.types.js";
 export * from "./funnelSlots.types.js";
 export type { FunnelCurveType } from "./curves/index.js";
 export { funnelSectionClasses } from "./funnelSectionClasses.js";
-export type { FunnelSectionClasses } from "./funnelSectionClasses.js";
+export type { FunnelSectionClasses } from "./funnelSectionClasses.js";
+export { FunnelSection } from "./FunnelSection.js";
+export { FunnelSectionLabel } from "./FunnelSectionLabel.js";

package/esm/FunnelChart/index.js

@@ -3,4 +3,6 @@ export * from "./FunnelPlot.js";
 export * from "./funnel.types.js";
 export * from "./categoryAxis.types.js";
 export * from "./funnelSlots.types.js";
-export { funnelSectionClasses } from "./funnelSectionClasses.js";
+export { funnelSectionClasses } from "./funnelSectionClasses.js";
+export { FunnelSection } from "./FunnelSection.js";
+export { FunnelSectionLabel } from "./FunnelSectionLabel.js";

package/esm/FunnelChart/useFunnelChartProps.d.ts

@@ -3,6 +3,7 @@ import { ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
 import { ChartsLegendSlotExtension } from '@mui/x-charts/ChartsLegend';
 import { ChartsWrapperProps } from '@mui/x-charts/internals';
 import { ChartsAxisHighlightProps } from '@mui/x-charts/ChartsAxisHighlight';
+import { FunnelChartPluginsSignatures } from "./FunnelChart.plugins.js";
 import { FunnelPlotProps } from "./FunnelPlot.js";
 import type { FunnelChartProps } from "./FunnelChart.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
@@ -14,7 +15,7 @@ import { ChartContainerProProps } from "../ChartContainerPro/index.js";
  * @returns An object with props for the children components of FunnelChart
  */
 export declare const useFunnelChartProps: (props: FunnelChartProps) => {
-  chartContainerProps: ChartContainerProProps<"funnel">;
+  chartContainerProps: ChartContainerProProps<"funnel", FunnelChartPluginsSignatures>;
   funnelPlotProps: FunnelPlotProps;
   overlayProps: ChartsOverlayProps;
   chartsAxisProps: ChartsAxisProps;

package/esm/FunnelChart/useFunnelChartProps.js

@@ -7,6 +7,7 @@ import { DEFAULT_MARGINS, DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-
 import { defaultizeMargin } from '@mui/x-charts/internals';
 import { warnOnce } from '@mui/x-internals/warning';
 import { strawberrySkyPalette } from '@mui/x-charts/colorPalettes';
+import { FUNNEL_CHART_PLUGINS } from "./FunnelChart.plugins.js";
 function getCategoryAxisConfig(categoryAxis, series, isHorizontal, direction) {
   const maxSeriesLength = Math.max(...series.map(s => (s.data ?? []).length), 0);
   const maxSeriesValue = Array.from({
@@ -113,7 +114,8 @@ export const useFunnelChartProps = props => {
     highlightedItem,
     onHighlightChange,
     className,
-    apiRef
+    apiRef,
+    plugins: FUNNEL_CHART_PLUGINS
   });
   const funnelPlotProps = {
     gap,

package/esm/Heatmap/Heatmap.d.ts

@@ -4,22 +4,30 @@ import { ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
 import { ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
 import { ChartsAxisSlots, ChartsAxisSlotProps, XAxis, YAxis } from '@mui/x-charts/internals';
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
+import { ChartsLegendSlotProps, ChartsLegendSlots } from '@mui/x-charts/ChartsLegend';
+import { ChartsToolbarSlotProps, ChartsToolbarSlots } from '@mui/x-charts/Toolbar';
+import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { HeatmapSeriesType } from "../models/seriesType/heatmap.js";
 import { HeatmapTooltipProps } from "./HeatmapTooltip/index.js";
 import { HeatmapItemSlotProps, HeatmapItemSlots } from "./HeatmapItem.js";
 import { HeatmapPluginsSignatures } from "./Heatmap.plugins.js";
-export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, HeatmapItemSlots {
+export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, HeatmapItemSlots, ChartsToolbarSlots, Partial<ChartsSlotsPro> {
   /**
-   * Custom component for the tooltip popper.
+   * Custom component for the tooltip.
    * @default ChartsTooltipRoot
    */
   tooltip?: React.ElementType<HeatmapTooltipProps>;
+  /**
+   * Custom component for the legend.
+   * @default ContinuousColorLegendProps
+   */
+  legend?: ChartsLegendSlots['legend'];
 }
-export interface HeatmapSlotProps extends ChartsAxisSlotProps, ChartsOverlaySlotProps, HeatmapItemSlotProps {
+export interface HeatmapSlotProps extends ChartsAxisSlotProps, ChartsOverlaySlotProps, HeatmapItemSlotProps, ChartsLegendSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotPropsPro> {
   tooltip?: Partial<HeatmapTooltipProps>;
 }
-export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', HeatmapPluginsSignatures>, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'skipAnimation'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', HeatmapPluginsSignatures>, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'skipAnimation' | 'slots' | 'slotProps'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The configuration of the x-axes.
    * If not provided, a default axis config is used.
@@ -42,6 +50,16 @@ export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', Hea
    * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
    */
   tooltip?: ChartsTooltipProps;
+  /**
+   * If `true`, the legend is not rendered.
+   * @default true
+   */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
   /**
    * Overridable component slots.
    * @default {}

package/esm/Heatmap/Heatmap.js

@@ -8,14 +8,17 @@ import useId from '@mui/utils/useId';
 import { interpolateRgbBasis } from '@mui/x-charts-vendor/d3-interpolate';
 import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+import { ChartsWrapper } from '@mui/x-charts/internals';
 import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants';
+import { ChartsLegend, ContinuousColorLegend } from '@mui/x-charts/ChartsLegend';
 import { HeatmapPlot } from "./HeatmapPlot.js";
 import { seriesConfig as heatmapSeriesConfig } from "./seriesConfig/index.js";
 import { HeatmapTooltip } from "./HeatmapTooltip/index.js";
 import { HEATMAP_PLUGINS } from "./Heatmap.plugins.js";
 import { ChartDataProviderPro } from "../ChartDataProviderPro/index.js";
+import { ChartsToolbarPro } from "../ChartsToolbarPro/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The GnBu: https://github.com/d3/d3-scale-chromatic/blob/main/src/sequential-multi/GnBu.js
 const defaultColorMap = interpolateRgbBasis(['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#0868ac', '#084081']);
@@ -38,6 +41,7 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
     name: 'MuiHeatmap'
   });
   const {
+    apiRef,
     xAxis,
     yAxis,
     zAxis,
@@ -54,7 +58,9 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
     slotProps,
     loading,
     highlightedItem,
-    onHighlightChange
+    onHighlightChange,
+    hideLegend = true,
+    showToolbar = false
   } = props;
   const id = useId();
   const clipPathId = `${id}-clip-path`;
@@ -82,8 +88,15 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
       color: defaultColorMap
     }
   }], [zAxis]);
-  const Tooltip = props.slots?.tooltip ?? HeatmapTooltip;
-  return /*#__PURE__*/_jsxs(ChartDataProviderPro, {
+  const chartsWrapperProps = {
+    sx,
+    legendPosition: props.slotProps?.legend?.position,
+    legendDirection: props.slotProps?.legend?.direction
+  };
+  const Tooltip = slots?.tooltip ?? HeatmapTooltip;
+  const Toolbar = slots?.toolbar ?? ChartsToolbarPro;
+  return /*#__PURE__*/_jsx(ChartDataProviderPro, {
+    apiRef: apiRef,
     seriesConfig: seriesConfig,
     series: series.map(s => _extends({
       type: 'heatmap'
@@ -101,26 +114,42 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
     onHighlightChange: onHighlightChange,
     onAxisClick: onAxisClick,
     plugins: HEATMAP_PLUGINS,
-    children: [/*#__PURE__*/_jsxs(ChartsSurface, {
-      ref: ref,
-      sx: sx,
-      children: [/*#__PURE__*/_jsxs("g", {
-        clipPath: `url(#${clipPathId})`,
-        children: [/*#__PURE__*/_jsx(HeatmapPlot, {
-          slots: slots,
-          slotProps: slotProps
-        }), /*#__PURE__*/_jsx(ChartsOverlay, {
-          loading: loading,
+    children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
+      children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/_jsx(ChartsLegend, {
+        slots: _extends({}, slots, {
+          legend: slots?.legend ?? ContinuousColorLegend
+        }),
+        slotProps: {
+          legend: _extends({
+            labelPosition: 'extremes'
+          }, slotProps?.legend)
+        },
+        sx: slotProps?.legend?.direction === 'vertical' ? {
+          height: 150
+        } : {
+          width: '50%'
+        }
+      }), /*#__PURE__*/_jsxs(ChartsSurface, {
+        ref: ref,
+        sx: sx,
+        children: [/*#__PURE__*/_jsxs("g", {
+          clipPath: `url(#${clipPathId})`,
+          children: [/*#__PURE__*/_jsx(HeatmapPlot, {
+            slots: slots,
+            slotProps: slotProps
+          }), /*#__PURE__*/_jsx(ChartsOverlay, {
+            loading: loading,
+            slots: slots,
+            slotProps: slotProps
+          })]
+        }), /*#__PURE__*/_jsx(ChartsAxis, {
           slots: slots,
           slotProps: slotProps
-        })]
-      }), /*#__PURE__*/_jsx(ChartsAxis, {
-        slots: slots,
-        slotProps: slotProps
-      }), /*#__PURE__*/_jsx(ChartsClipPath, {
-        id: clipPathId
-      }), children]
-    }), !loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps?.tooltip))]
+        }), /*#__PURE__*/_jsx(ChartsClipPath, {
+          id: clipPathId
+        }), children]
+      }), !loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps?.tooltip))]
+    }))
   });
 });
 if (process.env.NODE_ENV !== "production") Heatmap.displayName = "Heatmap";
@@ -130,7 +159,10 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   apiRef: PropTypes.shape({
-    current: PropTypes.object
+    current: PropTypes.shape({
+      exportAsImage: PropTypes.func.isRequired,
+      exportAsPrint: PropTypes.func.isRequired
+    })
   }),
   className: PropTypes.string,
   /**
@@ -153,6 +185,11 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * If `true`, the legend is not rendered.
+   * @default true
+   */
+  hideLegend: PropTypes.bool,
   /**
    * The highlighted item.
    * Used when the highlight is controlled.
@@ -210,6 +247,11 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * @ignore Unstable props for internal usage.
    */
   seriesConfig: PropTypes.object,
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/esm/Heatmap/Heatmap.plugins.d.ts

@@ -1,3 +1,4 @@
 import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
-export type HeatmapPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'heatmap'>, UseChartInteractionSignature, UseChartHighlightSignature];
+import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
+export type HeatmapPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'heatmap'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProExportSignature];
 export declare const HEATMAP_PLUGINS: ConvertSignaturesIntoPlugins<HeatmapPluginsSignatures>;