@mui/x-charts 9.1.0 → 9.3.0

package/ChartsRadiusAxis/ChartsRadiusAxis.mjs

@@ -10,8 +10,9 @@ import { selectorChartPolarCenter } from "../internals/plugins/featurePlugins/us
 import { useUtilityClasses } from "./chartsRadiusAxisClasses.mjs";
 import { createGetLabelTextAnchors } from "./createGetLabelTextAnchors.mjs";
 import { getLabelTransform } from "./getLabelTransform.mjs";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
 /* Gap between a tick and its label. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TICK_LABEL_GAP = 3;
 const getLabelTextAnchors = createGetLabelTextAnchors(getLabelTransform);
 
@@ -34,17 +35,22 @@ function getAxisAngleInRadians(position, rotationAxis) {
   return 0;
 }
 export function ChartsRadiusAxis(props) {
+  const radiusAxis = useRadiusAxis(props.axisId);
+  const settings = _extends({}, radiusAxis, props);
   const {
-    axisId,
     position = 'start',
     disableLine,
     disableTicks,
-    tickLabelPosition = 'after',
-    tickPosition = 'after',
+    tickLabelPosition: tickLabelPositionProp = 'auto',
+    tickPosition = position === 'start' ? 'before' : 'after',
     tickSize = 6,
     className,
     classes: classesProp
-  } = props;
+  } = settings;
+  let tickLabelPosition = tickLabelPositionProp;
+  if (tickLabelPosition === 'auto') {
+    tickLabelPosition = position === 'start' ? 'before' : 'after';
+  }
   const isCentered = tickLabelPosition === 'center';
   const classes = useUtilityClasses({
     classes: classesProp,
@@ -58,7 +64,6 @@ export function ChartsRadiusAxis(props) {
     cx,
     cy
   } = store.use(selectorChartPolarCenter);
-  const radiusAxis = useRadiusAxis(axisId);
   const rotationAxis = useRotationAxis();
   const ticks = useTicks({
     scale: radiusAxis.scale,
@@ -68,7 +73,7 @@ export function ChartsRadiusAxis(props) {
     valueFormatter: radiusAxis?.valueFormatter,
     direction: 'radius'
   });
-  if (!radiusAxis) {
+  if (!radiusAxis || settings.position === 'none') {
     return null;
   }
   const angle = getAxisAngleInRadians(position, rotationAxis);
@@ -96,17 +101,18 @@ export function ChartsRadiusAxis(props) {
       className: classes.line
     }), ticks.map(({
       offset: radius,
+      labelOffset,
       formattedValue
     }, index) => {
       if (!formattedValue) {
         return null;
       }
-      const tx = cx + dx * radius;
-      const ty = cy + dy * radius;
+      const tickX = cx + dx * radius;
+      const tickY = cy + dy * radius;
 
       // Compute the label position.
-      let labelX = tx;
-      let labelY = ty;
+      let labelX = cx + dx * (radius + labelOffset);
+      let labelY = cy + dy * (radius + labelOffset);
       if (tickLabelGap !== 0) {
         labelX += tickLabelGapDx;
         labelY += tickLabelGapDy;
@@ -119,10 +125,10 @@ export function ChartsRadiusAxis(props) {
       return /*#__PURE__*/_jsxs("g", {
         className: classes.tickContainer,
         children: [!disableTicks && /*#__PURE__*/_jsx("line", {
-          x1: tx,
-          y1: ty,
-          x2: tx + tickDx,
-          y2: ty + tickDy,
+          x1: tickX,
+          y1: tickY,
+          x2: tickX + tickDx,
+          y2: tickY + tickDy,
           stroke: stroke,
           className: classes.tick
         }), /*#__PURE__*/_jsx("text", _extends({

package/ChartsRotationAxis/ChartsRotationAxis.d.mts

@@ -1,48 +1,2 @@
-import type { AxisId } from "../models/axis.mjs";
-import { type ChartsRadialAxisClasses } from "./chartsRotationAxisClasses.mjs";
-export interface ChartsRotationAxisProps {
-  /**
-   * Id of the rotation axis to render.
-   * If not provided, it will use the first defined rotation axis.
-   */
-  axisId?: AxisId;
-  /**
-   * If `true`, the axis line is not rendered.
-   * @default false
-   */
-  disableLine?: boolean;
-  /**
-   * If `true`, the ticks are not rendered.
-   * @default false
-   */
-  disableTicks?: boolean;
-  /**
-   * The position of the rotation axis.
-   * It can be 'inside' or 'outside'.
-   * @default 'outside'
-   */
-  position?: 'inside' | 'outside';
-  /**
-   * The size (in pixels) of the tick marks.
-   * @default 6
-   */
-  tickSize?: number;
-  /**
-   * Set the position of the tick labels relative to the axis line.
-   * `'after'` places them outside the arc, `'before'` inside.
-   * @default position === 'outside' ? 'after' : 'before'
-   */
-  tickLabelPosition?: 'after' | 'before';
-  /**
-   * Set the position of the tick relative to the axis line.
-   * `'after'` places them outside the arc, `'before'` inside.
-   * @default position === 'outside' ? 'after' : 'before'
-   */
-  tickPosition?: 'after' | 'before';
-  /**
-   * A CSS class name applied to the root element.
-   */
-  className?: string;
-  classes?: Partial<ChartsRadialAxisClasses>;
-}
+import type { ChartsRotationAxisProps } from "../models/axis.mjs";
 export declare function ChartsRotationAxis(props: ChartsRotationAxisProps): import("react/jsx-runtime").JSX.Element | null;

package/ChartsRotationAxis/ChartsRotationAxis.d.ts

@@ -1,48 +1,2 @@
-import type { AxisId } from "../models/axis.js";
-import { type ChartsRadialAxisClasses } from "./chartsRotationAxisClasses.js";
-export interface ChartsRotationAxisProps {
-  /**
-   * Id of the rotation axis to render.
-   * If not provided, it will use the first defined rotation axis.
-   */
-  axisId?: AxisId;
-  /**
-   * If `true`, the axis line is not rendered.
-   * @default false
-   */
-  disableLine?: boolean;
-  /**
-   * If `true`, the ticks are not rendered.
-   * @default false
-   */
-  disableTicks?: boolean;
-  /**
-   * The position of the rotation axis.
-   * It can be 'inside' or 'outside'.
-   * @default 'outside'
-   */
-  position?: 'inside' | 'outside';
-  /**
-   * The size (in pixels) of the tick marks.
-   * @default 6
-   */
-  tickSize?: number;
-  /**
-   * Set the position of the tick labels relative to the axis line.
-   * `'after'` places them outside the arc, `'before'` inside.
-   * @default position === 'outside' ? 'after' : 'before'
-   */
-  tickLabelPosition?: 'after' | 'before';
-  /**
-   * Set the position of the tick relative to the axis line.
-   * `'after'` places them outside the arc, `'before'` inside.
-   * @default position === 'outside' ? 'after' : 'before'
-   */
-  tickPosition?: 'after' | 'before';
-  /**
-   * A CSS class name applied to the root element.
-   */
-  className?: string;
-  classes?: Partial<ChartsRadialAxisClasses>;
-}
+import type { ChartsRotationAxisProps } from "../models/axis.js";
 export declare function ChartsRotationAxis(props: ChartsRotationAxisProps): import("react/jsx-runtime").JSX.Element | null;

package/ChartsRotationAxis/ChartsRotationAxis.js

@@ -17,12 +17,12 @@ var _chartsRotationAxisClasses = require("./chartsRotationAxisClasses");
 var _createGetLabelTextAnchors = require("../ChartsRadiusAxis/createGetLabelTextAnchors");
 var _getLabelTransform = require("./getLabelTransform");
 var _jsxRuntime = require("react/jsx-runtime");
-/* Gap between a tick and its label. */
-const TICK_LABEL_GAP = 3;
+/* Gap between a tick and its label. */const TICK_LABEL_GAP = 3;
 const getLabelTextAnchors = (0, _createGetLabelTextAnchors.createGetLabelTextAnchors)(_getLabelTransform.getLabelTransform);
 function ChartsRotationAxis(props) {
+  const rotationAxis = (0, _useAxis.useRotationAxis)(props.axisId);
+  const settings = (0, _extends2.default)({}, rotationAxis, props);
   const {
-    axisId,
     disableLine,
     disableTicks,
     position = 'outside',
@@ -31,7 +31,7 @@ function ChartsRotationAxis(props) {
     tickSize = 6,
     className,
     classes: classesProp
-  } = props;
+  } = settings;
   const classes = (0, _chartsRotationAxisClasses.useUtilityClasses)({
     classes: classesProp
   });
@@ -43,7 +43,6 @@ function ChartsRotationAxis(props) {
     cx,
     cy
   } = store.use(_useChartPolarAxis.selectorChartPolarCenter);
-  const rotationAxis = (0, _useAxis.useRotationAxis)(axisId);
   const radiusAxis = (0, _useAxis.useRadiusAxis)();
   const ticks = (0, _useTicks.useTicks)({
     scale: rotationAxis.scale,
@@ -53,7 +52,7 @@ function ChartsRotationAxis(props) {
     valueFormatter: rotationAxis?.valueFormatter,
     direction: 'rotation'
   });
-  if (!rotationAxis || !radiusAxis) {
+  if (!rotationAxis || !radiusAxis || settings.position === 'none') {
     return null;
   }
   const radius = radiusAxis.scale.range()[position === 'inside' ? 0 : 1];
@@ -65,7 +64,6 @@ function ChartsRotationAxis(props) {
     x: cx + Math.sin(angle) * r,
     y: cy - Math.cos(angle) * r
   });
-  const isFullCircle = Math.abs(endAngle - startAngle) > 2 * Math.PI - 0.01;
   const sweepFlag = endAngle - startAngle >= 0 ? 1 : 0;
   const start = angleToPoint(startAngle, radius);
   const end = angleToPoint(endAngle, radius);
@@ -73,7 +71,7 @@ function ChartsRotationAxis(props) {
   const arcPath = `M ${start.x} ${start.y} ` + `A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${end.x} ${end.y}`;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
     className: (0, _clsx.default)(classes.root, className),
-    children: [!disableLine && (isFullCircle ?
+    children: [!disableLine && (rotationAxis.isFullCircle ?
     /*#__PURE__*/
     // Use a circle to avoid degenerated arcs when start and end angles are the same or very close.
     (0, _jsxRuntime.jsx)("circle", {
@@ -90,6 +88,7 @@ function ChartsRotationAxis(props) {
       className: classes.line
     })), ticks.map(({
       offset: angle,
+      labelOffset,
       formattedValue
     }, index) => {
       if (!formattedValue) {
@@ -99,23 +98,21 @@ function ChartsRotationAxis(props) {
       // Convert "0 = up" convention to SVG math angle (0 = right, clockwise y-down).
       const dx = Math.sin(angle);
       const dy = -Math.cos(angle);
+      const labelDx = labelOffset === 0 ? dx : Math.sin(angle + labelOffset);
+      const labelDy = labelOffset === 0 ? dy : -Math.cos(angle + labelOffset);
       const tx = cx + dx * radius;
       const ty = cy + dy * radius;
       const tickDx = (tickPosition === 'after' ? 1 : -1) * dx * tickSize;
       const tickDy = (tickPosition === 'after' ? 1 : -1) * dy * tickSize;
-      const tickLabelGapDx = (tickLabelPosition === 'after' ? 1 : -1) * dx * TICK_LABEL_GAP;
-      const tickLabelGapDy = (tickLabelPosition === 'after' ? 1 : -1) * dy * TICK_LABEL_GAP;
-
-      // Compute the label position.
-      let labelX = tx;
-      let labelY = ty;
-      labelX += tickLabelGapDx;
-      labelY += tickLabelGapDy;
+      let tickLabelRadius = radius + (tickLabelPosition === 'after' ? 1 : -1) * TICK_LABEL_GAP;
       if (tickLabelPosition === tickPosition && !disableTicks) {
         // Add the size of the tick if they are in the same direction.
-        labelX += tickDx;
-        labelY += tickDy;
+        tickLabelRadius += tickSize;
       }
+
+      // Compute the label position.
+      const labelX = cx + labelDx * tickLabelRadius;
+      const labelY = cy + labelDy * tickLabelRadius;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
         className: classes.tickContainer,
         children: [!disableTicks && /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
@@ -132,7 +129,7 @@ function ChartsRotationAxis(props) {
           fontSize: 12,
           className: classes.tickLabel,
           pointerEvents: "none"
-        }, getLabelTextAnchors(dx, dy, tickLabelPosition), {
+        }, getLabelTextAnchors(labelDx, labelDy, tickLabelPosition), {
           children: formattedValue
         }))]
       }, index);

package/ChartsRotationAxis/ChartsRotationAxis.mjs

@@ -10,13 +10,15 @@ import { selectorChartPolarCenter } from "../internals/plugins/featurePlugins/us
 import { useUtilityClasses } from "./chartsRotationAxisClasses.mjs";
 import { createGetLabelTextAnchors } from "../ChartsRadiusAxis/createGetLabelTextAnchors.mjs";
 import { getLabelTransform } from "./getLabelTransform.mjs";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
 /* Gap between a tick and its label. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TICK_LABEL_GAP = 3;
 const getLabelTextAnchors = createGetLabelTextAnchors(getLabelTransform);
 export function ChartsRotationAxis(props) {
+  const rotationAxis = useRotationAxis(props.axisId);
+  const settings = _extends({}, rotationAxis, props);
   const {
-    axisId,
     disableLine,
     disableTicks,
     position = 'outside',
@@ -25,7 +27,7 @@ export function ChartsRotationAxis(props) {
     tickSize = 6,
     className,
     classes: classesProp
-  } = props;
+  } = settings;
   const classes = useUtilityClasses({
     classes: classesProp
   });
@@ -37,7 +39,6 @@ export function ChartsRotationAxis(props) {
     cx,
     cy
   } = store.use(selectorChartPolarCenter);
-  const rotationAxis = useRotationAxis(axisId);
   const radiusAxis = useRadiusAxis();
   const ticks = useTicks({
     scale: rotationAxis.scale,
@@ -47,7 +48,7 @@ export function ChartsRotationAxis(props) {
     valueFormatter: rotationAxis?.valueFormatter,
     direction: 'rotation'
   });
-  if (!rotationAxis || !radiusAxis) {
+  if (!rotationAxis || !radiusAxis || settings.position === 'none') {
     return null;
   }
   const radius = radiusAxis.scale.range()[position === 'inside' ? 0 : 1];
@@ -59,7 +60,6 @@ export function ChartsRotationAxis(props) {
     x: cx + Math.sin(angle) * r,
     y: cy - Math.cos(angle) * r
   });
-  const isFullCircle = Math.abs(endAngle - startAngle) > 2 * Math.PI - 0.01;
   const sweepFlag = endAngle - startAngle >= 0 ? 1 : 0;
   const start = angleToPoint(startAngle, radius);
   const end = angleToPoint(endAngle, radius);
@@ -67,7 +67,7 @@ export function ChartsRotationAxis(props) {
   const arcPath = `M ${start.x} ${start.y} ` + `A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${end.x} ${end.y}`;
   return /*#__PURE__*/_jsxs("g", {
     className: clsx(classes.root, className),
-    children: [!disableLine && (isFullCircle ?
+    children: [!disableLine && (rotationAxis.isFullCircle ?
     /*#__PURE__*/
     // Use a circle to avoid degenerated arcs when start and end angles are the same or very close.
     _jsx("circle", {
@@ -84,6 +84,7 @@ export function ChartsRotationAxis(props) {
       className: classes.line
     })), ticks.map(({
       offset: angle,
+      labelOffset,
       formattedValue
     }, index) => {
       if (!formattedValue) {
@@ -93,23 +94,21 @@ export function ChartsRotationAxis(props) {
       // Convert "0 = up" convention to SVG math angle (0 = right, clockwise y-down).
       const dx = Math.sin(angle);
       const dy = -Math.cos(angle);
+      const labelDx = labelOffset === 0 ? dx : Math.sin(angle + labelOffset);
+      const labelDy = labelOffset === 0 ? dy : -Math.cos(angle + labelOffset);
       const tx = cx + dx * radius;
       const ty = cy + dy * radius;
       const tickDx = (tickPosition === 'after' ? 1 : -1) * dx * tickSize;
       const tickDy = (tickPosition === 'after' ? 1 : -1) * dy * tickSize;
-      const tickLabelGapDx = (tickLabelPosition === 'after' ? 1 : -1) * dx * TICK_LABEL_GAP;
-      const tickLabelGapDy = (tickLabelPosition === 'after' ? 1 : -1) * dy * TICK_LABEL_GAP;
-
-      // Compute the label position.
-      let labelX = tx;
-      let labelY = ty;
-      labelX += tickLabelGapDx;
-      labelY += tickLabelGapDy;
+      let tickLabelRadius = radius + (tickLabelPosition === 'after' ? 1 : -1) * TICK_LABEL_GAP;
       if (tickLabelPosition === tickPosition && !disableTicks) {
         // Add the size of the tick if they are in the same direction.
-        labelX += tickDx;
-        labelY += tickDy;
+        tickLabelRadius += tickSize;
       }
+
+      // Compute the label position.
+      const labelX = cx + labelDx * tickLabelRadius;
+      const labelY = cy + labelDy * tickLabelRadius;
       return /*#__PURE__*/_jsxs("g", {
         className: classes.tickContainer,
         children: [!disableTicks && /*#__PURE__*/_jsx("line", {
@@ -126,7 +125,7 @@ export function ChartsRotationAxis(props) {
           fontSize: 12,
           className: classes.tickLabel,
           pointerEvents: "none"
-        }, getLabelTextAnchors(dx, dy, tickLabelPosition), {
+        }, getLabelTextAnchors(labelDx, labelDy, tickLabelPosition), {
           children: formattedValue
         }))]
       }, index);

package/ChartsTooltip/useAxesTooltip.d.mts

@@ -16,7 +16,7 @@ export interface UseAxesTooltipParams {
    * The axis directions to consider.
    * If not defined, all directions are considered
    */
-  directions?: ('x' | 'y' | 'rotation')[];
+  directions?: ('x' | 'y' | 'rotation' | 'radius')[];
 }
 export interface SeriesItem<T extends CartesianChartSeriesType | PolarChartSeriesType> {
   seriesId: SeriesId;

package/ChartsTooltip/useAxesTooltip.d.ts

@@ -16,7 +16,7 @@ export interface UseAxesTooltipParams {
    * The axis directions to consider.
    * If not defined, all directions are considered
    */
-  directions?: ('x' | 'y' | 'rotation')[];
+  directions?: ('x' | 'y' | 'rotation' | 'radius')[];
 }
 export interface SeriesItem<T extends CartesianChartSeriesType | PolarChartSeriesType> {
   seriesId: SeriesId;

package/ChartsTooltip/useAxesTooltip.js

@@ -58,6 +58,7 @@ function useAxesTooltip(params) {
   const tooltipXAxes = store.use(_useChartCartesianAxis.selectorChartsInteractionTooltipXAxes);
   const tooltipYAxes = store.use(_useChartCartesianAxis.selectorChartsInteractionTooltipYAxes);
   const tooltipRotationAxes = store.use(_useChartPolarInteraction.selectorChartsInteractionTooltipRotationAxes);
+  const tooltipRadiusAxes = store.use(_useChartPolarInteraction.selectorChartsInteractionTooltipRadiusAxes);
   const series = (0, _useSeries.useSeries)();
   const {
     xAxis
@@ -77,7 +78,7 @@ function useAxesTooltip(params) {
   } = (0, _useAxis.useRadiusAxes)();
   const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
   const isItemVisible = store.use(_useChartVisibilityManager.selectorIsItemVisibleGetter);
-  if (tooltipXAxes.length === 0 && tooltipYAxes.length === 0 && tooltipRotationAxes.length === 0) {
+  if (tooltipXAxes.length === 0 && tooltipYAxes.length === 0 && tooltipRotationAxes.length === 0 && tooltipRadiusAxes.length === 0) {
     return null;
   }
   const tooltipAxes = [];
@@ -105,6 +106,14 @@ function useAxesTooltip(params) {
       tooltipAxes.push(defaultAxisTooltipConfig(rotationAxis[axisId], dataIndex, 'rotation'));
     });
   }
+  if (directions === undefined || directions.includes('radius')) {
+    tooltipRadiusAxes.forEach(({
+      axisId,
+      dataIndex
+    }) => {
+      tooltipAxes.push(defaultAxisTooltipConfig(radiusAxis[axisId], dataIndex, 'radius'));
+    });
+  }
   Object.keys(series).filter(seriesType => _composition.composableCartesianSeriesTypes.has(seriesType)).forEach(seriesType => {
     const seriesOfType = series[seriesType];
     if (!seriesOfType) {
@@ -202,7 +211,7 @@ function useAxesTooltip(params) {
       const tooltipItemIndex = tooltipAxes.findIndex(({
         axisDirection,
         axisId
-      }) => axisDirection === 'rotation' && axisId === providedRotationAxisId);
+      }) => axisDirection === 'rotation' && axisId === providedRotationAxisId || axisDirection === 'radius' && axisId === providedRadiusAxisId);
       // Test if the series uses the default axis
       if (tooltipItemIndex >= 0) {
         const {

package/ChartsTooltip/useAxesTooltip.mjs

@@ -8,7 +8,7 @@ import { utcFormatter } from "./utils.mjs";
 import { useRadiusAxes, useRadiusAxis, useRotationAxes, useRotationAxis, useXAxes, useXAxis, useYAxes, useYAxis } from "../hooks/useAxis.mjs";
 import { useZAxes } from "../hooks/useZAxis.mjs";
 import { selectorChartsInteractionTooltipXAxes, selectorChartsInteractionTooltipYAxes } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
-import { selectorChartsInteractionTooltipRotationAxes } from "../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.mjs";
+import { selectorChartsInteractionTooltipRadiusAxes, selectorChartsInteractionTooltipRotationAxes } from "../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.mjs";
 import { isPolarSeriesType } from "../internals/isPolar.mjs";
 import { selectorIsItemVisibleGetter } from "../internals/plugins/featurePlugins/useChartVisibilityManager/useChartVisibilityManager.selectors.mjs";
 import { composableCartesianSeriesTypes } from "../models/seriesType/composition.mjs";
@@ -53,6 +53,7 @@ export function useAxesTooltip(params) {
   const tooltipXAxes = store.use(selectorChartsInteractionTooltipXAxes);
   const tooltipYAxes = store.use(selectorChartsInteractionTooltipYAxes);
   const tooltipRotationAxes = store.use(selectorChartsInteractionTooltipRotationAxes);
+  const tooltipRadiusAxes = store.use(selectorChartsInteractionTooltipRadiusAxes);
   const series = useSeries();
   const {
     xAxis
@@ -72,7 +73,7 @@ export function useAxesTooltip(params) {
   } = useRadiusAxes();
   const colorProcessors = useColorProcessor();
   const isItemVisible = store.use(selectorIsItemVisibleGetter);
-  if (tooltipXAxes.length === 0 && tooltipYAxes.length === 0 && tooltipRotationAxes.length === 0) {
+  if (tooltipXAxes.length === 0 && tooltipYAxes.length === 0 && tooltipRotationAxes.length === 0 && tooltipRadiusAxes.length === 0) {
     return null;
   }
   const tooltipAxes = [];
@@ -100,6 +101,14 @@ export function useAxesTooltip(params) {
       tooltipAxes.push(defaultAxisTooltipConfig(rotationAxis[axisId], dataIndex, 'rotation'));
     });
   }
+  if (directions === undefined || directions.includes('radius')) {
+    tooltipRadiusAxes.forEach(({
+      axisId,
+      dataIndex
+    }) => {
+      tooltipAxes.push(defaultAxisTooltipConfig(radiusAxis[axisId], dataIndex, 'radius'));
+    });
+  }
   Object.keys(series).filter(seriesType => composableCartesianSeriesTypes.has(seriesType)).forEach(seriesType => {
     const seriesOfType = series[seriesType];
     if (!seriesOfType) {
@@ -197,7 +206,7 @@ export function useAxesTooltip(params) {
       const tooltipItemIndex = tooltipAxes.findIndex(({
         axisDirection,
         axisId
-      }) => axisDirection === 'rotation' && axisId === providedRotationAxisId);
+      }) => axisDirection === 'rotation' && axisId === providedRotationAxisId || axisDirection === 'radius' && axisId === providedRadiusAxisId);
       // Test if the series uses the default axis
       if (tooltipItemIndex >= 0) {
         const {

package/ChartsXAxis/ChartsXAxis.js

@@ -28,7 +28,9 @@ function ChartsXAxis(inProps) {
   } = (0, _useAxis.useXAxes)();
   const axis = xAxis[inProps.axisId ?? xAxisIds[0]];
   if (!axis) {
-    (0, _warning.warnOnce)(`MUI X Charts: No axis found. The axisId "${inProps.axisId}" is probably invalid.`);
+    if (process.env.NODE_ENV !== 'production') {
+      (0, _warning.warnOnce)(`MUI X Charts: No axis found. The axisId "${inProps.axisId}" is probably invalid.`);
+    }
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsXAxisImpl.ChartsXAxisImpl, (0, _extends2.default)({}, inProps, {

package/ChartsXAxis/ChartsXAxis.mjs

@@ -22,7 +22,9 @@ function ChartsXAxis(inProps) {
   } = useXAxes();
   const axis = xAxis[inProps.axisId ?? xAxisIds[0]];
   if (!axis) {
-    warnOnce(`MUI X Charts: No axis found. The axisId "${inProps.axisId}" is probably invalid.`);
+    if (process.env.NODE_ENV !== 'production') {
+      warnOnce(`MUI X Charts: No axis found. The axisId "${inProps.axisId}" is probably invalid.`);
+    }
     return null;
   }
   return /*#__PURE__*/_jsx(ChartsXAxisImpl, _extends({}, inProps, {

package/ChartsYAxis/ChartsYAxis.js

@@ -28,7 +28,9 @@ function ChartsYAxis(inProps) {
   } = (0, _hooks.useYAxes)();
   const axis = yAxis[inProps.axisId ?? yAxisIds[0]];
   if (!axis) {
-    (0, _warning.warnOnce)(`MUI X Charts: No axis found. The axisId "${inProps.axisId}" is probably invalid.`);
+    if (process.env.NODE_ENV !== 'production') {
+      (0, _warning.warnOnce)(`MUI X Charts: No axis found. The axisId "${inProps.axisId}" is probably invalid.`);
+    }
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsYAxisImpl.ChartsYAxisImpl, (0, _extends2.default)({}, inProps, {

package/ChartsYAxis/ChartsYAxis.mjs

@@ -22,7 +22,9 @@ function ChartsYAxis(inProps) {
   } = useYAxes();
   const axis = yAxis[inProps.axisId ?? yAxisIds[0]];
   if (!axis) {
-    warnOnce(`MUI X Charts: No axis found. The axisId "${inProps.axisId}" is probably invalid.`);
+    if (process.env.NODE_ENV !== 'production') {
+      warnOnce(`MUI X Charts: No axis found. The axisId "${inProps.axisId}" is probably invalid.`);
+    }
     return null;
   }
   return /*#__PURE__*/_jsx(ChartsYAxisImpl, _extends({}, inProps, {

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/seriesConfig/curveEvaluation.js

@@ -161,14 +161,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;
     }