@mui/x-charts 7.10.0 → 7.11.1

package/esm/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -5,7 +5,7 @@ import { useDrawingArea, useXScale } from '../hooks';
 import { ReferenceLineRoot } from './common';
 import { ChartsText } from '../ChartsText';
 import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
-import { buildWarning } from '../internals/warning';
+import { warnOnce } from '../internals/warning';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getTextParams = ({
   top,
@@ -47,7 +47,6 @@ export function getXReferenceLineClasses(classes) {
     label: ['label']
   }, getReferenceLineUtilityClass, classes);
 }
-const valueError = buildWarning((value, id) => `MUI X Charts: the value ${value} does not exist in the data of x axis with id ${id}.`, 'error');
 function ChartsXReferenceLine(props) {
   const {
     x,
@@ -67,7 +66,7 @@ function ChartsXReferenceLine(props) {
   const xPosition = xAxisScale(x);
   if (xPosition === undefined) {
     if (process.env.NODE_ENV !== 'production') {
-      valueError(x, axisId);
+      warnOnce(`MUI X: the value ${x} does not exist in the data of x axis with id ${axisId}.`, 'error');
     }
     return null;
   }

package/esm/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -5,7 +5,7 @@ import { useDrawingArea, useYScale } from '../hooks';
 import { ReferenceLineRoot } from './common';
 import { ChartsText } from '../ChartsText';
 import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
-import { buildWarning } from '../internals/warning';
+import { warnOnce } from '../internals/warning';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getTextParams = ({
   left,
@@ -47,7 +47,6 @@ export function getYReferenceLineClasses(classes) {
     label: ['label']
   }, getReferenceLineUtilityClass, classes);
 }
-const valueError = buildWarning((value, id) => `MUI X Charts: the value ${value} does not exist in the data of y axis with id ${id}.`, 'error');
 function ChartsYReferenceLine(props) {
   const {
     y,
@@ -67,7 +66,7 @@ function ChartsYReferenceLine(props) {
   const yPosition = yAxisScale(y);
   if (yPosition === undefined) {
     if (process.env.NODE_ENV !== 'production') {
-      valueError(y, axisId);
+      warnOnce(`MUI X: the value ${y} does not exist in the data of y axis with id ${axisId}.`, 'error');
     }
     return null;
   }

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/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -40,11 +40,15 @@ function ChartsAxisTooltipContent(props) {
     Object.keys(series).filter(isCartesianSeriesType).forEach(seriesType => {
       series[seriesType].seriesOrder.forEach(seriesId => {
         const item = series[seriesType].series[seriesId];
-        const axisKey = isXaxis ? item.xAxisKey : item.yAxisKey;
+        const providedXAxisId = item.xAxisId ?? item.xAxisKey;
+        const providedYAxisId = item.yAxisId ?? item.yAxisKey;
+        const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
         if (axisKey === undefined || axisKey === USED_AXIS_ID) {
           const seriesToAdd = series[seriesType].series[seriesId];
-          const zAxisKey = seriesToAdd.zAxisKey ?? zAxisIds[0];
-          const getColor = colorProcessors[seriesType]?.(seriesToAdd, xAxis[seriesToAdd.xAxisKey ?? xAxisIds[0]], yAxis[seriesToAdd.yAxisKey ?? yAxisIds[0]], zAxisKey && zAxis[zAxisKey]) ?? (() => '');
+          const xAxisId = providedXAxisId ?? xAxisIds[0];
+          const yAxisId = providedYAxisId ?? yAxisIds[0];
+          const zAxisId = seriesToAdd.zAxisId ?? seriesToAdd.zAxisKey ?? zAxisIds[0];
+          const getColor = colorProcessors[seriesType]?.(seriesToAdd, xAxis[xAxisId], yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
           rep.push(_extends({}, seriesToAdd, {
             getColor
           }));

package/esm/ChartsTooltip/ChartsItemTooltipContent.js

@@ -30,10 +30,10 @@ function ChartsItemTooltipContent(props) {
     zAxisIds
   } = React.useContext(ZAxisContext);
   const colorProcessors = useColorProcessor();
-  const xAxisKey = series.xAxisKey ?? xAxisIds[0];
-  const yAxisKey = series.yAxisKey ?? yAxisIds[0];
-  const zAxisKey = series.zAxisKey ?? zAxisIds[0];
-  const getColor = colorProcessors[series.type]?.(series, xAxisKey && xAxis[xAxisKey], yAxisKey && yAxis[yAxisKey], zAxisKey && zAxis[zAxisKey]) ?? (() => '');
+  const xAxisId = series.xAxisId ?? series.xAxisKey ?? xAxisIds[0];
+  const yAxisId = series.yAxisId ?? series.yAxisKey ?? yAxisIds[0];
+  const zAxisId = series.zAxisId ?? series.zAxisKey ?? zAxisIds[0];
+  const getColor = colorProcessors[series.type]?.(series, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
   const Content = content ?? DefaultChartsItemTooltipContent;
   const chartTooltipContentProps = useSlotProps({
     elementType: Content,

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
@@ -67,17 +63,32 @@ function ChartsVoronoiHandler(props) {
     seriesOrder.forEach(seriesId => {
       const {
         data,
+        xAxisId,
+        yAxisId,
         xAxisKey,
         yAxisKey
       } = series[seriesId];
-      const xScale = xAxis[xAxisKey ?? defaultXAxisId].scale;
-      const yScale = yAxis[yAxisKey ?? defaultYAxisId].scale;
+      const xScale = xAxis[xAxisId ?? xAxisKey ?? defaultXAxisId].scale;
+      const yScale = yAxis[yAxisId ?? yAxisKey ?? defaultYAxisId].scale;
       const getXPosition = getValueToPositionMapper(xScale);
       const getYPosition = getValueToPositionMapper(yScale);
       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 +97,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 +140,7 @@ function ChartsVoronoiHandler(props) {
         dataIndex
       };
     }
-    const handleMouseOut = () => {
+    const handleMouseLeave = () => {
       dispatch({
         type: 'exitChart'
       });
@@ -191,15 +201,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,

package/esm/Gauge/GaugeProvider.js

@@ -1,6 +1,6 @@
 // @ignore - do not document.
 import * as React from 'react';
-import { getPercentageValue } from '../internals/utils';
+import { getPercentageValue } from '../internals/getPercentageValue';
 import { getArcRatios, getAvailableRadius } from './utils';
 import { useDrawingArea } from '../hooks/useDrawingArea';
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/LineChart/AnimatedArea.js

@@ -7,7 +7,7 @@ import { styled } from '@mui/material/styles';
 import { color as d3Color } from 'd3-color';
 import { animated, useSpring } from '@react-spring/web';
 import { useAnimatedPath } from '../internals/useAnimatedPath';
-import { cleanId } from '../internals/utils';
+import { cleanId } from '../internals/cleanId';
 import { useChartId, useDrawingArea } from '../hooks';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const AreaElementPath = styled(animated.path, {

package/esm/LineChart/AnimatedLine.js

@@ -7,7 +7,7 @@ import { animated, useSpring } from '@react-spring/web';
 import { color as d3Color } from 'd3-color';
 import { styled } from '@mui/material/styles';
 import { useAnimatedPath } from '../internals/useAnimatedPath';
-import { cleanId } from '../internals/utils';
+import { cleanId } from '../internals/cleanId';
 import { useChartId } from '../hooks/useChartId';
 import { useDrawingArea } from '../hooks/useDrawingArea';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/LineChart/AreaPlot.js

@@ -36,22 +36,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 = 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 = 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 === 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 === 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 = d3Area().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => {

package/esm/LineChart/LineChart.js

@@ -48,8 +48,11 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     ref: ref
   }, chartContainerProps, {
     children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), props.grid && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
-      children: [/*#__PURE__*/_jsx(AreaPlot, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlot, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps))]
-    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), /*#__PURE__*/_jsx(MarkPlot, _extends({}, markPlotProps)), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+      children: [/*#__PURE__*/_jsx(AreaPlot, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlot, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
+    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {
+      "data-drawing-container": true,
+      children: /*#__PURE__*/_jsx(MarkPlot, _extends({}, markPlotProps))
+    }), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {

package/esm/LineChart/LineHighlightPlot.js

@@ -10,6 +10,7 @@ import { InteractionContext } from '../context/InteractionProvider';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import getColor from './getColor';
 import { useLineSeries } from '../hooks/useSeries';
+import { useDrawingArea } from '../hooks/useDrawingArea';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -29,6 +30,7 @@ function LineHighlightPlot(props) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesData = useLineSeries();
   const axisData = useCartesianContext();
+  const drawingArea = useDrawingArea();
   const {
     axis
   } = React.useContext(InteractionContext);
@@ -58,25 +60,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 = getValueToPositionMapper(xAxis[xAxisKey].scale);
-        const yScale = yAxis[yAxisKey].scale;
-        const xData = xAxis[xAxisKey].data;
+        const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
+        const yScale = yAxis[yAxisId].scale;
+        const xData = xAxis[xAxisId].data;
         if (xData === undefined) {
-          throw new Error(`MUI X Charts: ${xAxisKey === 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 === 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 = getColor(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
+        if (!drawingArea.isPointInside({
+          x,
+          y
+        })) {
+          return null;
+        }
+        const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
         return /*#__PURE__*/_jsx(Element, _extends({
           id: seriesId,
           color: colorGetter(highlightedIndex),

package/esm/LineChart/LinePlot.js

@@ -35,22 +35,26 @@ const useAggregatedData = () => {
   }) => {
     return groupIds.flatMap(seriesId => {
       const {
+        xAxisId: xAxisIdProp,
+        yAxisId: yAxisIdProp,
         xAxisKey = defaultXAxisId,
         yAxisKey = defaultYAxisId,
         stackedData,
         data,
         connectNulls
       } = series[seriesId];
-      const xScale = 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 = 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 === 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 === 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 = d3Line().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));

package/esm/LineChart/MarkElement.js

@@ -9,7 +9,7 @@ import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from 'd3-shape';
 import { animated, to, useSpring } from '@react-spring/web';
-import { getSymbol } from '../internals/utils';
+import { getSymbol } from '../internals/getSymbol';
 import { InteractionContext } from '../context/InteractionProvider';
 import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { useItemHighlighted } from '../context';

package/esm/LineChart/MarkPlot.js

@@ -8,7 +8,7 @@ import { MarkElement } from './MarkElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { useChartId } from '../hooks/useChartId';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
-import { cleanId } from '../internals/utils';
+import { cleanId } from '../internals/cleanId';
 import getColor from './getColor';
 import { useLineSeries } from '../hooks/useSeries';
 import { useDrawingArea } from '../hooks/useDrawingArea';
@@ -34,10 +34,7 @@ function MarkPlot(props) {
   const seriesData = useLineSeries();
   const axisData = useCartesianContext();
   const chartId = useChartId();
-  const {
-    left,
-    width
-  } = useDrawingArea();
+  const drawingArea = useDrawingArea();
   const Mark = slots?.mark ?? MarkElement;
   if (seriesData === undefined) {
     return null;
@@ -60,6 +57,8 @@ function MarkPlot(props) {
     }) => {
       return groupIds.map(seriesId => {
         const {
+          xAxisId: xAxisIdProp,
+          yAxisId: yAxisIdProp,
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
           stackedData,
@@ -69,28 +68,17 @@ function MarkPlot(props) {
         if (showMark === false) {
           return null;
         }
-        const xScale = 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 = getValueToPositionMapper(xAxis[xAxisId].scale);
+        const yScale = yAxis[yAxisId].scale;
+        const xData = xAxis[xAxisId].data;
         if (xData === undefined) {
-          throw new Error(`MUI X Charts: ${xAxisKey === 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 === 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 = cleanId(`${chartId}-${seriesId}-line-clip`); // We assume that if displaying line mark, the line will also be rendered
 
-        const colorGetter = getColor(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
+        const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
         return /*#__PURE__*/_jsx("g", {
           clipPath: `url(#${clipId})`,
           children: xData?.map((x, index) => {
@@ -113,7 +101,7 @@ function MarkPlot(props) {
               // Remove missing data point
               return false;
             }
-            if (!isInRange({
+            if (!drawingArea.isPointInside({
               x,
               y
             })) {

package/esm/LineChart/extremums.js

@@ -24,7 +24,10 @@ export 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/esm/LineChart/formatter.js

@@ -31,7 +31,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 = {};
@@ -56,7 +56,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;
           }