@mui/x-charts 7.0.0-beta.0 → 7.0.0-beta.1

package/modern/LineChart/LineChart.js

@@ -13,6 +13,7 @@ import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { ChartsClipPath } from '../ChartsClipPath';
 import { LineHighlightPlot } from './LineHighlightPlot';
+import { ChartsOnAxisClickHandler } from '../ChartsOnAxisClickHandler';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -37,6 +38,10 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     dataset,
     sx,
     tooltip,
+    onAxisClick,
+    onAreaClick,
+    onLineClick,
+    onMarkClick,
     axisHighlight = {
       x: 'line'
     },
@@ -48,7 +53,8 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     bottomAxis,
     children,
     slots,
-    slotProps
+    slotProps,
+    skipAnimation
   } = props;
   const id = useId();
   const clipPathId = `${id}-clip-path`;
@@ -72,15 +78,21 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     colors: colors,
     dataset: dataset,
     sx: sx,
-    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
-    children: [/*#__PURE__*/_jsxs("g", {
+    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    children: [onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, {
+      onAxisClick: onAxisClick
+    }), /*#__PURE__*/_jsxs("g", {
       clipPath: `url(#${clipPathId})`,
       children: [/*#__PURE__*/_jsx(AreaPlot, {
         slots: slots,
-        slotProps: slotProps
+        slotProps: slotProps,
+        onItemClick: onAreaClick,
+        skipAnimation: skipAnimation
       }), /*#__PURE__*/_jsx(LinePlot, {
         slots: slots,
-        slotProps: slotProps
+        slotProps: slotProps,
+        onItemClick: onLineClick,
+        skipAnimation: skipAnimation
       })]
     }), /*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
@@ -91,7 +103,9 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
       slotProps: slotProps
     }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(MarkPlot, {
       slots: slots,
-      slotProps: slotProps
+      slotProps: slotProps,
+      onItemClick: onMarkClick,
+      skipAnimation: skipAnimation
     }), /*#__PURE__*/_jsx(LineHighlightPlot, {
       slots: slots,
       slotProps: slotProps
@@ -230,6 +244,16 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   }),
+  onAreaClick: PropTypes.func,
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   */
+  onAxisClick: PropTypes.func,
+  onLineClick: PropTypes.func,
+  onMarkClick: PropTypes.func,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -258,6 +282,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: PropTypes.number
   }), PropTypes.string]),
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/modern/LineChart/LineElement.js

@@ -1,16 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "classes", "color", "highlightScope", "slots", "slotProps"];
+const _excluded = ["id", "classes", "color", "highlightScope", "slots", "slotProps", "onClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { color as d3Color } from 'd3-color';
 import composeClasses from '@mui/utils/composeClasses';
 import { useSlotProps } from '@mui/base/utils';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { InteractionContext } from '../context/InteractionProvider';
 import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
+import { AnimatedLine } from './AnimatedLine';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getLineElementUtilityClass(slot) {
   return generateUtilityClass('MuiLineElement', slot);
@@ -28,35 +27,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getLineElementUtilityClass, classes);
 };
