@mui/x-charts 7.9.0 → 7.11.0

package/esm/ChartsLegend/LegendPerItem.js

@@ -0,0 +1,141 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["rotate", "dominantBaseline"];
+import * as React from 'react';
+import { NoSsr } from '@mui/base/NoSsr';
+import { useTheme, styled } from '@mui/material/styles';
+import { ChartsText } from '../ChartsText';
+import { getWordsByLines } from '../internals/getWordsByLines';
+import { legendItemPlacements } from './legendItemsPlacement';
+import { useDrawingArea } from '../hooks/useDrawingArea';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ChartsLegendRoot = styled('g', {
+  name: 'MuiChartsLegend',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({});
+/**
+ * Transforms number or partial padding object to a defaultized padding object.
+ */
+const getStandardizedPadding = padding => {
+  if (typeof padding === 'number') {
+    return {
+      left: padding,
+      right: padding,
+      top: padding,
+      bottom: padding
+    };
+  }
+  return _extends({
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0
+  }, padding);
+};
+
+/**
+ * Internal component to display an array of items as a legend.
+ * Used for series legend, and threshold color legend.
+ * @ignore - Do not document
+ */
+export function LegendPerItem(props) {
+  const {
+    hidden,
+    position,
+    direction,
+    itemsToDisplay,
+    classes,
+    itemMarkWidth = 20,
+    itemMarkHeight = 20,
+    markGap = 5,
+    itemGap = 10,
+    padding: paddingProps = 10,
+    labelStyle: inLabelStyle
+  } = props;
+  const theme = useTheme();
+  const isRTL = theme.direction === 'rtl';
+  const drawingArea = useDrawingArea();
+  const labelStyle = React.useMemo(() => _extends({}, theme.typography.subtitle1, {
+    color: 'inherit',
+    dominantBaseline: 'central',
+    textAnchor: 'start',
+    fill: (theme.vars || theme).palette.text.primary,
+    lineHeight: 1
+  }, inLabelStyle),
+  // To say to TS that the dominantBaseline and textAnchor are correct
+  [inLabelStyle, theme]);
+  const padding = React.useMemo(() => getStandardizedPadding(paddingProps), [paddingProps]);
+  const getItemSpace = React.useCallback((label, inStyle = {}) => {
+    const style = _objectWithoutPropertiesLoose(inStyle, _excluded);
+    const linesSize = getWordsByLines({
+      style,
+      needsComputation: true,
+      text: label
+    });
+    const innerSize = {
+      innerWidth: itemMarkWidth + markGap + Math.max(...linesSize.map(size => size.width)),
+      innerHeight: Math.max(itemMarkHeight, linesSize.length * linesSize[0].height)
+    };
+    return _extends({}, innerSize, {
+      outerWidth: innerSize.innerWidth + itemGap,
+      outerHeight: innerSize.innerHeight + itemGap
+    });
+  }, [itemGap, itemMarkHeight, itemMarkWidth, markGap]);
+  const totalWidth = drawingArea.left + drawingArea.width + drawingArea.right;
+  const totalHeight = drawingArea.top + drawingArea.height + drawingArea.bottom;
+  const availableWidth = totalWidth - padding.left - padding.right;
+  const availableHeight = totalHeight - padding.top - padding.bottom;
+  const [itemsWithPosition, legendWidth, legendHeight] = React.useMemo(() => legendItemPlacements(itemsToDisplay, getItemSpace, labelStyle, direction, availableWidth, availableHeight, itemGap), [itemsToDisplay, getItemSpace, labelStyle, direction, availableWidth, availableHeight, itemGap]);
+  const gapX = React.useMemo(() => {
+    switch (position.horizontal) {
+      case 'left':
+        return padding.left;
+      case 'right':
+        return totalWidth - padding.right - legendWidth;
+      default:
+        return (totalWidth - legendWidth) / 2;
+    }
+  }, [position.horizontal, padding.left, padding.right, totalWidth, legendWidth]);
+  const gapY = React.useMemo(() => {
+    switch (position.vertical) {
+      case 'top':
+        return padding.top;
+      case 'bottom':
+        return totalHeight - padding.bottom - legendHeight;
+      default:
+        return (totalHeight - legendHeight) / 2;
+    }
+  }, [position.vertical, padding.top, padding.bottom, totalHeight, legendHeight]);
+  if (hidden) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(NoSsr, {
+    children: /*#__PURE__*/_jsx(ChartsLegendRoot, {
+      className: classes?.root,
+      children: itemsWithPosition.map(({
+        id,
+        label,
+        color,
+        positionX,
+        positionY
+      }) => /*#__PURE__*/_jsxs("g", {
+        className: classes?.series,
+        transform: `translate(${gapX + (isRTL ? legendWidth - positionX : positionX)} ${gapY + positionY})`,
+        children: [/*#__PURE__*/_jsx("rect", {
+          className: classes?.mark,
+          x: isRTL ? -itemMarkWidth : 0,
+          y: -itemMarkHeight / 2,
+          width: itemMarkWidth,
+          height: itemMarkHeight,
+          fill: color
+        }), /*#__PURE__*/_jsx(ChartsText, {
+          style: labelStyle,
+          text: label,
+          x: (isRTL ? -1 : 1) * (itemMarkWidth + markGap),
+          y: 0
+        })]
+      }, id))
+    })
+  });
+}

package/esm/ChartsLegend/PiecewiseColorLegend.js

@@ -0,0 +1,161 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["axisDirection", "axisId", "hideFirst", "hideLast", "labelFormatter"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useAxis } from './useAxis';
+import { LegendPerItem } from './LegendPerItem';
+import { notNull } from '../internals/notNull';
+import { jsx as _jsx } from "react/jsx-runtime";
+function defaultLabelFormatter(params) {
+  if (params.min === null) {
+    return `<${params.formattedMax}`;
+  }
+  if (params.max === null) {
+    return `>${params.formattedMin}`;
+  }
+  return `${params.formattedMin}-${params.formattedMax}`;
+}
+function PiecewiseColorLegend(props) {
+  const {
+      axisDirection,
+      axisId,
+      hideFirst,
+      hideLast,
+      labelFormatter = defaultLabelFormatter
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const axisItem = useAxis({
+    axisDirection,
+    axisId
+  });
+  const colorMap = axisItem?.colorMap;
+  if (!colorMap || !colorMap.type || colorMap.type !== 'piecewise') {
+    return null;
+  }
+  const valueFormatter = v => axisItem.valueFormatter?.(v, {
+    location: 'legend'
+  }) ?? v.toLocaleString();
+  const formattedLabels = colorMap.thresholds.map(valueFormatter);
+  const itemsToDisplay = colorMap.colors.map((color, index) => {
+    const isFirst = index === 0;
+    const isLast = index === colorMap.colors.length - 1;
+    if (hideFirst && isFirst || hideLast && isLast) {
+      return null;
+    }
+    const label = labelFormatter(_extends({}, index === 0 ? {
+      min: null,
+      formattedMin: null
+    } : {
+      min: colorMap.thresholds[index - 1],
+      formattedMin: formattedLabels[index - 1]
+    }, index === colorMap.colors.length - 1 ? {
+      max: null,
+      formattedMax: null
+    } : {
+      max: colorMap.thresholds[index],
+      formattedMax: formattedLabels[index]
+    }));
+    if (label === null) {
+      return null;
+    }
+    return {
+      id: label,
+      color,
+      label
+    };
+  }).filter(notNull);
+  return /*#__PURE__*/_jsx(LegendPerItem, _extends({}, other, {
+    itemsToDisplay: itemsToDisplay
+  }));
+}
+process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The axis direction containing the color configuration to represent.
+   * @default 'z'
+   */
+  axisDirection: PropTypes.oneOf(['x', 'y', 'z']),
+  /**
+   * The id of the axis item with the color configuration to represent.
+   * @default The first axis item.
+   */
+  axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * The direction of the legend layout.
+   * The default depends on the chart.
+   */
+  direction: PropTypes.oneOf(['column', 'row']).isRequired,
+  /**
+   * Set to true to hide the legend.
+   * @default false
+   */
+  hidden: PropTypes.bool,
+  /**
+   * Hide the first item of the legend, corresponding to the [-infinity, min] piece.
+   * @default false
+   */
+  hideFirst: PropTypes.bool,
+  /**
+   * Hide the last item of the legend, corresponding to the [max, +infinity] piece.
+   * @default false
+   */
+  hideLast: PropTypes.bool,
+  /**
+   * Space between two legend items (in px).
+   * @default 10
+   */
+  itemGap: PropTypes.number,
+  /**
+   * Height of the item mark (in px).
+   * @default 20
+   */
+  itemMarkHeight: PropTypes.number,
+  /**
+   * Width of the item mark (in px).
+   * @default 20
+   */
+  itemMarkWidth: PropTypes.number,
+  /**
+   * Format the legend labels.
+   * @param {PiecewiseLabelFormatterParams} params The bound of the piece to format.
+   * @returns {string|null} The displayed label, or `null` to skip the item.
+   */
+  labelFormatter: PropTypes.func,
+  /**
+   * Style applied to legend labels.
+   * @default theme.typography.subtitle1
+   */
+  labelStyle: PropTypes.object,
+  /**
+   * Space between the mark and the label (in px).
+   * @default 5
+   */
+  markGap: PropTypes.number,
+  /**
+   * Legend padding (in px).
+   * Can either be a single number, or an object with top, left, bottom, right properties.
+   * @default 10
+   */
+  padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  })]),
+  /**
+   * The position of the legend.
+   */
+  position: PropTypes.shape({
+    horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
+    vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
+  }).isRequired
+} : void 0;
+export { PiecewiseColorLegend };

