@mui/x-charts 9.2.0 → 9.4.0

package/LineChart/AreaElement.d.ts

@@ -3,6 +3,7 @@ import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { type AnimatedAreaProps } from "./AnimatedArea.js";
 import { type SeriesId } from "../models/seriesType/common.js";
 import { type LineClasses } from "./lineClasses.js";
+import type { AreaPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
 export interface AreaElementOwnerState {
   seriesId: SeriesId;
   color: string;
@@ -16,10 +17,10 @@ export interface AreaElementSlots {
    * The component that renders the area.
    * @default AnimatedArea
    */
-  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+  area?: React.JSXElementConstructor<AnimatedAreaProps & AreaPropsOverrides>;
 }
 export interface AreaElementSlotProps {
-  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, AreaPropsOverrides, AreaElementOwnerState>;
 }
 export interface AreaElementProps extends Omit<AreaElementOwnerState, 'isFaded' | 'isHighlighted'>, Pick<AnimatedAreaProps, 'skipAnimation'>, Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color'> {
   d: string;

package/LineChart/LineChart.js

@@ -205,11 +205,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    */
   highlightedItem: _propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['line']).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string.isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['line']).isRequired
   })]),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -365,11 +365,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    */
   tooltipItem: _propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['line']).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string.isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['line']).isRequired
   })]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/LineChart/LineChart.mjs

@@ -198,11 +198,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    */
   highlightedItem: PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['line']).isRequired
+    seriesId: PropTypes.string.isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.string.isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['line']).isRequired
   })]),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -358,11 +358,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    */
   tooltipItem: PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['line']).isRequired
+    seriesId: PropTypes.string.isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.string.isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['line']).isRequired
   })]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/LineChart/LineElement.d.mts

@@ -3,6 +3,7 @@ import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { type AnimatedLineProps } from "./AnimatedLine.mjs";
 import { type SeriesId } from "../models/seriesType/common.mjs";
 import { type LineClasses } from "./lineClasses.mjs";
