@mui/x-charts 7.22.2 → 8.0.0-alpha.0

package/node/BarChart/useBarChartProps.js

@@ -10,7 +10,7 @@ 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", "axisHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "axisHighlight", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend"];
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.
@@ -32,7 +32,6 @@ const useBarChartProps = props => {
       tooltip,
       onAxisClick,
       axisHighlight,
-      legend,
       grid,
       topAxis,
       leftAxis,
@@ -123,10 +122,10 @@ const useBarChartProps = props => {
   } : {
     x: 'band'
   }, axisHighlight);
-  const legendProps = (0, _extends2.default)({}, legend, {
+  const legendProps = {
     slots,
     slotProps
-  });
+  };
   const tooltipProps = (0, _extends2.default)({}, tooltip, {
     slots,
     slotProps

package/node/ChartContainer/ChartContainer.js

@@ -10,47 +10,18 @@ exports.ChartContainer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _DrawingProvider = require("../context/DrawingProvider");
-var _SeriesProvider = require("../context/SeriesProvider");
-var _InteractionProvider = require("../context/InteractionProvider");
-var _ChartsSurface = require("../ChartsSurface");
-var _CartesianProvider = require("../context/CartesianProvider");
-var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
-var _context = require("../context");
-var _PluginProvider = require("../context/PluginProvider");
+var _ChartDataProvider = require("../context/ChartDataProvider");
+var _ResizableContainer = require("./ResizableContainer");
 var _useChartContainerProps = require("./useChartContainerProps");
-var _AnimationProvider = require("../context/AnimationProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const ChartContainer = exports.ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
-    children,
-    drawingProviderProps,
-    seriesProviderProps,
-    cartesianProviderProps,
-    zAxisContextProps,
-    highlightedProviderProps,
-    chartsSurfaceProps,
-    pluginProviderProps,
-    animationProviderProps
+    hasIntrinsicSize,
+    chartDataProviderProps,
+    resizableChartContainerProps
   } = (0, _useChartContainerProps.useChartContainerProps)(props, ref);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingProvider.DrawingProvider, (0, _extends2.default)({}, drawingProviderProps, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PluginProvider.PluginProvider, (0, _extends2.default)({}, pluginProviderProps, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SeriesProvider.SeriesProvider, (0, _extends2.default)({}, seriesProviderProps, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianProvider.CartesianProvider, (0, _extends2.default)({}, cartesianProviderProps, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ZAxisContextProvider, (0, _extends2.default)({}, zAxisContextProps, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InteractionProvider.InteractionProvider, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.HighlightedProvider, (0, _extends2.default)({}, highlightedProviderProps, {
-                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxesGradients.ChartsAxesGradients, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnimationProvider.AnimationProvider, (0, _extends2.default)({}, animationProviderProps, {
-                    children: children
-                  }))]
-                }))
-              }))
-            })
-          }))
-        }))
-      }))
-    }))
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResizableContainer.ResizableContainer, (0, _extends2.default)({}, resizableChartContainerProps, {
+    children: hasIntrinsicSize ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps)) : null
   }));
 });
 process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
@@ -77,9 +48,9 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    */
   disableAxisListener: _propTypes.default.bool,
   /**
-   * The height of the chart in px.
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
-  height: _propTypes.default.number.isRequired,
+  height: _propTypes.default.number,
   /**
    * The item currently highlighted. Turns highlighting into a controlled prop.
    */
@@ -110,6 +81,16 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * If not provided, the container supports line, bar, scatter and pie charts.
    */
   plugins: _propTypes.default.arrayOf(_propTypes.default.object),
