@mui/x-charts 8.0.0-alpha.10 → 8.0.0-alpha.11

package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.js

@@ -6,12 +6,18 @@ import { warnOnce } from '@mui/x-internals/warning';
 import { rainbowSurgePalette } from "../../../../colorPalettes/index.js";
 import { useSelector } from "../../../store/useSelector.js";
 import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/useChartDimensions.selectors.js";
-import { selectorChartSeriesState } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
+import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
 import { defaultizeAxis } from "./defaultizeAxis.js";
+import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxis.selectors.js";
+import { getAxisValue } from "./getAxisValue.js";
+import { getSVGPoint } from "../../../getSVGPoint.js";
+import { selectorChartsInteractionAxis } from "../useChartInteraction/index.js";
 export const useChartCartesianAxis = ({
   params,
   store,
-  seriesConfig
+  seriesConfig,
+  svgRef,
+  instance
 }) => {
   const {
     xAxis,
@@ -26,7 +32,16 @@ export const useChartCartesianAxis = ({
     }
   }
   const drawingArea = useSelector(store, selectorChartDrawingArea);
-  const formattedSeries = useSelector(store, selectorChartSeriesState);
+  const processedSeries = useSelector(store, selectorChartSeriesProcessed);
+  const interactionAxis = useSelector(store, selectorChartsInteractionAxis);
+  const {
+    axis: xAxisWithScale,
+    axisIds: xAxisIds
+  } = useSelector(store, selectorChartXAxis);
+  const {
+    axis: yAxisWithScale,
+    axisIds: yAxisIds
+  } = useSelector(store, selectorChartYAxis);
 
   // The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartCartesianAxis`
   // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
@@ -42,13 +57,135 @@ export const useChartCartesianAxis = ({
         y: defaultizeAxis(yAxis, dataset, 'y')
       })
     }));
