@mui/x-charts 9.0.0-alpha.3 → 9.0.0-alpha.4

package/ChartsReferenceLine/index.js

@@ -3,9 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  referenceLineClasses: true
+};
+Object.defineProperty(exports, "referenceLineClasses", {
+  enumerable: true,
+  get: function () {
+    return _chartsReferenceLineClasses.referenceLineClasses;
+  }
+});
 var _ChartsReferenceLine = require("./ChartsReferenceLine");
 Object.keys(_ChartsReferenceLine).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsReferenceLine[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -14,14 +24,4 @@ Object.keys(_ChartsReferenceLine).forEach(function (key) {
     }
   });
 });
-var _chartsReferenceLineClasses = require("./chartsReferenceLineClasses");
-Object.keys(_chartsReferenceLineClasses).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _chartsReferenceLineClasses[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _chartsReferenceLineClasses[key];
-    }
-  });
-});
+var _chartsReferenceLineClasses = require("./chartsReferenceLineClasses");

package/ChartsReferenceLine/index.mjs

@@ -1,3 +1,2 @@
 export * from "./ChartsReferenceLine.mjs";
-export * from "./chartsReferenceLineClasses.mjs";
-export {};
+export { referenceLineClasses } from "./chartsReferenceLineClasses.mjs";

package/ChartsSurface/ChartsSurface.d.mts

@@ -1,9 +1,8 @@
 import { type SxProps, type Theme } from '@mui/material/styles';
 import * as React from 'react';
