@mui/x-charts 9.0.2 → 9.0.3

package/ChartsRotationAxis/ChartsRotationAxis.js

@@ -0,0 +1,141 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsRotationAxis = ChartsRotationAxis;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _styles = require("@mui/material/styles");
+var _useTicks = require("../hooks/useTicks");
+var _useAxis = require("../hooks/useAxis");
+var _ChartsProvider = require("../context/ChartsProvider");
+var _useChartPolarAxis = require("../internals/plugins/featurePlugins/useChartPolarAxis");
+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;
+const getLabelTextAnchors = (0, _createGetLabelTextAnchors.createGetLabelTextAnchors)(_getLabelTransform.getLabelTransform);
+function ChartsRotationAxis(props) {
+  const {
+    axisId,
+    disableLine,
+    disableTicks,
+    position = 'outside',
+    tickLabelPosition = position === 'outside' ? 'after' : 'before',
+    tickPosition = position === 'outside' ? 'after' : 'before',
+    tickSize = 6,
+    className,
+    classes: classesProp
+  } = props;
+  const classes = (0, _chartsRotationAxisClasses.useUtilityClasses)({
+    classes: classesProp
+  });
+  const theme = (0, _styles.useTheme)();
+  const {
+    store
+  } = (0, _ChartsProvider.useChartsContext)();
+  const {
+    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,
+    tickNumber: rotationAxis?.tickNumber ?? 5,
+    tickInterval: rotationAxis?.tickInterval,
+    tickSpacing: rotationAxis?.tickSpacing,
+    valueFormatter: rotationAxis?.valueFormatter,
+    direction: 'rotation'
+  });
+  if (!rotationAxis || !radiusAxis) {
+    return null;
+  }
+  const radius = radiusAxis.scale.range()[position === 'inside' ? 0 : 1];
+  const [startAngle, endAngle] = rotationAxis.scale.range();
+  const stroke = (theme.vars ?? theme).palette.text.primary;
+
+  // Convert "0 = up" convention to SVG coordinates (y-down).
+  const angleToPoint = (angle, r) => ({
+    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);
+  const largeArcFlag = Math.abs(endAngle - startAngle) > Math.PI ? 1 : 0;
+  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 ?
+    /*#__PURE__*/
+    // Use a circle to avoid degenerated arcs when start and end angles are the same or very close.
+    (0, _jsxRuntime.jsx)("circle", {
+      cx: cx,
+      cy: cy,
+      r: radius,
+      stroke: stroke,
+      fill: "none",
+      className: classes.line
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: arcPath,
+      stroke: stroke,
+      fill: "none",
+      className: classes.line
+    })), ticks.map(({
+      offset: angle,
+      formattedValue
+    }, index) => {
+      if (!formattedValue) {
+        return null;
+      }
+
+      // Convert "0 = up" convention to SVG math angle (0 = right, clockwise y-down).
+      const dx = Math.sin(angle);
+      const dy = -Math.cos(angle);
+      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;
+      if (tickLabelPosition === tickPosition && !disableTicks) {
+        // Add the size of the tick if they are in the same direction.
+        labelX += tickDx;
+        labelY += tickDy;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+        className: classes.tickContainer,
+        children: [!disableTicks && /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
+          x1: tx,
+          y1: ty,
+          x2: tx + tickDx,
+          y2: ty + tickDy,
+          stroke: stroke,
+          className: classes.tick
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("text", (0, _extends2.default)({
+          x: labelX,
+          y: labelY,
+          fill: stroke,
+          fontSize: 12,
+          className: classes.tickLabel,
+          pointerEvents: "none"
+        }, getLabelTextAnchors(dx, dy, tickLabelPosition), {
+          children: formattedValue
+        }))]
+      }, index);
+    })]
+  });
+}

package/ChartsRotationAxis/ChartsRotationAxis.mjs

