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

package/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/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.d.ts

@@ -53,7 +53,6 @@ export interface UseChartCartesianAxisState {
      * @ignore - state populated by the useChartProZoomPlugin
      */
     zoom?: {
-        optionsLookup: Record<AxisId, DefaultizedZoomOptions>;
         isInteracting: boolean;
         zoomData: ZoomData[];
     };

package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.d.ts

@@ -28,8 +28,8 @@ export declare const selectorChartsInteractionItem: ((state: import("../../coreP
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const selectorChartsInteractionAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
@@ -59,8 +59,8 @@ export declare const selectorChartsInteractionAxis: ((state: import("../../coreP
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const selectorChartsInteractionXAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
@@ -102,8 +102,8 @@ export declare const selectorChartsInteractionXAxis: ((state: import("../../core
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const selectorChartsInteractionYAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
@@ -145,8 +145,8 @@ export declare const selectorChartsInteractionYAxis: ((state: import("../../core
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const selectorChartsInteractionItemIsDefined: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
@@ -190,16 +190,16 @@ export declare const selectorChartsInteractionItemIsDefined: ((state: import("..
         dependencyRecomputations: () => number;
         resetDependencyRecomputations: () => void;
     } & {
-        argsMemoize: typeof import("reselect").weakMapMemoize;
         memoize: typeof import("reselect").weakMapMemoize;
+        argsMemoize: typeof import("reselect").weakMapMemoize;
     }];
     recomputations: () => number;
     resetRecomputations: () => void;
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const selectorChartsInteractionXAxisIsDefined: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
@@ -261,16 +261,16 @@ export declare const selectorChartsInteractionXAxisIsDefined: ((state: import(".
         dependencyRecomputations: () => number;
         resetDependencyRecomputations: () => void;
     } & {
-        argsMemoize: typeof import("reselect").weakMapMemoize;
         memoize: typeof import("reselect").weakMapMemoize;
+        argsMemoize: typeof import("reselect").weakMapMemoize;
     }];
     recomputations: () => number;
     resetRecomputations: () => void;
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const selectorChartsInteractionYAxisIsDefined: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
@@ -332,16 +332,16 @@ export declare const selectorChartsInteractionYAxisIsDefined: ((state: import(".
         dependencyRecomputations: () => number;
         resetDependencyRecomputations: () => void;
     } & {
-        argsMemoize: typeof import("reselect").weakMapMemoize;
         memoize: typeof import("reselect").weakMapMemoize;
+        argsMemoize: typeof import("reselect").weakMapMemoize;
     }];
     recomputations: () => number;
     resetRecomputations: () => void;
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const selectorChartsInteractionIsVoronoiEnabled: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
@@ -371,6 +371,6 @@ export declare const selectorChartsInteractionIsVoronoiEnabled: ((state: import(
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };

package/internals/plugins/featurePlugins/useChartZAxis/useChartZAxis.selectors.d.ts

@@ -40,6 +40,6 @@ export declare const selectorChartZAxis: ((state: import("../../corePlugins/useC
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };

package/internals/plugins/models/seriesConfig/seriesConfig.types.d.ts

@@ -1,10 +1,11 @@
-import { SeriesProcessor } from './seriesProcessor.types';
+import { LegendGetter, SeriesProcessor } from './seriesProcessor.types';
 import { CartesianChartSeriesType, ChartSeriesType } from '../../../../models/seriesType/config';
 import { ColorProcessor } from './colorProcessor.types';
 import { CartesianExtremumGetter } from './extremumGetter.types';
 export type ChartSeriesTypeConfig<TSeriesType extends ChartSeriesType> = {
     seriesProcessor: SeriesProcessor<TSeriesType>;
     colorProcessor: ColorProcessor<TSeriesType>;
+    legendGetter: LegendGetter<TSeriesType>;
 } & (TSeriesType extends CartesianChartSeriesType ? {
     xExtremumGetter: CartesianExtremumGetter<TSeriesType>;
     yExtremumGetter: CartesianExtremumGetter<TSeriesType>;

package/models/seriesType/line.d.ts

@@ -46,12 +46,23 @@ export interface LineSeriesType extends CommonSeriesType<number | null>, Cartesi
      * @default 'monotoneX'
      */
     curve?: CurveType;
+    /**
+     * If `true`, step curve starts and end at the first and last point.
+     * By default the line is extended to fill the space before and after.
+     */
+    strictStepCurve?: boolean;
     /**
      * Define which items of the series should display a mark.
      * If can be a boolean that applies to all items.
      * Or a callback that gets some item properties and returns true if the item should be displayed.
      */
     showMark?: boolean | ((params: ShowMarkParams) => boolean);
+    /**
+     * The shape of the mark elements.
+     * Using 'circle' renders a `<circle />` element, while all other options render a `<path />` instead. The path causes a small decrease in performance.
+     * @default 'circle'
+     */
+    shape?: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
     /**
      * Do not render the line highlight item if set to `true`.
      * @default false

package/modern/BarChart/BarChart.js

@@ -14,7 +14,7 @@ import { ChartsGrid } from "../ChartsGrid/index.js";
 import { ChartsOnAxisClickHandler } from "../ChartsOnAxisClickHandler/index.js";
 import { ChartsOverlay } from "../ChartsOverlay/ChartsOverlay.js";
 import { useBarChartProps } from "./useBarChartProps.js";
-import { ChartDataProvider } from "../context/index.js";
+import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
 import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
 import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";

package/modern/BarChart/plugin.js

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

package/modern/ChartContainer/ChartContainer.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { ChartDataProvider } from "../context/ChartDataProvider/index.js";
+import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { useChartContainerProps } from "./useChartContainerProps.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -14,7 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * Demos:
  *
- * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ * - [Composition](https://mui.com/x/api/charts/composition/)
  *
  * API:
  *

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

@@ -4,9 +4,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useChartDataProviderProps } from "./useChartDataProviderProps.js";
-import { AnimationProvider } from "../AnimationProvider/index.js";
-import { HighlightedProvider } from "../HighlightedProvider/index.js";
-import { ChartProvider } from "../ChartProvider/index.js";
+import { AnimationProvider } from "../context/AnimationProvider/index.js";
+import { HighlightedProvider } from "../context/HighlightedProvider/index.js";
+import { ChartProvider } from "../context/ChartProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Orchestrates the data providers for the chart components and hooks.
@@ -15,7 +15,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * Demos:
  *
- * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ * - [Composition](https://mui.com/x/api/charts/composition/)
  *
  * API:
  *

package/modern/ChartsSurface/ChartsSurface.js

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

package/modern/ChartsTooltip/utils.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { useSvgRef } from "../hooks/index.js";
 /**

package/modern/Gauge/GaugeProvider.js

@@ -1,4 +1,6 @@
 // @ignore - do not document.
+'use client';
+
 import * as React from 'react';
 import { getPercentageValue } from "../internals/getPercentageValue.js";
 import { getArcRatios, getAvailableRadius } from "./utils.js";

package/modern/LineChart/AreaPlot.js

@@ -10,6 +10,7 @@ import { area as d3Area } from '@mui/x-charts-vendor/d3-shape';
 import { AreaElement, areaElementClasses } from "./AreaElement.js";
 import { getValueToPositionMapper } from "../hooks/useScale.js";
 import getCurveFactory from "../internals/getCurve.js";
+import { isBandScale } from "../internals/isBandScale.js";
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { useLineSeries } from "../hooks/useSeries.js";
 import { useSkipAnimation } from "../context/AnimationProvider/index.js";
@@ -59,9 +60,12 @@ const useAggregatedData = () => {
           stackedData,
           data,
           connectNulls,
-          baseline
+          baseline,
+          curve,
+          strictStepCurve
         } = series[seriesId];
-        const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
+        const xScale = xAxis[xAxisId].scale;
+        const xPosition = 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;
@@ -73,7 +77,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 = d3Area().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => {
+        const shouldExpand = curve?.includes('step') && !strictStepCurve && 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 = d3Area().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);
           }
@@ -89,13 +128,7 @@ const useAggregatedData = () => {
           }
           return value;
         }).y1(d => d.y && yScale(d.y[1]));
-        const curve = getCurveFactory(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(getCurveFactory(curve))(d3Data) || '';
         return _extends({}, series[seriesId], {
           gradientId,
           d,

package/modern/LineChart/CircleMarkElement.js

@@ -2,11 +2,10 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "shape"];
+const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme } from '@mui/material/styles';
-import { warnOnce } from '@mui/x-internals/warning';
 import { animated, useSpring } from '@react-spring/web';
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useItemHighlighted } from "../context/index.js";
@@ -36,13 +35,9 @@ function CircleMarkElement(props) {
       color,
       dataIndex,
       onClick,
-      skipAnimation,
-      shape
+      skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  if (shape !== 'circle') {
-    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 = useTheme();
   const getInteractionItemProps = useInteractionItemProps();
   const {

package/modern/LineChart/LineChart.js

@@ -18,7 +18,7 @@ import { ChartsOnAxisClickHandler } from "../ChartsOnAxisClickHandler/index.js";
 import { ChartsOverlay } from "../ChartsOverlay/index.js";
 import { useLineChartProps } from "./useLineChartProps.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";
@@ -117,10 +117,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: PropTypes.bool,
-  /**
-   * If `true` marks will render `<circle />` instead of `<path />` and drop theme override for faster rendering.
-   */
-  experimentalMarkRendering: PropTypes.bool,
   /**
    * Option to display a cartesian grid in the background.
    */

package/modern/LineChart/LineHighlightElement.js

@@ -2,13 +2,15 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["x", "y", "id", "classes", "color"];
+const _excluded = ["x", "y", "id", "classes", "color", "shape"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-vendor/d3-shape';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import { getSymbol } from "../internals/getSymbol.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getHighlightElementUtilityClass(slot) {
   return generateUtilityClass('MuiHighlightElement', slot);
@@ -24,7 +26,18 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getHighlightElementUtilityClass, classes);
 };
-const HighlightElement = styled('circle', {
+const HighlightPathElement = 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 = styled('circle', {
   name: 'MuiHighlightElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -51,7 +64,8 @@ function LineHighlightElement(props) {
       y,
       id,
       classes: innerClasses,
-      color
+      color,
+      shape
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = {
@@ -62,14 +76,19 @@ function LineHighlightElement(props) {
     y
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(HighlightElement, _extends({
-    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: d3Symbol(d3SymbolsFill[getSymbol(shape)])()
+  };
+  return /*#__PURE__*/_jsx(Element, _extends({
+    pointerEvents: "none",
+    ownerState: ownerState,
+    className: classes.root
+  }, additionalProps, other));
 }
 process.env.NODE_ENV !== "production" ? LineHighlightElement.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -77,6 +96,7 @@ process.env.NODE_ENV !== "production" ? LineHighlightElement.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired
 } : void 0;
 export { LineHighlightElement };

package/modern/LineChart/LineHighlightPlot.js

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

package/modern/LineChart/LinePlot.js

@@ -10,6 +10,7 @@ import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
 import { LineElement, lineElementClasses } from "./LineElement.js";
 import { getValueToPositionMapper } from "../hooks/useScale.js";
 import getCurveFactory from "../internals/getCurve.js";
+import { isBandScale } from "../internals/isBandScale.js";
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { useLineSeries } from "../hooks/useSeries.js";
 import { useSkipAnimation } from "../context/AnimationProvider/index.js";
@@ -57,9 +58,12 @@ const useAggregatedData = () => {
           yAxisId = defaultYAxisId,
           stackedData,
           data,
-          connectNulls
+          connectNulls,
+          curve,
+          strictStepCurve
         } = series[seriesId];
-        const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
+        const xScale = xAxis[xAxisId].scale;
+        const xPosition = 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;
@@ -71,13 +75,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 = d3Line().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(getCurveFactory(series[seriesId].curve))(d3Data) || '';
+        const shouldExpand = curve?.includes('step') && !strictStepCurve && 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 = d3Line().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(getCurveFactory(curve))(d3Data) || '';
         return _extends({}, series[seriesId], {
           gradientId,
           d,

package/modern/LineChart/MarkPlot.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick", "experimentalRendering"];
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
@@ -32,8 +32,7 @@ function MarkPlot(props) {
       slots,
       slotProps,
       skipAnimation: inSkipAnimation,
-      onItemClick,
-      experimentalRendering
+      onItemClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const skipAnimation = useSkipAnimation(inSkipAnimation);
@@ -50,7 +49,6 @@ function MarkPlot(props) {
   const {
     instance
   } = useChartContext();
-  const Mark = slots?.mark ?? (experimentalRendering ? CircleMarkElement : MarkElement);
   if (seriesData === undefined) {
     return null;
   }
@@ -70,7 +68,8 @@ function MarkPlot(props) {
           yAxisId = defaultYAxisId,
           stackedData,
           data,
-          showMark = true
+          showMark = true,
+          shape = 'circle'
         } = series[seriesId];
         if (showMark === false) {
           return null;
@@ -84,6 +83,7 @@ function MarkPlot(props) {
         const clipId = cleanId(`${chartId}-${seriesId}-line-clip`); // We assume that if displaying line mark, the line will also be rendered
 
         const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
+        const Mark = slots?.mark ?? (shape === 'circle' ? CircleMarkElement : MarkElement);
         return /*#__PURE__*/_jsx("g", {
           clipPath: `url(#${clipId})`,
           children: xData?.map((x, index) => {
@@ -131,7 +131,7 @@ function MarkPlot(props) {
             return /*#__PURE__*/_jsx(Mark, _extends({
               id: seriesId,
               dataIndex: index,
-              shape: "circle",
+              shape: shape,
               color: colorGetter(index),
               x: x,
               y: y // Don't know why TS doesn't get from the filter that y can't be null
@@ -154,12 +154,6 @@ process.env.NODE_ENV !== "production" ? MarkPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * If `true` the mark element will only be able to render circle.
-   * Giving fewer customization options, but saving around 40ms per 1.000 marks.
-   * @default false
-   */
-  experimentalRendering: PropTypes.bool,
   /**
    * Callback fired when a line mark item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.