@mui/x-charts 7.3.1 → 7.4.0

package/esm/BarChart/BarPlot.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["skipAnimation", "onItemClick"];
+const _excluded = ["skipAnimation", "onItemClick", "borderRadius"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
@@ -10,6 +10,8 @@ import { BarElement } from './BarElement';
 import { isBandScaleConfig, isPointScaleConfig } from '../models/axis';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import getColor from './getColor';
+import { useChartId } from '../hooks';
+import { BarClipPath } from './BarClipPath';
 
 /**
  * Solution of the equations
@@ -20,7 +22,7 @@ import getColor from './getColor';
  * @param gapRatio The ratio of the gap between bars over the bar width.
  * @returns The bar width and the offset between bars.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getBandSize({
   bandWidth: W,
   numberOfGroups: N,
@@ -46,6 +48,7 @@ const useAggregatedData = () => {
     seriesOrder: []
   };
   const axisData = React.useContext(CartesianContext);
+  const chartId = useChartId();
   const {
     series,
     stackingGroups
@@ -58,6 +61,7 @@ const useAggregatedData = () => {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
+  const masks = {};
   const data = stackingGroups.flatMap(({
     ids: groupIds
   }, groupIndex) => {
@@ -70,25 +74,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;
@@ -111,7 +115,8 @@ const useAggregatedData = () => {
         const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
         const minValueCoord = Math.round(Math.min(...valueCoordinates));
         const maxValueCoord = Math.round(Math.max(...valueCoordinates));
-        return {
+        const stackId = series[seriesId].stack;
+        const result = {
           seriesId,
           dataIndex,
           layout: series[seriesId].layout,
@@ -122,14 +127,41 @@ const useAggregatedData = () => {
           height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
           width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
           color: colorGetter(dataIndex),
-          highlightScope: series[seriesId].highlightScope
+          highlightScope: series[seriesId].highlightScope,
+          value: series[seriesId].data[dataIndex],
+          maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
         };
+        if (!masks[result.maskId]) {
+          masks[result.maskId] = {
+            id: result.maskId,
+            width: 0,
+            height: 0,
+            hasNegative: false,
+            hasPositive: false,
+            layout: result.layout,
+            xOrigin: xScale(0),
+            yOrigin: yScale(0),
+            x: 0,
+            y: 0
+          };
+        }
+        const mask = masks[result.maskId];
+        mask.width = result.layout === 'vertical' ? result.width : mask.width + result.width;
+        mask.height = result.layout === 'vertical' ? mask.height + result.height : result.height;
+        mask.x = Math.min(mask.x === 0 ? Infinity : mask.x, result.x);
+        mask.y = Math.min(mask.y === 0 ? Infinity : mask.y, result.y);
+        mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
+        mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
+        return result;
       });
     });
   });
-  return data;
+  return {
+    completedData: data,
+    masksData: Object.values(masks)
+  };
 };
-const getOutStyle = ({
+const leaveStyle = ({
   layout,
   yOrigin,
   x,
@@ -148,7 +180,7 @@ const getOutStyle = ({
   height,
   width: 0
 });
-const getInStyle = ({
+const enterStyle = ({
   x,
   width,
   y,
@@ -172,41 +204,77 @@ const getInStyle = ({
  * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
  */
 function BarPlot(props) {
-  const completedData = useAggregatedData();
+  const {
+    completedData,
+    masksData
+  } = useAggregatedData();
   const {
       skipAnimation,
-      onItemClick
+      onItemClick,
+      borderRadius
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const transition = useTransition(completedData, {
     keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
-    from: getOutStyle,
-    leave: getOutStyle,
-    enter: getInStyle,
-    update: getInStyle,
+    from: leaveStyle,
+    leave: leaveStyle,
+    enter: enterStyle,
+    update: enterStyle,
+    immediate: skipAnimation
+  });
+  const maskTransition = useTransition(masksData, {
+    keys: v => v.id,
+    from: leaveStyle,
+    leave: leaveStyle,
+    enter: enterStyle,
+    update: enterStyle,
     immediate: skipAnimation
   });
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: transition((style, {
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [maskTransition((style, {
+      id,
+      hasPositive,
+      hasNegative,
+      layout
+    }) => {
+      return /*#__PURE__*/_jsx(BarClipPath, {
+        maskId: id,
+        borderRadius: borderRadius,
+        hasNegative: hasNegative,
+        hasPositive: hasPositive,
+        layout: layout,
+        style: style
+      });
+    }), transition((style, {
       seriesId,
       dataIndex,
       color,
-      highlightScope
-    }) => /*#__PURE__*/_jsx(BarElement, _extends({
-      id: seriesId,
-      dataIndex: dataIndex,
-      highlightScope: highlightScope,
-      color: color
-    }, other, {
-      onClick: onItemClick && (event => {
-        onItemClick(event, {
-          type: 'bar',
-          seriesId,
-          dataIndex
-        });
-      }),
-      style: style
-    })))
+      highlightScope,
+      maskId
+    }) => {
+      const barElement = /*#__PURE__*/_jsx(BarElement, _extends({
+        id: seriesId,
+        dataIndex: dataIndex,
+        color: color,
+        highlightScope: highlightScope
+      }, other, {
+        onClick: onItemClick && (event => {
+          onItemClick(event, {
+            type: 'bar',
+            seriesId,
+            dataIndex
+          });
+        }),
+        style: style
+      }));
+      if (!borderRadius || borderRadius <= 0) {
+        return barElement;
+      }
+      return /*#__PURE__*/_jsx("g", {
+        clipPath: `url(#${maskId})`,
+        children: barElement
+      });
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
@@ -214,6 +282,10 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Defines the border radius of the bar element.
+   */
+  borderRadius: PropTypes.number,
   /**
    * Callback fired when a bar item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/esm/BarChart/getRadius.js

@@ -0,0 +1,30 @@
+/**
+ * Returns if the corner should have a radius or not based on the layout and the data.
+ * @param {GetRadiusCorner} corner The corner to check.
+ * @param {GetRadiusData} cornerData The data for the corner.
+ * @returns {number} The radius for the corner.
+ */
+export const getRadius = (corner, {
+  hasNegative,
+  hasPositive,
+  borderRadius,
+  layout
+}) => {
+  if (!borderRadius) {
+    return 0;
+  }
+  const isVertical = layout === 'vertical';
+  if (corner === 'top-left' && (isVertical && hasPositive || !isVertical && hasNegative)) {
+    return borderRadius;
+  }
+  if (corner === 'top-right' && (isVertical && hasPositive || !isVertical && hasPositive)) {
+    return borderRadius;
+  }
+  if (corner === 'bottom-right' && (isVertical && hasNegative || !isVertical && hasPositive)) {
+    return borderRadius;
+  }
+  if (corner === 'bottom-left' && (isVertical && hasNegative || !isVertical && hasNegative)) {
+    return borderRadius;
+  }
+  return 0;
+};

package/esm/BarChart/types.js

@@ -0,0 +1 @@
+export {};

package/esm/ChartsGrid/ChartsGrid.js

@@ -4,7 +4,7 @@ const _excluded = ["vertical", "horizontal"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { useTicks } from '../hooks/useTicks';
 import { getChartsGridUtilityClass, chartsGridClasses } from './chartsGridClasses';
@@ -12,15 +12,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridRoot = styled('g', {
   name: 'MuiChartsGrid',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  overridesResolver: (props, styles) => [{
+    [`&.${chartsGridClasses.verticalLine}`]: styles.verticalLine
+  }, {
+    [`&.${chartsGridClasses.horizontalLine}`]: styles.horizontalLine
+  }, styles.root]
+})({});
+const GridLine = styled('line', {
+  name: 'MuiChartsGrid',
+  slot: 'Line',
+  overridesResolver: (props, styles) => styles.line
 })(({
   theme
 }) => ({
-  [`& .${chartsGridClasses.line}`]: {
-    stroke: (theme.vars || theme).palette.divider,
-    shapeRendering: 'crispEdges',
-    strokeWidth: 1
-  }
+  stroke: (theme.vars || theme).palette.divider,
+  shapeRendering: 'crispEdges',
+  strokeWidth: 1
 }));
 const useUtilityClasses = ({
   classes
@@ -42,18 +49,22 @@ const useUtilityClasses = ({
  * - [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
  */
 function ChartsGrid(props) {
+  const themeProps = useThemeProps({
+    props,
+    name: 'MuiChartsGrid'
+  });
   const {
       vertical,
       horizontal
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    } = themeProps,
+    other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const {
     xAxis,
     xAxisIds,
     yAxis,
     yAxisIds
   } = React.useContext(CartesianContext);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(themeProps);
   const horizontalAxisId = yAxisIds[0];
   const verticalAxisId = xAxisIds[0];
   const {
@@ -81,7 +92,7 @@ function ChartsGrid(props) {
     children: [vertical && xTicks.map(({
       formattedValue,
       offset
-    }) => /*#__PURE__*/_jsx("line", {
+    }) => /*#__PURE__*/_jsx(GridLine, {
       y1: yScale.range()[0],
       y2: yScale.range()[1],
       x1: offset,
@@ -90,7 +101,7 @@ function ChartsGrid(props) {
     }, `vertical-${formattedValue}`)), horizontal && yTicks.map(({
       formattedValue,
       offset
-    }) => /*#__PURE__*/_jsx("line", {
+    }) => /*#__PURE__*/_jsx(GridLine, {
       y1: offset,
       y2: offset,
       x1: xScale.range()[0],

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,

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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) {