package/esm/ChartsLegend/chartsLegend.types.js

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

package/esm/ChartsLegend/index.js

@@ -1,4 +1,6 @@
 export * from './ChartsLegend';
 export * from './DefaultChartsLegend';
+export * from './ContinuousColorLegend';
+export * from './PiecewiseColorLegend';
 export * from './chartsLegendClasses';
 export * from './utils';

package/esm/ChartsLegend/legend.types.js

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

package/esm/ChartsLegend/legendItemsPlacement.js

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["label"];
+export function legendItemPlacements(itemsToDisplay, getItemSpace, labelStyle, direction, availableWidth, availableHeight, itemGap) {
+  // Start at 0, 0. Will be modified later by padding and position.
+  let x = 0;
+  let y = 0;
+
+  // total values used to align legend later.
+  let totalWidthUsed = 0;
+  let totalHeightUsed = 0;
+  let rowIndex = 0;
+  const rowMaxHeight = [0];
+  const seriesWithRawPosition = itemsToDisplay.map(_ref => {
+    let {
+        label
+      } = _ref,
+      other = _objectWithoutPropertiesLoose(_ref, _excluded);
+    const itemSpace = getItemSpace(label, labelStyle);
+    const rep = _extends({}, other, {
+      label,
+      positionX: x,
+      positionY: y,
+      innerHeight: itemSpace.innerHeight,
+      innerWidth: itemSpace.innerWidth,
+      outerHeight: itemSpace.outerHeight,
+      outerWidth: itemSpace.outerWidth,
+      rowIndex
+    });
+    if (direction === 'row') {
+      if (x + itemSpace.innerWidth > availableWidth) {
+        // This legend item would create overflow along the x-axis, so we start a new row.
+        x = 0;
+        y += rowMaxHeight[rowIndex];
+        rowIndex += 1;
+        if (rowMaxHeight.length <= rowIndex) {
+          rowMaxHeight.push(0);
+        }
+        rep.positionX = x;
+        rep.positionY = y;
+        rep.rowIndex = rowIndex;
+      }
+      totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth);
+      totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight);
+      rowMaxHeight[rowIndex] = Math.max(rowMaxHeight[rowIndex], itemSpace.outerHeight);
+      x += itemSpace.outerWidth;
+    }
+    if (direction === 'column') {
+      if (y + itemSpace.innerHeight > availableHeight) {
+        // This legend item would create overflow along the y-axis, so we start a new column.
+        x = totalWidthUsed + itemGap;
+        y = 0;
+        rowIndex = 0;
+        rep.positionX = x;
+        rep.positionY = y;
+        rep.rowIndex = rowIndex;
+      }
+      if (rowMaxHeight.length <= rowIndex) {
+        rowMaxHeight.push(0);
+      }
+      totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth);
+      totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight);
+      rowIndex += 1;
+      y += itemSpace.outerHeight;
+    }
+    return rep;
+  });
+  return [seriesWithRawPosition.map(item => _extends({}, item, {
+    positionY: item.positionY + (direction === 'row' ? rowMaxHeight[item.rowIndex] / 2 // Get the center of the entire row
+    : item.outerHeight / 2) // Get the center of the item
+  })), totalWidthUsed, totalHeightUsed];
+}