@@ -0,0 +1,135 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import clsx from 'clsx';
+import { useTheme } from '@mui/material/styles';
+import { useTicks } from "../hooks/useTicks.mjs";
+import { useRadiusAxis, useRotationAxis } from "../hooks/useAxis.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
+import { selectorChartPolarCenter } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.mjs";
+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. */
+const TICK_LABEL_GAP = 3;
+const getLabelTextAnchors = createGetLabelTextAnchors(getLabelTransform);
+export function ChartsRotationAxis(props) {
+  const {
+    axisId,
+    disableLine,
+    disableTicks,
+    position = 'outside',
+    tickLabelPosition = position === 'outside' ? 'after' : 'before',
+    tickPosition = position === 'outside' ? 'after' : 'before',
+    tickSize = 6,
+    className,
+    classes: classesProp
+  } = props;
+  const classes = useUtilityClasses({
+    classes: classesProp
+  });
+  const theme = useTheme();
+  const {
+    store
+  } = useChartsContext();
+  const {
+    cx,
+    cy
+  } = store.use(selectorChartPolarCenter);
+  const rotationAxis = useRotationAxis(axisId);
+  const radiusAxis = useRadiusAxis();
+  const ticks = useTicks({
+    scale: rotationAxis.scale,
+    tickNumber: rotationAxis?.tickNumber ?? 5,
+    tickInterval: rotationAxis?.tickInterval,
+    tickSpacing: rotationAxis?.tickSpacing,
+    valueFormatter: rotationAxis?.valueFormatter,
+    direction: 'rotation'
+  });
+  if (!rotationAxis || !radiusAxis) {
+    return null;
+  }
+  const radius = radiusAxis.scale.range()[position === 'inside' ? 0 : 1];
+  const [startAngle, endAngle] = rotationAxis.scale.range();
+  const stroke = (theme.vars ?? theme).palette.text.primary;
+
+  // Convert "0 = up" convention to SVG coordinates (y-down).
+  const angleToPoint = (angle, r) => ({
+    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);
+  const largeArcFlag = Math.abs(endAngle - startAngle) > Math.PI ? 1 : 0;
+  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 ?
+    /*#__PURE__*/
+    // Use a circle to avoid degenerated arcs when start and end angles are the same or very close.
+    _jsx("circle", {
+      cx: cx,
+      cy: cy,
+      r: radius,
+      stroke: stroke,
+      fill: "none",
+      className: classes.line
+    }) : /*#__PURE__*/_jsx("path", {
+      d: arcPath,
+      stroke: stroke,
+      fill: "none",
+      className: classes.line
+    })), ticks.map(({
+      offset: angle,
+      formattedValue
+    }, index) => {
+      if (!formattedValue) {
+        return null;
+      }
+
+      // Convert "0 = up" convention to SVG math angle (0 = right, clockwise y-down).
+      const dx = Math.sin(angle);
+      const dy = -Math.cos(angle);
+      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;
+      if (tickLabelPosition === tickPosition && !disableTicks) {
+        // Add the size of the tick if they are in the same direction.
+        labelX += tickDx;
+        labelY += tickDy;
+      }
+      return /*#__PURE__*/_jsxs("g", {
+        className: classes.tickContainer,
+        children: [!disableTicks && /*#__PURE__*/_jsx("line", {
+          x1: tx,
+          y1: ty,
+          x2: tx + tickDx,
+          y2: ty + tickDy,
+          stroke: stroke,
+          className: classes.tick
+        }), /*#__PURE__*/_jsx("text", _extends({
+          x: labelX,
+          y: labelY,
+          fill: stroke,
+          fontSize: 12,
+          className: classes.tickLabel,
+          pointerEvents: "none"
+        }, getLabelTextAnchors(dx, dy, tickLabelPosition), {
+          children: formattedValue
+        }))]
+      }, index);
+    })]
+  });
+}

package/ChartsRotationAxis/chartsRotationAxisClasses.d.mts

@@ -0,0 +1,5 @@
+import { type ChartsRadialAxisClasses } from "../ChartsRadiusAxis/sharedRadialAxisClasses.mjs";
+export declare const useUtilityClasses: (props: {
+  classes?: Partial<ChartsRadialAxisClasses>;
+}) => Record<"root" | "line" | "tickContainer" | "tick" | "tickLabel", string>;
+export { type ChartsRadialAxisClasses, type ChartsRadialAxisClassKey, chartsRadialAxisClasses } from "../ChartsRadiusAxis/sharedRadialAxisClasses.mjs";

package/ChartsRotationAxis/chartsRotationAxisClasses.d.ts

@@ -0,0 +1,5 @@
+import { type ChartsRadialAxisClasses } from "../ChartsRadiusAxis/sharedRadialAxisClasses.js";
+export declare const useUtilityClasses: (props: {
+  classes?: Partial<ChartsRadialAxisClasses>;
+}) => Record<"root" | "line" | "tickContainer" | "tick" | "tickLabel", string>;
+export { type ChartsRadialAxisClasses, type ChartsRadialAxisClassKey, chartsRadialAxisClasses } from "../ChartsRadiusAxis/sharedRadialAxisClasses.js";

