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

package/modern/ChartsLegend/PiecewiseColorLegend.js

@@ -1,40 +1,130 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["axisDirection", "axisId", "hideFirst", "hideLast", "labelFormatter", "onItemClick"];
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["direction", "classes", "className", "markType", "labelPosition", "axisDirection", "axisId", "labelFormatter", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
+import { ChartsLabel } from "../ChartsLabel/ChartsLabel.js";
+import { ChartsLabelMark } from "../ChartsLabel/ChartsLabelMark.js";
+import { consumeThemeProps } from "../internals/consumeThemeProps.js";
+import { piecewiseColorLegendClasses, useUtilityClasses } from "./piecewiseColorLegendClasses.js";
 import { useAxis } from "./useAxis.js";
-import { LegendPerItem } from "./LegendPerItem.js";
-import { notNull } from "../internals/notNull.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-function defaultLabelFormatter(params) {
-  if (params.min === null) {
-    return `<${params.formattedMax}`;
-  }
-  if (params.max === null) {
-    return `>${params.formattedMin}`;
-  }
-  return `${params.formattedMin}-${params.formattedMax}`;
-}
-const piecewiseColorContextBuilder = context => ({
-  type: 'piecewiseColor',
-  color: context.color,
-  label: context.label,
-  maxValue: context.maxValue,
-  minValue: context.minValue
+import { piecewiseColorDefaultLabelFormatter } from "./piecewiseColorDefaultLabelFormatter.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const RootElement = styled('ul', {
+  name: 'MuiPiecewiseColorLegend',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme,
+  ownerState
+}) => {
+  return _extends({}, theme.typography.caption, {
+    color: (theme.vars || theme).palette.text.primary,
+    lineHeight: '100%',
+    display: 'flex',
+    flexDirection: ownerState.direction === 'vertical' ? 'column' : 'row',
+    flexShrink: 0,
+    gap: theme.spacing(0.5),
+    listStyleType: 'none',
+    paddingInlineStart: 0,
+    marginBlock: theme.spacing(1),
+    marginInline: theme.spacing(1),
+    width: 'max-content',
+    [`button.${piecewiseColorLegendClasses.item}`]: {
+      // Reset button styles
+      background: 'none',
+      border: 'none',
+      padding: 0,
+      cursor: ownerState.onItemClick ? 'pointer' : 'unset',
+      fontFamily: 'inherit',
+      fontWeight: 'inherit',
+      fontSize: 'inherit',
+      letterSpacing: 'inherit',
+      color: 'inherit'
+    },
+    [`.${piecewiseColorLegendClasses.item}`]: {
+      display: 'flex',
+      gap: theme.spacing(0.5)
+    },
+    [`li :not(.${piecewiseColorLegendClasses.minLabel}, .${piecewiseColorLegendClasses.maxLabel}) .${piecewiseColorLegendClasses?.mark}`]: {
+      alignSelf: 'center'
+    },
+    [`&.${piecewiseColorLegendClasses.start}`]: {
+      alignItems: 'end'
+    },
+    [`&.${piecewiseColorLegendClasses.end}`]: {
+      alignItems: 'start'
+    },
+    [`&.${piecewiseColorLegendClasses.horizontal}`]: {
+      alignItems: 'center',
+      [`.${piecewiseColorLegendClasses.item}`]: {
+        flexDirection: 'column'
+      },
+      [`&.${piecewiseColorLegendClasses.start}`]: {
+        alignItems: 'end'
+      },
+      [`&.${piecewiseColorLegendClasses.end}`]: {
+        alignItems: 'start'
+      },
+      [`.${piecewiseColorLegendClasses.minLabel}`]: {
+        alignItems: 'end'
+      },
+      [`&.${piecewiseColorLegendClasses.extremes}`]: {
+        [`.${piecewiseColorLegendClasses.minLabel}, .${piecewiseColorLegendClasses.maxLabel}`]: {
+          alignItems: 'center',
+          display: 'flex',
+          flexDirection: 'row'
+        }
+      }
+    },
+    [`&.${piecewiseColorLegendClasses.vertical}`]: {
+      [`.${piecewiseColorLegendClasses.item}`]: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      [`&.${piecewiseColorLegendClasses.start}`]: {
+        alignItems: 'end'
+      },
+      [`&.${piecewiseColorLegendClasses.end}`]: {
+        alignItems: 'start'
+      },
+      [`&.${piecewiseColorLegendClasses.extremes}`]: {
+        alignItems: 'center',
+        [`.${piecewiseColorLegendClasses.minLabel}, .${piecewiseColorLegendClasses.maxLabel}`]: {
+          alignItems: 'center',
+          display: 'flex',
+          flexDirection: 'column'
+        }
+      }
+    }
+  });
 });