+  /**
+   * The chart will try to wait for the parent container to resolve its size
+   * before it renders for the first time.
+   *
+   * This can be useful in some scenarios where the chart appear to grow after
+   * the first render, like when used inside a grid.
+   *
+   * @default false
+   */
+  resolveSizeBeforeRender: _propTypes.default.bool,
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
@@ -130,9 +111,9 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     y: _propTypes.default.number
   }),
   /**
-   * The width of the chart in px.
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
-  width: _propTypes.default.number.isRequired,
+  width: _propTypes.default.number,
   /**
    * The configuration of the x-axes.
    * If not provided, a default axis config is used.

package/node/{ResponsiveChartContainer → ChartContainer}/useChartContainerDimensions.js

@@ -1,6 +1,7 @@
 "use strict";
 'use client';
 
+/* eslint-disable react-compiler/react-compiler */
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -11,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _ownerWindow = _interopRequireDefault(require("@mui/utils/ownerWindow"));
 const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBeforeRender) => {
+  const hasInSize = inWidth !== undefined && inHeight !== undefined;
   const stateRef = React.useRef({
     displayError: false,
     initialCompute: true,
@@ -47,7 +49,7 @@ const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBeforeRender)
   // https://github.com/mui/mui-x/issues/13477#issuecomment-2336634785
   (0, _useEnhancedEffect.default)(() => {
     // computeRun is used to avoid infinite loops.
-    if (!resolveSizeBeforeRender || !stateRef.current.initialCompute || stateRef.current.computeRun > 20) {
+    if (hasInSize || !resolveSizeBeforeRender || !stateRef.current.initialCompute || stateRef.current.computeRun > 20) {
       return;
     }
     const computedSize = computeSize();
@@ -56,9 +58,9 @@ const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBeforeRender)
     } else if (stateRef.current.initialCompute) {
       stateRef.current.initialCompute = false;
     }
-  }, [width, height, computeSize, resolveSizeBeforeRender]);
+  }, [width, height, computeSize, resolveSizeBeforeRender, hasInSize]);
   (0, _useEnhancedEffect.default)(() => {
-    if (inWidth !== undefined && inHeight !== undefined) {
+    if (hasInSize) {
       return () => {};
     }
     computeSize();
@@ -84,7 +86,7 @@ const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBeforeRender)
         observer.unobserve(elementToObserve);
       }
     };