-export interface ChartsSurfaceProps extends Omit<React.SVGProps<SVGSVGElement>, 'id' | 'children' | 'className' | 'height' | 'width' | 'cx' | 'cy' | 'viewBox' | 'color' | 'ref'> {
+import { type ChartsLayerContainerProps } from "../ChartsLayerContainer/index.mjs";
+export interface ChartsSurfaceProps extends Omit<React.SVGProps<SVGSVGElement>, 'id' | 'children' | 'className' | 'height' | 'width' | 'cx' | 'cy' | 'viewBox' | 'color' | 'ref'>, Pick<ChartsLayerContainerProps, 'title' | 'desc'> {
   className?: string;
-  title?: string;
-  desc?: string;
   sx?: SxProps<Theme>;
   children?: React.ReactNode;
 }

package/ChartsSurface/ChartsSurface.d.ts

@@ -1,9 +1,8 @@
 import { type SxProps, type Theme } from '@mui/material/styles';
 import * as React from 'react';
-export interface ChartsSurfaceProps extends Omit<React.SVGProps<SVGSVGElement>, 'id' | 'children' | 'className' | 'height' | 'width' | 'cx' | 'cy' | 'viewBox' | 'color' | 'ref'> {
+import { type ChartsLayerContainerProps } from "../ChartsLayerContainer/index.js";
+export interface ChartsSurfaceProps extends Omit<React.SVGProps<SVGSVGElement>, 'id' | 'children' | 'className' | 'height' | 'width' | 'cx' | 'cy' | 'viewBox' | 'color' | 'ref'>, Pick<ChartsLayerContainerProps, 'title' | 'desc'> {
   className?: string;
-  title?: string;
-  desc?: string;
   sx?: SxProps<Theme>;
   children?: React.ReactNode;
 }

package/ChartsSurface/ChartsSurface.js

@@ -17,7 +17,7 @@ var _chartsSurfaceClasses = require("./chartsSurfaceClasses");
 var _ChartsSvgLayer = require("../ChartsSvgLayer");
 var _ChartsLayerContainer = require("../ChartsLayerContainer");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className"]; // eslint-disable-next-line import/no-cycle
+const _excluded = ["children", "className", "title", "desc"]; // eslint-disable-next-line import/no-cycle
 /**
  * A helper component that combines `<ChartsLayerContainer>` and `<ChartsSvgLayer>` to provide a surface for drawing charts.
  * If you need more control over the layers, you can use `<ChartsLayerContainer>` and `<ChartsSvgLayer>` separately.
@@ -37,13 +37,17 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
   });
   const {
       children,
-      className
+      className,
+      title,
+      desc
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
   const classes = (0, _chartsSurfaceClasses.useUtilityClasses)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLayerContainer.ChartsLayerContainer, {
     className: (0, _clsx.default)(classes.root, className),
     ref: ref,
+    title: title,
+    desc: desc,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSvgLayer.ChartsSvgLayer, (0, _extends2.default)({}, other, {
       children: children
     }))
@@ -57,7 +61,15 @@ process.env.NODE_ENV !== "production" ? ChartsSurface.propTypes = {
   // ----------------------------------------------------------------------
   children: _propTypes.default.node,
   className: _propTypes.default.string,
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: _propTypes.default.string,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: _propTypes.default.string
 } : void 0;

package/ChartsSurface/ChartsSurface.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className"];
+const _excluded = ["children", "className", "title", "desc"];
 import clsx from 'clsx';
 import { useThemeProps } from '@mui/material/styles';
 import PropTypes from 'prop-types';
@@ -31,13 +31,17 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
   });
   const {
       children,
-      className
+      className,
+      title,
+      desc
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const classes = useUtilityClasses();
   return /*#__PURE__*/_jsx(ChartsLayerContainer, {
     className: clsx(classes.root, className),
     ref: ref,
+    title: title,
+    desc: desc,
     children: /*#__PURE__*/_jsx(ChartsSvgLayer, _extends({}, other, {
       children: children
     }))
@@ -51,8 +55,16 @@ process.env.NODE_ENV !== "production" ? ChartsSurface.propTypes = {
   // ----------------------------------------------------------------------
   children: PropTypes.node,
   className: PropTypes.string,
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: PropTypes.string,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: PropTypes.string
 } : void 0;
 export { ChartsSurface };

package/ChartsSvgLayer/ChartsSvgLayer.d.mts

@@ -2,8 +2,6 @@ import { type SxProps, type Theme } from '@mui/material/styles';
 import * as React from 'react';
 export interface ChartsSvgLayerProps extends Omit<React.SVGProps<SVGSVGElement>, 'id' | 'children' | 'className' | 'height' | 'width' | 'cx' | 'cy' | 'viewBox' | 'color' | 'ref'> {
   className?: string;
-  title?: string;
-  desc?: string;
   sx?: SxProps<Theme>;
   children?: React.ReactNode;
 }
@@ -11,8 +9,6 @@ export interface ChartsSvgLayerProps extends Omit<React.SVGProps<SVGSVGElement>,
  * A layer that provides the drawing area SVG the chart elements.
  * Must be wrapped in a `<ChartsLayerContainer>`.
  *
- * It provides the `title` and `desc` elements for the chart.
- *
  * Demos:
  *
  * - [Composition](https://mui.com/x/api/charts/composition/)

package/ChartsSvgLayer/ChartsSvgLayer.d.ts

@@ -2,8 +2,6 @@ import { type SxProps, type Theme } from '@mui/material/styles';
 import * as React from 'react';
 export interface ChartsSvgLayerProps extends Omit<React.SVGProps<SVGSVGElement>, 'id' | 'children' | 'className' | 'height' | 'width' | 'cx' | 'cy' | 'viewBox' | 'color' | 'ref'> {
   className?: string;
-  title?: string;
-  desc?: string;
   sx?: SxProps<Theme>;
   children?: React.ReactNode;
 }
@@ -11,8 +9,6 @@ export interface ChartsSvgLayerProps extends Omit<React.SVGProps<SVGSVGElement>,
  * A layer that provides the drawing area SVG the chart elements.
  * Must be wrapped in a `<ChartsLayerContainer>`.
  *
- * It provides the `title` and `desc` elements for the chart.
- *
  * Demos:
  *
  * - [Composition](https://mui.com/x/api/charts/composition/)

package/ChartsSvgLayer/ChartsSvgLayer.js

@@ -14,11 +14,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors");
 var _chartsSvgLayerClasses = require("./chartsSvgLayerClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "title", "desc"];
+const _excluded = ["children", "className"];
 const ChartsSvgLayerStyles = (0, _styles.styled)('svg', {
   name: 'MuiChartsSvgLayer',
   slot: 'Root'
@@ -33,8 +33,6 @@ const ChartsSvgLayerStyles = (0, _styles.styled)('svg', {
  * A layer that provides the drawing area SVG the chart elements.
  * Must be wrapped in a `<ChartsLayerContainer>`.
  *
- * It provides the `title` and `desc` elements for the chart.
- *
  * Demos:
  *
  * - [Composition](https://mui.com/x/api/charts/composition/)
@@ -45,9 +43,8 @@ const ChartsSvgLayerStyles = (0, _styles.styled)('svg', {
  */
 const ChartsSvgLayer = exports.ChartsSvgLayer = /*#__PURE__*/React.forwardRef(function ChartsSvgLayer(inProps, ref) {
   const {
-    store,
-    instance
-  } = (0, _ChartProvider.useChartContext)();
+    store
+  } = (0, _ChartsProvider.useChartsContext)();
   const svgWidth = store.use(_useChartDimensions.selectorChartSvgWidth);
   const svgHeight = store.use(_useChartDimensions.selectorChartSvgHeight);
   const themeProps = (0, _styles.useThemeProps)({
@@ -56,35 +53,18 @@ const ChartsSvgLayer = exports.ChartsSvgLayer = /*#__PURE__*/React.forwardRef(fu
   });
   const {
       children,
-      className,
-      title,
-      desc
+      className
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
   const classes = (0, _chartsSvgLayerClasses.useUtilityClasses)();
   const hasIntrinsicSize = svgHeight > 0 && svgWidth > 0;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChartsSvgLayerStyles, (0, _extends2.default)({
     viewBox: `0 0 ${svgWidth} ${svgHeight}`,
-    className: (0, _clsx.default)(classes.root, className)
+    className: (0, _clsx.default)(classes.root, className),
+    "aria-hidden": "true"
   }, other, {
-    onPointerEnter: event => {
-      other.onPointerEnter?.(event);
-      instance.handlePointerEnter?.(event);
-    },
-    onPointerLeave: event => {
-      other.onPointerLeave?.(event);
-      instance.handlePointerLeave?.(event);
-    },
-    onClick: event => {
-      other.onClick?.(event);
-      instance.handleClick?.(event);
-    },
     ref: ref,
-    children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
-      children: title
-    }), desc && /*#__PURE__*/(0, _jsxRuntime.jsx)("desc", {
-      children: desc
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxesGradients.ChartsAxesGradients, {}), hasIntrinsicSize && children]
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxesGradients.ChartsAxesGradients, {}), hasIntrinsicSize && children]
   }));
 });
 if (process.env.NODE_ENV !== "production") ChartsSvgLayer.displayName = "ChartsSvgLayer";
@@ -95,7 +75,5 @@ process.env.NODE_ENV !== "production" ? ChartsSvgLayer.propTypes = {
   // ----------------------------------------------------------------------
   children: _propTypes.default.node,
   className: _propTypes.default.string,
-  desc: _propTypes.default.string,
-  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-  title: _propTypes.default.string
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;

package/ChartsSvgLayer/ChartsSvgLayer.mjs

@@ -2,13 +2,13 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "title", "desc"];
+const _excluded = ["children", "className"];
 import { styled, useThemeProps } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import clsx from 'clsx';
 import { ChartsAxesGradients } from "../internals/components/ChartsAxesGradients/index.mjs";
-import { useChartContext } from "../context/ChartProvider/index.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
 import { selectorChartSvgWidth, selectorChartSvgHeight } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.mjs";
 import { useUtilityClasses } from "./chartsSvgLayerClasses.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -26,8 +26,6 @@ const ChartsSvgLayerStyles = styled('svg', {
  * A layer that provides the drawing area SVG the chart elements.
  * Must be wrapped in a `<ChartsLayerContainer>`.
  *
- * It provides the `title` and `desc` elements for the chart.
- *
  * Demos:
  *
  * - [Composition](https://mui.com/x/api/charts/composition/)
@@ -38,9 +36,8 @@ const ChartsSvgLayerStyles = styled('svg', {
  */
 const ChartsSvgLayer = /*#__PURE__*/React.forwardRef(function ChartsSvgLayer(inProps, ref) {
   const {
-    store,
-    instance
-  } = useChartContext();
+    store
+  } = useChartsContext();
   const svgWidth = store.use(selectorChartSvgWidth);
   const svgHeight = store.use(selectorChartSvgHeight);
   const themeProps = useThemeProps({
@@ -49,35 +46,18 @@ const ChartsSvgLayer = /*#__PURE__*/React.forwardRef(function ChartsSvgLayer(inP
   });
   const {
       children,
-      className,
-      title,
-      desc
+      className
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const classes = useUtilityClasses();
   const hasIntrinsicSize = svgHeight > 0 && svgWidth > 0;
   return /*#__PURE__*/_jsxs(ChartsSvgLayerStyles, _extends({
     viewBox: `0 0 ${svgWidth} ${svgHeight}`,
-    className: clsx(classes.root, className)
+    className: clsx(classes.root, className),
+    "aria-hidden": "true"
   }, other, {
-    onPointerEnter: event => {
-      other.onPointerEnter?.(event);
-      instance.handlePointerEnter?.(event);
-    },
-    onPointerLeave: event => {
-      other.onPointerLeave?.(event);
-      instance.handlePointerLeave?.(event);
-    },
-    onClick: event => {
-      other.onClick?.(event);
-      instance.handleClick?.(event);
-    },
     ref: ref,
-    children: [title && /*#__PURE__*/_jsx("title", {
-      children: title
-    }), desc && /*#__PURE__*/_jsx("desc", {
-      children: desc
-    }), /*#__PURE__*/_jsx(ChartsAxesGradients, {}), hasIntrinsicSize && children]
+    children: [/*#__PURE__*/_jsx(ChartsAxesGradients, {}), hasIntrinsicSize && children]
   }));
 });
 if (process.env.NODE_ENV !== "production") ChartsSvgLayer.displayName = "ChartsSvgLayer";
@@ -88,8 +68,6 @@ process.env.NODE_ENV !== "production" ? ChartsSvgLayer.propTypes = {
   // ----------------------------------------------------------------------
   children: PropTypes.node,
   className: PropTypes.string,
-  desc: PropTypes.string,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  title: PropTypes.string
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { ChartsSvgLayer };

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -13,12 +13,16 @@ var _chartsTooltipClasses = require("./chartsTooltipClasses");
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
 var _useAxesTooltip = require("./useAxesTooltip");
 var _ChartsLabelMark = require("../ChartsLabel/ChartsLabelMark");
+var _useStore = require("../internals/store/useStore");
+var _useChartSeries = require("../internals/plugins/corePlugins/useChartSeries");
 var _jsxRuntime = require("react/jsx-runtime");
 function ChartsAxisTooltipContent(props) {
   const {
     sort
   } = props;
   const classes = (0, _chartsTooltipClasses.useUtilityClasses)(props.classes);
+  const store = (0, _useStore.useStore)();
+  const getSeriesConfig = store.use(_useChartSeries.selectorChartSeriesConfigGetter);
   const tooltipData = (0, _useAxesTooltip.useAxesTooltip)();
   if (tooltipData === null) {
     return null;
@@ -50,43 +54,53 @@ function ChartsAxisTooltipContent(props) {
           component: "caption",
           children: axisFormattedValue
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
-          children: sortedItems.map(({
-            seriesId,
-            color,
-            formattedValue,
-            formattedLabel,
-            markType,
-            markShape
-          }) => {
-            if (formattedValue == null) {
-              return null;
-            }
-            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
-              className: classes.row,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipCell, {
-                className: (0, _clsx.default)(classes.labelCell, classes.cell),
-                component: "th",
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  className: classes.markContainer,
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
-                    type: markType,
-                    markShape: markShape,
-                    color: color,
-                    className: classes.mark
-                  })
-                }), formattedLabel || null]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-                className: (0, _clsx.default)(classes.valueCell, classes.cell),
-                component: "td",
-                children: formattedValue
-              })]
-            }, seriesId);
+          children: sortedItems.map(item => {
+            const seriesConfig = getSeriesConfig(item.seriesId);
+            const Content = seriesConfig && 'AxisTooltipContent' in seriesConfig ? seriesConfig.AxisTooltipContent ?? DefaultContent : DefaultContent;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
+              classes: props.classes,
+              item:
+              /* TypeScript can't guarantee that the item's series type is the same as the Content's series type,
+               * so we need to cast */
+              item
+            }, item.seriesId);
           })
         })]
       }, axisId);
     })
   });
 }