package/esm/ChartsLegend/useAxis.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { ZAxisContext } from '../context/ZAxisContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider/useCartesianContext';
+/**
+ * Helper to select an axis definition according to its direction and id.
+ */
+export function useAxis({
+  axisDirection,
+  axisId
+}) {
+  const {
+    xAxis,
+    xAxisIds,
+    yAxis,
+    yAxisIds
+  } = useCartesianContext();
+  const {
+    zAxis,
+    zAxisIds
+  } = React.useContext(ZAxisContext);
+  switch (axisDirection) {
+    case 'x':
+      {
+        const id = typeof axisId === 'string' ? axisId : xAxisIds[axisId ?? 0];
+        return xAxis[id];
+      }
+    case 'y':
+      {
+        const id = typeof axisId === 'string' ? axisId : yAxisIds[axisId ?? 0];
+        return yAxis[id];
+      }
+    case 'z':
+    default:
+      {
+        const id = typeof axisId === 'string' ? axisId : zAxisIds[axisId ?? 0];
+        return zAxis[id];
+      }
+  }
+}

package/esm/ChartsSurface.js

@@ -21,6 +21,7 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props
       height,
       viewBox,
       disableAxisListener = false,
+      className,
       title,
       desc
     } = props,
@@ -36,7 +37,8 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props
     width: width,
     height: height,
     viewBox: `${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`,