-  }, [computeSize, inHeight, inWidth]);
+  }, [computeSize, hasInSize]);
   if (process.env.NODE_ENV !== 'production') {
     if (stateRef.current.displayError && inWidth === undefined && width === 0) {
       console.error(`MUI X: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);

package/node/ChartContainer/useChartContainerProps.js

@@ -2,93 +2,76 @@
 'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useChartContainerProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var React = _interopRequireWildcard(require("react"));
-var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _useDefaultizeAxis = require("./useDefaultizeAxis");
-const _excluded = ["width", "height", "series", "margin", "xAxis", "yAxis", "zAxis", "colors", "dataset", "sx", "title", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "children", "skipAnimation"];
+var _useChartContainerDimensions = require("./useChartContainerDimensions");
+const _excluded = ["width", "height", "resolveSizeBeforeRender", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "viewBox", "xAxis", "yAxis", "zAxis", "skipAnimation"];
 const useChartContainerProps = (props, ref) => {
   const {
       width,
       height,
-      series,
+      resolveSizeBeforeRender,
       margin,
-      xAxis,
-      yAxis,
-      zAxis,
+      children,
+      series,
       colors,
       dataset,
-      sx,
-      title,
       desc,
       disableAxisListener,
       highlightedItem,
       onHighlightChange,
       plugins,
-      children,
+      sx,
+      title,
+      viewBox,
+      xAxis,
+      yAxis,
+      zAxis,
       skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const svgRef = React.useRef(null);
-  const chartSurfaceRef = (0, _useForkRef.default)(ref, svgRef);
-  const [defaultizedXAxis, defaultizedYAxis] = (0, _useDefaultizeAxis.useDefaultizeAxis)(xAxis, yAxis, dataset);
-  const drawingProviderProps = {
-    width,
-    height,
+  const {
+    containerRef,
+    width: dWidth,
+    height: dHeight
+  } = (0, _useChartContainerDimensions.useChartContainerDimensions)(width, height, resolveSizeBeforeRender);
+  const resizableChartContainerProps = (0, _extends2.default)({}, other, {
+    ownerState: {
+      width,
+      height
+    },
+    ref: containerRef
+  });
+  const chartDataProviderProps = {
     margin,
-    svgRef
-  };
-  const animationProviderProps = {
-    skipAnimation
-  };
-  const pluginProviderProps = {
-    plugins
-  };
-  const seriesProviderProps = {
+    children,
     series,
     colors,
-    dataset
-  };
-  const cartesianProviderProps = {
-    xAxis: defaultizedXAxis,
-    yAxis: defaultizedYAxis,
-    dataset
-  };
-  const zAxisContextProps = {
-    zAxis,
-    dataset
-  };
-  const highlightedProviderProps = {
+    dataset,
+    desc,
+    disableAxisListener,
     highlightedItem,
-    onHighlightChange
-  };
-  const chartsSurfaceProps = (0, _extends2.default)({}, other, {
-    width,
-    height,
-    ref: chartSurfaceRef,
+    onHighlightChange,
+    plugins,
     sx,
     title,
-    desc,
-    disableAxisListener
-  });
+    viewBox,
+    xAxis,
+    yAxis,
+    zAxis,
+    skipAnimation,
+    width: dWidth,
+    height: dHeight,
+    ref
+  };
   return {
-    children,
-    drawingProviderProps,
-    seriesProviderProps,
-    cartesianProviderProps,
-    zAxisContextProps,
-    highlightedProviderProps,
-    chartsSurfaceProps,
-    pluginProviderProps,
-    animationProviderProps,
-    xAxis: defaultizedXAxis,
-    yAxis: defaultizedYAxis
+    hasIntrinsicSize: Boolean(dWidth && dHeight),
+    chartDataProviderProps,
+    resizableChartContainerProps
   };
 };
 exports.useChartContainerProps = useChartContainerProps;

package/node/ChartsLegend/ChartsLegend.js

@@ -17,7 +17,6 @@ var _styles = require("@mui/material/styles");
 var _utils = require("./utils");
 var _chartsLegendClasses = require("./chartsLegendClasses");
 var _DefaultChartsLegend = require("./DefaultChartsLegend");
-var _hooks = require("../hooks");
 var _useSeries = require("../hooks/useSeries");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
@@ -57,7 +56,6 @@ function ChartsLegend(inProps) {
   const classes = useUtilityClasses((0, _extends2.default)({}, defaultizedProps, {
     theme
   }));
-  const drawingArea = (0, _hooks.useDrawingArea)();
   const series = (0, _useSeries.useSeries)();
   const seriesToDisplay = (0, _utils.getSeriesToDisplay)(series);
   const ChartLegendRender = slots?.legend ?? _DefaultChartsLegend.DefaultChartsLegend;
@@ -66,7 +64,6 @@ function ChartsLegend(inProps) {
     externalSlotProps: slotProps?.legend,
     additionalProps: (0, _extends2.default)({}, other, {
       classes,
-      drawingArea,
       series,
       seriesToDisplay
     }),

package/node/ChartsLegend/DefaultChartsLegend.js

@@ -13,7 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _LegendPerItem = require("./LegendPerItem");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["drawingArea", "seriesToDisplay", "hidden", "onItemClick"];
+const _excluded = ["seriesToDisplay", "hidden", "onItemClick"];
 const seriesContextBuilder = context => ({
   type: 'series',
   color: context.color,
@@ -50,17 +50,6 @@ process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
    * The default depends on the chart.
    */
   direction: _propTypes.default.oneOf(['column', 'row']).isRequired,
-  /**
-   * @deprecated Use the `useDrawingArea` hook instead.
-   */
-  drawingArea: _propTypes.default.shape({
-    bottom: _propTypes.default.number.isRequired,
-    height: _propTypes.default.number.isRequired,
-    left: _propTypes.default.number.isRequired,
-    right: _propTypes.default.number.isRequired,
-    top: _propTypes.default.number.isRequired,
-    width: _propTypes.default.number.isRequired
-  }).isRequired,
   /**
    * Set to true to hide the legend.
    * @default false

package/node/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -46,8 +46,8 @@ function ChartsOnAxisClickHandler(props) {
       Object.keys(series).filter(seriesType => ['bar', 'line'].includes(seriesType)).forEach(seriesType => {
         series[seriesType]?.seriesOrder.forEach(seriesId => {
           const seriesItem = series[seriesType].series[seriesId];
-          const providedXAxisId = seriesItem.xAxisId ?? seriesItem.xAxisKey;
-          const providedYAxisId = seriesItem.yAxisId ?? seriesItem.yAxisKey;
+          const providedXAxisId = seriesItem.xAxisId;
+          const providedYAxisId = seriesItem.yAxisId;
           const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
           if (axisKey === undefined || axisKey === USED_AXIS_ID) {
             seriesValues[seriesId] = seriesItem.data[dataIndex];

package/node/ChartsTooltip/ChartsAxisTooltipContent.js

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

package/node/ChartsTooltip/ChartsItemTooltipContent.js

@@ -38,9 +38,9 @@ function ChartsItemTooltipContent(props) {
     zAxisIds
   } = React.useContext(_ZAxisContextProvider.ZAxisContext);
   const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
-  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 xAxisId = series.xAxisId ?? xAxisIds[0];
+  const yAxisId = series.yAxisId ?? yAxisIds[0];
+  const zAxisId = series.zAxisId ?? zAxisIds[0];
   const getColor = colorProcessors[series.type]?.(series, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
   const Content = content ?? _DefaultChartsItemTooltipContent.DefaultChartsItemTooltipContent;
   const chartTooltipContentProps = (0, _useSlotProps.default)({

package/node/ChartsTooltip/ChartsTooltip.js

@@ -11,11 +11,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
 var _styles = require("@mui/material/styles");
 var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
 var _NoSsr = _interopRequireDefault(require("@mui/material/NoSsr"));
 var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _InteractionProvider = require("../context/InteractionProvider");
+var _useSvgRef = require("../hooks/useSvgRef");
 var _utils = require("./utils");
 var _ChartsItemTooltipContent = require("./ChartsItemTooltipContent");
 var _ChartsAxisTooltipContent = require("./ChartsAxisTooltipContent");
@@ -70,14 +72,20 @@ function ChartsTooltip(inProps) {
     slots,
     slotProps
   } = props;
-  const mousePosition = (0, _utils.useMouseTracker)();
+  const svgRef = (0, _useSvgRef.useSvgRef)();
+  const pointerType = (0, _utils.usePointerType)();
+  const popperRef = React.useRef(null);
+  const positionRef = (0, _useLazyRef.default)(() => ({
+    x: 0,
+    y: 0
+  }));
   const {
     item,
     axis
   } = React.useContext(_InteractionProvider.InteractionContext);
   const displayedData = trigger === 'item' ? item : axis;
   const tooltipHasData = (0, _utils.getTooltipHasData)(trigger, displayedData);
-  const popperOpen = mousePosition !== null && tooltipHasData;
+  const popperOpen = pointerType !== null && tooltipHasData;
   const classes = useUtilityClasses({
     classes: props.classes
   });
@@ -87,17 +95,48 @@ function ChartsTooltip(inProps) {
     externalSlotProps: slotProps?.popper,
     additionalProps: {
       open: popperOpen,
-      placement: mousePosition?.pointerType === 'mouse' ? 'right-start' : 'top',
-      anchorEl: (0, _utils.generateVirtualElement)(mousePosition),
+      placement: pointerType?.pointerType === 'mouse' ? 'right-start' : 'top',
+      popperRef,
+      anchorEl: {
+        getBoundingClientRect: () => ({
+          x: positionRef.current.x,
+          y: positionRef.current.y,
+          top: positionRef.current.y,
+          left: positionRef.current.x,
+          right: positionRef.current.x,
+          bottom: positionRef.current.y,
+          width: 0,
+          height: 0,
+          toJSON: () => ''
+        })
+      },
       modifiers: [{
         name: 'offset',
         options: {
-          offset: [0, mousePosition?.pointerType === 'touch' ? 40 - mousePosition.height : 0]
+          offset: [0, pointerType?.pointerType === 'touch' ? 40 - pointerType.height : 0]
         }
       }]
     },
     ownerState: {}
   });
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null) {
+      return () => {};
+    }
+    const handleMove = event => {
+      // eslint-disable-next-line react-compiler/react-compiler
+      positionRef.current = {
+        x: event.clientX,
+        y: event.clientY
+      };
+      popperRef.current?.update();
+    };
+    element.addEventListener('pointermove', handleMove);
+    return () => {
+      element.removeEventListener('pointermove', handleMove);
+    };
+  }, [svgRef, positionRef]);
   if (trigger === 'none') {
     return null;
   }

package/node/ChartsTooltip/useAxisTooltip.js

@@ -51,15 +51,15 @@ function useAxisTooltip() {
     }
     return seriesOfType.seriesOrder.map(seriesId => {
       const seriesToAdd = seriesOfType.series[seriesId];
-      const providedXAxisId = seriesToAdd.xAxisId ?? seriesToAdd.xAxisKey;
-      const providedYAxisId = seriesToAdd.yAxisId ?? seriesToAdd.yAxisKey;
+      const providedXAxisId = seriesToAdd.xAxisId;
+      const providedYAxisId = seriesToAdd.yAxisId;
       const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
 
       // Test if the series uses the default axis
       if (axisKey === undefined || axisKey === USED_AXIS_ID) {
         const xAxisId = providedXAxisId ?? xAxisIds[0];
         const yAxisId = providedYAxisId ?? yAxisIds[0];
-        const zAxisId = seriesToAdd.zAxisId ?? seriesToAdd.zAxisKey ?? zAxisIds[0];
+        const zAxisId = seriesToAdd.zAxisId ?? zAxisIds[0];
         const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[xAxisId], yAxis[yAxisId], zAxisId && zAxis[zAxisId])(dataIndex) ?? '';
         const value = seriesToAdd.data[dataIndex] ?? null;
         const formattedValue = seriesToAdd.valueFormatter(value, {

package/node/ChartsTooltip/useItemTooltip.js

@@ -31,9 +31,9 @@ function useItemTooltip() {
     zAxisIds
   } = React.useContext(_ZAxisContextProvider.ZAxisContext);
   const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
-  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 xAxisId = series.xAxisId ?? xAxisIds[0];
+  const yAxisId = series.yAxisId ?? yAxisIds[0];
+  const zAxisId = series.zAxisId ?? zAxisIds[0];
   if (!item || item.dataIndex === undefined) {
     return null;
   }

package/node/ChartsTooltip/utils.js

@@ -1,53 +1,18 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateVirtualElement = generateVirtualElement;
 exports.getTooltipHasData = getTooltipHasData;
 exports.useMouseTracker = useMouseTracker;
+exports.usePointerType = usePointerType;
 exports.utcFormatter = utcFormatter;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _hooks = require("../hooks");
-function generateVirtualElement(mousePosition) {
-  if (mousePosition === null) {
-    return {
-      getBoundingClientRect: () => ({
-        width: 0,
-        height: 0,
-        x: 0,
-        y: 0,
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-        toJSON: () => ''
-      })
-    };
-  }
-  const {
-    x,
-    y
-  } = mousePosition;
-  const boundingBox = {
-    width: 0,
-    height: 0,
-    x,
-    y,
-    top: y,
-    right: x,
-    bottom: y,
-    left: x
-  };
-  return {
-    getBoundingClientRect: () => (0, _extends2.default)({}, boundingBox, {
-      toJSON: () => JSON.stringify(boundingBox)
-    })
-  };
-}
+/**
+ * @deprecated We recommend using vanilla JS to let popper track mouse position.
+ */
 function useMouseTracker() {
   const svgRef = (0, _hooks.useSvgRef)();
 
@@ -58,6 +23,7 @@ function useMouseTracker() {
     if (element === null) {
       return () => {};
     }
+    const controller = new AbortController();
     const handleOut = event => {
       if (event.pointerType !== 'mouse') {
         setMousePosition(null);
@@ -71,16 +37,52 @@ function useMouseTracker() {
         pointerType: event.pointerType
       });
     };
-    element.addEventListener('pointerdown', handleMove);
-    element.addEventListener('pointermove', handleMove);
+    element.addEventListener('pointerdown', handleMove, {
+      signal: controller.signal
+    });
+    element.addEventListener('pointermove', handleMove, {
+      signal: controller.signal
+    });
+    element.addEventListener('pointerup', handleOut, {
+      signal: controller.signal
+    });
+    return () => {
+      // Calling `.abort()` removes ALL event listeners
+      // For more info, see https://kettanaito.com/blog/dont-sleep-on-abort-controller
+      controller.abort();
+    };
+  }, [svgRef]);
+  return mousePosition;
+}
+function usePointerType() {
+  const svgRef = (0, _hooks.useSvgRef)();
+
+  // Use a ref to avoid rerendering on every mousemove event.
+  const [pointerType, setPointerType] = React.useState(null);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null) {
+      return () => {};
+    }
+    const handleOut = event => {
+      if (event.pointerType !== 'mouse') {
+        setPointerType(null);
+      }
+    };
+    const handleEnter = event => {
+      setPointerType({
+        height: event.height,
+        pointerType: event.pointerType
+      });
+    };
+    element.addEventListener('pointerenter', handleEnter);
     element.addEventListener('pointerup', handleOut);
     return () => {
-      element.removeEventListener('pointerdown', handleMove);
-      element.removeEventListener('pointermove', handleMove);
+      element.removeEventListener('pointerenter', handleEnter);
       element.removeEventListener('pointerup', handleOut);
     };
   }, [svgRef]);
-  return mousePosition;
+  return pointerType;
 }
 function getTooltipHasData(trigger, displayedData) {
   if (trigger === 'item') {