+function DefaultContent(props) {
+  const classes = (0, _chartsTooltipClasses.useUtilityClasses)(props.classes);
+  const {
+    item
+  } = props;
+  if (item.formattedValue == null) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
+    className: classes.row,
+    "data-series": item.seriesId,
+    "data-index": 'dataIndex' in item ? item.dataIndex : undefined,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipCell, {
+      className: (0, _clsx.default)(classes.labelCell, classes.cell),
+      component: "th",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: classes.markContainer,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
+          type: item.markType,
+          markShape: item.markShape,
+          color: item.color,
+          className: classes.mark
+        })
+      }), item.formattedLabel || null]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+      className: (0, _clsx.default)(classes.valueCell, classes.cell),
+      component: "td",
+      children: item.formattedValue
+    })]
+  });
+}
 process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/ChartsTooltip/ChartsAxisTooltipContent.mjs

@@ -7,12 +7,16 @@ import { useUtilityClasses } from "./chartsTooltipClasses.mjs";
 import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipRow, ChartsTooltipTable } from "./ChartsTooltipTable.mjs";
 import { useAxesTooltip } from "./useAxesTooltip.mjs";
 import { ChartsLabelMark } from "../ChartsLabel/ChartsLabelMark.mjs";
+import { useStore } from "../internals/store/useStore.mjs";
+import { selectorChartSeriesConfigGetter } from "../internals/plugins/corePlugins/useChartSeries/index.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function ChartsAxisTooltipContent(props) {
   const {
     sort
   } = props;
   const classes = useUtilityClasses(props.classes);