-  }, [seriesConfig, drawingArea, formattedSeries, xAxis, yAxis, dataset, store]);
+  }, [seriesConfig, drawingArea, xAxis, yAxis, dataset, store]);
+  const usedXAxis = xAxisIds[0];
+  const usedYAxis = yAxisIds[0];
+
+  // Use a ref to avoid rerendering on every mousemove event.
+  const mousePosition = React.useRef({
+    isInChart: false,
+    x: -1,
+    y: -1
+  });
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || params.disableAxisListener) {
+      return () => {};
+    }
+    const handleOut = () => {
+      mousePosition.current = {
+        isInChart: false,
+        x: -1,
+        y: -1
+      };
+      instance.cleanInteraction();
+    };
+    const handleMove = event => {
+      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
+      const svgPoint = getSVGPoint(element, target);
+      mousePosition.current.x = svgPoint.x;
+      mousePosition.current.y = svgPoint.y;
+      if (!instance.isPointInside(svgPoint, {
+        targetElement: event.target
+      })) {
+        if (mousePosition.current.isInChart) {
+          store.update(prev => _extends({}, prev, {
+            interaction: {
+              item: null,
+              axis: {
+                x: null,
+                y: null
+              }
+            }
+          }));
+          mousePosition.current.isInChart = false;
+        }
+        return;
+      }
+      mousePosition.current.isInChart = true;
+      instance.setAxisInteraction({
+        x: getAxisValue(xAxisWithScale[usedXAxis], svgPoint.x),
+        y: getAxisValue(yAxisWithScale[usedYAxis], svgPoint.y)
+      });
+    };
+    const handleDown = event => {
+      const target = event.currentTarget;
+      if (!target) {
+        return;
+      }
+      if (target.hasPointerCapture(event.pointerId)) {
+        target.releasePointerCapture(event.pointerId);
+      }
+    };
+    element.addEventListener('pointerdown', handleDown);
+    element.addEventListener('pointermove', handleMove);
+    element.addEventListener('pointerout', handleOut);
+    element.addEventListener('pointercancel', handleOut);
+    element.addEventListener('pointerleave', handleOut);
+    return () => {
+      element.removeEventListener('pointerdown', handleDown);
+      element.removeEventListener('pointermove', handleMove);
+      element.removeEventListener('pointerout', handleOut);
+      element.removeEventListener('pointercancel', handleOut);
+      element.removeEventListener('pointerleave', handleOut);
+    };
+  }, [svgRef, store, xAxisWithScale, usedXAxis, yAxisWithScale, usedYAxis, instance, params.disableAxisListener]);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !params.onAxisClick) {
+      return () => {};
+    }
+    const handleMouseClick = event => {
+      event.preventDefault();
+      let dataIndex = null;
+      let isXaxis = false;
+      if (interactionAxis.x === null && interactionAxis.y === null) {
+        const svgPoint = getSVGPoint(element, event);
+        const xIndex = getAxisValue(xAxisWithScale[usedXAxis], svgPoint.x)?.index ?? null;
+        isXaxis = xIndex !== null && xIndex !== -1;
+        dataIndex = isXaxis ? xIndex : getAxisValue(yAxisWithScale[usedYAxis], svgPoint.y)?.index ?? null;
+      } else {
+        isXaxis = interactionAxis.x !== null && interactionAxis.x.index !== -1;
+        dataIndex = isXaxis ? interactionAxis.x && interactionAxis.x.index : interactionAxis.y && interactionAxis.y.index;
+      }
+      const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
+      if (dataIndex == null || dataIndex === -1) {
+        return;
+      }
+
+      // The .data exist because otherwise the dataIndex would be null or -1.
+      const axisValue = (isXaxis ? xAxisWithScale : yAxisWithScale)[USED_AXIS_ID].data[dataIndex];
+      const seriesValues = {};
+      Object.keys(processedSeries).filter(seriesType => ['bar', 'line'].includes(seriesType)).forEach(seriesType => {
+        processedSeries[seriesType]?.seriesOrder.forEach(seriesId => {
+          const seriesItem = processedSeries[seriesType].series[seriesId];
+          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];
+          }
+        });
+      });
+      params.onAxisClick?.(event, {
+        dataIndex,
+        axisValue,
+        seriesValues
+      });
+    };
+    element.addEventListener('click', handleMouseClick);
+    return () => {
+      element.removeEventListener('click', handleMouseClick);
+    };
+  }, [params.onAxisClick, processedSeries, svgRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, params, interactionAxis, usedXAxis, usedYAxis]);
   return {};
 };
 useChartCartesianAxis.params = {
   xAxis: true,
   yAxis: true,
-  dataset: true
+  dataset: true,
+  onAxisClick: true,
+  disableAxisListener: true
 };
 useChartCartesianAxis.getDefaultizedParams = ({
   params

package/modern/models/axis.js

@@ -8,4 +8,8 @@ export function isBandScaleConfig(scaleConfig) {
 }
 export function isPointScaleConfig(scaleConfig) {
   return scaleConfig.scaleType === 'point';
-}
+}
+
+/**
+ * The data format returned by onAxisClick.
+ */

package/node/BarChart/BarChart.js

@@ -18,7 +18,6 @@ var _ChartsLegend = require("../ChartsLegend");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _ChartsClipPath = require("../ChartsClipPath");
 var _ChartsGrid = require("../ChartsGrid");
-var _ChartsOnAxisClickHandler = require("../ChartsOnAxisClickHandler");
 var _ChartsOverlay = require("../ChartsOverlay/ChartsOverlay");
 var _useBarChartProps = require("./useBarChartProps");
 var _ChartDataProvider = require("../ChartDataProvider");
@@ -46,7 +45,6 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
     chartsWrapperProps,
     chartContainerProps,
     barPlotProps,
-    axisClickHandlerProps,
     gridProps,
     clipPathProps,
     clipPathGroupProps,
@@ -64,7 +62,7 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
       children: [!props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
-        children: [props.onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, (0, _extends2.default)({}, axisClickHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlot.BarPlot, (0, _extends2.default)({}, barPlotProps)), /*#__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)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
       }))]
@@ -111,7 +109,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   className: _propTypes.default.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
+   * @default rainbowSurgePalette
    */
   colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
   /**

package/node/BarChart/BarChart.plugins.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BAR_CHART_PLUGINS = void 0;
+var _useChartZAxis = require("../internals/plugins/featurePlugins/useChartZAxis");
+var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
+const BAR_CHART_PLUGINS = exports.BAR_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartCartesianAxis.useChartCartesianAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight];

package/node/BarChart/useBarChartProps.js

@@ -11,7 +11,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _constants = require("../constants");
 var _calculateMargins = require("../internals/calculateMargins");
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAxisClick", "axisHighlight", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend"];
+var _BarChart = require("./BarChart.plugins");
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "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.
@@ -30,7 +31,6 @@ const useBarChartProps = props => {
       colors,
       dataset,
       sx,
-      onAxisClick,
       axisHighlight,
       grid,
       topAxis,
@@ -85,9 +85,10 @@ const useBarChartProps = props => {
     }, defaultAxisConfig)] : undefined),
     highlightedItem,
     onHighlightChange,
-    disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     className,
-    skipAnimation
+    skipAnimation,
+    plugins: _BarChart.BAR_CHART_PLUGINS
   });
   const barPlotProps = {
     onItemClick,
@@ -96,9 +97,6 @@ const useBarChartProps = props => {
     borderRadius,
     barLabel
   };
-  const axisClickHandlerProps = {
-    onAxisClick
-  };
   const gridProps = {
     vertical: grid?.vertical,
     horizontal: grid?.horizontal
@@ -140,7 +138,6 @@ const useBarChartProps = props => {
     chartsWrapperProps,
     chartContainerProps,
     barPlotProps,
-    axisClickHandlerProps,
     gridProps,
     clipPathProps,
     clipPathGroupProps,

package/node/ChartContainer/ChartContainer.js

@@ -65,7 +65,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
   className: _propTypes.default.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
+   * @default rainbowSurgePalette
    */
   colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
   /**
@@ -107,6 +107,13 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     right: _propTypes.default.number,
     top: _propTypes.default.number
   }),
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   */
+  onAxisClick: _propTypes.default.func,
   /**
    * The callback fired when the highlighted item changes.
    *

package/node/ChartContainer/useChartContainerProps.js

@@ -9,9 +9,10 @@ exports.useChartContainerProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _allPlugins = require("../internals/plugins/allPlugins");
-const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "skipAnimation", "seriesConfig"];
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "skipAnimation", "seriesConfig", "plugins"];
 const useChartContainerProps = (props, ref) => {
-  const {
+  const _ref = props,
+    {
       width,
       height,
       margin,
@@ -20,6 +21,7 @@ const useChartContainerProps = (props, ref) => {
       colors,
       dataset,
       desc,
+      onAxisClick,
       disableAxisListener,
       highlightedItem,
       onHighlightChange,
@@ -29,14 +31,14 @@ const useChartContainerProps = (props, ref) => {
       yAxis,
       zAxis,
       skipAnimation,
-      seriesConfig
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+      seriesConfig,
+      plugins
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const chartsSurfaceProps = (0, _extends2.default)({
     title,
     desc,
     sx,
-    disableAxisListener,
     ref
   }, other);
   const chartDataProviderProps = {
@@ -46,14 +48,16 @@ const useChartContainerProps = (props, ref) => {
     dataset,
     highlightedItem,
     onHighlightChange,
+    onAxisClick,
     xAxis,
     yAxis,
     zAxis,
     skipAnimation,
     width,
     height,
+    disableAxisListener,
     seriesConfig,
-    plugins: _allPlugins.ALL_PLUGINS
+    plugins: plugins ?? _allPlugins.ALL_PLUGINS
   };
   return {
     chartDataProviderProps,

package/node/ChartDataProvider/ChartDataProvider.js

@@ -62,9 +62,12 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
   children: _propTypes.default.node,
   /**
    * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
+   * @default rainbowSurgePalette
    */
   colors: _propTypes.default.any,
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
   dataset: _propTypes.default.any,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.

package/node/ChartsSurface/ChartsSurface.js

@@ -13,14 +13,13 @@ var _styles = require("@mui/material/styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _useAxisEvents = require("../hooks/useAxisEvents");
 var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
 var _useSvgRef = require("../hooks/useSvgRef");
 var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
 var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "disableAxisListener", "className", "title", "desc"];
+const _excluded = ["children", "className", "title", "desc"];
 const ChartsSurfaceStyles = (0, _styles.styled)('svg', {
   name: 'MuiChartsSurface',
   slot: 'Root'
@@ -72,14 +71,12 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
   });
   const {
       children,
-      disableAxisListener = false,
       className,
       title,
       desc
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
   const hasIntrinsicSize = svgHeight > 0 && svgWidth > 0;
-  (0, _useAxisEvents.useAxisEvents)(disableAxisListener);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChartsSurfaceStyles, (0, _extends2.default)({
     ownerState: {
       width: propsWidth,
@@ -104,12 +101,6 @@ process.env.NODE_ENV !== "production" ? ChartsSurface.propTypes = {
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   desc: _propTypes.default.string,
-  /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
-   */
-  disableAxisListener: _propTypes.default.bool,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   title: _propTypes.default.string
 } : void 0;

package/node/ChartsTooltip/ChartsTooltipContainer.js

@@ -34,6 +34,7 @@ const ChartsTooltipRoot = (0, _styles.styled)(_Popper.default, {
   pointerEvents: 'none',
   zIndex: theme.zIndex.modal
 }));
+const axisHasData = axis => axis?.data !== undefined && axis.data.length !== 0;
 
 /**
  * Demos:
@@ -58,7 +59,6 @@ function ChartsTooltipContainer(inProps) {
   const svgRef = (0, _useSvgRef.useSvgRef)();
   const pointerType = (0, _utils.usePointerType)();
   const xAxis = (0, _hooks.useXAxis)();
-  const xAxisHasData = xAxis.data !== undefined && xAxis.data.length !== 0;
   const popperRef = React.useRef(null);
   const positionRef = (0, _useLazyRef.default)(() => ({
     x: 0,
@@ -67,7 +67,7 @@ function ChartsTooltipContainer(inProps) {
   const store = (0, _useStore.useStore)();
   const isOpen = (0, _useSelector.useSelector)(store,
   // eslint-disable-next-line no-nested-ternary
-  trigger === 'axis' ? xAxisHasData ? _useChartInteraction.selectorChartsInteractionXAxisIsDefined : _useChartInteraction.selectorChartsInteractionYAxisIsDefined : _useChartInteraction.selectorChartsInteractionItemIsDefined);
+  trigger === 'axis' ? axisHasData(xAxis) ? _useChartInteraction.selectorChartsInteractionXAxisIsDefined : _useChartInteraction.selectorChartsInteractionYAxisIsDefined : _useChartInteraction.selectorChartsInteractionItemIsDefined);
   const popperOpen = pointerType !== null && isOpen; // tooltipHasData;
 
   React.useEffect(() => {

package/node/Gauge/Gauge.js

@@ -80,12 +80,6 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    */
   cy: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   desc: _propTypes.default.string,
-  /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
-   */
-  disableAxisListener: _propTypes.default.bool,
   /**
    * The end angle (deg).
    * @default 360

package/node/Gauge/GaugeContainer.js

@@ -110,12 +110,6 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    */
   cy: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   desc: _propTypes.default.string,
-  /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
-   */
-  disableAxisListener: _propTypes.default.bool,
   /**
    * The end angle (deg).
    * @default 360

package/node/LineChart/LineChart.js

@@ -21,7 +21,6 @@ var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _ChartsClipPath = require("../ChartsClipPath");
 var _LineHighlightPlot = require("./LineHighlightPlot");
 var _ChartsGrid = require("../ChartsGrid");
-var _ChartsOnAxisClickHandler = require("../ChartsOnAxisClickHandler");
 var _ChartsOverlay = require("../ChartsOverlay");
 var _useLineChartProps = require("./useLineChartProps");
 var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
@@ -47,7 +46,6 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
   const {
     chartsWrapperProps,
     chartContainerProps,
-    axisClickHandlerProps,
     gridProps,
     clipPathProps,
     clipPathGroupProps,
@@ -69,7 +67,7 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
       children: [!props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
-        children: [props.onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, (0, _extends2.default)({}, axisClickHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
+        children: [/*#__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)(_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,
@@ -106,7 +104,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   className: _propTypes.default.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
+   * @default rainbowSurgePalette
    */
   colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
   /**

package/node/LineChart/LineChart.plugins.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LINE_CHART_PLUGINS = void 0;
+var _useChartZAxis = require("../internals/plugins/featurePlugins/useChartZAxis");
+var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
+const LINE_CHART_PLUGINS = exports.LINE_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartCartesianAxis.useChartCartesianAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight];

package/node/LineChart/useLineChartProps.js

@@ -11,7 +11,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _constants = require("../constants");
 var _calculateMargins = require("../internals/calculateMargins");
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
+var _LineChart = require("./LineChart.plugins");
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "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.
@@ -30,7 +31,6 @@ const useLineChartProps = props => {
       colors,
       dataset,
       sx,
-      onAxisClick,
       onAreaClick,
       onLineClick,
       onMarkClick,
@@ -79,13 +79,11 @@ const useLineChartProps = props => {
     yAxis,
     highlightedItem,
     onHighlightChange,
-    disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     className,
-    skipAnimation
+    skipAnimation,
+    plugins: _LineChart.LINE_CHART_PLUGINS
   });
-  const axisClickHandlerProps = {
-    onAxisClick
-  };
   const gridProps = {
     vertical: grid?.vertical,
     horizontal: grid?.horizontal
@@ -144,7 +142,6 @@ const useLineChartProps = props => {
   return {
     chartsWrapperProps,
     chartContainerProps,
-    axisClickHandlerProps,
     gridProps,
     clipPathProps,
     clipPathGroupProps,