+import type { LinePropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
 export interface LineElementOwnerState {
   seriesId: SeriesId;
   color: string;
@@ -18,10 +19,10 @@ export interface LineElementSlots {
    * The component that renders the line.
    * @default LineElementPath
    */
-  line?: React.JSXElementConstructor<AnimatedLineProps>;
+  line?: React.JSXElementConstructor<AnimatedLineProps & LinePropsOverrides>;
 }
 export interface LineElementSlotProps {
-  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, LinePropsOverrides, LineElementOwnerState>;
 }
 export interface LineElementProps extends Omit<LineElementOwnerState, 'isFaded' | 'isHighlighted'>, Pick<AnimatedLineProps, 'skipAnimation'>, Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color'> {
   d: string;

package/LineChart/LineElement.d.ts

@@ -3,6 +3,7 @@ import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { type AnimatedLineProps } from "./AnimatedLine.js";
 import { type SeriesId } from "../models/seriesType/common.js";
 import { type LineClasses } from "./lineClasses.js";
+import type { LinePropsOverrides } from "../models/chartsSlotsComponentsProps.js";
 export interface LineElementOwnerState {
   seriesId: SeriesId;
   color: string;
@@ -18,10 +19,10 @@ export interface LineElementSlots {
    * The component that renders the line.
    * @default LineElementPath
    */
-  line?: React.JSXElementConstructor<AnimatedLineProps>;
+  line?: React.JSXElementConstructor<AnimatedLineProps & LinePropsOverrides>;
 }
 export interface LineElementSlotProps {
-  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, LinePropsOverrides, LineElementOwnerState>;
 }
 export interface LineElementProps extends Omit<LineElementOwnerState, 'isFaded' | 'isHighlighted'>, Pick<AnimatedLineProps, 'skipAnimation'>, Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color'> {
   d: string;

package/LineChart/LineHighlightPlot.d.mts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { type LineHighlightElementProps } from "./LineHighlightElement.mjs";
+import type { LineHighlightPropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
 export interface LineHighlightPlotSlots {
-  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps & LineHighlightPropsOverrides>;
 }
 export interface LineHighlightPlotSlotProps {
-  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, LineHighlightPropsOverrides, {}>;
 }
 export interface LineHighlightPlotProps extends React.SVGAttributes<SVGSVGElement> {
   /**

package/LineChart/LineHighlightPlot.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { type LineHighlightElementProps } from "./LineHighlightElement.js";
+import type { LineHighlightPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
 export interface LineHighlightPlotSlots {
-  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps & LineHighlightPropsOverrides>;
 }
 export interface LineHighlightPlotSlotProps {
-  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, LineHighlightPropsOverrides, {}>;
 }
 export interface LineHighlightPlotProps extends React.SVGAttributes<SVGSVGElement> {
   /**

package/LineChart/LineHighlightPlot.js

@@ -53,9 +53,6 @@ function LineHighlightPlot(props) {
   } = (0, _ChartsProvider.useChartsContext)();
   const store = (0, _useStore.useStore)();
   const highlightedIndexes = store.use(_useChartCartesianAxis.selectorChartsHighlightXAxisIndex);
-  if (highlightedIndexes.length === 0) {
-    return null;
-  }
   if (seriesData === undefined) {
     return null;
   }
@@ -65,54 +62,77 @@ function LineHighlightPlot(props) {
   } = seriesData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
+  const hasStartEndMark = stackingGroups.some(({
+    ids
+  }) => ids.some(seriesId => series[seriesId].showMark === 'start' || series[seriesId].showMark === 'end'));
+  if (highlightedIndexes.length === 0 && !hasStartEndMark) {
+    return null;
+  }
+  const getHighlightedIndex = new Map();
+  highlightedIndexes.forEach(({
+    axisId,
+    dataIndex
+  }) => {
+    getHighlightedIndex.set(axisId, dataIndex);
+  });
   const Element = slots?.lineHighlight ?? _LineHighlightElement.LineHighlightElement;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
-    children: highlightedIndexes.flatMap(({
-      dataIndex: highlightedIndex,
-      axisId: highlightedAxisId
-    }) => stackingGroups.flatMap(({
+    children: stackingGroups.flatMap(({
       ids: groupIds
-    }) => {
-      return groupIds.flatMap(seriesId => {
-        const {
-          xAxisId = defaultXAxisId,
-          yAxisId = defaultYAxisId,
-          visibleStackedData,
-          data,
-          disableHighlight,
-          shape = 'circle',
-          hidden
-        } = series[seriesId];
-        if (hidden || disableHighlight || data[highlightedIndex] == null) {
-          return null;
-        }
-        if (highlightedAxisId !== xAxisId) {
-          return null;
-        }
-        const xScale = (0, _getValueToPositionMapper.getValueToPositionMapper)(xAxis[xAxisId].scale);
-        const yScale = yAxis[yAxisId].scale;
-        const xData = xAxis[xAxisId].data;
-        if (xData === undefined) {
-          throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have a data property to be able to display a line plot. ` + 'The x-axis data defines the positions for each point in the line. ' + 'Provide a data array to the x-axis configuration.' : (0, _formatErrorMessage2.default)(10, xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`));
-        }
-        const x = xScale(xData[highlightedIndex]);
-        const y = yScale(visibleStackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
-
-        if (!instance.isPointInside(x, y)) {
-          return null;
-        }
-        const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({
-          seriesId: seriesId,
-          color: colorGetter(highlightedIndex),
-          x: x,
-          y: y,
-          shape: shape
-        }, slotProps?.lineHighlight), `${seriesId}`);
-      });
+    }) => groupIds.flatMap(seriesId => {
+      const {
+        xAxisId = defaultXAxisId,
+        yAxisId = defaultYAxisId,
+        visibleStackedData,
+        data,
+        disableHighlight,
+        showMark,
+        shape = 'circle',
+        hidden
+      } = series[seriesId];
+      if (hidden) {
+        return null;
+      }
+      const axisIndex = disableHighlight ? undefined : getHighlightedIndex.get(xAxisId);
+      const showMarkIndex = showMark === 'start' || showMark === 'end' ? getStartEndMarkIndex(data, showMark) : undefined;
+      const highlightedIndex = axisIndex ?? showMarkIndex;
+      if (highlightedIndex === undefined || data[highlightedIndex] == null) {
+        return null;
+      }
+      const xScale = (0, _getValueToPositionMapper.getValueToPositionMapper)(xAxis[xAxisId].scale);
+      const yScale = yAxis[yAxisId].scale;
+      const xData = xAxis[xAxisId].data;
+      if (xData === undefined) {
+        throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have a data property to be able to display a line plot. ` + 'The x-axis data defines the positions for each point in the line. ' + 'Provide a data array to the x-axis configuration.' : (0, _formatErrorMessage2.default)(10, xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`));
+      }
+      const x = xScale(xData[highlightedIndex]);
+      const y = yScale(visibleStackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
+      if (!instance.isPointInside(x, y)) {
+        return null;
+      }
+      const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({
+        seriesId: seriesId,
+        color: colorGetter(highlightedIndex),
+        x: x,
+        y: y,
+        shape: shape
+      }, slotProps?.lineHighlight), `${seriesId}`);
     }))
   }));
 }
+
+/**
+ * Returns the index of the first (`'start'`) or last (`'end'`) non-null item, or `-1` if none.
+ */
+function getStartEndMarkIndex(data, type) {
+  if (type === 'start') {
+    const index = data.findIndex(value => value != null);
+    return index < 0 ? undefined : index;
+  }
+  const index = data.findLastIndex(value => value != null);
+  return index < 0 ? undefined : index;
+}
 process.env.NODE_ENV !== "production" ? LineHighlightPlot.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/LineChart/LineHighlightPlot.mjs

@@ -46,9 +46,6 @@ function LineHighlightPlot(props) {
   } = useChartsContext();
   const store = useStore();
   const highlightedIndexes = store.use(selectorChartsHighlightXAxisIndex);
-  if (highlightedIndexes.length === 0) {
-    return null;
-  }
   if (seriesData === undefined) {
     return null;
   }
@@ -58,54 +55,77 @@ function LineHighlightPlot(props) {
   } = seriesData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
+  const hasStartEndMark = stackingGroups.some(({
+    ids
+  }) => ids.some(seriesId => series[seriesId].showMark === 'start' || series[seriesId].showMark === 'end'));
+  if (highlightedIndexes.length === 0 && !hasStartEndMark) {
+    return null;
+  }
+  const getHighlightedIndex = new Map();
+  highlightedIndexes.forEach(({
+    axisId,
+    dataIndex
+  }) => {
+    getHighlightedIndex.set(axisId, dataIndex);
+  });
   const Element = slots?.lineHighlight ?? LineHighlightElement;
   return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    children: highlightedIndexes.flatMap(({
-      dataIndex: highlightedIndex,
-      axisId: highlightedAxisId
-    }) => stackingGroups.flatMap(({
+    children: stackingGroups.flatMap(({
       ids: groupIds
-    }) => {
-      return groupIds.flatMap(seriesId => {
-        const {
-          xAxisId = defaultXAxisId,
-          yAxisId = defaultYAxisId,
-          visibleStackedData,
-          data,
-          disableHighlight,
-          shape = 'circle',
-          hidden
-        } = series[seriesId];
-        if (hidden || disableHighlight || data[highlightedIndex] == null) {
-          return null;
-        }
-        if (highlightedAxisId !== xAxisId) {
-          return null;
-        }
-        const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
-        const yScale = yAxis[yAxisId].scale;
-        const xData = xAxis[xAxisId].data;
-        if (xData === undefined) {
-          throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have a data property to be able to display a line plot. ` + 'The x-axis data defines the positions for each point in the line. ' + 'Provide a data array to the x-axis configuration.' : _formatErrorMessage(10, xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`));
-        }
-        const x = xScale(xData[highlightedIndex]);
-        const y = yScale(visibleStackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
-
-        if (!instance.isPointInside(x, y)) {
-          return null;
-        }
-        const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
-        return /*#__PURE__*/_jsx(Element, _extends({
-          seriesId: seriesId,
-          color: colorGetter(highlightedIndex),
-          x: x,
-          y: y,
-          shape: shape
-        }, slotProps?.lineHighlight), `${seriesId}`);
-      });
+    }) => groupIds.flatMap(seriesId => {
+      const {
+        xAxisId = defaultXAxisId,
+        yAxisId = defaultYAxisId,
+        visibleStackedData,
+        data,
+        disableHighlight,
+        showMark,
+        shape = 'circle',
+        hidden
+      } = series[seriesId];
+      if (hidden) {
+        return null;
+      }
+      const axisIndex = disableHighlight ? undefined : getHighlightedIndex.get(xAxisId);
+      const showMarkIndex = showMark === 'start' || showMark === 'end' ? getStartEndMarkIndex(data, showMark) : undefined;
+      const highlightedIndex = axisIndex ?? showMarkIndex;
+      if (highlightedIndex === undefined || data[highlightedIndex] == null) {
+        return null;
+      }
+      const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
+      const yScale = yAxis[yAxisId].scale;
+      const xData = xAxis[xAxisId].data;
+      if (xData === undefined) {
+        throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have a data property to be able to display a line plot. ` + 'The x-axis data defines the positions for each point in the line. ' + 'Provide a data array to the x-axis configuration.' : _formatErrorMessage(10, xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`));
+      }
+      const x = xScale(xData[highlightedIndex]);
+      const y = yScale(visibleStackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
+      if (!instance.isPointInside(x, y)) {
+        return null;
+      }
+      const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
+      return /*#__PURE__*/_jsx(Element, _extends({
+        seriesId: seriesId,
+        color: colorGetter(highlightedIndex),
+        x: x,
+        y: y,
+        shape: shape
+      }, slotProps?.lineHighlight), `${seriesId}`);
     }))
   }));
 }
+
+/**
+ * Returns the index of the first (`'start'`) or last (`'end'`) non-null item, or `-1` if none.
+ */
+function getStartEndMarkIndex(data, type) {
+  if (type === 'start') {
+    const index = data.findIndex(value => value != null);
+    return index < 0 ? undefined : index;
+  }
+  const index = data.findLastIndex(value => value != null);
+  return index < 0 ? undefined : index;
+}
 process.env.NODE_ENV !== "production" ? LineHighlightPlot.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/LineChart/MarkPlot.d.mts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { type LineItemIdentifier } from "../models/seriesType/line.mjs";
 import { type MarkElementProps } from "./MarkElement.mjs";
+import type { MarkPropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
 export interface MarkPlotSlots {
-  mark?: React.JSXElementConstructor<MarkElementProps>;
+  mark?: React.JSXElementConstructor<MarkElementProps & MarkPropsOverrides>;
 }
 export interface MarkPlotSlotProps {
-  mark?: Partial<MarkElementProps>;
+  mark?: Partial<MarkElementProps> & MarkPropsOverrides;
 }
 export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<MarkElementProps, 'skipAnimation'> {
   /**

package/LineChart/MarkPlot.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { type LineItemIdentifier } from "../models/seriesType/line.js";
 import { type MarkElementProps } from "./MarkElement.js";
+import type { MarkPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
 export interface MarkPlotSlots {
-  mark?: React.JSXElementConstructor<MarkElementProps>;
+  mark?: React.JSXElementConstructor<MarkElementProps & MarkPropsOverrides>;
 }
 export interface MarkPlotSlotProps {
-  mark?: Partial<MarkElementProps>;
+  mark?: Partial<MarkElementProps> & MarkPropsOverrides;
 }
 export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<MarkElementProps, 'skipAnimation'> {
   /**

package/LineChart/seriesConfig/curveEvaluation.js

@@ -1,10 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.evaluateCurveAtAngle = evaluateCurveAtAngle;
 exports.evaluateCurveY = evaluateCurveY;
+var _bezierEasing = _interopRequireDefault(require("bezier-easing"));
+var _warning = require("@mui/x-internals/warning");
 var _epsilon = require("../../utils/epsilon");
 var _getCurve = require("../../internals/getCurve");
 var _clampAngle = require("../../internals/clampAngle");
@@ -75,22 +78,34 @@ function cubicBezierCoeffs(p0, p1, p2, p3) {
 }
 
 /**
- * Find parameter t such that the segment's x(t) ≈ targetX
+ * Evaluate y on a segment at the given x.
+ *
+ * Line segments are interpolated linearly. Bezier segments are normalized so
+ * their endpoints become (0, 0) and (1, 1), passed to `bezier-easing`, and
+ * the result is mapped back to pixel space.
+ *
+ * Warns once if a curve produces control points outside the segment's x
+ * range.
  */
-function findTForX(segment, targetX) {
+function evaluateSegmentYAtX(segment, targetX) {
+  const dx = segment.x1 - segment.x0;
+  if (dx === 0) {
+    return segment.y0;
+  }
+  const dy = segment.y1 - segment.y0;
   if (!isBezierSegment(segment)) {
-    // Linear segment.
-    const dx = segment.x1 - segment.x0;
-    return dx === 0 ? 0 : (targetX - segment.x0) / dx;
+    return segment.y0 + dy * (targetX - segment.x0) / dx;
   }
-  const xBezierCoeffs = cubicBezierCoeffs(segment.x0, segment.cpx1, segment.cpx2, segment.x1);
-  const polyToSolve = [...xBezierCoeffs];
-  polyToSolve[3] -= targetX;
-  const roots = (0, _cubiqSolver.cubicRoots)(polyToSolve);
-  if (roots.length > 0) {
-    return roots[0];
+  const nx1 = (segment.cpx1 - segment.x0) / dx;
+  const nx2 = (segment.cpx2 - segment.x0) / dx;
+  if (process.env.NODE_ENV !== 'production' && (nx1 < 0 || nx1 > 1 || nx2 < 0 || nx2 > 1)) {
+    (0, _warning.warnOnce)(`MUI X Charts: a curve segment has control points outside its x range. ` + `Please report the curve type and data at https://github.com/mui/mui-x/issues ` + `so we can support it natively.`);
   }
-  return -1;
+  const ny1 = dy === 0 ? 0 : (segment.cpy1 - segment.y0) / dy;
+  const ny2 = dy === 0 ? 0 : (segment.cpy2 - segment.y0) / dy;
+  const ease = (0, _bezierEasing.default)(nx1, ny1, nx2, ny2);
+  const nt = (targetX - segment.x0) / dx;
+  return segment.y0 + dy * ease(nt);
 }
 
 /**
@@ -161,14 +176,25 @@ function evaluateCurveY(points, targetX, curveType) {
   const capture = new SegmentCapture();
   const factory = (0, _getCurve.getCurveFactory)(curveType);
   const curveInstance = factory(capture);
+
+  // Track which side of targetX the first point is on, so we detect the
+  // crossing regardless of whether x is increasing or decreasing.
+  const initialSide = points[0].x > targetX;
+  let searchStartIndex = 0;
+  let crossingDetected = false;
   curveInstance.lineStart();
   for (const p of points) {
+    if (!crossingDetected && p.x > targetX !== initialSide) {
+      searchStartIndex = Math.max(0, capture.segments.length - 1);
+      crossingDetected = true;
+    }
     curveInstance.point(p.x, p.y);
   }
   curveInstance.lineEnd();
 
   // Find the segment containing targetX.
-  for (const segment of capture.segments) {
+  for (let i = searchStartIndex; i < capture.segments.length; i += 1) {
+    const segment = capture.segments[i];
     if (targetX < segment.x0 + 0.5 && targetX > segment.x0 - 0.5) {
       return segment.y0;
     }
@@ -178,8 +204,7 @@ function evaluateCurveY(points, targetX, curveType) {
     const xMin = Math.min(segment.x0, segment.x1);
     const xMax = Math.max(segment.x0, segment.x1);
     if (targetX >= xMin && targetX <= xMax) {
-      const t = findTForX(segment, targetX);
-      return evaluateSegmentY(segment, t);
+      return evaluateSegmentYAtX(segment, targetX);
     }
   }
   return null;

package/LineChart/seriesConfig/curveEvaluation.mjs

@@ -1,3 +1,5 @@
+import BezierEasing from 'bezier-easing';
+import { warnOnce } from '@mui/x-internals/warning';
 import { EPSILON } from "../../utils/epsilon.mjs";
 import { getCurveFactory } from "../../internals/getCurve.mjs";
 import { clampAngleRad } from "../../internals/clampAngle.mjs";
@@ -69,22 +71,34 @@ function cubicBezierCoeffs(p0, p1, p2, p3) {
 }
 
 /**
- * Find parameter t such that the segment's x(t) ≈ targetX
+ * Evaluate y on a segment at the given x.
+ *
+ * Line segments are interpolated linearly. Bezier segments are normalized so
+ * their endpoints become (0, 0) and (1, 1), passed to `bezier-easing`, and
+ * the result is mapped back to pixel space.
+ *
+ * Warns once if a curve produces control points outside the segment's x
+ * range.
  */
-function findTForX(segment, targetX) {
+function evaluateSegmentYAtX(segment, targetX) {
+  const dx = segment.x1 - segment.x0;
+  if (dx === 0) {
+    return segment.y0;
+  }
+  const dy = segment.y1 - segment.y0;
   if (!isBezierSegment(segment)) {
-    // Linear segment.
-    const dx = segment.x1 - segment.x0;
-    return dx === 0 ? 0 : (targetX - segment.x0) / dx;
+    return segment.y0 + dy * (targetX - segment.x0) / dx;
   }
-  const xBezierCoeffs = cubicBezierCoeffs(segment.x0, segment.cpx1, segment.cpx2, segment.x1);
-  const polyToSolve = [...xBezierCoeffs];
-  polyToSolve[3] -= targetX;
-  const roots = cubicRoots(polyToSolve);
-  if (roots.length > 0) {
-    return roots[0];
+  const nx1 = (segment.cpx1 - segment.x0) / dx;
+  const nx2 = (segment.cpx2 - segment.x0) / dx;
+  if (process.env.NODE_ENV !== 'production' && (nx1 < 0 || nx1 > 1 || nx2 < 0 || nx2 > 1)) {
+    warnOnce(`MUI X Charts: a curve segment has control points outside its x range. ` + `Please report the curve type and data at https://github.com/mui/mui-x/issues ` + `so we can support it natively.`);
   }
-  return -1;
+  const ny1 = dy === 0 ? 0 : (segment.cpy1 - segment.y0) / dy;
+  const ny2 = dy === 0 ? 0 : (segment.cpy2 - segment.y0) / dy;
+  const ease = BezierEasing(nx1, ny1, nx2, ny2);
+  const nt = (targetX - segment.x0) / dx;
+  return segment.y0 + dy * ease(nt);
 }
 
 /**
@@ -155,14 +169,25 @@ export function evaluateCurveY(points, targetX, curveType) {
   const capture = new SegmentCapture();
   const factory = getCurveFactory(curveType);
   const curveInstance = factory(capture);
+
+  // Track which side of targetX the first point is on, so we detect the
+  // crossing regardless of whether x is increasing or decreasing.
+  const initialSide = points[0].x > targetX;
+  let searchStartIndex = 0;
+  let crossingDetected = false;
   curveInstance.lineStart();
   for (const p of points) {
+    if (!crossingDetected && p.x > targetX !== initialSide) {
+      searchStartIndex = Math.max(0, capture.segments.length - 1);
+      crossingDetected = true;
+    }
     curveInstance.point(p.x, p.y);
   }
   curveInstance.lineEnd();
 
   // Find the segment containing targetX.
-  for (const segment of capture.segments) {
+  for (let i = searchStartIndex; i < capture.segments.length; i += 1) {
+    const segment = capture.segments[i];
     if (targetX < segment.x0 + 0.5 && targetX > segment.x0 - 0.5) {
       return segment.y0;
     }
@@ -172,8 +197,7 @@ export function evaluateCurveY(points, targetX, curveType) {
     const xMin = Math.min(segment.x0, segment.x1);
     const xMax = Math.max(segment.x0, segment.x1);
     if (targetX >= xMin && targetX <= xMax) {
-      const t = findTForX(segment, targetX);
-      return evaluateSegmentY(segment, t);
+      return evaluateSegmentYAtX(segment, targetX);
     }
   }
   return null;