@mui/x-charts 6.0.0-alpha.8 → 6.18.0

package/modern/LineChart/AreaPlot.js

@@ -10,6 +10,17 @@ import { AreaElement } from './AreaElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+ * - [Stacking](https://mui.com/x/react-charts/stacking/)
+ *
+ * API:
+ *
+ * - [AreaPlot API](https://mui.com/x/api/charts/area-plot/)
+ */
 function AreaPlot(props) {
   const {
       slots,
@@ -41,20 +52,28 @@ function AreaPlot(props) {
         const {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
-          stackedData
+          stackedData,
+          data,
+          connectNulls
         } = series[seriesId];
         const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
-        if (xData === undefined) {
-          throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot.`);
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot.`);
+          }
+          if (xData.length < stackedData.length) {
+            throw new Error(`MUI: 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)).y0(d => yScale(d.y[0])).y1(d => yScale(d.y[1]));
+        const areaPath = d3Area().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => d.y && yScale(d.y[0])).y1(d => d.y && yScale(d.y[1]));
         const curve = getCurveFactory(series[seriesId].curve);
-        const d3Data = xData?.map((x, index) => ({
+        const formattedData = xData?.map((x, index) => ({
           x,
           y: stackedData[index]
-        }));
+        })) ?? [];
+        const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
         return !!series[seriesId].area && /*#__PURE__*/_jsx(AreaElement, {
           id: seriesId,
           d: areaPath.curve(curve)(d3Data) || undefined,

package/modern/LineChart/LineChart.js

@@ -12,8 +12,19 @@ import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { ChartsClipPath } from '../ChartsClipPath';
+import { LineHighlightPlot } from './LineHighlightPlot';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [LineChart API](https://mui.com/x/api/charts/line-chart/)
+ */
 const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
   const {
     xAxis,
@@ -29,6 +40,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     axisHighlight = {
       x: 'line'
     },
+    disableLineItemHighlight,
     legend,
     topAxis,
     leftAxis,
@@ -43,6 +55,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
     ref: ref,
     series: series.map(s => _extends({
+      disableHighlight: !!disableLineItemHighlight,
       type: 'line'
     }, s)),
     width: width,
@@ -76,13 +89,19 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
       bottomAxis: bottomAxis,
       slots: slots,
       slotProps: slotProps
-    }), /*#__PURE__*/_jsx(MarkPlot, {
+    }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(MarkPlot, {
+      slots: slots,
+      slotProps: slotProps
+    }), /*#__PURE__*/_jsx(LineHighlightPlot, {
       slots: slots,
       slotProps: slotProps
     }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
       slots: slots,
       slotProps: slotProps
-    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
+    })), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/_jsx(ChartsClipPath, {
       id: clipPathId
     }), children]
   });
@@ -109,11 +128,15 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['bottom', 'top']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -128,6 +151,10 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   dataset: PropTypes.arrayOf(PropTypes.object),
   desc: PropTypes.string,
   disableAxisListener: PropTypes.bool,
+  /**
+   * If `true`, render the line highlight item.
+   */
+  disableLineItemHighlight: PropTypes.bool,
   height: PropTypes.number,
   /**
    * Indicate which axis to display the left of the charts.
@@ -142,33 +169,33 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['left', 'right']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
+  /**
+   * @deprecated Consider using `slotProps.legend` instead.
+   */
   legend: PropTypes.shape({
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
     hidden: PropTypes.bool,
-    itemWidth: PropTypes.number,
-    markSize: PropTypes.number,
-    offset: PropTypes.shape({
-      x: PropTypes.number,
-      y: PropTypes.number
-    }),
     position: PropTypes.shape({
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
     slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    spacing: PropTypes.number
+    slots: PropTypes.object
   }),
   margin: PropTypes.shape({
     bottom: PropTypes.number,
@@ -189,11 +216,15 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['left', 'right']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -202,15 +233,18 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   series: PropTypes.arrayOf(PropTypes.shape({
     area: PropTypes.bool,
     color: PropTypes.string,
+    connectNulls: PropTypes.bool,
     curve: PropTypes.oneOf(['catmullRom', 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepAfter', 'stepBefore']),
     data: PropTypes.arrayOf(PropTypes.number),
     dataKey: PropTypes.string,
+    disableHighlight: PropTypes.bool,
     highlightScope: PropTypes.shape({
       faded: PropTypes.oneOf(['global', 'none', 'series']),
       highlighted: PropTypes.oneOf(['item', 'none', 'series'])
     }),
     id: PropTypes.string,
     label: PropTypes.string,
+    showMark: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
     stack: PropTypes.string,
     stackOffset: PropTypes.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']),
     stackOrder: PropTypes.oneOf(['appearance', 'ascending', 'descending', 'insideOut', 'none', 'reverse']),
@@ -235,6 +269,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,
     itemContent: PropTypes.elementType,
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**
@@ -250,11 +286,15 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['bottom', 'top']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -279,6 +319,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -287,6 +328,9 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -305,6 +349,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -313,6 +358,9 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,

package/modern/LineChart/LineElement.js

@@ -57,6 +57,16 @@ LineElementPath.propTypes = {
   }).isRequired,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 };
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [LineElement API](https://mui.com/x/api/charts/line-element/)
+ */
 function LineElement(props) {
   const {
       id,

package/modern/LineChart/LineHighlightElement.js

@@ -0,0 +1,78 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["x", "y", "id", "classes", "color"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+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 { jsx as _jsx } from "react/jsx-runtime";
+export function getHighlightElementUtilityClass(slot) {
+  return generateUtilityClass('MuiHighlightElement', slot);
+}
+export const lineHighlightElementClasses = generateUtilityClasses('MuiHighlightElement', ['root']);
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    id
+  } = ownerState;
+  const slots = {
+    root: ['root', `series-${id}`]
+  };
+  return composeClasses(slots, getHighlightElementUtilityClass, classes);
+};
+const HighlightElement = styled('circle', {
+  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
+}));
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [LineHighlightElement API](https://mui.com/x/api/charts/line-highlight-element/)
+ */
+function LineHighlightElement(props) {
+  const {
+      x,
+      y,
+      id,
+      classes: innerClasses,
+      color
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const ownerState = {
+    id,
+    classes: innerClasses,
+    color,
+    x,
+    y
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(HighlightElement, _extends({}, other, {
+    ownerState: ownerState,
+    className: classes.root,
+    cx: 0,
+    cy: 0,
+    r: other.r === undefined ? 5 : other.r
+  }));
+}
+process.env.NODE_ENV !== "production" ? LineHighlightElement.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: PropTypes.object
+} : void 0;
+export { LineHighlightElement };

package/modern/LineChart/LineHighlightPlot.js

@@ -0,0 +1,102 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["slots", "slotProps"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { SeriesContext } from '../context/SeriesContextProvider';
+import { CartesianContext } from '../context/CartesianContextProvider';
+import { LineHighlightElement } from './LineHighlightElement';
+import { getValueToPositionMapper } from '../hooks/useScale';
+import { InteractionContext } from '../context/InteractionProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [LineHighlightPlot API](https://mui.com/x/api/charts/line-highlight-plot/)
+ */
+function LineHighlightPlot(props) {
+  const {
+      slots,
+      slotProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const seriesData = React.useContext(SeriesContext).line;
+  const axisData = React.useContext(CartesianContext);
+  const {
+    axis
+  } = React.useContext(InteractionContext);
+  const highlightedIndex = axis.x?.index;
+  if (highlightedIndex === undefined) {
+    return null;
+  }
+  if (seriesData === undefined) {
+    return null;
+  }
+  const {
+    series,
+    stackingGroups
+  } = seriesData;
+  const {
+    xAxis,
+    yAxis,
+    xAxisIds,
+    yAxisIds
+  } = axisData;
+  const defaultXAxisId = xAxisIds[0];
+  const defaultYAxisId = yAxisIds[0];
+  const Element = slots?.lineHighlight ?? LineHighlightElement;
+  return /*#__PURE__*/_jsx("g", _extends({}, other, {
+    children: stackingGroups.flatMap(({
+      ids: groupIds
+    }) => {
+      return groupIds.flatMap(seriesId => {
+        const {
+          xAxisKey = defaultXAxisId,
+          yAxisKey = defaultYAxisId,
+          stackedData,
+          data,
+          disableHighlight
+        } = series[seriesId];
+        if (disableHighlight || data[highlightedIndex] == null) {
+          return null;
+        }
+        const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
+        const yScale = yAxis[yAxisKey].scale;
+        const xData = xAxis[xAxisKey].data;
+        if (xData === undefined) {
+          throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot.`);
+        }
+        const x = xScale(xData[highlightedIndex]);
+        const y = yScale(stackedData[highlightedIndex][1]);
+        return /*#__PURE__*/_jsx(Element, _extends({
+          id: seriesId,
+          color: series[seriesId].color,
+          x: x,
+          y: y
+        }, slotProps?.lineHighlight), `${seriesId}`);
+      });
+    })
+  }));
+}
+process.env.NODE_ENV !== "production" ? LineHighlightPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { LineHighlightPlot };

