@mui/x-charts 8.21.0 → 8.22.1

package/LineChart/LineChart.d.ts

@@ -1,21 +1,21 @@
 import * as React from 'react';
-import { MakeOptional } from '@mui/x-internals/types';
-import { ChartsSlots, ChartsSlotProps } from "../internals/material/index.js";
-import { AreaPlotProps, AreaPlotSlotProps, AreaPlotSlots } from "./AreaPlot.js";
-import { LinePlotProps, LinePlotSlotProps, LinePlotSlots } from "./LinePlot.js";
-import { ChartContainerProps } from "../ChartContainer/index.js";
-import { MarkPlotProps, MarkPlotSlotProps, MarkPlotSlots } from "./MarkPlot.js";
-import { ChartsAxisProps } from "../ChartsAxis/ChartsAxis.js";
-import { LineSeriesType } from "../models/seriesType/line.js";
-import { ChartsTooltipSlots, ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
-import { ChartsLegendSlotProps, ChartsLegendSlots } from "../ChartsLegend/index.js";
-import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
-import { ChartsAxisSlotProps, ChartsAxisSlots } from "../models/axis.js";
-import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from "./LineHighlightPlot.js";
-import { ChartsGridProps } from "../ChartsGrid/index.js";
-import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/index.js";
-import { LineChartPluginSignatures } from "./LineChart.plugins.js";
-import { ChartsToolbarSlots, ChartsToolbarSlotProps } from "../Toolbar/index.js";
+import { type MakeOptional } from '@mui/x-internals/types';
+import { type ChartsSlots, type ChartsSlotProps } from "../internals/material/index.js";
+import { type AreaPlotProps, type AreaPlotSlotProps, type AreaPlotSlots } from "./AreaPlot.js";
+import { type LinePlotProps, type LinePlotSlotProps, type LinePlotSlots } from "./LinePlot.js";
+import { type ChartContainerProps } from "../ChartContainer/index.js";
+import { type MarkPlotProps, type MarkPlotSlotProps, type MarkPlotSlots } from "./MarkPlot.js";
+import { type ChartsAxisProps } from "../ChartsAxis/ChartsAxis.js";
+import { type LineSeriesType } from "../models/seriesType/line.js";
+import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
+import { type ChartsLegendSlotProps, type ChartsLegendSlots } from "../ChartsLegend/index.js";
+import { type ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
+import { type ChartsAxisSlotProps, type ChartsAxisSlots } from "../models/axis.js";
+import { type LineHighlightPlotSlots, type LineHighlightPlotSlotProps } from "./LineHighlightPlot.js";
+import { type ChartsGridProps } from "../ChartsGrid/index.js";
+import { type ChartsOverlayProps, type ChartsOverlaySlotProps, type ChartsOverlaySlots } from "../ChartsOverlay/index.js";
+import type { LineChartPluginSignatures } from "./LineChart.plugins.js";
+import type { ChartsToolbarSlots, ChartsToolbarSlotProps } from "../Toolbar/index.js";
 export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export type LineSeries = MakeOptional<LineSeriesType, 'type'>;

package/LineChart/LineChart.js

@@ -27,7 +27,7 @@ var _useChartContainerProps = require("../ChartContainer/useChartContainerProps"
 var _ChartDataProvider = require("../ChartDataProvider");
 var _ChartsSurface = require("../ChartsSurface");
 var _ChartsWrapper = require("../ChartsWrapper");
-var _FocusedMark = require("./FocusedMark");
+var _FocusedLineMark = require("./FocusedLineMark");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -71,7 +71,7 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
-        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedMark.FocusedMark, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedLineMark.FocusedLineMark, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, (0, _extends2.default)({}, markPlotProps))
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
@@ -298,6 +298,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     offset: _propTypes.default.number,
+    ordinalTimeTicks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), _propTypes.default.shape({
+      format: _propTypes.default.func.isRequired,
+      getTickNumber: _propTypes.default.func.isRequired,
+      isTick: _propTypes.default.func.isRequired
+    })]).isRequired),
     position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band']),
