@mui/x-charts 7.3.1 → 7.4.0

package/Gauge/GaugeProvider.js

@@ -59,7 +59,7 @@ function GaugeProvider(props) {
   let cy = top + innerCy;
   const maxRadius = (0, _utils2.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/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:
@@ -45,11 +46,13 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     rightAxis,
     bottomAxis,
     skipAnimation,
+    borderRadius,
     onItemClick,
     onAxisClick,
     children,
     slots,
-    slotProps
+    slotProps,
+    loading
   } = props;
   const id = useId();
   const clipPathId = `${id}-clip-path`;
@@ -90,14 +93,19 @@ 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
-      })
+        onItemClick: onItemClick,
+        borderRadius: borderRadius
+      }), /*#__PURE__*/_jsx(ChartsOverlay, {
+        loading: loading,
+        slots: slots,
+        slotProps: slotProps
+      })]
     }), /*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
@@ -108,7 +116,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, {
@@ -131,6 +139,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
   }),
+  /**
+   * Defines the border radius of the bar element.
+   */
+  borderRadius: PropTypes.number,
   /**
    * Indicate which axis to display the bottom of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
@@ -191,6 +203,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/BarClipPath.js

@@ -0,0 +1,42 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["style", "maskId"];
+import * as React from 'react';
+import { animated } from '@react-spring/web';
+import { getRadius } from './getRadius';
+import { jsx as _jsx } from "react/jsx-runtime";
+const buildInset = corners => `inset(0px round ${corners.topLeft}px ${corners.topRight}px ${corners.bottomRight}px ${corners.bottomLeft}px)`;
+function BarClipRect(props) {
+  const radiusData = props.ownerState;
+  return /*#__PURE__*/_jsx(animated.rect, {
+    style: _extends({}, props.style, {
+      clipPath: (props.ownerState.layout === 'vertical' ? props.style?.height : props.style?.width).to(value => buildInset({
+        topLeft: Math.min(value, getRadius('top-left', radiusData)),
+        topRight: Math.min(value, getRadius('top-right', radiusData)),
+        bottomRight: Math.min(value, getRadius('bottom-right', radiusData)),
+        bottomLeft: Math.min(value, getRadius('bottom-left', radiusData))
+      }))
+    })
+  });
+}
+/**
+ * @ignore - internal component.
+ */
+function BarClipPath(props) {
+  const {
+      style,
+      maskId
+    } = props,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  if (!props.borderRadius || props.borderRadius <= 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("clipPath", {
+    id: maskId,
+    children: /*#__PURE__*/_jsx(BarClipRect, {
+      ownerState: rest,
+      style: style
+    })
+  });
+}
+export { BarClipPath };