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

package/modern/LineChart/plugin.js

@@ -1,9 +1,11 @@
 import { getExtremumX, getExtremumY } from "./extremums.js";
 import formatter from "./formatter.js";
 import getColor from "./getColor.js";
+import legendGetter from "./legend.js";
 export const plugin = {
   colorProcessor: getColor,
   seriesProcessor: formatter,
+  legendGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY
 };

package/modern/LineChart/useLineChartProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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", "experimentalMarkRendering"];
+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"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { calculateMargins } from "../internals/calculateMargins.js";
@@ -44,8 +44,7 @@ export const useLineChartProps = props => {
       loading,
       highlightedItem,
       onHighlightChange,
-      className,
-      experimentalMarkRendering
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
@@ -106,8 +105,7 @@ export const useLineChartProps = props => {
     slots,
     slotProps,
     onItemClick: onMarkClick,
-    skipAnimation,
-    experimentalRendering: experimentalMarkRendering
+    skipAnimation
   };
   const overlayProps = {
     slots,

package/modern/PieChart/PieChart.js

@@ -11,7 +11,7 @@ import { ChartsLegend } from "../ChartsLegend/index.js";
 import { PiePlot } from "./PiePlot.js";
 import { ChartsOverlay } from "../ChartsOverlay/index.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
-import { ChartDataProvider } from "../context/index.js";
+import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
 import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/modern/PieChart/plugin.js

@@ -1,6 +1,8 @@
 import formatter from "./formatter.js";
 import getColor from "./getColor.js";
+import legendGetter from "./legend.js";
 export const plugin = {
   colorProcessor: getColor,
-  seriesProcessor: formatter
+  seriesProcessor: formatter,
+  legendGetter
 };

package/modern/ScatterChart/ScatterChart.js

@@ -14,7 +14,7 @@ import { ChartsVoronoiHandler } from "../ChartsVoronoiHandler/ChartsVoronoiHandl
 import { ChartsGrid } from "../ChartsGrid/index.js";
 import { useScatterChartProps } from "./useScatterChartProps.js";
 import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
-import { ChartDataProvider } from "../context/index.js";
+import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
 import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/modern/ScatterChart/plugin.js

@@ -1,9 +1,11 @@
 import { getExtremumX, getExtremumY } from "./extremums.js";
 import formatter from "./formatter.js";
 import getColor from "./getColor.js";
+import legendGetter from "./legend.js";
 export const plugin = {
   seriesProcessor: formatter,
   colorProcessor: getColor,
+  legendGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY
 };

package/modern/context/AnimationProvider/AnimationProvider.js

@@ -17,7 +17,7 @@ function AnimationProvider(props) {
 
   // We use the value of `isAnimationDisabledEnvironment` as the initial value of `skipAnimation` to avoid
   // re-rendering the component on environments where matchMedia is not supported, hence skipAnimation will always be true.
-  const [skipAnimation, setSkipAnimation] = React.useState(isAnimationDisabledEnvironment || undefined);
+  const [skipAnimation, setSkipAnimation] = React.useState(process.env.NODE_ENV === 'test' ? isAnimationDisabledEnvironment || undefined : undefined);
   useIsomorphicLayoutEffect(() => {
     if (isAnimationDisabledEnvironment) {
       return undefined;

package/modern/context/index.js

@@ -1,2 +1 @@
-export * from "./HighlightedProvider/index.js";
-export { ChartDataProvider } from "./ChartDataProvider/index.js";
+export * from "./HighlightedProvider/index.js";

package/modern/hooks/useLegend.js

@@ -1,19 +1,12 @@
 'use client';
 
-import getBarLegend from "../BarChart/legend.js";
-import getScatterLegend from "../ScatterChart/legend.js";
-import getLineLegend from "../LineChart/legend.js";
-import getPieLegend from "../PieChart/legend.js";
+import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useChartSeries/index.js";
 import { useSeries } from "./useSeries.js";
-const legendGetter = {
-  bar: getBarLegend,
-  scatter: getScatterLegend,
-  line: getLineLegend,
-  pie: getPieLegend
-};
-function getSeriesToDisplay(series) {
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+function getSeriesToDisplay(series, seriesConfig) {
   return Object.keys(series).flatMap(seriesType => {
-    const getter = legendGetter[seriesType];
+    const getter = seriesConfig[seriesType].legendGetter;
     return getter === undefined ? [] : getter(series[seriesType]);
   });
 }
@@ -29,7 +22,9 @@ function getSeriesToDisplay(series) {
  */
 export function useLegend() {
   const series = useSeries();
+  const store = useStore();
+  const seriesConfig = useSelector(store, selectorChartSeriesConfig);
   return {
-    items: getSeriesToDisplay(series)
+    items: getSeriesToDisplay(series, seriesConfig)
   };
 }

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0-alpha.8
+ * @mui/x-charts v8.0.0-alpha.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -30,4 +30,5 @@ export * from "./ScatterChart/index.js";
 export * from "./SparkLineChart/index.js";
 export * from "./Gauge/index.js";
 export * from "./ChartsSurface/index.js";
-export * from "./ChartContainer/index.js";
+export * from "./ChartContainer/index.js";
+export * from "./ChartDataProvider/index.js";

package/modern/internals/index.js

@@ -11,7 +11,7 @@ export { useScatterChartProps } from "../ScatterChart/useScatterChartProps.js";
 export { useLineChartProps } from "../LineChart/useLineChartProps.js";
 export { useBarChartProps } from "../BarChart/useBarChartProps.js";
 export * from "../ChartContainer/useChartContainerProps.js";
-export * from "../context/ChartDataProvider/useChartDataProviderProps.js";
+export * from "../ChartDataProvider/useChartDataProviderProps.js";
 
 // plugins
 export * from "./plugins/corePlugins/useChartId/index.js";
@@ -38,7 +38,6 @@ export * from "./getScale.js";
 
 export * from "../context/AnimationProvider/index.js";
 export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";
-export * from "../context/ChartDataProvider/index.js";
 export * from "../context/ChartProvider/index.js";
 
 // series configuration

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

@@ -1,4 +1,5 @@
 export { useChartCartesianAxis } from "./useChartCartesianAxis.js";
+export * from "./useChartCartesianAxis.selectors.js";
 export { defaultizeAxis } from "./defaultizeAxis.js";
 export * from "./computeAxisValue.js";
 export * from "./zoom.types.js";

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

@@ -21,7 +21,7 @@ export const selectorChartRawYAxis = createSelector(selectorChartCartesianAxisSt
  */
 
 const selectorChartZoomMap = createSelector(selectorChartZoomState, zoom => zoom?.zoomData && createZoomMap(zoom?.zoomData));
-const selectorChartZoomOptionsLookup = createSelector(selectorChartZoomState, zoom => zoom?.optionsLookup);
+const selectorChartZoomOptionsLookup = createSelector(selectorChartZoomState, () => undefined);
 const selectorChartXFilter = createSelector([selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartSeriesConfig, selectorChartSeriesProcessed], (zoomMap, zoomOptions, seriesConfig, formattedSeries) => zoomMap && zoomOptions && createAxisFilterMapper({
   zoomMap,
   zoomOptions,
@@ -42,6 +42,7 @@ const selectorChartZoomAxisFilters = createSelector([selectorChartXFilter, selec
     return undefined;
   }
   const xFilters = xAxis.reduce((acc, axis, index) => {
+    // @ts-expect-error The type is defined in the pro package
     const filter = xMapper(axis, index);
     if (filter !== null) {
       acc[axis.id] = filter;
@@ -49,6 +50,7 @@ const selectorChartZoomAxisFilters = createSelector([selectorChartXFilter, selec
     return acc;
   }, {});
   const yFilters = yAxis.reduce((acc, axis, index) => {
+    // @ts-expect-error The type is defined in the pro package
     const filter = yMapper(axis, index);
     if (filter !== null) {
       acc[axis.id] = filter;

package/node/BarChart/BarChart.js

@@ -21,7 +21,7 @@ var _ChartsGrid = require("../ChartsGrid");
 var _ChartsOnAxisClickHandler = require("../ChartsOnAxisClickHandler");
 var _ChartsOverlay = require("../ChartsOverlay/ChartsOverlay");
 var _useBarChartProps = require("./useBarChartProps");
-var _context = require("../context");
+var _ChartDataProvider = require("../ChartDataProvider");
 var _ChartsSurface = require("../ChartsSurface");
 var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
 var _ChartsWrapper = require("../internals/components/ChartsWrapper");
@@ -61,7 +61,7 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
     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, {

package/node/BarChart/plugin.js

@@ -7,10 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.plugin = void 0;
 var _extremums = require("./extremums");
 var _formatter = _interopRequireDefault(require("./formatter"));
+var _legend = _interopRequireDefault(require("./legend"));
 var _getColor = _interopRequireDefault(require("./getColor"));
 const plugin = exports.plugin = {
   seriesProcessor: _formatter.default,
   colorProcessor: _getColor.default,
+  legendGetter: _legend.default,
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY
 };

package/node/ChartContainer/ChartContainer.js

@@ -10,7 +10,7 @@ exports.ChartContainer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ChartDataProvider = require("../context/ChartDataProvider");
+var _ChartDataProvider = require("../ChartDataProvider");
 var _useChartContainerProps = require("./useChartContainerProps");
 var _ChartsSurface = require("../ChartsSurface");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -21,7 +21,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  * Demos:
  *
- * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ * - [Composition](https://mui.com/x/api/charts/composition/)
  *
  * API:
  *

package/node/{context/ChartDataProvider → ChartDataProvider}/ChartDataProvider.js

@@ -11,9 +11,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useChartDataProviderProps = require("./useChartDataProviderProps");
-var _AnimationProvider = require("../AnimationProvider");
-var _HighlightedProvider = require("../HighlightedProvider");
-var _ChartProvider = require("../ChartProvider");
+var _AnimationProvider = require("../context/AnimationProvider");
+var _HighlightedProvider = require("../context/HighlightedProvider");
+var _ChartProvider = require("../context/ChartProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Orchestrates the data providers for the chart components and hooks.
@@ -22,7 +22,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  * Demos:
  *
- * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ * - [Composition](https://mui.com/x/api/charts/composition/)
  *
  * API:
  *

package/node/ChartsSurface/ChartsSurface.js

@@ -48,7 +48,7 @@ const ChartsSurfaceStyles = (0, _styles.styled)('svg', {
  *
  * Demos:
  *
- * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ * - [Composition](https://mui.com/x/api/charts/composition/)
  *
  * API:
  *

package/node/ChartsTooltip/utils.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

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/AreaPlot.js

@@ -16,6 +16,7 @@ var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 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 _useSeries = require("../hooks/useSeries");
 var _AnimationProvider = require("../context/AnimationProvider");
@@ -66,9 +67,12 @@ 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 gradientId = yAxis[yAxisId].colorScale && getGradientId(yAxisId) || xAxis[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
@@ -80,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);
           }
@@ -96,13 +135,7 @@ 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], {
           gradientId,
           d,

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, {
@@ -124,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.
    */

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

@@ -77,7 +77,8 @@ function LineHighlightPlot(props) {
           yAxisId = defaultYAxisId,
           stackedData,
           data,
-          disableHighlight
+          disableHighlight,
+          shape = 'circle'
         } = series[seriesId];
         if (disableHighlight || data[highlightedIndex] == null) {
           return null;
@@ -102,7 +103,8 @@ function LineHighlightPlot(props) {
           id: seriesId,
           color: colorGetter(highlightedIndex),
           x: x,
-          y: y
+          y: y,
+          shape: shape
         }, slotProps?.lineHighlight), `${seriesId}`);
       });
     })

package/node/LineChart/LinePlot.js

@@ -16,6 +16,7 @@ var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _LineElement = require("./LineElement");
 var _useScale = require("../hooks/useScale");
 var _getCurve = _interopRequireDefault(require("../internals/getCurve"));
+var _isBandScale = require("../internals/isBandScale");
 var _constants = require("../constants");
 var _useSeries = require("../hooks/useSeries");
 var _AnimationProvider = require("../context/AnimationProvider");
@@ -64,9 +65,12 @@ const useAggregatedData = () => {
           yAxisId = defaultYAxisId,
           stackedData,
           data,
-          connectNulls
+          connectNulls,
+          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 gradientId = yAxis[yAxisId].colorScale && getGradientId(yAxisId) || xAxis[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
@@ -78,13 +82,43 @@ 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 linePath = (0, _d3Shape.line)().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));
-        const formattedData = xData?.map((x, index) => ({
-          x,
-          y: stackedData[index]
-        })) ?? [];
-        const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
-        const d = linePath.curve((0, _getCurve.default)(series[seriesId].curve))(d3Data) || '';
+        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 linePath = (0, _d3Shape.line)().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y(d => yScale(d.y[1]));
+        const d = linePath.curve((0, _getCurve.default)(curve))(d3Data) || '';
         return (0, _extends2.default)({}, series[seriesId], {
           gradientId,
           d,