@@ -351,6 +356,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     offset: _propTypes.default.number,
+    ordinalTimeTicks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), _propTypes.default.shape({
+      format: _propTypes.default.func.isRequired,
+      getTickNumber: _propTypes.default.func.isRequired,
+      isTick: _propTypes.default.func.isRequired
+    })]).isRequired),
     position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['point']),
@@ -735,6 +745,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     offset: _propTypes.default.number,
+    ordinalTimeTicks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), _propTypes.default.shape({
+      format: _propTypes.default.func.isRequired,
+      getTickNumber: _propTypes.default.func.isRequired,
+      isTick: _propTypes.default.func.isRequired
+    })]).isRequired),
     position: _propTypes.default.oneOf(['left', 'none', 'right']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band']),
@@ -787,6 +802,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     offset: _propTypes.default.number,
+    ordinalTimeTicks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), _propTypes.default.shape({
+      format: _propTypes.default.func.isRequired,
+      getTickNumber: _propTypes.default.func.isRequired,
+      isTick: _propTypes.default.func.isRequired
+    })]).isRequired),
     position: _propTypes.default.oneOf(['left', 'none', 'right']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['point']),

package/LineChart/LineChart.plugins.d.ts

@@ -1,9 +1,10 @@
-import { UseChartZAxisSignature } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";
-import { UseChartCartesianAxisSignature } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
-import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
-import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-import { UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
-import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
-import { UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-export type LineChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'line'>, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
+import { type UseChartZAxisSignature } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";
+import { type UseChartCartesianAxisSignature } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { type UseChartTooltipSignature } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
+import { type UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { type UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+import { type UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+import { type ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
+import { type UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+export type LineChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'line'>, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
 export declare const LINE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<LineChartPluginSignatures>;

package/LineChart/LineChart.plugins.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.LINE_CHART_PLUGINS = void 0;
 var _useChartZAxis = require("../internals/plugins/featurePlugins/useChartZAxis");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
+var _useChartTooltip = require("../internals/plugins/featurePlugins/useChartTooltip");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
 var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
 var _useChartBrush = require("../internals/plugins/featurePlugins/useChartBrush");
-const LINE_CHART_PLUGINS = exports.LINE_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation];
+const LINE_CHART_PLUGINS = exports.LINE_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation];

package/LineChart/LineElement.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { AnimatedLineProps } from "./AnimatedLine.js";
-import { SeriesId } from "../models/seriesType/common.js";
+import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { type AnimatedLineProps } from "./AnimatedLine.js";
+import { type SeriesId } from "../models/seriesType/common.js";
 export interface LineElementClasses {
   /** Styles applied to the root element. */
   root: string;

package/LineChart/LineHighlightElement.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SeriesId } from "../models/seriesType/common.js";
+import { type SeriesId } from "../models/seriesType/common.js";
 export interface LineHighlightElementClasses {
   /** Styles applied to the root element. */
   root: string;

package/LineChart/LineHighlightPlot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { LineHighlightElementProps } from "./LineHighlightElement.js";
+import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { type LineHighlightElementProps } from "./LineHighlightElement.js";
 export interface LineHighlightPlotSlots {
   lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
 }

package/LineChart/LineHighlightPlot.js

@@ -12,7 +12,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useStore = require("../internals/store/useStore");
-var _useSelector = require("../internals/store/useSelector");
 var _LineHighlightElement = require("./LineHighlightElement");
 var _useScale = require("../hooks/useScale");
 var _constants = require("../constants");
@@ -52,7 +51,7 @@ function LineHighlightPlot(props) {
     instance
   } = (0, _ChartProvider.useChartContext)();
   const store = (0, _useStore.useStore)();
-  const highlightedIndexes = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsHighlightXAxisIndex);
+  const highlightedIndexes = store.use(_useChartCartesianAxis.selectorChartsHighlightXAxisIndex);
   if (highlightedIndexes.length === 0) {
     return null;
   }

package/LineChart/LinePlot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { LineElementProps, LineElementSlotProps, LineElementSlots } from "./LineElement.js";
-import { LineItemIdentifier } from "../models/seriesType/line.js";
+import { type LineElementProps, type LineElementSlotProps, type LineElementSlots } from "./LineElement.js";
+import { type LineItemIdentifier } from "../models/seriesType/line.js";
 export interface LinePlotSlots extends LineElementSlots {}
 export interface LinePlotSlotProps extends LineElementSlotProps {}
 export interface LinePlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<LineElementProps, 'slots' | 'slotProps' | 'skipAnimation'> {

package/LineChart/LinePlot.js

@@ -17,6 +17,7 @@ var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _hooks = require("../hooks");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
 var _useLinePlotData = require("./useLinePlotData");
+var _animation = require("../internals/animation/animation");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 const LinePlotRoot = (0, _styles.styled)('g', {
@@ -24,7 +25,9 @@ const LinePlotRoot = (0, _styles.styled)('g', {
   slot: 'Root'
 })({
   [`& .${_LineElement.lineElementClasses.root}`]: {
-    transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
+    transitionProperty: 'opacity, fill',
+    transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
+    transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION
   }
 });
 const useAggregatedData = () => {

package/LineChart/MarkElement.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MarkElementOwnerState } from "./markElementClasses.js";
+import { type MarkElementOwnerState } from "./markElementClasses.js";
 export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & {
   /**
    * If `true`, animations are skipped.

package/LineChart/MarkElement.js

@@ -31,7 +31,7 @@ const MarkElementPath = (0, _styles.styled)('path', {
   strokeWidth: 2,
   [`&.${_markElementClasses.markElementClasses.animate}`]: {
     transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
-    transitionProperty: 'transform, transform-origin',
+    transitionProperty: 'transform, transform-origin, opacity',
     transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION
   }
 }));

package/LineChart/MarkPlot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { LineItemIdentifier } from "../models/seriesType/line.js";
-import { MarkElementProps } from "./MarkElement.js";
+import { type LineItemIdentifier } from "../models/seriesType/line.js";
+import { type MarkElementProps } from "./MarkElement.js";
 export interface MarkPlotSlots {
   mark?: React.JSXElementConstructor<MarkElementProps>;
 }
@@ -35,7 +35,7 @@ export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<
  *
  * - [MarkPlot API](https://mui.com/x/api/charts/mark-plot/)
  */
-declare function MarkPlot(props: MarkPlotProps): import("react/jsx-runtime").JSX.Element | null;
+declare function MarkPlot(props: MarkPlotProps): import("react/jsx-runtime").JSX.Element;
 declare namespace MarkPlot {
   var propTypes: any;
 }

package/LineChart/MarkPlot.js

@@ -11,20 +11,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
-var _constants = require("../constants");
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
-var _useChartId = require("../hooks/useChartId");
-var _useScale = require("../hooks/useScale");
-var _useLineSeries = require("../hooks/useLineSeries");
-var _cleanId = require("../internals/cleanId");
 var _CircleMarkElement = require("./CircleMarkElement");
-var _getColor = _interopRequireDefault(require("./seriesConfig/getColor"));
 var _MarkElement = require("./MarkElement");
-var _ChartProvider = require("../context/ChartProvider");
 var _hooks = require("../hooks");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
-var _useSelector = require("../internals/store/useSelector");
+var _ChartProvider = require("../context/ChartProvider");
+var _useMarkPlotData = require("./useMarkPlotData");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 /**
@@ -47,25 +41,20 @@ function MarkPlot(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const isZoomInteracting = (0, _useInternalIsZoomInteracting.useInternalIsZoomInteracting)();
   const skipAnimation = (0, _useSkipAnimation.useSkipAnimation)(isZoomInteracting || inSkipAnimation);
-  const seriesData = (0, _useLineSeries.useLineSeriesContext)();
   const {
-    xAxis,
-    xAxisIds
+    xAxis
   } = (0, _hooks.useXAxes)();
   const {
-    yAxis,
-    yAxisIds
+    yAxis
   } = (0, _hooks.useYAxes)();
-  const chartId = (0, _useChartId.useChartId)();
   const {
-    instance,
     store
   } = (0, _ChartProvider.useChartContext)();
   const {
     isFaded,
     isHighlighted
   } = (0, _hooks.useItemHighlightedGetter)();
-  const xAxisHighlightIndexes = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsHighlightXAxisIndex);
+  const xAxisHighlightIndexes = store.use(_useChartCartesianAxis.selectorChartsHighlightXAxisIndex);
   const highlightedItems = React.useMemo(() => {
     const rep = {};
     for (const {
@@ -80,109 +69,49 @@ function MarkPlot(props) {
     }
     return rep;
   }, [xAxisHighlightIndexes]);
-  if (seriesData === undefined) {
-    return null;
-  }
-  const {
-    series,
-    stackingGroups
-  } = seriesData;
-  const defaultXAxisId = xAxisIds[0];
-  const defaultYAxisId = yAxisIds[0];
+  const completedData = (0, _useMarkPlotData.useMarkPlotData)(xAxis, yAxis);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
-    children: stackingGroups.flatMap(({
-      ids: groupIds
+    children: completedData.map(({
+      seriesId,
+      clipId,
+      shape,
+      xAxisId,
+      marks
     }) => {
-      return groupIds.map(seriesId => {
-        const {
-          xAxisId = defaultXAxisId,
-          yAxisId = defaultYAxisId,
-          stackedData,
-          data,
-          showMark = true,
-          shape = 'circle'
-        } = series[seriesId];
-        if (showMark === false) {
-          return null;
-        }
-        const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
-        const yScale = yAxis[yAxisId].scale;
-        const xData = xAxis[xAxisId].data;
-        if (xData === undefined) {
-          throw new Error(`MUI X Charts: ${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.`);
-        }
-        const clipId = (0, _cleanId.cleanId)(`${chartId}-${seriesId}-line-clip`); // We assume that if displaying line mark, the line will also be rendered
-
-        const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
-        const Mark = slots?.mark ?? (shape === 'circle' ? _CircleMarkElement.CircleMarkElement : _MarkElement.MarkElement);
-        const isSeriesHighlighted = isHighlighted({
-          seriesId
-        });
-        const isSeriesFaded = !isSeriesHighlighted && isFaded({
-          seriesId
-        });
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-          clipPath: `url(#${clipId})`,
-          "data-series": seriesId,
-          children: xData?.map((x, index) => {
-            const value = data[index] == null ? null : stackedData[index][1];
-            return {
-              x: xScale(x),
-              y: value === null ? null : yScale(value),
-              position: x,
-              value,
-              index
-            };
-          }).filter(({
-            x,
-            y,
-            index,
-            position,
-            value
-          }) => {
-            if (value === null || y === null) {
-              // Remove missing data point
-              return false;
-            }
-            if (!instance.isPointInside(x, y)) {
-              // Remove out of range
-              return false;
-            }
-            if (showMark === true) {
-              return true;
-            }
-            return showMark({
-              x,
-              y,
-              index,
-              position,
-              value
-            });
-          }).map(({
-            x,
-            y,
-            index
-          }) => {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Mark, (0, _extends2.default)({
-              id: seriesId,
-              dataIndex: index,
-              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
-              ,
-              skipAnimation: skipAnimation,
-              onClick: onItemClick && (event => onItemClick(event, {
-                type: 'line',
-                seriesId,
-                dataIndex: index
-              })),
-              isHighlighted: highlightedItems[xAxisId]?.has(index) || isSeriesHighlighted,
-              isFaded: isSeriesFaded
-            }, slotProps?.mark), `${seriesId}-${index}`);
-          })
-        }, seriesId);
+      const Mark = slots?.mark ?? (shape === 'circle' ? _CircleMarkElement.CircleMarkElement : _MarkElement.MarkElement);
+      const isSeriesHighlighted = isHighlighted({
+        seriesId
+      });
+      const isSeriesFaded = !isSeriesHighlighted && isFaded({
+        seriesId
       });
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        clipPath: `url(#${clipId})`,
+        "data-series": seriesId,
+        children: marks.map(({
+          x,
+          y,
+          index,
+          color
+        }) => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Mark, (0, _extends2.default)({
+            id: seriesId,
+            dataIndex: index,
+            shape: shape,
+            color: color,
+            x: x,
+            y: y,
+            skipAnimation: skipAnimation,
+            onClick: onItemClick && (event => onItemClick(event, {
+              type: 'line',
+              seriesId,
+              dataIndex: index
+            })),
+            isHighlighted: highlightedItems[xAxisId]?.has(index) || isSeriesHighlighted,
+            isFaded: isSeriesFaded
+          }, slotProps?.mark), `${seriesId}-${index}`);
+        })
+      }, seriesId);
     })
   }));
 }

package/LineChart/index.d.ts

@@ -8,6 +8,7 @@ export * from "./AnimatedArea.js";
 export * from "./LineElement.js";
 export * from "./AnimatedLine.js";
 export * from "./MarkElement.js";
+export * from "./FocusedLineMark.js";
 export * from "./LineHighlightElement.js";
 export * from "./LineChart.plugins.js";
 export type { MarkElementClasses, MarkElementClassKey } from "./markElementClasses.js";

package/LineChart/index.js

@@ -139,6 +139,18 @@ Object.keys(_MarkElement).forEach(function (key) {
     }
   });
 });
+var _FocusedLineMark = require("./FocusedLineMark");
+Object.keys(_FocusedLineMark).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _FocusedLineMark[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FocusedLineMark[key];
+    }
+  });
+});
 var _LineHighlightElement = require("./LineHighlightElement");
 Object.keys(_LineHighlightElement).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/LineChart/markElementClasses.d.ts

@@ -1,4 +1,4 @@
-import { SeriesId } from "../models/seriesType/common.js";
+import { type SeriesId } from "../models/seriesType/common.js";
 export interface MarkElementClasses {
   /** Styles applied to the root element. */
   root: string;

package/LineChart/seriesConfig/extremums.d.ts

@@ -1,3 +1,3 @@
-import { CartesianExtremumGetter } from "../../internals/plugins/models/seriesConfig/index.js";
+import { type CartesianExtremumGetter } from "../../internals/plugins/models/seriesConfig/index.js";
 export declare const getExtremumX: CartesianExtremumGetter<'line'>;
 export declare const getExtremumY: CartesianExtremumGetter<'line'>;

package/LineChart/seriesConfig/getColor.d.ts

@@ -1,3 +1,3 @@
-import { ColorProcessor } from "../../internals/plugins/models/index.js";
+import { type ColorProcessor } from "../../internals/plugins/models/index.js";
 declare const getColor: ColorProcessor<'line'>;
 export default getColor;

package/LineChart/seriesConfig/index.d.ts

@@ -1,2 +1,2 @@
-import { ChartSeriesTypeConfig } from "../../internals/plugins/models/seriesConfig/index.js";
+import { type ChartSeriesTypeConfig } from "../../internals/plugins/models/seriesConfig/index.js";
 export declare const lineSeriesConfig: ChartSeriesTypeConfig<'line'>;

package/LineChart/seriesConfig/legend.d.ts

@@ -1,3 +1,3 @@
-import { LegendGetter } from "../../internals/plugins/models/index.js";
+import { type LegendGetter } from "../../internals/plugins/models/index.js";
 declare const legendGetter: LegendGetter<'line'>;
 export default legendGetter;

package/LineChart/seriesConfig/seriesProcessor.d.ts

@@ -1,3 +1,3 @@
-import { SeriesProcessor } from "../../internals/plugins/models/index.js";
+import { type SeriesProcessor } from "../../internals/plugins/models/index.js";
 declare const seriesProcessor: SeriesProcessor<'line'>;
 export default seriesProcessor;

package/LineChart/seriesConfig/seriesProcessor.js

@@ -9,7 +9,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _warning = require("@mui/x-internals/warning");
 var _stackSeries = require("../../internals/stackSeries");
-var _defaultizeValueFormatter = require("../../internals/defaultizeValueFormatter");
 const seriesProcessor = (params, dataset) => {
   const {
     seriesOrder,
@@ -76,14 +75,15 @@ const seriesProcessor = (params, dataset) => {
           const value = data[dataKey];
           return typeof value === 'number' ? value : null;
         }) : series[id].data,
-        stackedData: stackedSeries[index].map(([a, b]) => [a, b])
+        stackedData: stackedSeries[index].map(([a, b]) => [a, b]),
+        valueFormatter: series[id]?.valueFormatter ?? (v => v == null ? '' : v.toLocaleString())
       });
     });
   });
   return {
     seriesOrder,
     stackingGroups,
-    series: (0, _defaultizeValueFormatter.defaultizeValueFormatter)(completedSeries, v => v == null ? '' : v.toLocaleString())
+    series: completedSeries
   };
 };
 var _default = exports.default = seriesProcessor;

package/LineChart/useAreaPlotData.d.ts

@@ -1,6 +1,6 @@
-import { ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
-import { ChartsXAxisProps, ChartsYAxisProps } from "../models/index.js";
-import { SeriesId } from "../models/seriesType/common.js";
+import { type ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { type ChartsXAxisProps, type ChartsYAxisProps } from "../models/index.js";
+import { type SeriesId } from "../models/seriesType/common.js";
 interface AreaPlotDataPoint {
   d: string;
   seriesId: SeriesId;

package/LineChart/useLineChartProps.d.ts

@@ -1,18 +1,18 @@
 import * as React from 'react';
-import { ChartsAxisProps } from "../ChartsAxis/index.js";
-import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
-import { ChartsClipPathProps } from "../ChartsClipPath/index.js";
-import { ChartsGridProps } from "../ChartsGrid/index.js";
-import { ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
-import { ChartsOverlayProps } from "../ChartsOverlay/index.js";
-import { ChartContainerProps } from "../ChartContainer/index.js";
-import { AreaPlotProps } from "./AreaPlot.js";
+import { type ChartsAxisProps } from "../ChartsAxis/index.js";
+import { type ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
+import { type ChartsClipPathProps } from "../ChartsClipPath/index.js";
+import { type ChartsGridProps } from "../ChartsGrid/index.js";
+import { type ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
+import { type ChartsOverlayProps } from "../ChartsOverlay/index.js";
+import { type ChartContainerProps } from "../ChartContainer/index.js";
+import { type AreaPlotProps } from "./AreaPlot.js";
 import type { LineChartProps } from "./LineChart.js";
-import { LineHighlightPlotProps } from "./LineHighlightPlot.js";
-import { LinePlotProps } from "./LinePlot.js";
-import { MarkPlotProps } from "./MarkPlot.js";
+import { type LineHighlightPlotProps } from "./LineHighlightPlot.js";
+import { type LinePlotProps } from "./LinePlot.js";
+import { type MarkPlotProps } from "./MarkPlot.js";
 import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
-import { LineChartPluginSignatures } from "./LineChart.plugins.js";
+import { type LineChartPluginSignatures } from "./LineChart.plugins.js";
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.

package/LineChart/useLinePlotData.d.ts

@@ -1,6 +1,6 @@
-import { ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
-import { ChartsXAxisProps, ChartsYAxisProps } from "../models/index.js";
-import { SeriesId } from "../models/seriesType/common.js";
+import { type ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { type ChartsXAxisProps, type ChartsYAxisProps } from "../models/index.js";
+import { type SeriesId } from "../models/seriesType/common.js";
 interface LinePlotDataPoint {
   d: string;
   seriesId: SeriesId;

package/LineChart/useMarkPlotData.d.ts

@@ -0,0 +1,18 @@
+import { type SeriesId } from "../models/seriesType/common.js";
+import { type ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { type ChartsXAxisProps, type ChartsYAxisProps } from "../models/index.js";
+import { type AxisId } from "../models/axis.js";
+export interface MarkPlotDataPoint {
+  x: number;
+  y: number;
+  index: number;
+  color: string;
+}
+export interface MarkPlotSeriesData {
+  seriesId: SeriesId;
+  clipId: string;
+  shape: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+  xAxisId: AxisId;
+  marks: MarkPlotDataPoint[];
+}
+export declare function useMarkPlotData(xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): MarkPlotSeriesData[];