@mui/x-charts 7.10.0 → 7.11.1

package/Gauge/GaugeContainer.js

@@ -9,8 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _styles = require("@mui/material/styles");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useChartContainerDimensions = require("../ResponsiveChartContainer/useChartContainerDimensions");
 var _ChartsSurface = require("../ChartsSurface");
 var _DrawingProvider = require("../context/DrawingProvider");
@@ -63,9 +63,13 @@ const GaugeContainer = exports.GaugeContainer = /*#__PURE__*/React.forwardRef(fu
       children
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const [containerRef, width, height] = (0, _useChartContainerDimensions.useChartContainerDimensions)(inWidth, inHeight);
+  const {
+    containerRef,
+    width,
+    height
+  } = (0, _useChartContainerDimensions.useChartContainerDimensions)(inWidth, inHeight);
   const svgRef = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)(ref, svgRef);
+  const chartSurfaceRef = (0, _useForkRef.default)(ref, svgRef);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableContainer, (0, _extends2.default)({
     ref: containerRef,
     ownerState: {
@@ -101,7 +105,7 @@ const GaugeContainer = exports.GaugeContainer = /*#__PURE__*/React.forwardRef(fu
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, {
           width: width,
           height: height,
-          ref: handleRef,
+          ref: chartSurfaceRef,
           title: title,
           desc: desc,
           disableAxisListener: true,

package/Gauge/GaugeProvider.js

@@ -7,8 +7,8 @@ exports.GaugeContext = void 0;
 exports.GaugeProvider = GaugeProvider;
 exports.useGaugeState = useGaugeState;
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("../internals/utils");
-var _utils2 = require("./utils");
+var _getPercentageValue = require("../internals/getPercentageValue");
+var _utils = require("./utils");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 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); }
@@ -52,12 +52,12 @@ function GaugeProvider(props) {
     width,
     height
   } = (0, _useDrawingArea.useDrawingArea)();
-  const ratios = (0, _utils2.getArcRatios)(startAngle, endAngle);
-  const innerCx = cxParam ? (0, _utils.getPercentageValue)(cxParam, width) : ratios.cx * width;
-  const innerCy = cyParam ? (0, _utils.getPercentageValue)(cyParam, height) : ratios.cy * height;
+  const ratios = (0, _utils.getArcRatios)(startAngle, endAngle);
+  const innerCx = cxParam ? (0, _getPercentageValue.getPercentageValue)(cxParam, width) : ratios.cx * width;
+  const innerCy = cyParam ? (0, _getPercentageValue.getPercentageValue)(cyParam, height) : ratios.cy * height;
   let cx = left + innerCx;
   let cy = top + innerCy;
-  const maxRadius = (0, _utils2.getAvailableRadius)(innerCx, innerCy, width, height, ratios);
+  const maxRadius = (0, _utils.getAvailableRadius)(innerCx, innerCy, width, height, ratios);
 
   // If the center is not defined, after computation of the available radius, update the center to use the remaining space.
   if (cxParam === undefined) {
@@ -68,9 +68,9 @@ function GaugeProvider(props) {
     const usedHeight = maxRadius * (ratios.maxY - ratios.minY);
     cy = top + (height - usedHeight) / 2 + ratios.cy * usedHeight;
   }
-  const outerRadius = (0, _utils.getPercentageValue)(outerRadiusParam ?? maxRadius, maxRadius);
-  const innerRadius = (0, _utils.getPercentageValue)(innerRadiusParam ?? '80%', maxRadius);
-  const cornerRadius = (0, _utils.getPercentageValue)(cornerRadiusParam ?? 0, outerRadius - innerRadius);
+  const outerRadius = (0, _getPercentageValue.getPercentageValue)(outerRadiusParam ?? maxRadius, maxRadius);
+  const innerRadius = (0, _getPercentageValue.getPercentageValue)(innerRadiusParam ?? '80%', maxRadius);
+  const cornerRadius = (0, _getPercentageValue.getPercentageValue)(cornerRadiusParam ?? 0, outerRadius - innerRadius);
   const contextValue = React.useMemo(() => {
     const startAngleRad = Math.PI * startAngle / 180;
     const endAngleRad = Math.PI * endAngle / 180;

package/LineChart/AnimatedArea.js

@@ -14,7 +14,7 @@ var _styles = require("@mui/material/styles");
 var _d3Color = require("d3-color");
 var _web = require("@react-spring/web");
 var _useAnimatedPath = require("../internals/useAnimatedPath");
-var _utils = require("../internals/utils");
+var _cleanId = require("../internals/cleanId");
 var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["d", "skipAnimation", "ownerState"];
@@ -71,7 +71,7 @@ function AnimatedArea(props) {
     reset: false,
     immediate: skipAnimation
   });
-  const clipId = (0, _utils.cleanId)(`${chartId}-${ownerState.id}-area-clip`);
+  const clipId = (0, _cleanId.cleanId)(`${chartId}-${ownerState.id}-area-clip`);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
       id: clipId,

package/LineChart/AnimatedLine.js

@@ -14,7 +14,7 @@ var _web = require("@react-spring/web");
 var _d3Color = require("d3-color");
 var _styles = require("@mui/material/styles");
 var _useAnimatedPath = require("../internals/useAnimatedPath");
-var _utils = require("../internals/utils");
+var _cleanId = require("../internals/cleanId");
 var _useChartId = require("../hooks/useChartId");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -74,7 +74,7 @@ function AnimatedLine(props) {
     reset: false,
     immediate: skipAnimation
   });
-  const clipId = (0, _utils.cleanId)(`${chartId}-${ownerState.id}-line-clip`);
+  const clipId = (0, _cleanId.cleanId)(`${chartId}-${ownerState.id}-line-clip`);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
       id: clipId,

package/LineChart/AreaElement.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';
 import { AnimatedAreaProps } from './AnimatedArea';
 import { SeriesId } from '../models/seriesType/common';
 export interface AreaElementClasses {
@@ -28,7 +29,7 @@ export interface AreaElementSlots {
     area?: React.JSXElementConstructor<AnimatedAreaProps>;
 }
 export interface AreaElementSlotProps {
-    area?: AnimatedAreaProps;
+    area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
 }
 export interface AreaElementProps extends Omit<AreaElementOwnerState, 'isFaded' | 'isHighlighted'>, Pick<AnimatedAreaProps, 'skipAnimation'>, Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
     d: string;

package/LineChart/AreaPlot.js

@@ -45,22 +45,26 @@ const useAggregatedData = () => {
     return [...groupIds].reverse() // Revert stacked area for a more pleasant animation
     .map(seriesId => {
       const {
+        xAxisId: xAxisIdProp,
+        yAxisId: yAxisIdProp,
         xAxisKey = defaultXAxisId,
         yAxisKey = defaultYAxisId,
         stackedData,
         data,
         connectNulls
       } = series[seriesId];
-      const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisKey].scale);
-      const yScale = yAxis[yAxisKey].scale;
-      const xData = xAxis[xAxisKey].data;
-      const gradientUsed = yAxis[yAxisKey].colorScale && [yAxisKey, 'y'] || xAxis[xAxisKey].colorScale && [xAxisKey, 'x'] || undefined;
+      const xAxisId = xAxisIdProp ?? xAxisKey;
+      const yAxisId = yAxisIdProp ?? yAxisKey;
+      const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
+      const yScale = yAxis[yAxisId].scale;
+      const xData = xAxis[xAxisId].data;
+      const gradientUsed = yAxis[yAxisId].colorScale && [yAxisId, 'y'] || xAxis[xAxisId].colorScale && [xAxisId, 'x'] || undefined;
       if (process.env.NODE_ENV !== 'production') {
         if (xData === undefined) {
-          throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
+          throw new Error(`MUI X: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
         }
         if (xData.length < stackedData.length) {
-          throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+          throw new Error(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
         }
       }
       const areaPath = (0, _d3Shape.area)().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => {

package/LineChart/LineChart.js

@@ -57,8 +57,11 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
     ref: ref
   }, chartContainerProps, {
     children: [props.onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, (0, _extends2.default)({}, axisClickHandlerProps)), props.grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps))]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, (0, _extends2.default)({}, markPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      "data-drawing-container": true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, (0, _extends2.default)({}, markPlotProps))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {

package/LineChart/LineElement.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';
 import { AnimatedLineProps } from './AnimatedLine';
 import { SeriesId } from '../models/seriesType/common';
 export interface LineElementClasses {
@@ -28,7 +29,7 @@ export interface LineElementSlots {
     line?: React.JSXElementConstructor<AnimatedLineProps>;
 }
 export interface LineElementSlotProps {
-    line?: AnimatedLineProps;
+    line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
 }
 export interface LineElementProps extends Omit<LineElementOwnerState, 'isFaded' | 'isHighlighted'>, Pick<AnimatedLineProps, 'skipAnimation'>, Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
     d: string;

package/LineChart/LineHighlightPlot.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
+import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';
 import { LineHighlightElementProps } from './LineHighlightElement';
 export interface LineHighlightPlotSlots {
     lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
 }
 export interface LineHighlightPlotSlotProps {
-    lineHighlight?: Partial<LineHighlightElementProps>;
+    lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
 }
 export interface LineHighlightPlotProps extends React.SVGAttributes<SVGSVGElement> {
     /**

package/LineChart/LineHighlightPlot.js

@@ -16,6 +16,7 @@ var _InteractionProvider = require("../context/InteractionProvider");
 var _constants = require("../constants");
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _useSeries = require("../hooks/useSeries");
+var _useDrawingArea = require("../hooks/useDrawingArea");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
 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); }
@@ -38,6 +39,7 @@ function LineHighlightPlot(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesData = (0, _useSeries.useLineSeries)();
   const axisData = (0, _CartesianProvider.useCartesianContext)();
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const {
     axis
   } = React.useContext(_InteractionProvider.InteractionContext);
@@ -67,25 +69,35 @@ function LineHighlightPlot(props) {
     }) => {
       return groupIds.flatMap(seriesId => {
         const {
+          xAxisId: xAxisIdProp,
+          yAxisId: yAxisIdProp,
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
           stackedData,
           data,
           disableHighlight
         } = series[seriesId];
+        const xAxisId = xAxisIdProp ?? xAxisKey;
+        const yAxisId = yAxisIdProp ?? yAxisKey;
         if (disableHighlight || data[highlightedIndex] == null) {
           return null;
         }
-        const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisKey].scale);
-        const yScale = yAxis[yAxisKey].scale;
-        const xData = xAxis[xAxisKey].data;
+        const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
+        const yScale = yAxis[yAxisId].scale;
+        const xData = xAxis[xAxisId].data;
         if (xData === undefined) {
-          throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
+          throw new Error(`MUI X: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
         }
         const x = xScale(xData[highlightedIndex]);
         const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
 
-        const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
+        if (!drawingArea.isPointInside({
+          x,
+          y
+        })) {
+          return null;
+        }
+        const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({
           id: seriesId,
           color: colorGetter(highlightedIndex),

package/LineChart/LinePlot.js

@@ -44,22 +44,26 @@ const useAggregatedData = () => {
   }) => {
     return groupIds.flatMap(seriesId => {
       const {
+        xAxisId: xAxisIdProp,
+        yAxisId: yAxisIdProp,
         xAxisKey = defaultXAxisId,
         yAxisKey = defaultYAxisId,
         stackedData,
         data,
         connectNulls
       } = series[seriesId];
-      const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisKey].scale);
-      const yScale = yAxis[yAxisKey].scale;
-      const xData = xAxis[xAxisKey].data;
-      const gradientUsed = yAxis[yAxisKey].colorScale && [yAxisKey, 'y'] || xAxis[xAxisKey].colorScale && [xAxisKey, 'x'] || undefined;
+      const xAxisId = xAxisIdProp ?? xAxisKey;
+      const yAxisId = yAxisIdProp ?? yAxisKey;
+      const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
+      const yScale = yAxis[yAxisId].scale;
+      const xData = xAxis[xAxisId].data;
+      const gradientUsed = yAxis[yAxisId].colorScale && [yAxisId, 'y'] || xAxis[xAxisId].colorScale && [xAxisId, 'x'] || undefined;
       if (process.env.NODE_ENV !== 'production') {
         if (xData === undefined) {
-          throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
+          throw new Error(`MUI X: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
         }
         if (xData.length < stackedData.length) {
-          throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+          throw new Error(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
         }
       }
       const linePath = (0, _d3Shape.line)().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));

package/LineChart/MarkElement.js

@@ -17,7 +17,7 @@ var _styles = require("@mui/material/styles");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _d3Shape = require("d3-shape");
 var _web = require("@react-spring/web");
-var _utils = require("../internals/utils");
+var _getSymbol = require("../internals/getSymbol");
 var _InteractionProvider = require("../context/InteractionProvider");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _context = require("../context");
@@ -106,7 +106,7 @@ function MarkElement(props) {
     },
     ownerState: ownerState,
     className: classes.root,
-    d: (0, _d3Shape.symbol)(_d3Shape.symbolsFill[(0, _utils.getSymbol)(shape)])(),
+    d: (0, _d3Shape.symbol)(_d3Shape.symbolsFill[(0, _getSymbol.getSymbol)(shape)])(),
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset'
   }, getInteractionItemProps({

package/LineChart/MarkPlot.js

@@ -14,7 +14,7 @@ var _MarkElement = require("./MarkElement");
 var _useScale = require("../hooks/useScale");
 var _useChartId = require("../hooks/useChartId");
 var _constants = require("../constants");
-var _utils = require("../internals/utils");
+var _cleanId = require("../internals/cleanId");
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _useSeries = require("../hooks/useSeries");
 var _useDrawingArea = require("../hooks/useDrawingArea");
@@ -43,10 +43,7 @@ function MarkPlot(props) {
   const seriesData = (0, _useSeries.useLineSeries)();
   const axisData = (0, _CartesianProvider.useCartesianContext)();
   const chartId = (0, _useChartId.useChartId)();
-  const {
-    left,
-    width
-  } = (0, _useDrawingArea.useDrawingArea)();
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const Mark = slots?.mark ?? _MarkElement.MarkElement;
   if (seriesData === undefined) {
     return null;
@@ -69,6 +66,8 @@ function MarkPlot(props) {
     }) => {
       return groupIds.map(seriesId => {
         const {
+          xAxisId: xAxisIdProp,
+          yAxisId: yAxisIdProp,
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
           stackedData,
@@ -78,28 +77,17 @@ function MarkPlot(props) {
         if (showMark === false) {
           return null;
         }
-        const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisKey].scale);
-        const yScale = yAxis[yAxisKey].scale;
-        const xData = xAxis[xAxisKey].data;
-        const yRange = yScale.range();
-        const isInRange = ({
-          x,
-          y
-        }) => {
-          if (x < left || x > left + width) {
-            return false;
-          }
-          if (y < Math.min(...yRange) || y > Math.max(...yRange)) {
-            return false;
-          }
-          return true;
-        };
+        const xAxisId = xAxisIdProp ?? xAxisKey;
+        const yAxisId = yAxisIdProp ?? yAxisKey;
+        const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
+        const yScale = yAxis[yAxisId].scale;
+        const xData = xAxis[xAxisId].data;
         if (xData === undefined) {
-          throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
+          throw new Error(`MUI X: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
         }
-        const clipId = (0, _utils.cleanId)(`${chartId}-${seriesId}-line-clip`); // We assume that if displaying line mark, the line will also be rendered
+        const clipId = (0, _cleanId.cleanId)(`${chartId}-${seriesId}-line-clip`); // We assume that if displaying line mark, the line will also be rendered
 
-        const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
+        const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           clipPath: `url(#${clipId})`,
           children: xData?.map((x, index) => {
@@ -122,7 +110,7 @@ function MarkPlot(props) {
               // Remove missing data point
               return false;
             }
-            if (!isInRange({
+            if (!drawingArea.isPointInside({
               x,
               y
             })) {

package/LineChart/extremums.js

@@ -31,7 +31,10 @@ const getExtremumY = params => {
     axis,
     isDefaultAxis
   } = params;
-  return Object.keys(series).filter(seriesId => series[seriesId].yAxisKey === axis.id || isDefaultAxis && series[seriesId].yAxisKey === undefined).reduce((acc, seriesId) => {
+  return Object.keys(series).filter(seriesId => {
+    const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
+    return yAxisId === axis.id || isDefaultAxis && yAxisId === undefined;
+  }).reduce((acc, seriesId) => {
     const {
       area,
       stackedData

package/LineChart/formatter.js

@@ -38,7 +38,7 @@ const formatter = (params, dataset) => {
         }
       });
     } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
-      throw new Error([`MUI X Charts: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
+      throw new Error([`MUI X: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
   });
   const completedSeries = {};
@@ -63,7 +63,7 @@ const formatter = (params, dataset) => {
           if (typeof value !== 'number') {
             if (process.env.NODE_ENV !== 'production' && !warnedOnce && value !== null) {
               warnedOnce = true;
-              console.error([`MUI-X charts: your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
+              console.error([`MUI X: Your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
             }
             return null;
           }

package/LineChart/useLineChartProps.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useLineChartProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _constants = require("../constants");
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.
@@ -17,39 +19,41 @@ var _constants = require("../constants");
  */
 const useLineChartProps = props => {
   const {
-    xAxis,
-    yAxis,
-    series,
-    width,
-    height,
-    margin,
-    colors,
-    dataset,
-    sx,
-    tooltip,
-    onAxisClick,
-    onAreaClick,
-    onLineClick,
-    onMarkClick,
-    axisHighlight,
-    disableLineItemHighlight,
-    legend,
-    grid,
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
-    children,
-    slots,
-    slotProps,
-    skipAnimation,
-    loading,
-    highlightedItem,
-    onHighlightChange
-  } = props;
+      xAxis,
+      yAxis,
+      series,
+      width,
+      height,
+      margin,
+      colors,
+      dataset,
+      sx,
+      tooltip,
+      onAxisClick,
+      onAreaClick,
+      onLineClick,
+      onMarkClick,
+      axisHighlight,
+      disableLineItemHighlight,
+      legend,
+      grid,
+      topAxis,
+      leftAxis,
+      rightAxis,
+      bottomAxis,
+      children,
+      slots,
+      slotProps,
+      skipAnimation,
+      loading,
+      highlightedItem,
+      onHighlightChange,
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const id = (0, _useId.default)();
   const clipPathId = `${id}-clip-path`;
-  const chartContainerProps = {
+  const chartContainerProps = (0, _extends2.default)({}, other, {
     series: series.map(s => (0, _extends2.default)({
       disableHighlight: !!disableLineItemHighlight,
       type: 'line'
@@ -70,8 +74,9 @@ const useLineChartProps = props => {
     sx,
     highlightedItem,
     onHighlightChange,
-    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick
-  };
+    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    className
+  });
   const axisClickHandlerProps = {
     onAxisClick
   };

package/PieChart/PieArc.js

@@ -84,6 +84,7 @@ function PieArc(props) {
       innerRadius: iR,
       outerRadius: oR
     })),
+    visibility: (0, _web.to)([startAngle, endAngle], (sA, eA) => sA === eA ? 'hidden' : 'visible'),
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,

package/PieChart/PieChart.d.ts

@@ -75,8 +75,5 @@ export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'seri
  *
  * - [PieChart API](https://mui.com/x/api/charts/pie-chart/)
  */
-declare function PieChart(props: PieChartProps): React.JSX.Element;
-declare namespace PieChart {
-    var propTypes: any;
-}
+declare const PieChart: React.ForwardRefExoticComponent<PieChartProps & React.RefAttributes<unknown>>;
 export { PieChart };