package/modern/LineChart/LinePlot.js

@@ -10,6 +10,16 @@ import { LineElement } from './LineElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [LinePlot API](https://mui.com/x/api/charts/line-plot/)
+ */
 function LinePlot(props) {
   const {
       slots,
@@ -41,25 +51,28 @@ function LinePlot(props) {
         const {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
-          stackedData
+          stackedData,
+          data,
+          connectNulls
         } = series[seriesId];
         const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
-        if (xData === undefined) {
-          throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
-        }
-        const linePath = d3Line().x(d => xScale(d.x)).y(d => yScale(d.y[1]));
         if (process.env.NODE_ENV !== 'production') {
-          if (xData.length !== stackedData.length) {
-            throw new Error(`MUI: data length of the x axis (${xData.length} items) does not match length of series (${stackedData.length} items)`);
+          if (xData === undefined) {
+            throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
+          }
+          if (xData.length < stackedData.length) {
+            throw new Error(`MUI: 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 curve = getCurveFactory(series[seriesId].curve);
-        const d3Data = xData?.map((x, index) => ({
+        const formattedData = xData?.map((x, index) => ({
           x,
-          y: stackedData[index] ?? [0, 0]
-        }));
+          y: stackedData[index]
+        })) ?? [];
+        const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
         return /*#__PURE__*/_jsx(LineElement, {
           id: seriesId,
           d: linePath.curve(curve)(d3Data) || undefined,

package/modern/LineChart/MarkElement.js

@@ -38,12 +38,9 @@ const MarkElementPath = styled('path', {
 }) => ({
   transform: `translate(${ownerState.x}px, ${ownerState.y}px)`,
   transformOrigin: `${ownerState.x}px ${ownerState.y}px`,
-  fill: theme.palette.background.paper,
+  fill: (theme.vars || theme).palette.background.paper,
   stroke: ownerState.color,
-  strokeWidth: 2,
-  '&.MuiMarkElement-highlighted': {
-    fill: ownerState.color
-  }
+  strokeWidth: 2
 }));
 MarkElementPath.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -62,6 +59,16 @@ MarkElementPath.propTypes = {
   }).isRequired,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 };
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [MarkElement API](https://mui.com/x/api/charts/mark-element/)
+ */
 function MarkElement(props) {
   const {
       x,

package/modern/LineChart/MarkPlot.js

@@ -8,6 +8,16 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { MarkElement } from './MarkElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [MarkPlot API](https://mui.com/x/api/charts/mark-plot/)
+ */
 function MarkPlot(props) {
   const {
       slots,
@@ -40,8 +50,13 @@ function MarkPlot(props) {
         const {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
-          stackedData
+          stackedData,
+          data,
+          showMark = true
         } = series[seriesId];
+        if (showMark === false) {
+          return null;
+        }
         const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
@@ -63,25 +78,57 @@ function MarkPlot(props) {
           throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
         }
         return xData?.map((x, index) => {
-          const y = stackedData[index][1];
+          const value = data[index] == null ? null : stackedData[index][1];
           return {
             x: xScale(x),
-            y: yScale(y),
+            y: value === null ? null : yScale(value),
+            position: x,
+            value,
             index
           };
-        }).filter(isInRange).map(({
+        }).filter(({
+          x,
+          y,
+          index,
+          position,
+          value
+        }) => {
+          if (value === null || y === null) {
+            // Remove missing data point
+            return false;
+          }
+          if (!isInRange({
+            x,
+            y
+          })) {
+            // Remove out of range
+            return false;
+          }
+          if (showMark === true) {
+            return true;
+          }
+          return showMark({
+            x,
+            y,
+            index,
+            position,
+            value
+          });
+        }).map(({
           x,
           y,
           index
-        }) => /*#__PURE__*/_jsx(Mark, _extends({
-          id: seriesId,
-          dataIndex: index,
-          shape: "circle",
-          color: series[seriesId].color,
-          x: x,
-          y: y,
-          highlightScope: series[seriesId].highlightScope
-        }, slotProps?.mark), `${seriesId}-${index}`));
+        }) => {
+          return /*#__PURE__*/_jsx(Mark, _extends({
+            id: seriesId,
+            dataIndex: index,
+            shape: "circle",
+            color: series[seriesId].color,
+            x: x,
+            y: y,
+            highlightScope: series[seriesId].highlightScope
+          }, slotProps?.mark), `${seriesId}-${index}`);
+        });
       });
     })
   }));