package/ChartsRotationAxis/chartsRotationAxisClasses.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "chartsRadialAxisClasses", {
+  enumerable: true,
+  get: function () {
+    return _sharedRadialAxisClasses.chartsRadialAxisClasses;
+  }
+});
+exports.useUtilityClasses = void 0;
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _sharedRadialAxisClasses = require("../ChartsRadiusAxis/sharedRadialAxisClasses");
+const useUtilityClasses = props => {
+  const {
+    classes
+  } = props;
+  const slots = {
+    root: ['root', 'rotation'],
+    line: ['line'],
+    tickContainer: ['tickContainer'],
+    tick: ['tick'],
+    tickLabel: ['tickLabel']
+  };
+  return (0, _composeClasses.default)(slots, _sharedRadialAxisClasses.getRadialAxisUtilityClass, classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/ChartsRotationAxis/chartsRotationAxisClasses.mjs

@@ -0,0 +1,16 @@
+import composeClasses from '@mui/utils/composeClasses';
+import { getRadialAxisUtilityClass } from "../ChartsRadiusAxis/sharedRadialAxisClasses.mjs";
+export const useUtilityClasses = props => {
+  const {
+    classes
+  } = props;
+  const slots = {
+    root: ['root', 'rotation'],
+    line: ['line'],
+    tickContainer: ['tickContainer'],
+    tick: ['tick'],
+    tickLabel: ['tickLabel']
+  };
+  return composeClasses(slots, getRadialAxisUtilityClass, classes);
+};
+export { chartsRadialAxisClasses } from "../ChartsRadiusAxis/sharedRadialAxisClasses.mjs";

package/ChartsRotationAxis/getLabelTransform.d.mts

@@ -0,0 +1,11 @@
+/**
+ * Return the vertical/horizontal alignment for a tick label at a given position.
+ * @param px The normalized x position to the axis line (between -1 and 1).
+ * @param py The normalized y position to the axis line (between -1 and 1).
+ * @param tickLabelPosition The position of the tick label relative to the axis line.
+ * @returns The vertical and horizontal alignment for the tick label.
+ */
+export declare function getLabelTransform(px: number, py: number, tickLabelPosition: 'center' | 'after' | 'before'): {
+  verticalAlign: 'start' | 'middle' | 'end';
+  horizontalAlign: 'start' | 'middle' | 'end';
+};

package/ChartsRotationAxis/getLabelTransform.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Return the vertical/horizontal alignment for a tick label at a given position.
+ * @param px The normalized x position to the axis line (between -1 and 1).
+ * @param py The normalized y position to the axis line (between -1 and 1).
+ * @param tickLabelPosition The position of the tick label relative to the axis line.
+ * @returns The vertical and horizontal alignment for the tick label.
+ */
+export declare function getLabelTransform(px: number, py: number, tickLabelPosition: 'center' | 'after' | 'before'): {
+  verticalAlign: 'start' | 'middle' | 'end';
+  horizontalAlign: 'start' | 'middle' | 'end';
+};

package/ChartsRotationAxis/getLabelTransform.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLabelTransform = getLabelTransform;
+/**
+ * Return the vertical/horizontal alignment for a tick label at a given position.
+ * @param px The normalized x position to the axis line (between -1 and 1).
+ * @param py The normalized y position to the axis line (between -1 and 1).
+ * @param tickLabelPosition The position of the tick label relative to the axis line.
+ * @returns The vertical and horizontal alignment for the tick label.
+ */
+function getLabelTransform(px, py, tickLabelPosition) {
+  if (tickLabelPosition === 'center') {
+    return {
+      verticalAlign: 'middle',
+      horizontalAlign: 'middle'
+    };
+  }
+  let verticalAlign = 'middle';
+  let horizontalAlign = 'middle';
+  if (px > 0.3) {
+    horizontalAlign = tickLabelPosition === 'after' ? 'start' : 'end';
+  } else if (px < -0.3) {
+    horizontalAlign = tickLabelPosition === 'after' ? 'end' : 'start';
+  }
+  if (py > 0.3) {
+    verticalAlign = tickLabelPosition === 'after' ? 'start' : 'end';
+  } else if (py < -0.3) {
+    verticalAlign = tickLabelPosition === 'after' ? 'end' : 'start';
+  }
+  return {
+    verticalAlign,
+    horizontalAlign
+  };
+}

package/ChartsRotationAxis/getLabelTransform.mjs

@@ -0,0 +1,31 @@
+/**
+ * Return the vertical/horizontal alignment for a tick label at a given position.
+ * @param px The normalized x position to the axis line (between -1 and 1).
+ * @param py The normalized y position to the axis line (between -1 and 1).
+ * @param tickLabelPosition The position of the tick label relative to the axis line.
+ * @returns The vertical and horizontal alignment for the tick label.
+ */
+export function getLabelTransform(px, py, tickLabelPosition) {
+  if (tickLabelPosition === 'center') {
+    return {
+      verticalAlign: 'middle',
+      horizontalAlign: 'middle'
+    };
+  }
+  let verticalAlign = 'middle';
+  let horizontalAlign = 'middle';
+  if (px > 0.3) {
+    horizontalAlign = tickLabelPosition === 'after' ? 'start' : 'end';
+  } else if (px < -0.3) {
+    horizontalAlign = tickLabelPosition === 'after' ? 'end' : 'start';
+  }
+  if (py > 0.3) {
+    verticalAlign = tickLabelPosition === 'after' ? 'start' : 'end';
+  } else if (py < -0.3) {
+    verticalAlign = tickLabelPosition === 'after' ? 'end' : 'start';
+  }
+  return {
+    verticalAlign,
+    horizontalAlign
+  };
+}

package/ChartsRotationAxis/index.d.mts

@@ -0,0 +1,2 @@
+export { type ChartsRotationAxisProps, ChartsRotationAxis as Unstable_ChartsRotationAxis } from "./ChartsRotationAxis.mjs";
+export { type ChartsRadialAxisClasses, type ChartsRadialAxisClassKey, chartsRadialAxisClasses } from "./chartsRotationAxisClasses.mjs";

package/ChartsRotationAxis/index.d.ts

@@ -0,0 +1,2 @@
+export { type ChartsRotationAxisProps, ChartsRotationAxis as Unstable_ChartsRotationAxis } from "./ChartsRotationAxis.js";
+export { type ChartsRadialAxisClasses, type ChartsRadialAxisClassKey, chartsRadialAxisClasses } from "./chartsRotationAxisClasses.js";

package/ChartsRotationAxis/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Unstable_ChartsRotationAxis", {
+  enumerable: true,
+  get: function () {
+    return _ChartsRotationAxis.ChartsRotationAxis;
+  }
+});
+Object.defineProperty(exports, "chartsRadialAxisClasses", {
+  enumerable: true,
+  get: function () {
+    return _chartsRotationAxisClasses.chartsRadialAxisClasses;
+  }
+});
+var _ChartsRotationAxis = require("./ChartsRotationAxis");
+var _chartsRotationAxisClasses = require("./chartsRotationAxisClasses");