-function PiecewiseColorLegend(props) {
+const PiecewiseColorLegend = consumeThemeProps('MuiPiecewiseColorLegend', {
+  defaultProps: {
+    direction: 'horizontal',
+    labelPosition: 'extremes',
+    labelFormatter: piecewiseColorDefaultLabelFormatter
+  },
+  classesResolver: useUtilityClasses
+}, function PiecewiseColorLegend(props, ref) {
   const {
+      direction,
+      classes,
+      className,
+      markType,
+      labelPosition,
       axisDirection,
       axisId,
-      hideFirst,
-      hideLast,
-      labelFormatter = defaultLabelFormatter,
+      labelFormatter,
       onItemClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const isVertical = direction === 'vertical';
+  const isReverse = isVertical;
   const axisItem = useAxis({
     axisDirection,
     axisId
@@ -47,42 +137,83 @@ function PiecewiseColorLegend(props) {
     location: 'legend'
   }) ?? v.toLocaleString();
   const formattedLabels = colorMap.thresholds.map(valueFormatter);
-  const itemsToDisplay = colorMap.colors.map((color, index) => {
-    const isFirst = index === 0;
-    const isLast = index === colorMap.colors.length - 1;
-    if (hideFirst && isFirst || hideLast && isLast) {
-      return null;
-    }
-    const data = _extends({}, isFirst ? {
-      min: null,
-      formattedMin: null
-    } : {
-      min: colorMap.thresholds[index - 1],
-      formattedMin: formattedLabels[index - 1]
-    }, isLast ? {
-      max: null,
-      formattedMax: null
-    } : {
-      max: colorMap.thresholds[index],
-      formattedMax: formattedLabels[index]
-    });
-    const label = labelFormatter(data);
-    if (label === null) {
-      return null;
-    }
-    return {
-      id: label,
+  const startClass = isReverse ? classes?.maxLabel : classes?.minLabel;
+  const endClass = isReverse ? classes?.minLabel : classes?.maxLabel;
+  const colors = colorMap.colors.map((color, colorIndex) => ({
+    color,
+    colorIndex
+  }));
+  const orderedColors = isReverse ? colors.reverse() : colors;
+  const isStart = labelPosition === 'start';
+  const isEnd = labelPosition === 'end';
+  const isExtremes = labelPosition === 'extremes';
+  return /*#__PURE__*/_jsx(RootElement, _extends({
+    className: clsx(classes?.root, className),
+    ref: ref
+  }, other, {
+    ownerState: props,
+    children: orderedColors.map(({
       color,
-      label,
-      minValue: data.min,
-      maxValue: data.max
-    };
-  }).filter(notNull);
-  return /*#__PURE__*/_jsx(LegendPerItem, _extends({}, other, {
-    itemsToDisplay: itemsToDisplay,
-    onItemClick: onItemClick ? (event, i) => onItemClick(event, piecewiseColorContextBuilder(itemsToDisplay[i]), i) : undefined
+      colorIndex
+    }, index) => {
+      const isFirst = index === 0;
+      const isLast = index === colorMap.colors.length - 1;
+      const isFirstColor = colorIndex === 0;
+      const isLastColor = colorIndex === colorMap.colors.length - 1;
+      const data = _extends({
+        index: colorIndex,
+        length: formattedLabels.length
+      }, isFirstColor ? {
+        min: null,
+        formattedMin: null
+      } : {
+        min: colorMap.thresholds[colorIndex - 1],
+        formattedMin: formattedLabels[colorIndex - 1]
+      }, isLastColor ? {
+        max: null,
+        formattedMax: null
+      } : {
+        max: colorMap.thresholds[colorIndex],
+        formattedMax: formattedLabels[colorIndex]
+      });
+      const label = labelFormatter?.(data);
+      if (label === null || label === undefined) {
+        return null;
+      }
+      const isTextBefore = isStart || isExtremes && isFirst;
+      const isTextAfter = isEnd || isExtremes && isLast;
+      const clickObject = {
+        type: 'piecewiseColor',
+        color,
+        label,
+        minValue: data.min,
+        maxValue: data.max
+      };
+      const Element = onItemClick ? 'button' : 'div';
+      return /*#__PURE__*/_jsx("li", {
+        children: /*#__PURE__*/_jsxs(Element, {
+          role: onItemClick ? 'button' : undefined,
+          type: onItemClick ? 'button' : undefined,
+          onClick:
+          // @ts-ignore onClick is only attached to a button
+          onItemClick ? event => onItemClick(event, clickObject, index) : undefined,
+          className: clsx(classes?.item, index === 0 && `${startClass}`, index === orderedColors.length - 1 && `${endClass}`),
+          children: [isTextBefore && /*#__PURE__*/_jsx(ChartsLabel, {
+            className: classes?.label,
+            children: label
+          }), /*#__PURE__*/_jsx(ChartsLabelMark, {
+            className: classes?.mark,
+            type: markType,
+            color: color
+          }), isTextAfter && /*#__PURE__*/_jsx(ChartsLabel, {
+            className: classes?.label,
+            children: label
+          })]
+        })
+      }, colorIndex);
+    })
   }));
-}
+});
 process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -102,76 +233,35 @@ process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  className: PropTypes.string,
   /**
    * The direction of the legend layout.
-   * The default depends on the chart.
-   */
-  direction: PropTypes.oneOf(['column', 'row']).isRequired,
-  /**
-   * Hide the first item of the legend, corresponding to the [-infinity, min] piece.
-   * @default false
+   * @default 'horizontal'
    */
-  hideFirst: PropTypes.bool,
-  /**
-   * Hide the last item of the legend, corresponding to the [max, +infinity] piece.
-   * @default false
-   */
-  hideLast: PropTypes.bool,
-  /**
-   * Space between two legend items (in px).
-   * @default 10
-   */
-  itemGap: PropTypes.number,
-  /**
-   * Height of the item mark (in px).
-   * @default 20
-   */
-  itemMarkHeight: PropTypes.number,
-  /**
-   * Width of the item mark (in px).
-   * @default 20
-   */
-  itemMarkWidth: PropTypes.number,
+  direction: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
    * Format the legend labels.
    * @param {PiecewiseLabelFormatterParams} params The bound of the piece to format.
-   * @returns {string|null} The displayed label, or `null` to skip the item.
+   * @returns {string|null} The displayed label, `''` to skip the label but show the color mark, or `null` to skip it entirely.
    */
   labelFormatter: PropTypes.func,
   /**
-   * Style applied to legend labels.
-   * @default theme.typography.subtitle1
+   * Where to position the labels relative to the gradient.
+   * @default 'extremes'
    */
-  labelStyle: PropTypes.object,
+  labelPosition: PropTypes.oneOf(['start', 'end', 'extremes']),
   /**
-   * Space between the mark and the label (in px).
-   * @default 5
+   * The type of the mark.
+   * @default 'square'
    */
-  markGap: PropTypes.number,
+  markType: PropTypes.oneOf(['square', 'circle', 'line']),
   /**
    * Callback fired when a legend item is clicked.
-   * @param {React.MouseEvent<SVGRectElement, MouseEvent>} event The click event.
+   * @param {React.MouseEvent<HTMLButtonElement, MouseEvent>} event The click event.
    * @param {PiecewiseColorLegendItemContext} legendItem The legend item data.
    * @param {number} index The index of the clicked legend item.
    */
   onItemClick: PropTypes.func,
-  /**
-   * Legend padding (in px).
-   * Can either be a single number, or an object with top, left, bottom, right properties.
-   * @default 10
-   */
-  padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-    bottom: PropTypes.number,
-    left: PropTypes.number,
-    right: PropTypes.number,
-    top: PropTypes.number
-  })]),
-  /**
-   * The position of the legend.
-   */
-  position: PropTypes.shape({
-    horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
-    vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
-  }).isRequired
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { PiecewiseColorLegend };

package/modern/ChartsLegend/chartsLegendClasses.js

@@ -1,6 +1,20 @@
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-export function getLegendUtilityClass(slot) {
+import composeClasses from '@mui/utils/composeClasses';
+function getLegendUtilityClass(slot) {
   return generateUtilityClass('MuiChartsLegend', slot);
 }
-export const legendClasses = generateUtilityClasses('MuiChartsLegend', ['root', 'series', 'itemBackground', 'mark', 'label', 'column', 'row']);
+export const useUtilityClasses = props => {
+  const {
+    classes,
+    direction
+  } = props;
+  const slots = {
+    root: ['root', direction],
+    mark: ['mark'],
+    label: ['label'],
+    series: ['series']
+  };
+  return composeClasses(slots, getLegendUtilityClass, classes);
+};
+export const legendClasses = generateUtilityClasses('MuiChartsLegend', ['root', 'series', 'mark', 'label', 'vertical', 'horizontal']);

package/modern/ChartsLegend/colorLegend.types.js

@@ -0,0 +1 @@
+export {};

package/modern/ChartsLegend/continuousColorLegendClasses.js

@@ -0,0 +1,23 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import composeClasses from '@mui/utils/composeClasses';
+function getLegendUtilityClass(slot) {
+  return generateUtilityClass('MuiContinuousColorLegend', slot);
+}
+export const useUtilityClasses = props => {
+  const {
+    classes,
+    direction,
+    labelPosition
+  } = props;
+  const slots = {
+    root: ['root', direction, labelPosition],
+    minLabel: ['minLabel'],
+    maxLabel: ['maxLabel'],
+    gradient: ['gradient'],
+    mark: ['mark'],
+    label: ['label']
+  };
+  return composeClasses(slots, getLegendUtilityClass, classes);
+};
+export const continuousColorLegendClasses = generateUtilityClasses('MuiContinuousColorLegend', ['root', 'minLabel', 'maxLabel', 'gradient', 'vertical', 'horizontal', 'start', 'end', 'extremes', 'label']);

package/modern/ChartsLegend/direction.js

@@ -0,0 +1 @@
+export {};

package/modern/ChartsLegend/index.js

@@ -1,6 +1,12 @@
 export * from "./ChartsLegend.js";
-export * from "./DefaultChartsLegend.js";
+export * from "./chartsLegend.types.js";
+export * from "./direction.js";
+export * from "./legendContext.types.js";
+export { legendClasses } from "./chartsLegendClasses.js";
 export * from "./ContinuousColorLegend.js";
+export * from "./colorLegend.types.js";
+export { continuousColorLegendClasses } from "./continuousColorLegendClasses.js";
 export * from "./PiecewiseColorLegend.js";
-export * from "./chartsLegendClasses.js";
-export * from "./utils.js";
+export { piecewiseColorLegendClasses } from "./piecewiseColorLegendClasses.js";
+export { piecewiseColorDefaultLabelFormatter } from "./piecewiseColorDefaultLabelFormatter.js";
+export * from "./legend.types.js";

package/modern/ChartsLegend/legendContext.types.js

@@ -0,0 +1 @@
+export {};

package/modern/ChartsLegend/onClickContextBuilder.js

@@ -0,0 +1,7 @@
+export const seriesContextBuilder = context => ({
+  type: 'series',
+  color: context.color,
+  label: context.label,
+  seriesId: context.seriesId,
+  itemId: context.itemId
+});

package/modern/ChartsLegend/piecewiseColorDefaultLabelFormatter.js

@@ -0,0 +1,9 @@
+export function piecewiseColorDefaultLabelFormatter(params) {
+  if (params.min === null) {
+    return `<${params.formattedMax}`;
+  }
+  if (params.max === null) {
+    return `>${params.formattedMin}`;
+  }
+  return `${params.formattedMin}-${params.formattedMax}`;
+}

package/modern/ChartsLegend/piecewiseColorLegend.types.js

@@ -0,0 +1 @@
+export {};

package/modern/ChartsLegend/piecewiseColorLegendClasses.js

@@ -0,0 +1,23 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import composeClasses from '@mui/utils/composeClasses';
+function getLegendUtilityClass(slot) {
+  return generateUtilityClass('MuiPiecewiseColorLegendClasses', slot);
+}
+export const useUtilityClasses = props => {
+  const {
+    classes,
+    direction,
+    labelPosition
+  } = props;
+  const slots = {
+    root: ['root', direction, labelPosition],
+    minLabel: ['minLabel'],
+    maxLabel: ['maxLabel'],
+    item: ['item'],
+    mark: ['mark'],
+    label: ['label']
+  };
+  return composeClasses(slots, getLegendUtilityClass, classes);
+};
+export const piecewiseColorLegendClasses = generateUtilityClasses('MuiPiecewiseColorLegendClasses', ['root', 'minLabel', 'maxLabel', 'item', 'vertical', 'horizontal', 'start', 'end', 'extremes', 'mark', 'label']);

package/modern/ChartsLegend/useAxis.js

@@ -2,7 +2,6 @@
 
 import { useCartesianContext } from "../context/CartesianProvider/useCartesianContext.js";
 import { useZAxis } from "../hooks/useZAxis.js";
-
 /**
  * Helper to select an axis definition according to its direction and id.
  */

package/modern/ChartsSurface/ChartsSurface.js

@@ -22,7 +22,6 @@ const ChartsSurfaceStyles = styled('svg', {
   height: ownerState.height ?? '100%',
   display: 'flex',
   position: 'relative',
-  flexGrow: 1,
   flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',

package/modern/LineChart/AnimatedArea.js

@@ -44,6 +44,7 @@ function AnimatedArea(props) {
     skipAnimation: skipAnimation,
     id: `${ownerState.id}-area-clip`,
     children: transitionChange((style, interpolator) => /*#__PURE__*/_jsx(animated.path, _extends({
+      // @ts-expect-error
       d: style.value.to(interpolator),
       fill: ownerState.gradientId ? `url(#${ownerState.gradientId})` : ownerState.color,
       filter:

package/modern/LineChart/AnimatedLine.js

@@ -44,6 +44,7 @@ function AnimatedLine(props) {
     skipAnimation: skipAnimation,
     id: `${ownerState.id}-line-clip`,
     children: transitionChange((style, interpolator) => /*#__PURE__*/_jsx(animated.path, _extends({
+      // @ts-expect-error
       d: style.value.to(interpolator),
       stroke: ownerState.gradientId ? `url(#${ownerState.gradientId})` : ownerState.color,
       strokeWidth: 2,

package/modern/LineChart/AppearingMask.js

@@ -29,6 +29,7 @@ export function AppearingMask(props) {
     children: [/*#__PURE__*/_jsx("clipPath", {
       id: clipId,
       children: transitionAppear(style => /*#__PURE__*/_jsx(animated.rect, {
+        // @ts-expect-error
         x: 0,
         y: 0,
         width: style.animatedWidth,

package/modern/LineChart/CircleMarkElement.js

@@ -69,6 +69,7 @@ function CircleMarkElement(props) {
   };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(animated.circle, _extends({}, other, {
+    // @ts-expect-error
     cx: position.x,
     cy: position.y,
     r: 5,

package/modern/LineChart/LineChart.js

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
 import { AreaPlot } from "./AreaPlot.js";
 import { LinePlot } from "./LinePlot.js";
-import { ChartContainer } from "../ChartContainer/index.js";
 import { MarkPlot } from "./MarkPlot.js";
 import { ChartsAxis } from "../ChartsAxis/ChartsAxis.js";
 import { ChartsTooltip } from "../ChartsTooltip/index.js";
@@ -18,6 +17,10 @@ import { ChartsGrid } from "../ChartsGrid/index.js";
 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 { ChartsSurface } from "../ChartsSurface/index.js";
+import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -35,6 +38,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(inProps, ref)
     name: 'MuiLineChart'
   });
   const {
+    chartsWrapperProps,
     chartContainerProps,
     axisClickHandlerProps,
     gridProps,
@@ -50,16 +54,22 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(inProps, ref)
     legendProps,
     children
   } = useLineChartProps(props);
+  const {
+    chartDataProviderProps,
+    chartsSurfaceProps
+  } = useChartContainerProps(chartContainerProps, ref);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
-  return /*#__PURE__*/_jsxs(ChartContainer, _extends({
-    ref: ref
-  }, chartContainerProps, {
-    children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
-      children: [/*#__PURE__*/_jsx(AreaPlot, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlot, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {
-      "data-drawing-container": true,
-      children: /*#__PURE__*/_jsx(MarkPlot, _extends({}, markPlotProps))
-    }), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+  return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
+    children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
+      children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+        children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
+          children: [/*#__PURE__*/_jsx(AreaPlot, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlot, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
+        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {
+          "data-drawing-container": true,
+          children: /*#__PURE__*/_jsx(MarkPlot, _extends({}, markPlotProps))
+        }), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+      }))]
+    }))
   }));
 });
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {

package/modern/LineChart/MarkElement.js

@@ -80,7 +80,9 @@ function MarkElement(props) {
       transform: to([position.x, position.y], (pX, pY) => `translate(${pX}px, ${pY}px)`),
       transformOrigin: to([position.x, position.y], (pX, pY) => `${pX}px ${pY}px`)
     },
-    ownerState: ownerState,
+    ownerState: ownerState
+    // @ts-expect-error
+    ,
     className: classes.root,
     d: d3Symbol(d3SymbolsFill[getSymbol(shape)])(),
     onClick: onClick,

package/modern/LineChart/legend.js

@@ -10,6 +10,7 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      markType: series[seriesId].labelMarkType ?? 'line',
       id: seriesId,
       seriesId,
       color: series[seriesId].color,