-    ref: ref
+    ref: ref,
+    className: className
   }, other, {
     children: [/*#__PURE__*/_jsx("title", {
       children: title

package/esm/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -16,12 +16,7 @@ function ChartsVoronoiHandler(props) {
     onItemClick
   } = props;
   const svgRef = useSvgRef();
-  const {
-    left,
-    top,
-    width,
-    height
-  } = useDrawingArea();
+  const drawingArea = useDrawingArea();
   const {
     xAxis,
     yAxis,
@@ -37,6 +32,7 @@ function ChartsVoronoiHandler(props) {
   } = useScatterSeries() ?? {};
   const voronoiRef = React.useRef({});
   const delauneyRef = React.useRef(undefined);
+  const lastFind = React.useRef(undefined);
   const {
     setHighlighted,
     clearHighlighted
@@ -77,7 +73,20 @@ function ChartsVoronoiHandler(props) {
       const seriesPoints = data.flatMap(({
         x,
         y
-      }) => [getXPosition(x), getYPosition(y)]);
+      }) => {
+        const pointX = getXPosition(x);
+        const pointY = getYPosition(y);
+        if (!drawingArea.isPointInside({
+          x: pointX,
+          y: pointY
+        })) {
+          // If the point is not displayed we move them to a trash coordinate.
+          // This avoids managing index mapping before/after filtering.
+          // The trash point is far enough such that any point in the drawing area will be closer to the mouse than the trash coordinate.
+          return [-drawingArea.width, -drawingArea.height];
+        }
+        return [pointX, pointY];
+      });
       voronoiRef.current[seriesId] = {
         seriesId,
         startIndex: points.length,
@@ -86,29 +95,28 @@ function ChartsVoronoiHandler(props) {
       points = points.concat(seriesPoints);
     });
     delauneyRef.current = new Delaunay(points);
-  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis]);
+    lastFind.current = undefined;
+  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis, drawingArea]);
   React.useEffect(() => {
     const element = svgRef.current;
     if (element === null) {
       return undefined;
     }
-
-    // TODO: A perf optimisation of voronoi could be to use the last point as the initial point for the next search.
     function getClosestPoint(event) {
       // Get mouse coordinate in global SVG space
       const svgPoint = getSVGPoint(element, event);
-      const outsideX = svgPoint.x < left || svgPoint.x > left + width;
-      const outsideY = svgPoint.y < top || svgPoint.y > top + height;
-      if (outsideX || outsideY) {
+      if (!drawingArea.isPointInside(svgPoint)) {
+        lastFind.current = undefined;
         return 'outside-chart';
       }
       if (!delauneyRef.current) {
         return 'no-point-found';
       }
-      const closestPointIndex = delauneyRef.current.find(svgPoint.x, svgPoint.y);
+      const closestPointIndex = delauneyRef.current.find(svgPoint.x, svgPoint.y, lastFind.current);
       if (closestPointIndex === undefined) {
         return 'no-point-found';
       }
+      lastFind.current = closestPointIndex;
       const closestSeries = Object.values(voronoiRef.current).find(value => {
         return 2 * closestPointIndex >= value.startIndex && 2 * closestPointIndex < value.endIndex;
       });
@@ -130,7 +138,7 @@ function ChartsVoronoiHandler(props) {
         dataIndex
       };
     }
-    const handleMouseOut = () => {
+    const handleMouseLeave = () => {
       dispatch({
         type: 'exitChart'
       });
@@ -191,15 +199,15 @@ function ChartsVoronoiHandler(props) {
         dataIndex
       });
     };
-    element.addEventListener('pointerout', handleMouseOut);
+    element.addEventListener('pointerleave', handleMouseLeave);
     element.addEventListener('pointermove', handleMouseMove);
     element.addEventListener('click', handleMouseClick);
     return () => {
-      element.removeEventListener('pointerout', handleMouseOut);
+      element.removeEventListener('pointerleave', handleMouseLeave);
       element.removeEventListener('pointermove', handleMouseMove);
       element.removeEventListener('click', handleMouseClick);
     };
-  }, [svgRef, dispatch, left, width, top, height, yAxis, xAxis, voronoiMaxRadius, onItemClick, setHighlighted, clearHighlighted]);
+  }, [svgRef, dispatch, yAxis, xAxis, voronoiMaxRadius, onItemClick, setHighlighted, clearHighlighted, drawingArea]);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return /*#__PURE__*/_jsx(React.Fragment, {});