+  const store = useStore();
+  const getSeriesConfig = store.use(selectorChartSeriesConfigGetter);
   const tooltipData = useAxesTooltip();
   if (tooltipData === null) {
     return null;
@@ -44,43 +48,53 @@ function ChartsAxisTooltipContent(props) {
           component: "caption",
           children: axisFormattedValue
         }), /*#__PURE__*/_jsx("tbody", {
-          children: sortedItems.map(({
-            seriesId,
-            color,
-            formattedValue,
-            formattedLabel,
-            markType,
-            markShape
-          }) => {
-            if (formattedValue == null) {
-              return null;
-            }
-            return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
-              className: classes.row,
-              children: [/*#__PURE__*/_jsxs(ChartsTooltipCell, {
-                className: clsx(classes.labelCell, classes.cell),
-                component: "th",
-                children: [/*#__PURE__*/_jsx("div", {
-                  className: classes.markContainer,
-                  children: /*#__PURE__*/_jsx(ChartsLabelMark, {
-                    type: markType,
-                    markShape: markShape,
-                    color: color,
-                    className: classes.mark
-                  })
-                }), formattedLabel || null]
-              }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-                className: clsx(classes.valueCell, classes.cell),
-                component: "td",
-                children: formattedValue
-              })]
-            }, seriesId);
+          children: sortedItems.map(item => {
+            const seriesConfig = getSeriesConfig(item.seriesId);
+            const Content = seriesConfig && 'AxisTooltipContent' in seriesConfig ? seriesConfig.AxisTooltipContent ?? DefaultContent : DefaultContent;
+            return /*#__PURE__*/_jsx(Content, {
+              classes: props.classes,
+              item:
+              /* TypeScript can't guarantee that the item's series type is the same as the Content's series type,
+               * so we need to cast */
+              item
+            }, item.seriesId);
           })
         })]
       }, axisId);
     })
   });
 }
+function DefaultContent(props) {
+  const classes = useUtilityClasses(props.classes);
+  const {
+    item
+  } = props;
+  if (item.formattedValue == null) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
+    className: classes.row,
+    "data-series": item.seriesId,
+    "data-index": 'dataIndex' in item ? item.dataIndex : undefined,
+    children: [/*#__PURE__*/_jsxs(ChartsTooltipCell, {
+      className: clsx(classes.labelCell, classes.cell),
+      component: "th",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: classes.markContainer,
+        children: /*#__PURE__*/_jsx(ChartsLabelMark, {
+          type: item.markType,
+          markShape: item.markShape,
+          color: item.color,
+          className: classes.mark
+        })
+      }), item.formattedLabel || null]
+    }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
+      className: clsx(classes.valueCell, classes.cell),
+      component: "td",
+      children: item.formattedValue
+    })]
+  });
+}
 process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |