@mui/x-charts 7.3.1 → 7.3.2

package/internals/utils.js

@@ -13,7 +13,7 @@ function getSymbol(shape) {
   return symbolNames.indexOf(shape) || 0;
 }
 /**
- * Transform mouse event position to corrdinates inside the SVG.
+ * Transform mouse event position to coordinates inside the SVG.
  * @param svg The SVG element
  * @param event The mouseEvent to transform
  */

package/models/axis.d.ts

@@ -128,7 +128,7 @@ export interface ChartsXAxisProps extends ChartsAxisProps {
 }
 export type ScaleName = 'linear' | 'band' | 'point' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc';
 export type ContinuousScaleName = 'linear' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc';
-interface AxisScaleConfig {
+export interface AxisScaleConfig {
     band: {
         scaleType: 'band';
         scale: ScaleBand<number | Date | string>;

package/models/seriesType/bar.d.ts

@@ -8,7 +8,7 @@ export interface BarSeriesType extends CommonSeriesType<number | null>, Cartesia
      */
     data?: (number | null)[];
     /**
-     * The key used to retrive data from the dataset.
+     * The key used to retrieve data from the dataset.
      */
     dataKey?: string;
     label?: string;

package/models/seriesType/line.d.ts

@@ -31,7 +31,7 @@ export interface LineSeriesType extends CommonSeriesType<number | null>, Cartesi
      */
     data?: (number | null)[];
     /**
-     * The key used to retrive data from the dataset.
+     * The key used to retrieve data from the dataset.
      */
     dataKey?: string;
     stack?: string;

package/models/seriesType/pie.d.ts

@@ -20,7 +20,7 @@ export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Td
     type: 'pie';
     data: Tdata[];
     /**
-     * The radius between circle center and the begining of the arc.
+     * The radius between circle center and the beginning of the arc.
      * Can be a number (in px) or a string with a percentage such as '50%'.
      * The '100%' is the maximal radius that fit into the drawing area.
      * @default 0
@@ -90,7 +90,7 @@ export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Td
      */
     cy?: number | string;
     /**
-     * Override the arc attibutes when it is highlighted.
+     * Override the arc attributes when it is highlighted.
      */
     highlighted?: {
         /**
@@ -106,7 +106,7 @@ export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Td
         color?: string;
     };
     /**
-     * Override the arc attibutes when it is faded.
+     * Override the arc attributes when it is faded.
      */
     faded?: {
         /**
@@ -139,7 +139,7 @@ export interface DefaultizedPieSeriesType extends DefaultizedProps<PieSeriesType
  */
 export interface ComputedPieRadius {
     /**
-     * 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?: number;

package/modern/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/modern/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/modern/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/modern/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/modern/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/modern/ChartsOverlay/index.js

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

package/modern/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/modern/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/modern/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,

package/modern/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -100,7 +100,7 @@ process.env.NODE_ENV !== "production" ? DefaultChartsAxisTooltipContent.propType
   /**
    * The value associated to the current mouse position.
    */
-  axisValue: PropTypes.any.isRequired,
+  axisValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]),
   /**
    * Override or extend the styles applied to the component.
    */

package/modern/ChartsXAxis/ChartsXAxis.js

@@ -203,6 +203,13 @@ function ChartsXAxis(inProps) {
     },
     ownerState: {}
   });
+  const domain = xScale.domain();
+  if (domain.length === 0 || domain[0] === domain[1]) {
+    // Skip axis rendering if
+    // - the data is empty (for band and point axis)
+    // - No data is associated to the axis (other scale types)
+    return null;
+  }
   return /*#__PURE__*/_jsxs(AxisRoot, {
     transform: `translate(0, ${position === 'bottom' ? top + height : top})`,
     className: classes.root,

package/modern/ChartsYAxis/ChartsYAxis.js

@@ -138,6 +138,13 @@ function ChartsYAxis(inProps) {
     },
     ownerState: {}
   });
+  const domain = yScale.domain();
+  if (domain.length === 0 || domain[0] === domain[1]) {
+    // Skip axis rendering if
+    // - the data is empty (for band and point axis)
+    // - No data is associated to the axis (other scale types)
+    return null;
+  }
   return /*#__PURE__*/_jsxs(AxisRoot, {
     transform: `translate(${position === 'right' ? left + width : left}, 0)`,
     className: classes.root,

package/modern/Gauge/Gauge.js

@@ -84,7 +84,7 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    */
   height: PropTypes.number,
   /**
-   * The radius between circle center and the begining of the arc.
+   * The radius between circle center and the beginning of the arc.
    * Can be a number (in px) or a string with a percentage such as '50%'.
    * The '100%' is the maximal radius that fit into the drawing area.
    * @default '80%'

package/modern/Gauge/GaugeContainer.js

@@ -145,7 +145,7 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    */
   height: PropTypes.number,
   /**
-   * The radius between circle center and the begining of the arc.
+   * The radius between circle center and the beginning of the arc.
    * Can be a number (in px) or a string with a percentage such as '50%'.
    * The '100%' is the maximal radius that fit into the drawing area.
    * @default '80%'

package/modern/Gauge/GaugeProvider.js

@@ -48,7 +48,7 @@ export function GaugeProvider(props) {
   let cy = top + innerCy;
   const maxRadius = getAvailableRadius(innerCx, innerCy, width, height, ratios);
 
-  // If the center is not defined, after computation of the available radius, udpate the center to use the remaining space.
+  // If the center is not defined, after computation of the available radius, update the center to use the remaining space.
   if (cxParam === undefined) {
     const usedWidth = maxRadius * (ratios.maxX - ratios.minX);
     cx = left + (width - usedWidth) / 2 + ratios.cx * usedWidth;

package/modern/Gauge/utils.js

@@ -7,7 +7,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)
  */
@@ -20,9 +20,9 @@ export 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/modern/LineChart/LineChart.js

@@ -15,6 +15,7 @@ import { ChartsClipPath } from '../ChartsClipPath';
 import { LineHighlightPlot } from './LineHighlightPlot';
 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:
@@ -55,7 +56,8 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     children,
     slots,
     slotProps,
-    skipAnimation
+    skipAnimation,
+    loading
   } = props;
   const id = useId();
   const clipPathId = `${id}-clip-path`;
@@ -97,6 +99,10 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
         slotProps: slotProps,
         onItemClick: onLineClick,
         skipAnimation: skipAnimation
+      }), /*#__PURE__*/_jsx(ChartsOverlay, {
+        loading: loading,
+        slots: slots,
+        slotProps: slotProps
       })]
     }), /*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
@@ -116,7 +122,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
       slots: slots,
       slotProps: slotProps
-    })), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+    })), !loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
       slots: slots,
       slotProps: slotProps
     })), /*#__PURE__*/_jsx(ChartsClipPath, {
@@ -197,6 +203,10 @@ process.env.NODE_ENV !== "production" ? LineChart.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/modern/PieChart/PieArcLabel.js

@@ -39,7 +39,7 @@ const PieArcLabelRoot = styled(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/modern/PieChart/PieArcLabelPlot.js

@@ -129,7 +129,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
     value: PropTypes.number.isRequired
   })).isRequired,
   /**
-   * Override the arc attibutes when it is faded.
+   * Override the arc attributes when it is faded.
    * @default { additionalRadius: -5 }
    */
   faded: PropTypes.shape({
@@ -142,7 +142,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
     paddingAngle: PropTypes.number
   }),
   /**
-   * Override the arc attibutes when it is highlighted.
+   * Override the arc attributes when it is highlighted.
    */
   highlighted: PropTypes.shape({
     additionalRadius: PropTypes.number,
@@ -159,7 +159,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
   }),
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.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.number,

package/modern/PieChart/PieArcPlot.js

@@ -109,7 +109,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
     value: PropTypes.number.isRequired
   })).isRequired,
   /**
-   * Override the arc attibutes when it is faded.
+   * Override the arc attributes when it is faded.
    * @default { additionalRadius: -5 }
    */
   faded: PropTypes.shape({
@@ -122,7 +122,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
     paddingAngle: PropTypes.number
   }),
   /**
-   * Override the arc attibutes when it is highlighted.
+   * Override the arc attributes when it is highlighted.
    */
   highlighted: PropTypes.shape({
     additionalRadius: PropTypes.number,
@@ -139,7 +139,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
   }),
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.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.number,

package/modern/PieChart/PieChart.js

@@ -9,6 +9,7 @@ import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { PiePlot } from './PiePlot';
 import { useIsRTL } from '../internals/useIsRTL';
+import { ChartsOverlay } from '../ChartsOverlay/ChartsOverlay';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultMargin = {
   top: 5,
@@ -59,7 +60,8 @@ function PieChart(props) {
     children,
     slots,
     slotProps,
-    onItemClick
+    onItemClick,
+    loading
   } = props;
   const isRTL = useIsRTL();
   const margin = _extends({}, isRTL ? defaultRTLMargin : defaultMargin, marginProps);
@@ -98,10 +100,17 @@ function PieChart(props) {
       slotProps: slotProps,
       onItemClick: onItemClick,
       skipAnimation: skipAnimation
+    }), /*#__PURE__*/_jsx(ChartsOverlay, {
+      loading: loading,
+      slots: slots,
+      slotProps: slotProps
     }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
       slots: slots,
       slotProps: slotProps
-    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
+    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), !loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+      slots: slots,
+      slotProps: slotProps
+    })), children]
   });
 }
 process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
