@mui/x-charts 8.0.0-beta.3 → 8.0.0

package/ChartDataProvider/ChartDataProvider.d.ts

@@ -1,12 +1,9 @@
 import * as React from 'react';
-import { AnimationProviderProps } from "../context/AnimationProvider/index.js";
 import { ChartProviderProps } from "../context/ChartProvider/index.js";
 import { ChartSeriesType } from "../models/seriesType/config.js";
 import { ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
 import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
-export type ChartDataProviderProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = Omit<AnimationProviderProps & ChartProviderProps<TSeries, TSignatures>['pluginParams'], 'children'> & Pick<ChartProviderProps<TSeries, TSignatures>, 'seriesConfig' | 'plugins'> & {
-  children?: React.ReactNode;
-};
+export type ChartDataProviderProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = React.PropsWithChildren<ChartProviderProps<TSeries, TSignatures>['pluginParams'] & Pick<ChartProviderProps<TSeries, TSignatures>, 'seriesConfig' | 'plugins'>>;
 /**
  * Orchestrates the data providers for the chart components and hooks.
  *

package/ChartDataProvider/ChartDataProvider.js

@@ -11,7 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useChartDataProviderProps = require("./useChartDataProviderProps");
-var _AnimationProvider = require("../context/AnimationProvider");
 var _ChartProvider = require("../context/ChartProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -44,13 +43,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 function ChartDataProvider(props) {
   const {
     children,
-    animationProviderProps,
     chartProviderProps
   } = (0, _useChartDataProviderProps.useChartDataProviderProps)(props);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartProvider.ChartProvider, (0, _extends2.default)({}, chartProviderProps, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnimationProvider.AnimationProvider, (0, _extends2.default)({}, animationProviderProps, {
-      children: children
-    }))
+    children: children
   }));
 }
 process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
@@ -58,47 +54,53 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  apiRef: _propTypes.default.any,
-  children: _propTypes.default.node,
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.any
+  }),
   /**
    * Color palette used to colorize multiple series.
    * @default rainbowSurgePalette
    */
-  colors: _propTypes.default.any,
+  colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
   /**
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
-  dataset: _propTypes.default.any,
+  dataset: _propTypes.default.arrayOf(_propTypes.default.object),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
-  height: _propTypes.default.any,
+  height: _propTypes.default.number,
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
-  id: _propTypes.default.any,
+  id: _propTypes.default.string,
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
    *
    * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
    */
-  margin: _propTypes.default.any,
+  margin: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+    bottom: _propTypes.default.number,
+    left: _propTypes.default.number,
+    right: _propTypes.default.number,
+    top: _propTypes.default.number
+  })]),
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
    * Please refer to the appropriate docs page to learn more about it.
    */
-  series: _propTypes.default.any,
+  series: _propTypes.default.arrayOf(_propTypes.default.object),
   /**
    * If `true`, animations are skipped.
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
    */
-  skipAnimation: _propTypes.default.any,
-  theme: _propTypes.default.any,
+  skipAnimation: _propTypes.default.bool,
+  theme: _propTypes.default.oneOf(['dark', 'light']),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
-  width: _propTypes.default.any
+  width: _propTypes.default.number
 } : void 0;

package/ChartDataProvider/useChartDataProviderProps.d.ts

@@ -1,11 +1,9 @@
 import type { ChartDataProviderProps } from './ChartDataProvider';
-import { AnimationProviderProps } from "../context/AnimationProvider/index.js";
 import { ChartProviderProps } from "../context/ChartProvider/index.js";
 import { ChartAnyPluginSignature } from "../internals/plugins/models/index.js";
 import { ChartSeriesType } from "../models/seriesType/config.js";
 import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 export declare const useChartDataProviderProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartDataProviderProps<TSeries, TSignatures>) => {
   children: import("react").ReactNode;
-  animationProviderProps: Omit<AnimationProviderProps, "children">;
-  chartProviderProps: Omit<ChartProviderProps<TSeries, TSignatures>, "children">;
+  chartProviderProps: ChartProviderProps<TSeries, TSignatures>;
 };

package/ChartDataProvider/useChartDataProviderProps.js

