@mui/x-charts 8.0.0-alpha.7 → 8.0.0-alpha.9

package/node/ChartsYAxis/ChartsYAxis.js

@@ -15,7 +15,6 @@ var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
 var _RtlProvider = require("@mui/system/RtlProvider");
-var _CartesianProvider = require("../context/CartesianProvider");
 var _useTicks = require("../hooks/useTicks");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
@@ -23,6 +22,8 @@ var _ChartsText = require("../ChartsText");
 var _axisClasses = require("../ChartsAxis/axisClasses");
 var _isInfinity = require("../internals/isInfinity");
 var _isBandScale = require("../internals/isBandScale");
+var _ChartProvider = require("../context/ChartProvider");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["scale", "tickNumber"];
 const useUtilityClasses = ownerState => {
@@ -65,7 +66,7 @@ function ChartsYAxis(inProps) {
   const {
     yAxisIds,
     yAxis
-  } = (0, _CartesianProvider.useCartesianContext)();
+  } = (0, _hooks.useYAxes)();
   const _yAxis = yAxis[inProps.axisId ?? yAxisIds[0]],
     {
       scale: yScale,
@@ -99,12 +100,14 @@ function ChartsYAxis(inProps) {
   const classes = useUtilityClasses((0, _extends2.default)({}, defaultizedProps, {
     theme
   }));
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
   const {
     left,
     top,
     width,
-    height,
-    isPointInside
+    height
   } = (0, _useDrawingArea.useDrawingArea)();
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const yTicks = (0, _useTicks.useTicks)({
@@ -185,7 +188,7 @@ function ChartsYAxis(inProps) {
       const xTickLabel = positionSign * (tickSize + 2);
       const yTickLabel = labelOffset;
       const skipLabel = typeof tickLabelInterval === 'function' && !tickLabelInterval?.(value, index);
-      const showLabel = isPointInside({
+      const showLabel = instance.isPointInside({
         x: -1,
         y: offset
       }, {

package/node/Gauge/Gauge.js

@@ -95,6 +95,11 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: _propTypes.default.number,
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: _propTypes.default.string,
   /**
    * The radius between circle center and the beginning of the arc.
    * Can be a number (in px) or a string with a percentage such as '50%'.
@@ -106,7 +111,6 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
    * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   * @default object Depends on the charts type.
    */
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,

package/node/Gauge/GaugeContainer.js

@@ -13,9 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _ChartsSurface = require("../ChartsSurface");
-var _DrawingAreaProvider = require("../context/DrawingAreaProvider");
 var _GaugeProvider = require("./GaugeProvider");
-var _SizeProvider = require("../context/SizeProvider");
 var _ChartProvider = require("../context/ChartProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["width", "height", "margin", "title", "desc", "value", "valueMin", "valueMax", "startAngle", "endAngle", "outerRadius", "innerRadius", "cornerRadius", "cx", "cy", "children"];
@@ -47,44 +45,42 @@ const GaugeContainer = exports.GaugeContainer = /*#__PURE__*/React.forwardRef(fu
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartProvider.ChartProvider, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SizeProvider.SizeProvider, {
+    pluginParams: {
       width: inWidth,
       height: inHeight,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingAreaProvider.DrawingAreaProvider, {
-        margin: (0, _extends2.default)({
-          left: 10,
-          right: 10,
-          top: 10,
-          bottom: 10
-        }, margin),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeProvider.GaugeProvider, {
-          value: value,
-          valueMin: valueMin,
-          valueMax: valueMax,
-          startAngle: startAngle,
-          endAngle: endAngle,
-          outerRadius: outerRadius,
-          innerRadius: innerRadius,
-          cornerRadius: cornerRadius,
-          cx: cx,
-          cy: cy,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({
-            title: title,
-            desc: desc,
-            disableAxisListener: true,
-            role: "meter",
-            "aria-valuenow": value === null ? undefined : value,
-            "aria-valuemin": valueMin,
-            "aria-valuemax": valueMax
-          }, other, {
-            ref: ref,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GStyled, {
-              "aria-hidden": "true",
-              children: children
-            })
-          }))
+      margin: (0, _extends2.default)({
+        left: 10,
+        right: 10,
+        top: 10,
+        bottom: 10
+      }, margin)
+    },
+    plugins: [],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeProvider.GaugeProvider, {
+      value: value,
+      valueMin: valueMin,
+      valueMax: valueMax,
+      startAngle: startAngle,
+      endAngle: endAngle,
+      outerRadius: outerRadius,
+      innerRadius: innerRadius,
+      cornerRadius: cornerRadius,
+      cx: cx,
+      cy: cy,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({
+        title: title,
+        desc: desc,
+        role: "meter",
+        "aria-valuenow": value === null ? undefined : value,
+        "aria-valuemin": valueMin,
+        "aria-valuemax": valueMax
+      }, other, {
+        ref: ref,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GStyled, {
+          "aria-hidden": "true",
+          children: children
         })
-      })
+      }))
     })
   });
 });
@@ -129,6 +125,11 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: _propTypes.default.number,
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: _propTypes.default.string,
   /**
    * The radius between circle center and the beginning of the arc.
    * Can be a number (in px) or a string with a percentage such as '50%'.
@@ -140,7 +141,6 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
    * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   * @default object Depends on the charts type.
    */
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,

package/node/Gauge/GaugeProvider.js

@@ -1,4 +1,6 @@
 "use strict";
+// @ignore - do not document.
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -12,8 +14,6 @@ var _getPercentageValue = require("../internals/getPercentageValue");
 var _utils = require("./utils");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _jsxRuntime = require("react/jsx-runtime");
-// @ignore - do not document.
-
 const GaugeContext = exports.GaugeContext = /*#__PURE__*/React.createContext({
   value: null,
   valueMin: 0,

package/node/LineChart/AnimatedArea.js

@@ -35,7 +35,7 @@ function AnimatedArea(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const stringInterpolator = (0, _useStringInterpolator.useStringInterpolator)(d);
   const transitionChange = (0, _web.useTransition)([stringInterpolator], {
-    from: {
+    from: skipAnimation ? undefined : {
       value: 0
     },
     to: {

package/node/LineChart/AnimatedLine.js

@@ -35,7 +35,7 @@ function AnimatedLine(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const stringInterpolator = (0, _useStringInterpolator.useStringInterpolator)(d);
   const transitionChange = (0, _web.useTransition)([stringInterpolator], {
-    from: {
+    from: skipAnimation ? undefined : {
       value: 0
     },
     to: {

package/node/LineChart/AppearingMask.js

@@ -18,7 +18,7 @@ function AppearingMask(props) {
   const drawingArea = (0, _hooks.useDrawingArea)();
   const chartId = (0, _hooks.useChartId)();
   const transitionAppear = (0, _web.useTransition)([drawingArea], {
-    from: v => ({
+    from: props.skipAnimation ? undefined : v => ({
       animatedWidth: v.left
     }),
     enter: v => ({

package/node/LineChart/AreaPlot.js

@@ -13,14 +13,15 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
-var _CartesianProvider = require("../context/CartesianProvider");
 var _AreaElement = require("./AreaElement");
 var _useScale = require("../hooks/useScale");
 var _getCurve = _interopRequireDefault(require("../internals/getCurve"));
+var _isBandScale = require("../internals/isBandScale");
 var _constants = require("../constants");
-var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
 var _useSeries = require("../hooks/useSeries");
 var _AnimationProvider = require("../context/AnimationProvider");
+var _useChartGradientId = require("../hooks/useChartGradientId");
+var _useAxis = require("../hooks/useAxis");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation"];
 const AreaPlotRoot = (0, _styles.styled)('g', {
@@ -34,7 +35,15 @@ const AreaPlotRoot = (0, _styles.styled)('g', {
 });
 const useAggregatedData = () => {
   const seriesData = (0, _useSeries.useLineSeries)();
-  const axisData = (0, _CartesianProvider.useCartesianContext)();
+  const {
+    xAxis,
+    xAxisIds
+  } = (0, _useAxis.useXAxes)();
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _useAxis.useYAxes)();
+  const getGradientId = (0, _useChartGradientId.useChartGradientIdBuilder)();
 
   // This memo prevents odd line chart behavior when hydrating.
   const allData = React.useMemo(() => {
@@ -45,12 +54,6 @@ const useAggregatedData = () => {
       series,
       stackingGroups
     } = seriesData;
-    const {
-      xAxis,
-      yAxis,
-      xAxisIds,
-      yAxisIds
-    } = axisData;
     const defaultXAxisId = xAxisIds[0];
     const defaultYAxisId = yAxisIds[0];
     return stackingGroups.flatMap(({
@@ -64,12 +67,15 @@ const useAggregatedData = () => {
           stackedData,
           data,
           connectNulls,
-          baseline
+          baseline,
+          curve,
+          strictStepCurve
         } = series[seriesId];
-        const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
+        const xScale = xAxis[xAxisId].scale;
+        const xPosition = (0, _useScale.getValueToPositionMapper)(xScale);
         const yScale = yAxis[yAxisId].scale;
         const xData = xAxis[xAxisId].data;
-        const gradientUsed = yAxis[yAxisId].colorScale && [yAxisId, 'y'] || xAxis[xAxisId].colorScale && [xAxisId, 'x'] || undefined;
+        const gradientId = yAxis[yAxisId].colorScale && getGradientId(yAxisId) || xAxis[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
             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.`);
@@ -78,7 +84,42 @@ const useAggregatedData = () => {
             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 => {
+        const shouldExpand = curve?.includes('step') && !strictStepCurve && (0, _isBandScale.isBandScale)(xScale);
+        const formattedData = xData?.flatMap((x, index) => {
+          const nullData = data[index] == null;
+          if (shouldExpand) {
+            const rep = [{
+              x,
+              y: stackedData[index],
+              nullData,
+              isExtension: false
+            }];
+            if (!nullData && (index === 0 || data[index - 1] == null)) {
+              rep.unshift({
+                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
+              rep.push({
+                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            return rep;
+          }
+          return {
+            x,
+            y: stackedData[index],
+            nullData
+          };
+        }) ?? [];
+        const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
+        const areaPath = (0, _d3Shape.area)().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y0(d => {
           if (typeof baseline === 'number') {
             return yScale(baseline);
           }
@@ -94,21 +135,15 @@ const useAggregatedData = () => {
           }
           return value;
         }).y1(d => d.y && yScale(d.y[1]));
-        const curve = (0, _getCurve.default)(series[seriesId].curve);
-        const formattedData = xData?.map((x, index) => ({
-          x,
-          y: stackedData[index]
-        })) ?? [];
-        const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
-        const d = areaPath.curve(curve)(d3Data) || '';
+        const d = areaPath.curve((0, _getCurve.default)(curve))(d3Data) || '';
         return (0, _extends2.default)({}, series[seriesId], {
-          gradientUsed,
+          gradientId,
           d,
           seriesId
         });
       });
     });
-  }, [seriesData, axisData]);
+  }, [seriesData, xAxisIds, yAxisIds, xAxis, yAxis, getGradientId]);
   return allData;
 };
 
@@ -132,7 +167,6 @@ function AreaPlot(props) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const skipAnimation = (0, _AnimationProvider.useSkipAnimation)(inSkipAnimation);
-  const getGradientId = (0, _ChartsAxesGradients.useChartGradient)();
   const completedData = useAggregatedData();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(AreaPlotRoot, (0, _extends2.default)({}, other, {
     children: completedData.map(({
@@ -140,12 +174,12 @@ function AreaPlot(props) {
       seriesId,
       color,
       area,
-      gradientUsed
+      gradientId
     }) => !!area && /*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaElement.AreaElement, {
       id: seriesId,
       d: d,
       color: color,
-      gradientId: gradientUsed && getGradientId(...gradientUsed),
+      gradientId: gradientId,
       slots: slots,
       slotProps: slotProps,
       onClick: onItemClick && (event => onItemClick(event, {

package/node/LineChart/CircleMarkElement.js

@@ -12,7 +12,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
-var _warning = require("@mui/x-internals/warning");
 var _web = require("@react-spring/web");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _context = require("../context");
@@ -21,7 +20,7 @@ var _useSelector = require("../internals/store/useSelector");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useStore = require("../internals/store/useStore");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "shape"];
+const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation"];
 /**
  * The line mark element that only render circle for performance improvement.
  *
@@ -43,13 +42,9 @@ function CircleMarkElement(props) {
       color,
       dataIndex,
       onClick,
-      skipAnimation,
-      shape
+      skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  if (shape !== 'circle') {
-    (0, _warning.warnOnce)([`MUI X: The mark element of your line chart have shape "${shape}" which is not supported when using \`experimentalRendering=true\`.`, 'Only "circle" are supported with `experimentalRendering`.'].join('\n'), 'error');
-  }
   const theme = (0, _styles.useTheme)();
   const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)();
   const {

package/node/LineChart/LineChart.js

@@ -25,7 +25,7 @@ var _ChartsOnAxisClickHandler = require("../ChartsOnAxisClickHandler");
 var _ChartsOverlay = require("../ChartsOverlay");
 var _useLineChartProps = require("./useLineChartProps");
 var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
-var _context = require("../context");
+var _ChartDataProvider = require("../ChartDataProvider");
 var _ChartsSurface = require("../ChartsSurface");
 var _ChartsWrapper = require("../internals/components/ChartsWrapper");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -66,7 +66,7 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
     chartsSurfaceProps
   } = (0, _useChartContainerProps.useChartContainerProps)(chartContainerProps, ref);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
+  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, {
@@ -84,6 +84,9 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.object
+  }),
   /**
    * The configuration of axes highlight.
    * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
@@ -121,10 +124,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: _propTypes.default.bool,
-  /**
-   * If `true` marks will render `<circle />` instead of `<path />` and drop theme override for faster rendering.
-   */
-  experimentalMarkRendering: _propTypes.default.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -147,6 +146,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
   }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: _propTypes.default.string,
   /**
    * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -162,7 +166,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
    * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   * @default object Depends on the charts type.
    */
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,
@@ -222,6 +225,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    */
   slots: _propTypes.default.object,
   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]),
+  theme: _propTypes.default.oneOf(['dark', 'light']),
   title: _propTypes.default.string,
   /**
    * Indicate which axis to display the top of the charts.

package/node/LineChart/LineHighlightElement.js

@@ -13,12 +13,14 @@ 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 _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _styles = require("@mui/material/styles");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _getSymbol = require("../internals/getSymbol");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["x", "y", "id", "classes", "color"];
+const _excluded = ["x", "y", "id", "classes", "color", "shape"];
 function getHighlightElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiHighlightElement', slot);
 }
@@ -33,7 +35,18 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, getHighlightElementUtilityClass, classes);
 };
-const HighlightElement = (0, _styles.styled)('circle', {
+const HighlightPathElement = (0, _styles.styled)('path', {
+  name: 'MuiHighlightElement',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  ownerState
+}) => ({
+  transform: `translate(${ownerState.x}px, ${ownerState.y}px)`,
+  transformOrigin: `${ownerState.x}px ${ownerState.y}px`,
+  fill: ownerState.color
+}));
+const HighlightCircleElement = (0, _styles.styled)('circle', {
   name: 'MuiHighlightElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -60,7 +73,8 @@ function LineHighlightElement(props) {
       y,
       id,
       classes: innerClasses,
-      color
+      color,
+      shape
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = {
@@ -71,14 +85,19 @@ function LineHighlightElement(props) {
     y
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightElement, (0, _extends2.default)({
-    pointerEvents: "none",
-    ownerState: ownerState,
-    className: classes.root,
+  const Element = shape === 'circle' ? HighlightCircleElement : HighlightPathElement;
+  const additionalProps = shape === 'circle' ? {
     cx: 0,
     cy: 0,
     r: other.r === undefined ? 5 : other.r
-  }, other));
+  } : {
+    d: (0, _d3Shape.symbol)(_d3Shape.symbolsFill[(0, _getSymbol.getSymbol)(shape)])()
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({
+    pointerEvents: "none",
+    ownerState: ownerState,
+    className: classes.root
+  }, additionalProps, other));
 }
 process.env.NODE_ENV !== "production" ? LineHighlightElement.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -86,5 +105,6 @@ process.env.NODE_ENV !== "production" ? LineHighlightElement.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   classes: _propTypes.default.object,
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  shape: _propTypes.default.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired
 } : void 0;

package/node/LineChart/LineHighlightPlot.js

@@ -13,14 +13,14 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useStore = require("../internals/store/useStore");
 var _useSelector = require("../internals/store/useSelector");
-var _CartesianProvider = require("../context/CartesianProvider");
 var _LineHighlightElement = require("./LineHighlightElement");
 var _useScale = require("../hooks/useScale");
 var _constants = require("../constants");
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _useSeries = require("../hooks/useSeries");
-var _useDrawingArea = require("../hooks/useDrawingArea");
+var _ChartProvider = require("../context/ChartProvider");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useAxis = require("../hooks/useAxis");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
 /**
@@ -40,8 +40,17 @@ function LineHighlightPlot(props) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesData = (0, _useSeries.useLineSeries)();
-  const axisData = (0, _CartesianProvider.useCartesianContext)();
-  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
+  const {
+    xAxis,
+    xAxisIds
+  } = (0, _useAxis.useXAxes)();
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _useAxis.useYAxes)();
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
   const store = (0, _useStore.useStore)();
   const xAxisIdentifier = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionXAxis);
   const highlightedIndex = xAxisIdentifier?.index;
@@ -55,12 +64,6 @@ function LineHighlightPlot(props) {
     series,
     stackingGroups
   } = seriesData;
-  const {
-    xAxis,
-    yAxis,
-    xAxisIds,
-    yAxisIds
-  } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   const Element = slots?.lineHighlight ?? _LineHighlightElement.LineHighlightElement;
@@ -74,7 +77,8 @@ function LineHighlightPlot(props) {
           yAxisId = defaultYAxisId,
           stackedData,
           data,
-          disableHighlight
+          disableHighlight,
+          shape = 'circle'
         } = series[seriesId];
         if (disableHighlight || data[highlightedIndex] == null) {
           return null;
@@ -88,7 +92,7 @@ function LineHighlightPlot(props) {
         const x = xScale(xData[highlightedIndex]);
         const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
 
-        if (!drawingArea.isPointInside({
+        if (!instance.isPointInside({
           x,
           y
         })) {
@@ -99,7 +103,8 @@ function LineHighlightPlot(props) {
           id: seriesId,
           color: colorGetter(highlightedIndex),
           x: x,
-          y: y
+          y: y,
+          shape: shape
         }, slotProps?.lineHighlight), `${seriesId}`);
       });
     })