package/ChartsRotationAxis/index.mjs

@@ -0,0 +1,2 @@
+export { ChartsRotationAxis as Unstable_ChartsRotationAxis } from "./ChartsRotationAxis.mjs";
+export { chartsRadialAxisClasses } from "./chartsRotationAxisClasses.mjs";

package/ChartsTooltip/useAxesTooltip.js

@@ -45,6 +45,7 @@ function useAxesTooltip(params) {
   const defaultXAxis = (0, _useAxis.useXAxis)();
   const defaultYAxis = (0, _useAxis.useYAxis)();
   const defaultRotationAxis = (0, _useAxis.useRotationAxis)();
+  const defaultRadiusAxis = (0, _useAxis.useRadiusAxis)();
   const store = (0, _useStore.useStore)();
   const tooltipXAxes = store.use(_useChartCartesianAxis.selectorChartsInteractionTooltipXAxes);
   const tooltipYAxes = store.use(_useChartCartesianAxis.selectorChartsInteractionTooltipYAxes);
@@ -63,6 +64,9 @@ function useAxesTooltip(params) {
   const {
     rotationAxis
   } = (0, _useAxis.useRotationAxes)();
+  const {
+    radiusAxis
+  } = (0, _useAxis.useRadiusAxes)();
   const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
   const isItemVisible = store.use(_useChartVisibilityManager.selectorIsItemVisibleGetter);
   if (tooltipXAxes.length === 0 && tooltipYAxes.length === 0 && tooltipRotationAxes.length === 0) {
@@ -185,9 +189,8 @@ function useAxesTooltip(params) {
       })) {
         return;
       }
-      const providedRotationAxisId =
-      // @ts-expect-error Should be fixed when we introduce a polar series with a rotationAxisId
-      seriesToAdd.rotationAxisId ?? defaultRotationAxis?.id;
+      const providedRotationAxisId = ('rotationAxisId' in seriesToAdd ? seriesToAdd.rotationAxisId : undefined) ?? defaultRotationAxis?.id;
+      const providedRadiusAxisId = ('radiusAxisId' in seriesToAdd ? seriesToAdd.radiusAxisId : undefined) ?? defaultRadiusAxis?.id;
       const tooltipItemIndex = tooltipAxes.findIndex(({
         axisDirection,
         axisId
@@ -197,7 +200,7 @@ function useAxesTooltip(params) {
         const {
           dataIndex
         } = tooltipAxes[tooltipItemIndex];
-        const color = colorProcessors[seriesType]?.(seriesToAdd)(dataIndex) ?? '';
+        const color = colorProcessors[seriesType]?.(seriesToAdd, providedRotationAxisId !== undefined ? rotationAxis[providedRotationAxisId] : undefined, providedRadiusAxisId !== undefined ? radiusAxis[providedRadiusAxisId] : undefined)(dataIndex) ?? '';
         const value = seriesToAdd.data[dataIndex] ?? null;
         const formattedValue = seriesToAdd.valueFormatter(value, {
           dataIndex

package/ChartsTooltip/useAxesTooltip.mjs

@@ -5,7 +5,7 @@ import { useColorProcessor } from "../internals/plugins/corePlugins/useChartSeri
 import { useStore } from "../internals/store/useStore.mjs";
 import { getLabel } from "../internals/getLabel.mjs";
 import { utcFormatter } from "./utils.mjs";
-import { useRotationAxes, useRotationAxis, useXAxes, useXAxis, useYAxes, useYAxis } from "../hooks/useAxis.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";
@@ -40,6 +40,7 @@ export function useAxesTooltip(params) {
   const defaultXAxis = useXAxis();
   const defaultYAxis = useYAxis();
   const defaultRotationAxis = useRotationAxis();
+  const defaultRadiusAxis = useRadiusAxis();
   const store = useStore();
   const tooltipXAxes = store.use(selectorChartsInteractionTooltipXAxes);
   const tooltipYAxes = store.use(selectorChartsInteractionTooltipYAxes);
@@ -58,6 +59,9 @@ export function useAxesTooltip(params) {
   const {
     rotationAxis
   } = useRotationAxes();
+  const {
+    radiusAxis
+  } = useRadiusAxes();
   const colorProcessors = useColorProcessor();
   const isItemVisible = store.use(selectorIsItemVisibleGetter);
   if (tooltipXAxes.length === 0 && tooltipYAxes.length === 0 && tooltipRotationAxes.length === 0) {
@@ -180,9 +184,8 @@ export function useAxesTooltip(params) {
       })) {
         return;
       }
-      const providedRotationAxisId =
-      // @ts-expect-error Should be fixed when we introduce a polar series with a rotationAxisId
-      seriesToAdd.rotationAxisId ?? defaultRotationAxis?.id;
+      const providedRotationAxisId = ('rotationAxisId' in seriesToAdd ? seriesToAdd.rotationAxisId : undefined) ?? defaultRotationAxis?.id;
+      const providedRadiusAxisId = ('radiusAxisId' in seriesToAdd ? seriesToAdd.radiusAxisId : undefined) ?? defaultRadiusAxis?.id;
       const tooltipItemIndex = tooltipAxes.findIndex(({
         axisDirection,
         axisId
@@ -192,7 +195,7 @@ export function useAxesTooltip(params) {
         const {
           dataIndex
         } = tooltipAxes[tooltipItemIndex];
-        const color = colorProcessors[seriesType]?.(seriesToAdd)(dataIndex) ?? '';
+        const color = colorProcessors[seriesType]?.(seriesToAdd, providedRotationAxisId !== undefined ? rotationAxis[providedRotationAxisId] : undefined, providedRadiusAxisId !== undefined ? radiusAxis[providedRadiusAxisId] : undefined)(dataIndex) ?? '';
         const value = seriesToAdd.data[dataIndex] ?? null;
         const formattedValue = seriesToAdd.valueFormatter(value, {
           dataIndex

package/ChartsTooltip/useItemTooltip.d.mts

@@ -1,4 +1,4 @@
-import { type ChartSeriesType } from "../models/seriesType/config.mjs";
+import type { ChartSeriesType } from "../models/seriesType/config.mjs";
 import { type ItemTooltip, type ItemTooltipWithMultipleValues } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
 export type UseItemTooltipReturnValue<SeriesType extends ChartSeriesType> = ItemTooltip<SeriesType>;
 export type UseRadarItemTooltipReturnValue = ItemTooltipWithMultipleValues<'radar'>;

package/ChartsTooltip/useItemTooltip.d.ts

@@ -1,4 +1,4 @@
-import { type ChartSeriesType } from "../models/seriesType/config.js";
+import type { ChartSeriesType } from "../models/seriesType/config.js";
 import { type ItemTooltip, type ItemTooltipWithMultipleValues } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export type UseItemTooltipReturnValue<SeriesType extends ChartSeriesType> = ItemTooltip<SeriesType>;
 export type UseRadarItemTooltipReturnValue = ItemTooltipWithMultipleValues<'radar'>;

package/ChartsTooltip/useItemTooltip.js

@@ -13,6 +13,7 @@ var _useAxis = require("../hooks/useAxis");
 var _useZAxis = require("../hooks/useZAxis");
 var _useChartSeriesConfig = require("../internals/plugins/corePlugins/useChartSeriesConfig");
 var _isCartesian = require("../internals/isCartesian");
+var _isPolar = require("../internals/isPolar");
 function useInternalItemTooltip() {
   const store = (0, _useStore.useStore)();
   const identifier = store.use(_useChartTooltip.selectorChartsTooltipItem);
@@ -34,6 +35,10 @@ function useInternalItemTooltip() {
     rotationAxis,
     rotationAxisIds
   } = (0, _useAxis.useRotationAxes)();
+  const {
+    radiusAxis,
+    radiusAxisIds
+  } = (0, _useAxis.useRadiusAxes)();
   if (!identifier) {
     return null;
   }
@@ -43,9 +48,16 @@ function useInternalItemTooltip() {
   }
   const xAxisId = (0, _isCartesian.isCartesianSeries)(itemSeries) ? itemSeries.xAxisId ?? xAxisIds[0] : undefined;
   const yAxisId = (0, _isCartesian.isCartesianSeries)(itemSeries) ? itemSeries.yAxisId ?? yAxisIds[0] : undefined;
+  const radiusAxisId = (0, _isPolar.isPolarSeries)(itemSeries) ? ('radiusAxisId' in itemSeries ? itemSeries.radiusAxisId : undefined) ?? radiusAxisIds[0] : undefined;
+  const rotationAxisId = (0, _isPolar.isPolarSeries)(itemSeries) ? ('rotationAxisId' in itemSeries ? itemSeries.rotationAxisId : undefined) ?? rotationAxisIds[0] : undefined;
   const zAxisId = 'zAxisId' in itemSeries ? itemSeries.zAxisId ?? zAxisIds[0] : zAxisIds[0];
-  const rotationAxisId = rotationAxisIds[0];
-  const getColor = seriesConfig[itemSeries.type].colorProcessor?.(itemSeries, xAxisId !== undefined ? xAxis[xAxisId] : undefined, yAxisId !== undefined ? yAxis[yAxisId] : undefined, zAxisId !== undefined ? zAxis[zAxisId] : undefined) ?? (() => '');
+  const mainAxis =
+  // eslint-disable-next-line no-nested-ternary
+  rotationAxisId !== undefined ? rotationAxis[rotationAxisId] : xAxisId !== undefined ? xAxis[xAxisId] : undefined;
+  const secondAxis =
+  // eslint-disable-next-line no-nested-ternary
+  radiusAxisId !== undefined ? radiusAxis[radiusAxisId] : yAxisId !== undefined ? yAxis[yAxisId] : undefined;
+  const getColor = seriesConfig[itemSeries.type].colorProcessor(itemSeries, mainAxis, secondAxis, zAxisId !== undefined ? zAxis[zAxisId] : undefined);
   const axesConfig = {};
   if (xAxisId !== undefined) {
     axesConfig.x = xAxis[xAxisId];
@@ -56,6 +68,9 @@ function useInternalItemTooltip() {
   if (rotationAxisId !== undefined) {
     axesConfig.rotation = rotationAxis[rotationAxisId];
   }
+  if (radiusAxisId !== undefined) {
+    axesConfig.radius = radiusAxis[radiusAxisId];
+  }
   return seriesConfig[itemSeries.type].tooltipGetter({
     series: itemSeries,
     axesConfig,