@@ -9,29 +9,25 @@ exports.useChartDataProviderProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _styles = require("@mui/material/styles");
-const _excluded = ["children", "skipAnimation", "plugins", "seriesConfig"];
+var _allPlugins = require("../internals/plugins/allPlugins");
+const _excluded = ["children", "plugins", "seriesConfig"];
 const useChartDataProviderProps = props => {
   const {
       children,
-      skipAnimation,
-      plugins,
+      plugins = _allPlugins.DEFAULT_PLUGINS,
       seriesConfig
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const theme = (0, _styles.useTheme)();
   const chartProviderProps = {
-    plugins,
+    plugins: plugins,
     seriesConfig,
     pluginParams: (0, _extends2.default)({
       theme: theme.palette.mode
     }, other)
   };
-  const animationProviderProps = {
-    skipAnimation
-  };
   return {
     children,
-    animationProviderProps,
     chartProviderProps
   };
 };

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -14,35 +14,27 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _chartsTooltipClasses = require("./chartsTooltipClasses");
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
 var _useAxesTooltip = require("./useAxesTooltip");
-var _hooks = require("../hooks");
 var _ChartsLabelMark = require("../ChartsLabel/ChartsLabelMark");
 var _jsxRuntime = require("react/jsx-runtime");
 function ChartsAxisTooltipContent(props) {
-  const {
-    classes: propClasses,
-    sx
-  } = props;
+  const classes = (0, _chartsTooltipClasses.useUtilityClasses)(props.classes);
   const tooltipData = (0, _useAxesTooltip.useAxesTooltip)();
-  const xAxis = (0, _hooks.useXAxis)();
-  const yAxis = (0, _hooks.useYAxis)();
-  const classes = (0, _chartsTooltipClasses.useUtilityClasses)(propClasses);
   if (tooltipData === null) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipPaper, {
-    sx: sx,
+    sx: props.sx,
     className: classes.paper,
     children: tooltipData.map(({
       axisId,
-      axisDirection,
+      mainAxis,
       axisValue,
       axisFormattedValue,
       seriesItems
     }) => {
-      const axis = axisDirection === 'x' ? xAxis : yAxis;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipTable, {
         className: classes.table,
-        children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        children: [axisValue != null && !mainAxis.hideTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           component: "caption",
           children: axisFormattedValue
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {

package/ChartsTooltip/ChartsItemTooltipContent.js

@@ -10,6 +10,7 @@ exports.ChartsItemTooltipContent = ChartsItemTooltipContent;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _chartsTooltipClasses = require("./chartsTooltipClasses");
 var _useItemTooltip = require("./useItemTooltip");
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
@@ -20,11 +21,52 @@ function ChartsItemTooltipContent(props) {
     classes: propClasses,
     sx
   } = props;
-  const tooltipData = (0, _useItemTooltip.useItemTooltip)();
+  const tooltipData = (0, _useItemTooltip.useInternalItemTooltip)();
   const classes = (0, _chartsTooltipClasses.useUtilityClasses)(propClasses);
   if (!tooltipData) {
     return null;
   }
+  if ('values' in tooltipData) {
+    const {
+      label: seriesLabel,
+      color,
+      markType
+    } = tooltipData;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipPaper, {
+      sx: sx,
+      className: classes.paper,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipTable, {
+        className: classes.table,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+          component: "caption",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: classes.markContainer,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
+              type: markType,
+              color: color,
+              className: classes.mark
+            })
+          }), seriesLabel]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+          children: tooltipData.values.map(({
+            formattedValue,
+            label
+          }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
+            className: classes.row,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+              className: (0, _clsx.default)(classes.labelCell, classes.cell),
+              component: "th",
+              children: label
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+              className: (0, _clsx.default)(classes.valueCell, classes.cell),
+              component: "td",
+              children: formattedValue
+            })]
+          }, label))
+        })]
+      })
+    });
+  }
   const {
     color,
     label,

package/ChartsTooltip/ChartsTooltipContainer.js

@@ -22,8 +22,11 @@ var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
+var _useChartPolarInteraction = require("../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors");
+var _useAxisSystem = require("../hooks/useAxisSystem");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["trigger", "classes", "children"];
+const noAxis = () => false;
 const ChartsTooltipRoot = (0, _styles.styled)(_Popper.default, {
   name: 'MuiChartsTooltip',
   slot: 'Root',
@@ -62,8 +65,9 @@ function ChartsTooltipContainer(inProps) {
     x: 0,
     y: 0
   }));
+  const axisSystem = (0, _useAxisSystem.useAxisSystem)();
   const store = (0, _useStore.useStore)();
-  const isOpen = (0, _useSelector.useSelector)(store, trigger === 'axis' ? _useChartCartesianAxis.selectorChartsInteractionAxisTooltip : _useChartInteraction.selectorChartsInteractionItemIsDefined);
+  const isOpen = (0, _useSelector.useSelector)(store, trigger === 'axis' ? axisSystem === 'polar' && _useChartPolarInteraction.selectorChartsInteractionPolarAxisTooltip || axisSystem === 'cartesian' && _useChartCartesianAxis.selectorChartsInteractionAxisTooltip || noAxis : _useChartInteraction.selectorChartsInteractionItemIsDefined);
   const popperOpen = pointerType !== null && isOpen; // tooltipHasData;
 
   React.useEffect(() => {

package/ChartsTooltip/ChartsTooltipTable.js

@@ -35,6 +35,11 @@ const ChartsTooltipTable = exports.ChartsTooltipTable = (0, _styles.styled)('tab
   theme
 }) => ({
   borderSpacing: 0,
+  [`& .${_chartsTooltipClasses.chartsTooltipClasses.markContainer}`]: {
+    display: 'inline-block',
+    width: `calc(20px + ${theme.spacing(1.5)})`,
+    verticalAlign: 'middle'
+  },
   '& caption': {
     borderBottom: `solid ${(theme.vars || theme).palette.divider} 1px`,
     padding: theme.spacing(0.5, 1.5),
@@ -83,11 +88,6 @@ const ChartsTooltipCell = exports.ChartsTooltipCell = (0, _styles.styled)(_Typog
   [`&.${_chartsTooltipClasses.chartsTooltipClasses.labelCell}`]: {
     fontWeight: theme.typography.fontWeightRegular
   },
-  [`& .${_chartsTooltipClasses.chartsTooltipClasses.markContainer}`]: {
-    display: 'inline-block',
-    width: `calc(20px + ${theme.spacing(1.5)})`,
-    verticalAlign: 'middle'
-  },
   [`&.${_chartsTooltipClasses.chartsTooltipClasses.valueCell}, &.${_chartsTooltipClasses.chartsTooltipClasses.axisValueCell}`]: {
     color: (theme.vars || theme).palette.text.primary,
     fontWeight: theme.typography.fontWeightMedium

package/ChartsTooltip/index.d.ts

@@ -5,7 +5,9 @@ export { getChartsTooltipUtilityClass, chartsTooltipClasses } from "./chartsTool
 export * from "./ChartsAxisTooltipContent.js";
 export * from "./ChartsItemTooltipContent.js";
 export * from "./ChartsTooltipTable.js";
-export * from "./useItemTooltip.js";
+export type { ItemTooltip } from '../internals/plugins/models/seriesConfig/tooltipGetter.types';
+export type { UseItemTooltipReturnValue, UseRadarItemTooltipReturnValue } from './useItemTooltip';
+export { useItemTooltip, useRadarItemTooltip } from "./useItemTooltip.js";
 export * from "./useAxisTooltip.js";
 export * from "./useAxesTooltip.js";
 export { useMouseTracker } from "./utils.js";

package/ChartsTooltip/index.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   getChartsTooltipUtilityClass: true,
   chartsTooltipClasses: true,
+  useItemTooltip: true,
+  useRadarItemTooltip: true,
   useMouseTracker: true
 };
 Object.defineProperty(exports, "chartsTooltipClasses", {
@@ -20,12 +22,24 @@ Object.defineProperty(exports, "getChartsTooltipUtilityClass", {
     return _chartsTooltipClasses.getChartsTooltipUtilityClass;
   }
 });
+Object.defineProperty(exports, "useItemTooltip", {
+  enumerable: true,
+  get: function () {
+    return _useItemTooltip.useItemTooltip;
+  }
+});
 Object.defineProperty(exports, "useMouseTracker", {
   enumerable: true,
   get: function () {
     return _utils.useMouseTracker;
   }
 });
+Object.defineProperty(exports, "useRadarItemTooltip", {
+  enumerable: true,
+  get: function () {
+    return _useItemTooltip.useRadarItemTooltip;
+  }
+});
 var _ChartsTooltip = require("./ChartsTooltip");
 Object.keys(_ChartsTooltip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -88,17 +102,6 @@ Object.keys(_ChartsTooltipTable).forEach(function (key) {
   });
 });
 var _useItemTooltip = require("./useItemTooltip");
-Object.keys(_useItemTooltip).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useItemTooltip[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useItemTooltip[key];
-    }
-  });
-});
 var _useAxisTooltip = require("./useAxisTooltip");
 Object.keys(_useAxisTooltip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/ChartsTooltip/useAxisTooltip.d.ts

@@ -1,9 +1,10 @@
 import { SeriesId } from "../models/seriesType/common.js";
-import { AxisId } from "../models/axis.js";
-import { CartesianChartSeriesType, ChartsSeriesConfig } from "../models/seriesType/config.js";
+import { CartesianChartSeriesType, ChartsSeriesConfig, PolarChartSeriesType } from "../models/seriesType/config.js";
+import { AxisDefaultized, PolarAxisDefaultized, AxisId } from "../models/axis.js";
 import { ChartsLabelMarkProps } from "../ChartsLabel/index.js";
-export interface UseAxisTooltipReturnValue<SeriesT extends CartesianChartSeriesType = CartesianChartSeriesType, AxisValueT extends string | number | Date = string | number | Date> {
-  axisDirection: 'x' | 'y';
+export interface UseAxisTooltipReturnValue<SeriesT extends CartesianChartSeriesType | PolarChartSeriesType = CartesianChartSeriesType | PolarChartSeriesType, AxisValueT extends string | number | Date = string | number | Date> {
+  axisDirection: SeriesT extends CartesianChartSeriesType ? 'x' | 'y' : 'rotation' | 'radius';
+  mainAxis: SeriesT extends CartesianChartSeriesType ? AxisDefaultized : PolarAxisDefaultized;
   axisId: AxisId;
   axisValue: AxisValueT;
   axisFormattedValue: string;
@@ -19,9 +20,9 @@ export interface UseAxisTooltipParams {
    * The axis directions to consider.
    * If not defined, all directions are considered
    */
-  directions?: ('x' | 'y')[];
+  directions?: ('x' | 'y' | 'rotation')[];
 }
-interface SeriesItem<T extends CartesianChartSeriesType> {
+interface SeriesItem<T extends CartesianChartSeriesType | PolarChartSeriesType> {
   seriesId: SeriesId;
   color: string;
   value: ChartsSeriesConfig[T]['valueType'];

package/ChartsTooltip/useAxisTooltip.js

@@ -15,6 +15,8 @@ var _utils = require("./utils");
 var _useAxis = require("../hooks/useAxis");
 var _useZAxis = require("../hooks/useZAxis");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
+var _useChartPolarInteraction = require("../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors");
+var _isPolar = require("../internals/isPolar");
 function defaultAxisTooltipConfig(axis, dataIndex, axisDirection) {
   const axisValue = axis.data?.[dataIndex] ?? null;
   const axisFormatter = axis.valueFormatter ?? (v => axis.scaleType === 'utc' ? (0, _utils.utcFormatter)(v) : v.toLocaleString());
@@ -25,6 +27,7 @@ function defaultAxisTooltipConfig(axis, dataIndex, axisDirection) {
   return {
     axisDirection,
     axisId: axis.id,
+    mainAxis: axis,
     dataIndex,
     axisValue,
     axisFormattedValue,
@@ -43,9 +46,11 @@ function useAxisTooltip(params = {}) {
   } = params;
   const defaultXAxis = (0, _useAxis.useXAxis)();
   const defaultYAxis = (0, _useAxis.useYAxis)();
+  const defaultRotationAxis = (0, _useAxis.useRotationAxis)();
   const store = (0, _useStore.useStore)();
   const tooltipXAxes = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsInteractionTooltipXAxes);
   const tooltipYAxes = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsInteractionTooltipYAxes);
+  const tooltipRotationAxes = (0, _useSelector.useSelector)(store, _useChartPolarInteraction.selectorChartsInteractionTooltipRotationAxes);
   const series = (0, _useSeries.useSeries)();
   const {
     xAxis
@@ -57,8 +62,11 @@ function useAxisTooltip(params = {}) {
     zAxis,
     zAxisIds
   } = (0, _useZAxis.useZAxes)();
+  const {
+    rotationAxis
+  } = (0, _useAxis.useRotationAxes)();
   const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
-  if (tooltipXAxes.length === 0 && tooltipYAxes.length === 0) {
+  if (tooltipXAxes.length === 0 && tooltipYAxes.length === 0 && tooltipRotationAxes.length === 0) {
     return null;
   }
   const tooltipAxes = [];
@@ -84,7 +92,18 @@ function useAxisTooltip(params = {}) {
       tooltipAxes.push(defaultAxisTooltipConfig(yAxis[axisId], dataIndex, 'y'));
     });
   }
-  Object.keys(series).filter(_isCartesian.isCartesianSeriesType).flatMap(seriesType => {
+  if (directions === undefined || directions.includes('rotation')) {
+    tooltipRotationAxes.forEach(({
+      axisId,
+      dataIndex
+    }) => {
+      if (!multipleAxes && tooltipAxes.length > 1) {
+        return;
+      }
+      tooltipAxes.push(defaultAxisTooltipConfig(rotationAxis[axisId], dataIndex, 'rotation'));
+    });
+  }
+  Object.keys(series).filter(_isCartesian.isCartesianSeriesType).forEach(seriesType => {
     const seriesOfType = series[seriesType];
     if (!seriesOfType) {
       return [];
@@ -120,6 +139,42 @@ function useAxisTooltip(params = {}) {
       }
     });
   });
+  Object.keys(series).filter(_isPolar.isPolarSeriesType).forEach(seriesType => {
+    const seriesOfType = series[seriesType];
+    if (!seriesOfType) {
+      return [];
+    }
+    return seriesOfType.seriesOrder.forEach(seriesId => {
+      const seriesToAdd = seriesOfType.series[seriesId];
+      const providedRotationAxisId =
+      // @ts-expect-error Should be fixed when we introduce a polar series with a rotationAxisId
+      seriesToAdd.rotationAxisId ?? defaultRotationAxis?.id;
+      const tooltipItemIndex = tooltipAxes.findIndex(({
+        axisDirection,
+        axisId
+      }) => axisDirection === 'rotation' && axisId === providedRotationAxisId);
+      // Test if the series uses the default axis
+      if (tooltipItemIndex >= 0) {
+        const {
+          dataIndex
+        } = tooltipAxes[tooltipItemIndex];
+        const color = colorProcessors[seriesType]?.(seriesToAdd)(dataIndex) ?? '';
+        const value = seriesToAdd.data[dataIndex] ?? null;
+        const formattedValue = seriesToAdd.valueFormatter(value, {
+          dataIndex
+        });
+        const formattedLabel = (0, _getLabel.getLabel)(seriesToAdd.label, 'tooltip') ?? null;
+        tooltipAxes[tooltipItemIndex].seriesItems.push({
+          seriesId,
+          color,
+          value,
+          formattedValue,
+          formattedLabel,
+          markType: seriesToAdd.labelMarkType
+        });
+      }
+    });
+  });
   if (!multipleAxes) {
     return tooltipAxes.length === 0 ? tooltipAxes[0] : null;
   }

package/ChartsTooltip/useItemTooltip.d.ts

@@ -1,12 +1,16 @@
-import { ChartItemIdentifier, ChartSeriesType, ChartsSeriesConfig } from "../models/seriesType/config.js";
-import { ChartsLabelMarkProps } from "../ChartsLabel/index.js";
-export interface ItemTooltip<T extends ChartSeriesType> {
-  identifier: ChartItemIdentifier<T>;
-  color: string;
-  label: string | undefined;
-  value: ChartsSeriesConfig[T]['valueType'];
-  formattedValue: string | null;
-  markType: ChartsLabelMarkProps['type'];
-}
+import { ChartSeriesType } from "../models/seriesType/config.js";
+import { ItemTooltip, ItemTooltipWithMultipleValues } from "../internals/plugins/models/seriesConfig/tooltipGetter.types.js";
 export type UseItemTooltipReturnValue<T extends ChartSeriesType> = ItemTooltip<T>;
-export declare function useItemTooltip<T extends ChartSeriesType>(): UseItemTooltipReturnValue<T> | null;
+export type UseRadarItemTooltipReturnValue = ItemTooltipWithMultipleValues<'radar'>;
+export declare function useInternalItemTooltip<T extends ChartSeriesType>(): (T extends 'radar' ? ItemTooltipWithMultipleValues<T> : ItemTooltip<T>) | null;
+/**
+ * Returns a config object when the tooltip contains a single item to display.
+ * Some specific charts like radar need more complex structure. Use specific hook like `useRadarItemTooltip` for them.
+ * @returns The tooltip item config
+ */
+export declare const useItemTooltip: <T extends Exclude<ChartSeriesType, "radar">>() => UseItemTooltipReturnValue<T> | null;
+/**
+ * Contains an object per value with their content and the label of the associated metric.
+ * @returns The tooltip item configs
+ */
+export declare const useRadarItemTooltip: () => UseRadarItemTooltipReturnValue | null;

package/ChartsTooltip/useItemTooltip.js

@@ -4,7 +4,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useItemTooltip = useItemTooltip;
+exports.useInternalItemTooltip = useInternalItemTooltip;
+exports.useRadarItemTooltip = exports.useItemTooltip = void 0;
 var _useSeries = require("../hooks/useSeries");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useSelector = require("../internals/store/useSelector");
@@ -12,7 +13,7 @@ var _useStore = require("../internals/store/useStore");
 var _useAxis = require("../hooks/useAxis");
 var _useZAxis = require("../hooks/useZAxis");
 var _useChartSeries = require("../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors");
-function useItemTooltip() {
+function useInternalItemTooltip() {
   const store = (0, _useStore.useStore)();
   const identifier = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionItem);
   const seriesConfig = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesConfig);
@@ -29,10 +30,20 @@ function useItemTooltip() {
     zAxis,
     zAxisIds
   } = (0, _useZAxis.useZAxes)();
+  const {
+    rotationAxis,
+    rotationAxisIds
+  } = (0, _useAxis.useRotationAxes)();
+  const {
+    radiusAxis,
+    radiusAxisIds
+  } = (0, _useAxis.useRadiusAxes)();
   const xAxisId = series.xAxisId ?? xAxisIds[0];
   const yAxisId = series.yAxisId ?? yAxisIds[0];
   const zAxisId = series.zAxisId ?? zAxisIds[0];
-  if (!identifier || identifier.dataIndex === undefined) {
+  const rotationAxisId = series.rotationAxisId ?? rotationAxisIds[0];
+  const radiusAxisId = series.radiusAxisId ?? radiusAxisIds[0];
+  if (!identifier) {
     return null;
   }
   const itemSeries = series[identifier.type]?.series[identifier.seriesId];
@@ -40,9 +51,42 @@ function useItemTooltip() {
     return null;
   }
   const getColor = seriesConfig[itemSeries.type].colorProcessor?.(itemSeries, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
+  const axesConfig = {};
+  if (xAxisId !== undefined) {
+    axesConfig.x = xAxis[xAxisId];
+  }
+  if (yAxisId !== undefined) {
+    axesConfig.y = yAxis[yAxisId];
+  }
+  if (rotationAxisId !== undefined) {
+    axesConfig.rotation = rotationAxis[rotationAxisId];
+  }
+  if (radiusAxisId !== undefined) {
+    axesConfig.radius = radiusAxis[radiusAxisId];
+  }
   return seriesConfig[itemSeries.type].tooltipGetter({
     series: itemSeries,
+    axesConfig,
     getColor,
     identifier
   });
-}
+}
+
+/**
+ * Returns a config object when the tooltip contains a single item to display.
+ * Some specific charts like radar need more complex structure. Use specific hook like `useRadarItemTooltip` for them.
+ * @returns The tooltip item config
+ */
+const useItemTooltip = () => {
+  return useInternalItemTooltip();
+};
+
+/**
+ * Contains an object per value with their content and the label of the associated metric.
+ * @returns The tooltip item configs
+ */
+exports.useItemTooltip = useItemTooltip;
+const useRadarItemTooltip = () => {
+  return useInternalItemTooltip();
+};
+exports.useRadarItemTooltip = useRadarItemTooltip;

package/Gauge/Gauge.js

@@ -19,7 +19,7 @@ var _GaugeReferenceArc = require("./GaugeReferenceArc");
 var _gaugeClasses = require("./gaugeClasses");
 var _GaugeValueText = require("./GaugeValueText");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["text", "children", "classes", "className"];
+const _excluded = ["text", "children", "classes", "className", "skipAnimation"];
 const useUtilityClasses = props => {
   const {
     classes
@@ -36,7 +36,8 @@ const Gauge = exports.Gauge = /*#__PURE__*/React.forwardRef(function Gauge(props
   const {
       text,
       children,
-      className
+      className,
+      skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const classes = useUtilityClasses(props);
@@ -46,7 +47,8 @@ const Gauge = exports.Gauge = /*#__PURE__*/React.forwardRef(function Gauge(props
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeReferenceArc.GaugeReferenceArc, {
       className: classes.referenceArc
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeValueArc.GaugeValueArc, {
-      className: classes.valueArc
+      className: classes.valueArc,
+      skipAnimation: skipAnimation
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeValueText.GaugeValueText, {
       className: classes.valueText,
       text: text
@@ -120,6 +122,11 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    * @default '100%'
    */
   outerRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: _propTypes.default.bool,
   /**
    * The start angle (deg).
    * @default 0