package/esm/ChartsXAxis/ChartsXAxis.js

@@ -212,7 +212,7 @@ function ChartsXAxis(inProps) {
       x1: left,
       x2: left + width,
       className: classes.line
-    }, slotProps?.axisLine)), xTicksWithDimension.filter(tick => tick.offset >= left - 1 && tick.offset <= left + width + 1).map(({
+    }, slotProps?.axisLine)), xTicksWithDimension.map(({
       formattedValue,
       offset,
       labelOffset,

package/esm/ChartsYAxis/ChartsYAxis.js

@@ -136,6 +136,14 @@ function ChartsYAxis(inProps) {
     },
     ownerState: {}
   });
+  const lineSlotProps = useSlotProps({
+    elementType: Line,
+    externalSlotProps: slotProps?.axisLine,
+    additionalProps: {
+      strokeLinecap: 'square'
+    },
+    ownerState: {}
+  });
   const domain = yScale.domain();
   if (domain.length === 0 || domain[0] === domain[1]) {
     // Skip axis rendering if
@@ -147,10 +155,10 @@ function ChartsYAxis(inProps) {
     transform: `translate(${position === 'right' ? left + width : left}, 0)`,
     className: classes.root,
     children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
-      y1: yScale.range()[0],
-      y2: yScale.range()[1],
+      y1: top,
+      y2: top + height,
       className: classes.line
-    }, slotProps?.axisLine)), yTicks.map(({
+    }, lineSlotProps)), yTicks.map(({
       formattedValue,
       offset,
       labelOffset,
@@ -159,6 +167,10 @@ function ChartsYAxis(inProps) {
       const xTickLabel = positionSign * (tickSize + 2);
       const yTickLabel = labelOffset;
       const skipLabel = typeof tickLabelInterval === 'function' && !tickLabelInterval?.(value, index);
+      const showLabel = offset >= top - 1 && offset <= height + top + 1;
+      if (!showLabel) {
+        return null;
+      }
       return /*#__PURE__*/_jsxs("g", {
         transform: `translate(0, ${offset})`,
         className: classes.tickContainer,

package/esm/Gauge/Gauge.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["text", "children", "classes"];
+const _excluded = ["text", "children", "classes", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
+import clsx from 'clsx';
 import { GaugeContainer } from './GaugeContainer';
 import { GaugeValueArc } from './GaugeValueArc';
 import { GaugeReferenceArc } from './GaugeReferenceArc';
@@ -22,15 +23,17 @@ const useUtilityClasses = props => {
   };
   return composeClasses(slots, getGaugeUtilityClass, classes);
 };
-function Gauge(props) {
+const Gauge = /*#__PURE__*/React.forwardRef(function Gauge(props, ref) {
   const {
       text,
-      children
+      children,
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const classes = useUtilityClasses(props);
   return /*#__PURE__*/_jsxs(GaugeContainer, _extends({}, other, {
-    className: classes.root,
+    className: clsx(classes.root, className),
+    ref: ref,
     children: [/*#__PURE__*/_jsx(GaugeReferenceArc, {
       className: classes.referenceArc
     }), /*#__PURE__*/_jsx(GaugeValueArc, {
@@ -40,7 +43,7 @@ function Gauge(props) {
       text: text
     }), children]
   }));
-}
+});
 process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/Gauge/GaugeContainer.js

@@ -3,8 +3,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["width", "height", "margin", "title", "desc", "value", "valueMin", "valueMax", "startAngle", "endAngle", "outerRadius", "innerRadius", "cornerRadius", "cx", "cy", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import useForkRef from '@mui/utils/useForkRef';
 import { styled } from '@mui/material/styles';
+import useForkRef from '@mui/utils/useForkRef';
 import { useChartContainerDimensions } from '../ResponsiveChartContainer/useChartContainerDimensions';
 import { ChartsSurface } from '../ChartsSurface';
 import { DrawingProvider } from '../context/DrawingProvider';
@@ -54,9 +54,13 @@ const GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(pro
       children
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const [containerRef, width, height] = useChartContainerDimensions(inWidth, inHeight);
+  const {
+    containerRef,
+    width,
+    height
+  } = useChartContainerDimensions(inWidth, inHeight);
   const svgRef = React.useRef(null);
-  const handleRef = useForkRef(ref, svgRef);
+  const chartSurfaceRef = useForkRef(ref, svgRef);
   return /*#__PURE__*/_jsx(ResizableContainer, _extends({
     ref: containerRef,
     ownerState: {
@@ -92,7 +96,7 @@ const GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(pro
         children: /*#__PURE__*/_jsx(ChartsSurface, {
           width: width,
           height: height,
-          ref: handleRef,
+          ref: chartSurfaceRef,
           title: title,
           desc: desc,
           disableAxisListener: true,