@mui/x-charts 7.3.1 → 7.3.2

package/Gauge/gaugeClasses.d.ts

@@ -1,9 +1,9 @@
 export interface GaugeClasses {
     /** Styles applied to the root element. */
     root: string;
-    /** Styles applied to the arc diplaying the value. */
+    /** Styles applied to the arc displaying the value. */
     valueArc: string;
-    /** Styles applied to the arc diplaying the range of available values. */
+    /** Styles applied to the arc displaying the range of available values. */
     referenceArc: string;
     /** Styles applied to the value text. */
     valueText: string;

package/Gauge/utils.d.ts

@@ -1,5 +1,5 @@
 /**
- * Retruns the ratio of the arc bounding box and its center.
+ * Returns the ratio of the arc bounding box and its center.
  * @param startAngle The start angle (in deg)
  * @param endAngle The end angle (in deg)
  */

package/Gauge/utils.js

@@ -14,7 +14,7 @@ function getPoint(angle) {
 }
 
 /**
- * Retruns the ratio of the arc bounding box and its center.
+ * Returns the ratio of the arc bounding box and its center.
  * @param startAngle The start angle (in deg)
  * @param endAngle The end angle (in deg)
  */
@@ -27,9 +27,9 @@ function getArcRatios(startAngle, endAngle) {
   const maxAngle = Math.max(startAngle, endAngle);
   const initialAngle = Math.floor(minAngle / 90) * 90;
   for (let step = 1; step <= 4; step += 1) {
-    const cartinalAngle = initialAngle + step * 90;
-    if (cartinalAngle < maxAngle) {
-      points.push(getPoint(cartinalAngle));
+    const cardinalAngle = initialAngle + step * 90;
+    if (cardinalAngle < maxAngle) {
+      points.push(getPoint(cardinalAngle));
     }
   }
   const minX = Math.min(...points.map(([x]) => x));

package/LineChart/AreaElement.d.ts

@@ -5,7 +5,7 @@ import { SeriesId } from '../models/seriesType/common';
 export interface AreaElementClasses {
     /** Styles applied to the root element. */
     root: string;
-    /** Styles applied to the root element when higlighted. */
+    /** Styles applied to the root element when highlighted. */
     highlighted: string;
     /** Styles applied to the root element when faded. */
     faded: string;

package/LineChart/LineChart.d.ts

@@ -13,11 +13,12 @@ import { ChartsAxisSlotProps, ChartsAxisSlots } from '../models/axis';
 import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from './LineHighlightPlot';
 import { ChartsGridProps } from '../ChartsGrid';
 import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
-export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsTooltipSlots {
+import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay/ChartsOverlay';
+export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsTooltipSlots, ChartsOverlaySlots {
 }
-export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps {
+export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps {
 }
-export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
+export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
     /**
      * The series to display in the line chart.
      * An array of [[LineSeriesType]] objects.

package/LineChart/LineChart.js

@@ -22,6 +22,7 @@ var _ChartsClipPath = require("../ChartsClipPath");
 var _LineHighlightPlot = require("./LineHighlightPlot");
 var _ChartsGrid = require("../ChartsGrid");
 var _ChartsOnAxisClickHandler = require("../ChartsOnAxisClickHandler");
+var _ChartsOverlay = require("../ChartsOverlay/ChartsOverlay");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -64,7 +65,8 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
     children,
     slots,
     slotProps,
-    skipAnimation
+    skipAnimation,
+    loading
   } = props;
   const id = (0, _useId.default)();
   const clipPathId = `${id}-clip-path`;
@@ -106,6 +108,10 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
         slotProps: slotProps,
         onItemClick: onLineClick,
         skipAnimation: skipAnimation
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
+        loading: loading,
+        slots: slots,
+        slotProps: slotProps
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
       topAxis: topAxis,
@@ -125,7 +131,7 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend, {
       slots: slots,
       slotProps: slotProps
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip, {
+    })), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip, {
       slots: slots,
       slotProps: slotProps
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
@@ -206,6 +212,10 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object
   }),
+  /**
+   * If `true`, a loading overlay is displayed.
+   */
+  loading: _propTypes.default.bool,
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.

package/LineChart/LineElement.d.ts

@@ -5,7 +5,7 @@ import { SeriesId } from '../models/seriesType/common';
 export interface LineElementClasses {
     /** Styles applied to the root element. */
     root: string;
-    /** Styles applied to the root element when higlighted. */
+    /** Styles applied to the root element when highlighted. */
     highlighted: string;
     /** Styles applied to the root element when faded. */
     faded: string;

package/LineChart/MarkElement.d.ts

@@ -4,7 +4,7 @@ import { SeriesId } from '../models/seriesType/common';
 export interface MarkElementClasses {
     /** Styles applied to the root element. */
     root: string;
-    /** Styles applied to the root element when higlighted. */
+    /** Styles applied to the root element when highlighted. */
     highlighted: string;
     /** Styles applied to the root element when faded. */
     faded: string;

package/PieChart/PieArc.d.ts

@@ -6,7 +6,7 @@ import { PieItemId } from '../models';
 export interface PieArcClasses {
     /** Styles applied to the root element. */
     root: string;
-    /** Styles applied to the root element when higlighted. */
+    /** Styles applied to the root element when highlighted. */
     highlighted: string;
     /** Styles applied to the root element when faded. */
     faded: string;

package/PieChart/PieArcLabel.d.ts

@@ -5,7 +5,7 @@ import { PieItemId } from '../models/seriesType/pie';
 export interface PieArcLabelClasses {
     /** Styles applied to the root element. */
     root: string;
-    /** Styles applied to the root element when higlighted. */
+    /** Styles applied to the root element when highlighted. */
     highlighted: string;
     /** Styles applied to the root element when faded. */
     faded: string;

package/PieChart/PieArcLabel.js

@@ -50,7 +50,7 @@ const PieArcLabelRoot = (0, _styles.styled)(_web.animated.text, {
 }));
 /**
  * Helper to compute label position.
- * It's not an inline function because we need it in inerpolation.
+ * It's not an inline function because we need it in interpolation.
  */
 const getLabelPosition = (formattedArcLabel, variable) => (startAngle, endAngle, padAngle, arcLabelRadius, cornerRadius) => {
   if (!formattedArcLabel) {

package/PieChart/PieArcLabelPlot.d.ts

@@ -9,7 +9,7 @@ export interface PieArcLabelPlotSlotProps {
 }
 export interface PieArcLabelPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle' | 'arcLabel' | 'arcLabelMinAngle' | 'id' | 'highlightScope'>, ComputedPieRadius {
     /**
-     * Override the arc attibutes when it is faded.
+     * Override the arc attributes when it is faded.
      * @default { additionalRadius: -5 }
      */
     faded?: DefaultizedPieSeriesType['faded'];

package/PieChart/PieArcLabelPlot.js

@@ -138,7 +138,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
     value: _propTypes.default.number.isRequired
   })).isRequired,
   /**
-   * Override the arc attibutes when it is faded.
+   * Override the arc attributes when it is faded.
    * @default { additionalRadius: -5 }
    */
   faded: _propTypes.default.shape({
@@ -151,7 +151,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
     paddingAngle: _propTypes.default.number
   }),
   /**
-   * Override the arc attibutes when it is highlighted.
+   * Override the arc attributes when it is highlighted.
    */
   highlighted: _propTypes.default.shape({
     additionalRadius: _propTypes.default.number,
@@ -168,7 +168,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
   }),
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   /**
-   * The radius between circle center and the begining of the arc.
+   * The radius between circle center and the beginning of the arc.
    * @default 0
    */
   innerRadius: _propTypes.default.number,

package/PieChart/PieArcPlot.d.ts

@@ -9,7 +9,7 @@ export interface PieArcPlotSlotProps {
 }
 export interface PieArcPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle' | 'id' | 'highlightScope'>, ComputedPieRadius {
     /**
-     * Override the arc attibutes when it is faded.
+     * Override the arc attributes when it is faded.
      * @default { additionalRadius: -5 }
      */
     faded?: DefaultizedPieSeriesType['faded'];

package/PieChart/PieArcPlot.js

@@ -118,7 +118,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
     value: _propTypes.default.number.isRequired
   })).isRequired,
   /**
-   * Override the arc attibutes when it is faded.
+   * Override the arc attributes when it is faded.
    * @default { additionalRadius: -5 }
    */
   faded: _propTypes.default.shape({
@@ -131,7 +131,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
     paddingAngle: _propTypes.default.number
   }),
   /**
-   * Override the arc attibutes when it is highlighted.
+   * Override the arc attributes when it is highlighted.
    */
   highlighted: _propTypes.default.shape({
     additionalRadius: _propTypes.default.number,
@@ -148,7 +148,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
   }),
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   /**
-   * The radius between circle center and the begining of the arc.
+   * The radius between circle center and the beginning of the arc.
    * @default 0
    */
   innerRadius: _propTypes.default.number,

package/PieChart/PieChart.d.ts

@@ -9,11 +9,12 @@ import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { PiePlotProps, PiePlotSlotProps, PiePlotSlots } from './PiePlot';
 import { PieValueType } from '../models/seriesType/pie';
 import { ChartsAxisSlots, ChartsAxisSlotProps, ChartsXAxisProps, ChartsYAxisProps } from '../models/axis';
-export interface PieChartSlots extends ChartsAxisSlots, PiePlotSlots, ChartsLegendSlots, ChartsTooltipSlots {
+import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay/ChartsOverlay';
+export interface PieChartSlots extends ChartsAxisSlots, PiePlotSlots, ChartsLegendSlots, ChartsTooltipSlots, ChartsOverlaySlots {
 }
-export interface PieChartSlotProps extends ChartsAxisSlotProps, PiePlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps {
+export interface PieChartSlotProps extends ChartsAxisSlotProps, PiePlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps {
 }
-export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'leftAxis' | 'bottomAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
+export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'leftAxis' | 'bottomAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
     /**
      * Indicate which axis to display the bottom of the charts.
      * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.

package/PieChart/PieChart.js

@@ -16,6 +16,7 @@ var _ChartsLegend = require("../ChartsLegend");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _PiePlot = require("./PiePlot");
 var _useIsRTL = require("../internals/useIsRTL");
+var _ChartsOverlay = require("../ChartsOverlay/ChartsOverlay");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -68,7 +69,8 @@ function PieChart(props) {
     children,
     slots,
     slotProps,
-    onItemClick
+    onItemClick,
+    loading
   } = props;
   const isRTL = (0, _useIsRTL.useIsRTL)();
   const margin = (0, _extends2.default)({}, isRTL ? defaultRTLMargin : defaultMargin, marginProps);
@@ -107,10 +109,17 @@ function PieChart(props) {
       slotProps: slotProps,
       onItemClick: onItemClick,
       skipAnimation: skipAnimation
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
+      loading: loading,
+      slots: slots,
+      slotProps: slotProps
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend, {
       slots: slots,
       slotProps: slotProps
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlight)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip)), children]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlight)), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip, {
+      slots: slots,
+      slotProps: slotProps
+    })), children]
   });
 }
 process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
@@ -177,6 +186,10 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object
   }),
+  /**
+   * If `true`, a loading overlay is displayed.
+   */
+  loading: _propTypes.default.bool,
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.

package/ScatterChart/ScatterChart.d.ts

@@ -6,16 +6,17 @@ import { ScatterSeriesType } from '../models/seriesType/scatter';
 import { MakeOptional } from '../models/helpers';
 import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '../ChartsTooltip';
 import { ChartsLegendProps, ChartsLegendSlotProps, ChartsLegendSlots } from '../ChartsLegend';
+import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay/ChartsOverlay';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
 import { ChartsVoronoiHandlerProps } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';
 import { ChartsGridProps } from '../ChartsGrid';
 import { ZAxisContextProviderProps } from '../context/ZAxisContextProvider';
-export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsTooltipSlots {
+export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsTooltipSlots, ChartsOverlaySlots {
 }
-export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps {
+export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps {
 }
-export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ZAxisContextProviderProps, 'children' | 'dataset'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsVoronoiHandlerProps, 'onItemClick'> {
+export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ZAxisContextProviderProps, 'children' | 'dataset'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Omit<ChartsVoronoiHandlerProps, 'onItemClick'> {
     /**
      * The series to display in the scatter chart.
      * An array of [[ScatterSeriesType]] objects.

package/ScatterChart/ScatterChart.js

@@ -13,6 +13,7 @@ var _ResponsiveChartContainer = require("../ResponsiveChartContainer");
 var _ChartsAxis = require("../ChartsAxis");
 var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsLegend = require("../ChartsLegend");
+var _ChartsOverlay = require("../ChartsOverlay/ChartsOverlay");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _ChartsVoronoiHandler = require("../ChartsVoronoiHandler/ChartsVoronoiHandler");
 var _ChartsGrid = require("../ChartsGrid");
@@ -54,7 +55,8 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
     onItemClick,
     children,
     slots,
-    slotProps
+    slotProps,
+    loading
   } = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveChartContainer.ResponsiveChartContainer, {
     ref: ref,
@@ -87,13 +89,17 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
         slots: slots,
         slotProps: slotProps,
         onItemClick: disableVoronoi ? onItemClick : undefined
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
+        loading: loading,
+        slots: slots,
+        slotProps: slotProps
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend, {
         slots: slots,
         slotProps: slotProps
       })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({
         x: "none",
         y: "none"
-      }, axisHighlight)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({
+      }, axisHighlight)), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({
         trigger: "item"
       }, tooltip)), children]
     })
@@ -173,6 +179,10 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object
   }),
+  /**
+   * If `true`, a loading overlay is displayed.
+   */
+  loading: _propTypes.default.bool,
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.

package/context/SeriesContextProvider.js

@@ -60,7 +60,7 @@ const formatSeries = (series, colors, dataset) => {
     seriesGroups[type].seriesOrder.push(id);
   });
   const formattedSeries = {};
-  // Apply formater on a type group
+  // Apply formatter on a type group
   Object.keys(seriesTypeFormatter).forEach(type => {
     if (seriesGroups[type] !== undefined) {
       formattedSeries[type] = seriesTypeFormatter[type]?.(seriesGroups[type], dataset) ?? seriesGroups[type];

package/esm/BarChart/BarChart.js

@@ -12,6 +12,7 @@ import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { ChartsClipPath } from '../ChartsClipPath';
 import { ChartsGrid } from '../ChartsGrid';
 import { ChartsOnAxisClickHandler } from '../ChartsOnAxisClickHandler';
+import { ChartsOverlay } from '../ChartsOverlay/ChartsOverlay';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -49,7 +50,8 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     onAxisClick,
     children,
     slots,
-    slotProps
+    slotProps,
+    loading
   } = props;
   const id = useId();
   const clipPathId = `${id}-clip-path`;
@@ -90,14 +92,18 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     }), grid && /*#__PURE__*/_jsx(ChartsGrid, {
       vertical: grid.vertical,
       horizontal: grid.horizontal
-    }), /*#__PURE__*/_jsx("g", {
+    }), /*#__PURE__*/_jsxs("g", {
       clipPath: `url(#${clipPathId})`,
-      children: /*#__PURE__*/_jsx(BarPlot, {
+      children: [/*#__PURE__*/_jsx(BarPlot, {
         slots: slots,
         slotProps: slotProps,
         skipAnimation: skipAnimation,
         onItemClick: onItemClick
-      })
+      }), /*#__PURE__*/_jsx(ChartsOverlay, {
+        loading: loading,
+        slots: slots,
+        slotProps: slotProps
+      })]
     }), /*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
@@ -108,7 +114,7 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
       slots: slots,
       slotProps: slotProps
-    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, defaultizedAxisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, defaultizedAxisHighlight)), !loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
       slots: slots,
       slotProps: slotProps
     })), /*#__PURE__*/_jsx(ChartsClipPath, {
@@ -191,6 +197,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     slotProps: PropTypes.object,
     slots: PropTypes.object
   }),
+  /**
+   * If `true`, a loading overlay is displayed.
+   */
+  loading: PropTypes.bool,
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.

package/esm/BarChart/BarPlot.js

@@ -70,25 +70,25 @@ const useAggregatedData = () => {
       let baseScaleConfig;
       if (verticalLayout) {
         if (!isBandScaleConfig(xAxisConfig)) {
-          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} shoud be of type "band" to display the bar series of id "${seriesId}".`);
+          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should be of type "band" to display the bar series of id "${seriesId}".`);
         }
         if (xAxis[xAxisKey].data === undefined) {
-          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} shoud have data property.`);
+          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property.`);
         }
         baseScaleConfig = xAxisConfig;
         if (isBandScaleConfig(yAxisConfig) || isPointScaleConfig(yAxisConfig)) {
-          throw new Error(`MUI X Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} shoud be a continuous type to display the bar series of id "${seriesId}".`);
+          throw new Error(`MUI X Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} should be a continuous type to display the bar series of id "${seriesId}".`);
         }
       } else {
         if (!isBandScaleConfig(yAxisConfig)) {
-          throw new Error(`MUI X Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} shoud be of type "band" to display the bar series of id "${seriesId}".`);
+          throw new Error(`MUI X Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} should be of type "band" to display the bar series of id "${seriesId}".`);
         }
         if (yAxis[yAxisKey].data === undefined) {
-          throw new Error(`MUI X Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} shoud have data property.`);
+          throw new Error(`MUI X Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} should have data property.`);
         }
         baseScaleConfig = yAxisConfig;
         if (isBandScaleConfig(xAxisConfig) || isPointScaleConfig(xAxisConfig)) {
-          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} shoud be a continuous type to display the bar series of id "${seriesId}".`);
+          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should be a continuous type to display the bar series of id "${seriesId}".`);
         }
       }
       const xScale = xAxisConfig.scale;

package/esm/ChartsOverlay/ChartsLoadingOverlay.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["message"];
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { useDrawingArea } from '../hooks/useDrawingArea';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledText = styled('text')(({
+  theme
+}) => ({
+  stroke: 'none',
+  fill: theme.palette.text.primary,
+  shapeRendering: 'crispEdges',
+  textAnchor: 'middle',
+  dominantBaseline: 'middle'
+}));
+export function ChartsLoadingOverlay(props) {
+  const {
+      message
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    top,
+    left,
+    height,
+    width
+  } = useDrawingArea();
+  return /*#__PURE__*/_jsx(StyledText, _extends({
+    x: left + width / 2,
+    y: top + height / 2
+  }, other, {
+    children: message ?? 'Loading data ...'
+  }));
+}

package/esm/ChartsOverlay/ChartsNoDataOverlay.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["message"];
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { useDrawingArea } from '../hooks/useDrawingArea';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledText = styled('text')(({
+  theme
+}) => ({
+  stroke: 'none',
+  fill: theme.palette.text.primary,
+  shapeRendering: 'crispEdges',
+  textAnchor: 'middle',
+  dominantBaseline: 'middle'
+}));
+export function ChartsNoDataOverlay(props) {
+  const {
+      message
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    top,
+    left,
+    height,
+    width
+  } = useDrawingArea();
+  return /*#__PURE__*/_jsx(StyledText, _extends({
+    x: left + width / 2,
+    y: top + height / 2
+  }, other, {
+    children: message ?? 'No data to display'
+  }));
+}

package/esm/ChartsOverlay/ChartsOverlay.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { ChartsLoadingOverlay } from './ChartsLoadingOverlay';
+import { useSeries } from '../hooks/useSeries';
+import { ChartsNoDataOverlay } from './ChartsNoDataOverlay';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function useNoData() {
+  const seriesPerType = useSeries();
+  return Object.values(seriesPerType).every(seriesOfGivenType => {
+    if (!seriesOfGivenType) {
+      return true;
+    }
+    const {
+      series,
+      seriesOrder
+    } = seriesOfGivenType;
+    return seriesOrder.every(seriesId => series[seriesId].data.length === 0);
+  });
+}
+export function ChartsOverlay(props) {
+  const noData = useNoData();
+  if (props.loading) {
+    const LoadingOverlay = props.slots?.loadingOverlay ?? ChartsLoadingOverlay;
+    return /*#__PURE__*/_jsx(LoadingOverlay, _extends({}, props.slotProps?.loadingOverlay));
+  }
+  if (noData) {
+    const NoDataOverlay = props.slots?.noDataOverlay ?? ChartsNoDataOverlay;
+    return /*#__PURE__*/_jsx(NoDataOverlay, _extends({}, props.slotProps?.noDataOverlay));
+  }
+  return null;
+}

package/esm/ChartsOverlay/index.js

@@ -0,0 +1,3 @@
+export { ChartsOverlay } from './ChartsOverlay';
+export { ChartsLoadingOverlay } from './ChartsLoadingOverlay';
+export { ChartsNoDataOverlay } from './ChartsNoDataOverlay';

package/esm/ChartsReferenceLine/ChartsReferenceLine.js

@@ -52,7 +52,7 @@ process.env.NODE_ENV !== "production" ? ChartsReferenceLine.propTypes = {
    */
   lineStyle: PropTypes.object,
   /**
-   * Additional space arround the label in px.
+   * Additional space around the label in px.
    * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
    * @default 5
    */

package/esm/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -106,7 +106,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.propTypes = {
         value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired
       })
     }),
-    axisValue: PropTypes.any,
+    axisValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     dataIndex: PropTypes.number,
     series: PropTypes.arrayOf(PropTypes.object),

package/esm/ChartsTooltip/ChartsTooltip.js

@@ -113,7 +113,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * Component to override the tooltip content when triger is set to 'axis'.
+   * Component to override the tooltip content when trigger is set to 'axis'.
    * @deprecated Use slots.axisContent instead
    */
   axisContent: PropTypes.elementType,
@@ -122,7 +122,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
    */
   classes: PropTypes.object,
   /**
-   * Component to override the tooltip content when triger is set to 'item'.
+   * Component to override the tooltip content when trigger is set to 'item'.
    * @deprecated Use slots.itemContent instead
    */
   itemContent: PropTypes.elementType,