@@ -168,6 +177,10 @@ process.env.NODE_ENV !== "production" ? PieChart.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/modern/ScatterChart/ScatterChart.js

@@ -6,6 +6,7 @@ import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
 import { ChartsAxis } from '../ChartsAxis';
 import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
+import { ChartsOverlay } from '../ChartsOverlay/ChartsOverlay';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { ChartsVoronoiHandler } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';
 import { ChartsGrid } from '../ChartsGrid';
@@ -45,7 +46,8 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props,
     onItemClick,
     children,
     slots,
-    slotProps
+    slotProps,
+    loading
   } = props;
   return /*#__PURE__*/_jsx(ResponsiveChartContainer, {
     ref: ref,
@@ -78,13 +80,17 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props,
         slots: slots,
         slotProps: slotProps,
         onItemClick: disableVoronoi ? onItemClick : undefined
+      }), /*#__PURE__*/_jsx(ChartsOverlay, {
+        loading: loading,
+        slots: slots,
+        slotProps: slotProps
       }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
         slots: slots,
         slotProps: slotProps
       })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({
         x: "none",
         y: "none"
-      }, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({
+      }, axisHighlight)), !loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({
         trigger: "item"
       }, tooltip)), children]
     })
@@ -164,6 +170,10 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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/modern/context/SeriesContextProvider.js

@@ -50,7 +50,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/modern/hooks/useReducedMotion.js

@@ -5,7 +5,7 @@ import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web';
  * set skipAnimations to the value of the user's
  * `prefers-reduced-motion` query.
  *
- * The return value, post-effect, is the value of their prefered setting
+ * The return value, post-effect, is the value of their preferred setting
  */
 export const useReducedMotion = () => {
   // Taken from: https://github.com/pmndrs/react-spring/blob/02ec877bbfab0df46da0e4a47d5f68d3e731206a/packages/shared/src/hooks/useReducedMotion.ts#L13

package/modern/hooks/useScale.js

@@ -3,7 +3,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { isBandScale } from '../internals/isBandScale';
 /**
  * For a given scale return a function that map value to their position.
- * Usefull when dealing with specific scale such as band.
+ * Useful when dealing with specific scale such as band.
  * @param scale The scale to use
  * @returns (value: any) => number
  */