@mui/x-charts 7.3.1 → 7.4.0

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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
  */

package/esm/hooks/useTicks.js

@@ -59,6 +59,10 @@ export function useTicks(options) {
         labelOffset: 0
       }));
     }
+    if (scale.domain().length === 0 || scale.domain()[0] === scale.domain()[1]) {
+      // The axis should not be visible, so ticks should also be hidden.
+      return [];
+    }
     const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
     return ticks.map(value => ({
       value,

package/esm/internals/components/ChartsAxesGradients/ChartsAxesGradients.js

@@ -9,7 +9,7 @@ export function useChartGradient() {
   const {
     chartId
   } = React.useContext(DrawingContext);
-  return React.useCallback((axisId, direction) => `${chartId}-graient-${direction}-${axisId}`, [chartId]);
+  return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}`, [chartId]);
 }
 export function ChartsAxesGradients() {
   const {
@@ -40,7 +40,7 @@ export function ChartsAxesGradients() {
       } = yAxis[axisId];
       if (colorMap?.type === 'piecewise') {
         return /*#__PURE__*/_jsx(ChartsPiecewiseGradient, {
-          isReveresed: !reverse,
+          isReversed: !reverse,
           scale: scale,
           colorMap: colorMap,
           size: svgHeight,
@@ -50,7 +50,7 @@ export function ChartsAxesGradients() {
       }
       if (colorMap?.type === 'continuous') {
         return /*#__PURE__*/_jsx(ChartsContinuousGradient, {
-          isReveresed: !reverse,
+          isReversed: !reverse,
           scale: scale,
           colorScale: colorScale,
           colorMap: colorMap,
@@ -70,7 +70,7 @@ export function ChartsAxesGradients() {
       } = xAxis[axisId];
       if (colorMap?.type === 'piecewise') {
         return /*#__PURE__*/_jsx(ChartsPiecewiseGradient, {
-          isReveresed: reverse,
+          isReversed: reverse,
           scale: scale,
           colorMap: colorMap,
           size: svgWidth,
@@ -80,7 +80,7 @@ export function ChartsAxesGradients() {
       }
       if (colorMap?.type === 'continuous') {
         return /*#__PURE__*/_jsx(ChartsContinuousGradient, {
-          isReveresed: reverse,
+          isReversed: reverse,
           scale: scale,
           colorScale: colorScale,
           colorMap: colorMap,

package/esm/internals/components/ChartsAxesGradients/ChartsContinuousGradient.js

@@ -4,7 +4,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const PX_PRECISION = 10;
 export default function ChartsContinuousGradient(props) {
   const {
-    isReveresed,
+    isReversed,
     gradientId,
     size,
     direction,
@@ -26,7 +26,7 @@ export default function ChartsContinuousGradient(props) {
     x2: "0",
     y1: "0",
     y2: "0",
-    [`${direction}${isReveresed ? 1 : 2}`]: `${size}px`,
+    [`${direction}${isReversed ? 1 : 2}`]: `${size}px`,
     gradientUnits: "userSpaceOnUse" // Use the SVG coordinate instead of the component ones.
     ,
     children: Array.from({
@@ -40,7 +40,7 @@ export default function ChartsContinuousGradient(props) {
       if (x === undefined) {
         return null;
       }
-      const offset = isReveresed ? 1 - x / size : x / size;
+      const offset = isReversed ? 1 - x / size : x / size;
       const color = colorScale(value);
       if (color === null) {
         return null;

package/esm/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function ChartsPiecewiseGradient(props) {
   const {
-    isReveresed,
+    isReversed,
     gradientId,
     size,
     direction,
@@ -15,7 +15,7 @@ export default function ChartsPiecewiseGradient(props) {
     x2: "0",
     y1: "0",
     y2: "0",
-    [`${direction}${isReveresed ? 1 : 2}`]: `${size}px`,
+    [`${direction}${isReversed ? 1 : 2}`]: `${size}px`,
     gradientUnits: "userSpaceOnUse" // Use the SVG coordinate instead of the component ones.
     ,
     children: colorMap.thresholds.map((threshold, index) => {
@@ -23,7 +23,7 @@ export default function ChartsPiecewiseGradient(props) {
       if (x === undefined) {
         return null;
       }
-      const offset = isReveresed ? 1 - x / size : x / size;
+      const offset = isReversed ? 1 - x / size : x / size;
       return /*#__PURE__*/_jsxs(React.Fragment, {
         children: [/*#__PURE__*/_jsx("stop", {
           offset: offset,

package/esm/internals/utils.js

@@ -4,7 +4,7 @@ export 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/hooks/useReducedMotion.d.ts

@@ -3,6 +3,6 @@
  * 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 declare const useReducedMotion: () => void;

package/hooks/useReducedMotion.js

@@ -10,7 +10,7 @@ var _web = require("@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
  */
 const useReducedMotion = () => {
   // Taken from: https://github.com/pmndrs/react-spring/blob/02ec877bbfab0df46da0e4a47d5f68d3e731206a/packages/shared/src/hooks/useReducedMotion.ts#L13

package/hooks/useScale.d.ts

@@ -1,10 +1,10 @@
-import { D3Scale } from '../models/axis';
+import { AxisScaleConfig, D3Scale, ScaleName } from '../models/axis';
 /**
  * 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
  */
 export declare function getValueToPositionMapper(scale: D3Scale): (value: any) => number;
-export declare function useXScale(identifier?: number | string): import("d3-scale").ScaleBand<string | number | Date> | import("d3-scale").ScalePoint<string | number | Date> | import("d3-scale").ScaleLogarithmic<number, number, never> | import("d3-scale").ScalePower<number, number, never> | import("d3-scale").ScaleTime<number, number, never> | import("d3-scale").ScaleLinear<number, number, never>;
-export declare function useYScale(identifier?: number | string): import("d3-scale").ScaleBand<string | number | Date> | import("d3-scale").ScalePoint<string | number | Date> | import("d3-scale").ScaleLogarithmic<number, number, never> | import("d3-scale").ScalePower<number, number, never> | import("d3-scale").ScaleTime<number, number, never> | import("d3-scale").ScaleLinear<number, number, never>;
+export declare function useXScale<S extends ScaleName>(identifier?: number | string): AxisScaleConfig[S]['scale'];
+export declare function useYScale<S extends ScaleName>(identifier?: number | string): AxisScaleConfig[S]['scale'];

package/hooks/useScale.js

@@ -13,7 +13,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 /**
  * 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
  */

package/hooks/useTicks.js

@@ -68,6 +68,10 @@ function useTicks(options) {
         labelOffset: 0
       }));
     }
+    if (scale.domain().length === 0 || scale.domain()[0] === scale.domain()[1]) {
+      // The axis should not be visible, so ticks should also be hidden.
+      return [];
+    }
     const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
     return ticks.map(value => ({
       value,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.3.1
+ * @mui/x-charts v7.4.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/ChartsAxesGradients/ChartsAxesGradients.js

@@ -19,7 +19,7 @@ function useChartGradient() {
   const {
     chartId
   } = React.useContext(_DrawingProvider.DrawingContext);
-  return React.useCallback((axisId, direction) => `${chartId}-graient-${direction}-${axisId}`, [chartId]);
+  return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}`, [chartId]);
 }
 function ChartsAxesGradients() {
   const {
@@ -50,7 +50,7 @@ function ChartsAxesGradients() {
       } = yAxis[axisId];
       if (colorMap?.type === 'piecewise') {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsPiecewiseGradient.default, {
-          isReveresed: !reverse,
+          isReversed: !reverse,
           scale: scale,
           colorMap: colorMap,
           size: svgHeight,
@@ -60,7 +60,7 @@ function ChartsAxesGradients() {
       }
       if (colorMap?.type === 'continuous') {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsContinuousGradient.default, {
-          isReveresed: !reverse,
+          isReversed: !reverse,
           scale: scale,
           colorScale: colorScale,
           colorMap: colorMap,
@@ -80,7 +80,7 @@ function ChartsAxesGradients() {
       } = xAxis[axisId];
       if (colorMap?.type === 'piecewise') {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsPiecewiseGradient.default, {
-          isReveresed: reverse,
+          isReversed: reverse,
           scale: scale,
           colorMap: colorMap,
           size: svgWidth,
@@ -90,7 +90,7 @@ function ChartsAxesGradients() {
       }
       if (colorMap?.type === 'continuous') {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsContinuousGradient.default, {
-          isReveresed: reverse,
+          isReversed: reverse,
           scale: scale,
           colorScale: colorScale,
           colorMap: colorMap,

package/internals/components/ChartsAxesGradients/ChartsContinuousGradient.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ContinuousColorConfig } from '../../../models/colorMapping';
 type ChartsContinuousGradientProps = {
-    isReveresed?: boolean;
+    isReversed?: boolean;
     gradientId: string;
     size: number;
     direction: 'x' | 'y';

package/internals/components/ChartsAxesGradients/ChartsContinuousGradient.js

@@ -12,7 +12,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const PX_PRECISION = 10;
 function ChartsContinuousGradient(props) {
   const {
-    isReveresed,
+    isReversed,
     gradientId,
     size,
     direction,
@@ -34,7 +34,7 @@ function ChartsContinuousGradient(props) {
     x2: "0",
     y1: "0",
     y2: "0",
-    [`${direction}${isReveresed ? 1 : 2}`]: `${size}px`,
+    [`${direction}${isReversed ? 1 : 2}`]: `${size}px`,
     gradientUnits: "userSpaceOnUse" // Use the SVG coordinate instead of the component ones.
     ,
     children: Array.from({
@@ -48,7 +48,7 @@ function ChartsContinuousGradient(props) {
       if (x === undefined) {
         return null;
       }
-      const offset = isReveresed ? 1 - x / size : x / size;
+      const offset = isReversed ? 1 - x / size : x / size;
       const color = colorScale(value);
       if (color === null) {
         return null;

package/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PiecewiseColorConfig } from '../../../models/colorMapping';
 type ChartsPiecewiseGradientProps = {
-    isReveresed?: boolean;
+    isReversed?: boolean;
     gradientId: string;
     size: number;
     direction: 'x' | 'y';

package/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.js

@@ -10,7 +10,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 function ChartsPiecewiseGradient(props) {
   const {
-    isReveresed,
+    isReversed,
     gradientId,
     size,
     direction,
@@ -23,7 +23,7 @@ function ChartsPiecewiseGradient(props) {
     x2: "0",
     y1: "0",
     y2: "0",
-    [`${direction}${isReveresed ? 1 : 2}`]: `${size}px`,
+    [`${direction}${isReversed ? 1 : 2}`]: `${size}px`,
     gradientUnits: "userSpaceOnUse" // Use the SVG coordinate instead of the component ones.
     ,
     children: colorMap.thresholds.map((threshold, index) => {
@@ -31,7 +31,7 @@ function ChartsPiecewiseGradient(props) {
       if (x === undefined) {
         return null;
       }
-      const offset = isReveresed ? 1 - x / size : x / size;
+      const offset = isReversed ? 1 - x / size : x / size;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
           offset: offset,

package/internals/utils.d.ts

@@ -5,7 +5,7 @@ type Without<T, U> = {
 };
 export type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
 /**
- * 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/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:
@@ -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.