-export const LineElementPath = styled('path', {
-  name: 'MuiLineElement',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
-})(({
-  ownerState
-}) => ({
-  strokeWidth: 2,
-  strokeLinejoin: 'round',
-  fill: 'none',
-  stroke: ownerState.isHighlighted ? d3Color(ownerState.color).brighter(0.5).formatHex() : ownerState.color,
-  transition: 'opacity 0.2s ease-in, stroke 0.2s ease-in',
-  opacity: ownerState.isFaded ? 0.3 : 1
-}));
-LineElementPath.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  as: PropTypes.elementType,
-  ownerState: PropTypes.shape({
-    classes: PropTypes.object,
-    color: PropTypes.string.isRequired,
-    id: PropTypes.string.isRequired,
-    isFaded: PropTypes.bool.isRequired,
-    isHighlighted: PropTypes.bool.isRequired
-  }).isRequired,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-};
 /**
  * Demos:
  *
@@ -74,7 +44,8 @@ function LineElement(props) {
       color,
       highlightScope,
       slots,
-      slotProps
+      slotProps,
+      onClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const getInteractionItemProps = useInteractionItemProps(highlightScope);
@@ -97,7 +68,7 @@ function LineElement(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  const Line = slots?.line ?? LineElementPath;
+  const Line = slots?.line ?? AnimatedLine;
   const lineProps = useSlotProps({
     elementType: Line,
     externalSlotProps: slotProps?.line,
@@ -105,7 +76,9 @@ function LineElement(props) {
       type: 'line',
       seriesId: id
     }), {
-      className: classes.root
+      className: classes.root,
+      onClick,
+      cursor: onClick ? 'pointer' : 'unset'
     }),
     ownerState
   });
@@ -117,10 +90,18 @@ process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
+  color: PropTypes.string.isRequired,
+  d: PropTypes.string.isRequired,
   highlightScope: PropTypes.shape({
     faded: PropTypes.oneOf(['global', 'none', 'series']),
     highlighted: PropTypes.oneOf(['item', 'none', 'series'])
   }),
+  id: PropTypes.string.isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/modern/LineChart/LineHighlightElement.js

@@ -60,13 +60,14 @@ function LineHighlightElement(props) {
     y
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(HighlightElement, _extends({}, other, {
+  return /*#__PURE__*/_jsx(HighlightElement, _extends({
+    pointerEvents: "none",
     ownerState: ownerState,
     className: classes.root,
     cx: 0,
     cy: 0,
     r: other.r === undefined ? 5 : other.r
-  }));
+  }, other));
 }
 process.env.NODE_ENV !== "production" ? LineHighlightElement.propTypes = {
   // ----------------------------- Warning --------------------------------

package/modern/LineChart/LinePlot.js

@@ -1,6 +1,6 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps"];
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { line as d3Line } from 'd3-shape';
@@ -11,26 +11,11 @@ import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 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,
-      slotProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+const useAggregatedData = () => {
   const seriesData = React.useContext(SeriesContext).line;
   const axisData = React.useContext(CartesianContext);
   if (seriesData === undefined) {
-    return null;
+    return [];
   }
   const {
     series,
@@ -44,45 +29,82 @@ function LinePlot(props) {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    children: stackingGroups.flatMap(({
-      ids: groupIds
-    }) => {
-      return groupIds.flatMap(seriesId => {
-        const {
-          xAxisKey = defaultXAxisId,
-          yAxisKey = defaultYAxisId,
-          stackedData,
-          data,
-          connectNulls
-        } = series[seriesId];
-        const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
-        const yScale = yAxis[yAxisKey].scale;
-        const xData = xAxis[xAxisKey].data;
-        if (process.env.NODE_ENV !== 'production') {
-          if (xData === undefined) {
-            throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
-          }
-          if (xData.length < stackedData.length) {
-            throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
-          }
+  return stackingGroups.flatMap(({
+    ids: groupIds
+  }) => {
+    return groupIds.flatMap(seriesId => {
+      const {
+        xAxisKey = defaultXAxisId,
+        yAxisKey = defaultYAxisId,
+        stackedData,
+        data,
+        connectNulls
+      } = series[seriesId];
+      const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
+      const yScale = yAxis[yAxisKey].scale;
+      const xData = xAxis[xAxisKey].data;
+      if (process.env.NODE_ENV !== 'production') {
+        if (xData === undefined) {
+          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
         }
-        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 formattedData = xData?.map((x, index) => ({
-          x,
-          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,
-          color: series[seriesId].color,
-          highlightScope: series[seriesId].highlightScope,
-          slots: slots,
-          slotProps: slotProps
-        }, seriesId);
+        if (xData.length < stackedData.length) {
+          throw new Error(`MUI X Charts: 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) || '';
+      return _extends({}, series[seriesId], {
+        d,
+        seriesId
       });
+    });
+  });
+};
+
+/**
+ * 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,
+      slotProps,
+      skipAnimation,
+      onItemClick
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const completedData = useAggregatedData();
+  return /*#__PURE__*/_jsx("g", _extends({}, other, {
+    children: completedData.map(({
+      d,
+      seriesId,
+      color,
+      highlightScope
+    }) => {
+      return /*#__PURE__*/_jsx(LineElement, {
+        id: seriesId,
+        d: d,
+        color: color,
+        highlightScope: highlightScope,
+        skipAnimation: skipAnimation,
+        slots: slots,
+        slotProps: slotProps,
+        onClick: onItemClick && (event => onItemClick(event, {
+          type: 'line',
+          seriesId
+        }))
+      }, seriesId);
     })
   }));
 }
@@ -91,6 +113,17 @@ process.env.NODE_ENV !== "production" ? LinePlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Callback fired when a line item is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {LineItemIdentifier} lineItemIdentifier The line item identifier.
+   */
+  onItemClick: PropTypes.func,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/modern/LineChart/MarkElement.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "highlightScope"];
+const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "highlightScope", "onClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
@@ -8,6 +8,7 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from 'd3-shape';
+import { animated, to, useSpring } from '@react-spring/web';
 import { getSymbol } from '../internals/utils';
 import { InteractionContext } from '../context/InteractionProvider';
 import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
@@ -28,7 +29,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getMarkElementUtilityClass, classes);
 };
-const MarkElementPath = styled('path', {
+const MarkElementPath = styled(animated.path, {
   name: 'MuiMarkElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -36,8 +37,6 @@ const MarkElementPath = styled('path', {
   ownerState,
   theme
 }) => ({
-  transform: `translate(${ownerState.x}px, ${ownerState.y}px)`,
-  transformOrigin: `${ownerState.x}px ${ownerState.y}px`,
   fill: (theme.vars || theme).palette.background.paper,
   stroke: ownerState.color,
   strokeWidth: 2
@@ -53,9 +52,7 @@ MarkElementPath.propTypes = {
     color: PropTypes.string.isRequired,
     id: PropTypes.string.isRequired,
     isFaded: PropTypes.bool.isRequired,
-    isHighlighted: PropTypes.bool.isRequired,
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired
+    isHighlighted: PropTypes.bool.isRequired
   }).isRequired,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 };
@@ -78,7 +75,9 @@ function MarkElement(props) {
       color,
       shape,
       dataIndex,
-      highlightScope
+      highlightScope,
+      onClick,
+      skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const getInteractionItemProps = useInteractionItemProps(highlightScope);
@@ -94,20 +93,29 @@ function MarkElement(props) {
     type: 'line',
     seriesId: id
   }, highlightScope);
+  const position = useSpring({
+    x,
+    y,
+    immediate: skipAnimation
+  });
   const ownerState = {
     id,
     classes: innerClasses,
     isHighlighted,
     isFaded,
-    color,
-    x,
-    y
+    color
   };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(MarkElementPath, _extends({}, other, {
+    style: {
+      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,
     className: classes.root,
-    d: d3Symbol(d3SymbolsFill[getSymbol(shape)])()
+    d: d3Symbol(d3SymbolsFill[getSymbol(shape)])(),
+    onClick: onClick,
+    cursor: onClick ? 'pointer' : 'unset'
   }, getInteractionItemProps({
     type: 'line',
     seriesId: id,
@@ -131,6 +139,11 @@ process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
   /**
    * The shape of the marker.
    */
-  shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired
+  shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool
 } : void 0;
 export { MarkElement };

package/modern/LineChart/MarkPlot.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps"];
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { SeriesContext } from '../context/SeriesContextProvider';
@@ -8,6 +8,8 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { MarkElement } from './MarkElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
+import { DrawingContext } from '../context/DrawingProvider';
+import { cleanId } from '../internals/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -22,11 +24,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 function MarkPlot(props) {
   const {
       slots,
-      slotProps
+      slotProps,
+      skipAnimation,
+      onItemClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesData = React.useContext(SeriesContext).line;
   const axisData = React.useContext(CartesianContext);
+  const {
+    chartId
+  } = React.useContext(DrawingContext);
   const Mark = slots?.mark ?? MarkElement;
   if (seriesData === undefined) {
     return null;
@@ -47,7 +54,7 @@ function MarkPlot(props) {
     children: stackingGroups.flatMap(({
       ids: groupIds
     }) => {
-      return groupIds.flatMap(seriesId => {
+      return groupIds.map(seriesId => {
         const {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
@@ -78,59 +85,70 @@ function MarkPlot(props) {
         if (xData === undefined) {
           throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
         }
-        return 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 (!isInRange({
-            x,
-            y
-          })) {
-            // Remove out of range
-            return false;
-          }
-          if (showMark === true) {
-            return true;
-          }
-          return showMark({
+        const clipId = cleanId(`${chartId}-${seriesId}-line-clip`); // We assume that if displaying line mark, the line will also be rendered
+
+        return /*#__PURE__*/_jsx("g", {
+          clipPath: `url(#${clipId})`,
+          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
-          });
-        }).map(({
-          x,
-          y,
-          index
-        }) => {
-          return /*#__PURE__*/_jsx(Mark, _extends({
-            id: seriesId,
-            dataIndex: index,
-            shape: "circle",
-            color: series[seriesId].color,
-            x: x,
-            y: y // Don't knwo why TS don't get from the filter that y can't be null
-            ,
-            highlightScope: series[seriesId].highlightScope
-          }, slotProps?.mark), `${seriesId}-${index}`);
-        });
+          }) => {
+            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
+          }) => {
+            return /*#__PURE__*/_jsx(Mark, _extends({
+              id: seriesId,
+              dataIndex: index,
+              shape: "circle",
+              color: series[seriesId].color,
+              x: x,
+              y: y // Don't know why TS doesn't get from the filter that y can't be null
+              ,
+              highlightScope: series[seriesId].highlightScope,
+              skipAnimation: skipAnimation,
+              onClick: onItemClick && (event => onItemClick(event, {
+                type: 'line',
+                seriesId,
+                dataIndex: index
+              }))
+            }, slotProps?.mark), `${seriesId}-${index}`);
+          })
+        }, seriesId);
       });
     })
   }));
@@ -140,6 +158,17 @@ 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 "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Callback fired when a line mark item is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier.
+   */
+  onItemClick: PropTypes.func,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}