@mui/x-charts 8.0.0-alpha.1 → 8.0.0-alpha.10

package/node/ChartsLegend/useAxis.js

@@ -1,14 +1,12 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useAxis = useAxis;
-var React = _interopRequireWildcard(require("react"));
-var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
-var _useCartesianContext = require("../context/CartesianProvider/useCartesianContext");
+var _useZAxis = require("../hooks/useZAxis");
+var _useAxis = require("../hooks/useAxis");
 /**
  * Helper to select an axis definition according to its direction and id.
  */
@@ -18,14 +16,16 @@ function useAxis({
 }) {
   const {
     xAxis,
-    xAxisIds,
+    xAxisIds
+  } = (0, _useAxis.useXAxes)();
+  const {
     yAxis,
     yAxisIds
-  } = (0, _useCartesianContext.useCartesianContext)();
+  } = (0, _useAxis.useYAxes)();
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
+  } = (0, _useZAxis.useZAxes)();
   switch (axisDirection) {
     case 'x':
       {

package/node/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -11,8 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useSeries = require("../hooks/useSeries");
 var _hooks = require("../hooks");
-var _CartesianProvider = require("../context/CartesianProvider");
-var _useStore = require("../internals/useStore");
+var _useStore = require("../internals/store/useStore");
 var _jsxRuntime = require("react/jsx-runtime");
 function ChartsOnAxisClickHandler(props) {
   const {
@@ -22,11 +21,13 @@ function ChartsOnAxisClickHandler(props) {
   const series = (0, _useSeries.useSeries)();
   const store = (0, _useStore.useStore)();
   const {
-    xAxisIds,
     xAxis,
-    yAxisIds,
-    yAxis
-  } = (0, _CartesianProvider.useCartesianContext)();
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _hooks.useYAxes)();
   React.useEffect(() => {
     const element = svgRef.current;
     if (element === null || !onAxisClick) {

package/node/ChartsSurface/ChartsSurface.js

@@ -15,33 +15,57 @@ var React = _interopRequireWildcard(require("react"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useAxisEvents = require("../hooks/useAxisEvents");
 var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
-var _hooks = require("../hooks");
-var _SvgRefProvider = require("../context/SvgRefProvider");
-var _SizeProvider = require("../context/SizeProvider");
+var _useSvgRef = require("../hooks/useSvgRef");
+var _useSelector = require("../internals/store/useSelector");
+var _useStore = require("../internals/store/useStore");
+var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "disableAxisListener", "className", "title", "desc"];
 const ChartsSurfaceStyles = (0, _styles.styled)('svg', {
   name: 'MuiChartsSurface',
   slot: 'Root'
-})(() => ({
+})(({
+  ownerState
+}) => ({
+  width: ownerState.width ?? '100%',
+  height: ownerState.height ?? '100%',
+  display: 'flex',
+  position: 'relative',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
   // This prevents default touch actions when using the svg on mobile devices.
   // For example, prevent page scroll & zoom.
   touchAction: 'none'
 }));
+
+/**
+ * It provides the drawing area for the chart elements.
+ * It is the root `<svg>` of all the chart elements.
+ *
+ * It also provides the `title` and `desc` elements for the chart.
+ *
+ * Demos:
+ *
+ * - [Composition](https://mui.com/x/api/charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartsSurface API](https://mui.com/x/api/charts/charts-surface/)
+ */
 const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inProps, ref) {
+  const store = (0, _useStore.useStore)();
   const {
-    width,
-    height,
-    left,
-    right,
-    top,
-    bottom
-  } = (0, _hooks.useDrawingArea)();
+    width: svgWidth,
+    height: svgHeight
+  } = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartContainerSize);
   const {
-    hasIntrinsicSize
-  } = (0, _SizeProvider.useSize)();
-  const surfaceRef = (0, _SvgRefProvider.useSurfaceRef)();
-  const handleRef = (0, _useForkRef.default)(surfaceRef, ref);
+    width: propsWidth,
+    height: propsHeight
+  } = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartPropsSize);
+  const svgRef = (0, _useSvgRef.useSvgRef)();
+  const handleRef = (0, _useForkRef.default)(svgRef, ref);
   const themeProps = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiChartsSurface'
@@ -54,17 +78,14 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
       desc
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
-  const svgWidth = width + left + right;
-  const svgHeight = height + top + bottom;
-  const svgView = {
-    width: svgWidth,
-    height: svgHeight,
-    x: 0,
-    y: 0
-  };
+  const hasIntrinsicSize = svgHeight > 0 && svgWidth > 0;
   (0, _useAxisEvents.useAxisEvents)(disableAxisListener);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChartsSurfaceStyles, (0, _extends2.default)({
-    viewBox: `${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`,
+    ownerState: {
+      width: propsWidth,
+      height: propsHeight
+    },
+    viewBox: `${0} ${0} ${svgWidth} ${svgHeight}`,
     className: className
   }, other, {
     ref: handleRef,

package/node/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -15,17 +15,18 @@ var _chartsTooltipClasses = require("./chartsTooltipClasses");
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
 var _useAxisTooltip = require("./useAxisTooltip");
 var _hooks = require("../hooks");
+var _ChartsLabelMark = require("../ChartsLabel/ChartsLabelMark");
 var _jsxRuntime = require("react/jsx-runtime");
 function ChartsAxisTooltipContent(props) {
   const {
     classes: propClasses,
     sx
   } = props;
-  const tootlipData = (0, _useAxisTooltip.useAxisTooltip)();
+  const tooltipData = (0, _useAxisTooltip.useAxisTooltip)();
   const xAxis = (0, _hooks.useXAxis)();
   const yAxis = (0, _hooks.useYAxis)();
   const classes = (0, _chartsTooltipClasses.useUtilityClasses)(propClasses);
-  if (tootlipData === null) {
+  if (tooltipData === null) {
     return null;
   }
   const {
@@ -33,7 +34,7 @@ function ChartsAxisTooltipContent(props) {
     axisValue,
     axisFormattedValue,
     seriesItems
-  } = tootlipData;
+  } = tooltipData;
   const axis = axisDirection === 'x' ? xAxis : yAxis;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipPaper, {
     sx: sx,
@@ -42,8 +43,10 @@ function ChartsAxisTooltipContent(props) {
       className: classes.table,
       children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipRow, {
+          className: classes.row,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
             colSpan: 3,
+            className: (0, _clsx.default)(classes.cell, classes.axisValueCell),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
               children: axisFormattedValue
             })
@@ -54,7 +57,8 @@ function ChartsAxisTooltipContent(props) {
           seriesId,
           color,
           formattedValue,
-          formattedLabel
+          formattedLabel,
+          markType
         }) => {
           if (formattedValue == null) {
             return null;
@@ -63,7 +67,8 @@ function ChartsAxisTooltipContent(props) {
             className: classes.row,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
               className: (0, _clsx.default)(classes.markCell, classes.cell),
-              children: color && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipMark, {
+              children: color && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
+                type: markType,
                 color: color,
                 className: classes.mark
               })

package/node/ChartsTooltip/ChartsItemTooltipContent.js

@@ -13,6 +13,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _chartsTooltipClasses = require("./chartsTooltipClasses");
 var _useItemTooltip = require("./useItemTooltip");
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
+var _ChartsLabelMark = require("../ChartsLabel/ChartsLabelMark");
 var _jsxRuntime = require("react/jsx-runtime");
 function ChartsItemTooltipContent(props) {
   const {
@@ -27,7 +28,8 @@ function ChartsItemTooltipContent(props) {
   const {
     color,
     label,
-    formattedValue
+    formattedValue,
+    markType
   } = tooltipData;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipPaper, {
     sx: sx,
@@ -39,7 +41,8 @@ function ChartsItemTooltipContent(props) {
           className: classes.row,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
             className: (0, _clsx.default)(classes.markCell, classes.cell),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipMark, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
+              type: markType,
               color: color,
               className: classes.mark
             })

package/node/ChartsTooltip/ChartsTooltip.js

@@ -10,6 +10,7 @@ exports.ChartsTooltip = ChartsTooltip;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _ChartsItemTooltipContent = require("./ChartsItemTooltipContent");
 var _ChartsAxisTooltipContent = require("./ChartsAxisTooltipContent");
 var _ChartsTooltipContainer = require("./ChartsTooltipContainer");
@@ -50,26 +51,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
    * It's used to set the position of the popper.
    * The return value will passed as the reference object of the Popper instance.
    */
-  anchorEl: _propTypes.default.oneOfType([(props, propName) => {
-    if (props[propName] == null) {
-      return new Error(`Prop '${propName}' is required but wasn't specified`);
-    }
-    if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-      return new Error(`Expected prop '${propName}' to be of type Element`);
-    }
-    return null;
-  }, _propTypes.default.func, _propTypes.default.shape({
-    contextElement: (props, propName) => {
-      if (props[propName] == null) {
-        return null;
-      }
-      if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-        return new Error(`Expected prop '${propName}' to be of type Element`);
-      }
-      return null;
-    },
-    getBoundingClientRect: _propTypes.default.func.isRequired
-  })]),
+  anchorEl: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_HTMLElementType.default, _propTypes.default.object, _propTypes.default.func]),
   /**
    * Override or extend the styles applied to the component.
    */

package/node/ChartsTooltip/ChartsTooltipContainer.js

@@ -11,16 +11,17 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
 var _styles = require("@mui/material/styles");
 var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
 var _NoSsr = _interopRequireDefault(require("@mui/material/NoSsr"));
 var _useSvgRef = require("../hooks/useSvgRef");
 var _utils = require("./utils");
-var _useSelector = require("../internals/useSelector");
-var _useStore = require("../internals/useStore");
+var _useSelector = require("../internals/store/useSelector");
+var _useStore = require("../internals/store/useStore");
 var _hooks = require("../hooks");
-var _InteractionSelectors = require("../context/InteractionSelectors");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["trigger", "classes", "children"];
 const ChartsTooltipRoot = (0, _styles.styled)(_Popper.default, {
@@ -66,7 +67,7 @@ function ChartsTooltipContainer(inProps) {
   const store = (0, _useStore.useStore)();
   const isOpen = (0, _useSelector.useSelector)(store,
   // eslint-disable-next-line no-nested-ternary
-  trigger === 'axis' ? xAxisHasData ? _InteractionSelectors.selectorChartsInteractionXAxisIsDefined : _InteractionSelectors.selectorChartsInteractionYAxisIsDefined : _InteractionSelectors.selectorChartsInteractionItemIsDefined);
+  trigger === 'axis' ? xAxisHasData ? _useChartInteraction.selectorChartsInteractionXAxisIsDefined : _useChartInteraction.selectorChartsInteractionYAxisIsDefined : _useChartInteraction.selectorChartsInteractionItemIsDefined);
   const popperOpen = pointerType !== null && isOpen; // tooltipHasData;
 
   React.useEffect(() => {
@@ -131,26 +132,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltipContainer.propTypes = {
    * It's used to set the position of the popper.
    * The return value will passed as the reference object of the Popper instance.
    */
-  anchorEl: _propTypes.default.oneOfType([(props, propName) => {
-    if (props[propName] == null) {
-      return new Error(`Prop '${propName}' is required but wasn't specified`);
-    }
-    if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-      return new Error(`Expected prop '${propName}' to be of type Element`);
-    }
-    return null;
-  }, _propTypes.default.func, _propTypes.default.shape({
-    contextElement: (props, propName) => {
-      if (props[propName] == null) {
-        return null;
-      }
-      if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-        return new Error(`Expected prop '${propName}' to be of type Element`);
-      }
-      return null;
-    },
-    getBoundingClientRect: _propTypes.default.func.isRequired
-  })]),
+  anchorEl: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_HTMLElementType.default, _propTypes.default.object, _propTypes.default.func]),
   /**
    * Popper render function or node.
    */

package/node/ChartsTooltip/ChartsTooltipTable.js

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChartsTooltipTable = exports.ChartsTooltipRow = exports.ChartsTooltipPaper = exports.ChartsTooltipMark = exports.ChartsTooltipCell = void 0;
+exports.ChartsTooltipTable = exports.ChartsTooltipRow = exports.ChartsTooltipPaper = exports.ChartsTooltipCell = void 0;
 var _styles = require("@mui/material/styles");
-var _system = require("@mui/system");
 var _chartsTooltipClasses = require("./chartsTooltipClasses");
 /**
  * @ignore - internal component.
@@ -17,11 +16,10 @@ const ChartsTooltipPaper = exports.ChartsTooltipPaper = (0, _styles.styled)('div
 })(({
   theme
 }) => ({
-  boxShadow: theme.shadows[1],
   backgroundColor: (theme.vars || theme).palette.background.paper,
   color: (theme.vars || theme).palette.text.primary,
-  transition: theme.transitions.create('box-shadow'),
-  borderRadius: theme.shape.borderRadius
+  borderRadius: theme.shape.borderRadius,
+  border: `solid ${(theme.vars || theme).palette.divider} 1px`
 }));
 
 /**
@@ -51,10 +49,10 @@ const ChartsTooltipRow = exports.ChartsTooltipRow = (0, _styles.styled)('tr', {
   theme
 }) => ({
   'tr:first-of-type& td': {
-    paddingTop: theme.spacing(1)
+    paddingTop: theme.spacing(0.5)
   },
   'tr:last-of-type& td': {
-    paddingBottom: theme.spacing(1)
+    paddingBottom: theme.spacing(0.5)
   }
 }));
 
@@ -71,38 +69,22 @@ const ChartsTooltipCell = exports.ChartsTooltipCell = (0, _styles.styled)('td',
   verticalAlign: 'middle',
   color: (theme.vars || theme).palette.text.secondary,
   [`&.${_chartsTooltipClasses.chartsTooltipClasses.labelCell}`]: {
-    paddingLeft: theme.spacing(1)
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1.5),
+    fontWeight: theme.typography.fontWeightRegular
+  },
+  [`&.${_chartsTooltipClasses.chartsTooltipClasses.valueCell}, &.${_chartsTooltipClasses.chartsTooltipClasses.axisValueCell}`]: {
+    color: (theme.vars || theme).palette.text.primary,
+    fontWeight: theme.typography.fontWeightMedium
   },
   [`&.${_chartsTooltipClasses.chartsTooltipClasses.valueCell}`]: {
-    paddingLeft: theme.spacing(4),
-    color: (theme.vars || theme).palette.text.primary
+    paddingLeft: theme.spacing(1.5),
+    paddingRight: theme.spacing(1.5)
   },
   'td:first-of-type&': {
-    paddingLeft: theme.spacing(2)
+    paddingLeft: theme.spacing(1.5)
   },
   'td:last-of-type&': {
-    paddingRight: theme.spacing(2)
+    paddingRight: theme.spacing(1.5)
   }
-}));
-
-/**
- * @ignore - internal component.
- */
-const ChartsTooltipMark = exports.ChartsTooltipMark = (0, _styles.styled)('div', {
-  name: 'MuiChartsTooltip',
-  slot: 'Mark',
-  overridesResolver: (props, styles) => styles.mark,
-  shouldForwardProp: prop => (0, _system.shouldForwardProp)(prop) && prop !== 'color'
-})(({
-  theme,
-  color
-}) => ({
-  width: theme.spacing(1),
-  height: theme.spacing(1),
-  borderRadius: '50%',
-  boxShadow: theme.shadows[1],
-  backgroundColor: color,
-  borderColor: (theme.vars || theme).palette.background.paper,
-  border: `solid ${(theme.vars || theme).palette.background.paper} ${theme.spacing(0.25)}`,
-  boxSizing: 'content-box'
 }));

package/node/ChartsTooltip/chartsTooltipClasses.js

@@ -13,7 +13,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 function getChartsTooltipUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiChartsTooltip', slot);
 }
-const chartsTooltipClasses = exports.chartsTooltipClasses = (0, _generateUtilityClasses.default)('MuiChartsTooltip', ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell']);
+const chartsTooltipClasses = exports.chartsTooltipClasses = (0, _generateUtilityClasses.default)('MuiChartsTooltip', ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell', 'axisValueCell']);
 const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
@@ -24,7 +24,8 @@ const useUtilityClasses = classes => {
     mark: ['mark'],
     markCell: ['markCell'],
     labelCell: ['labelCell'],
-    valueCell: ['valueCell']
+    valueCell: ['valueCell'],
+    axisValueCell: ['axisValueCell']
   };
   return (0, _composeClasses.default)(slots, getChartsTooltipUtilityClass, classes);
 };

package/node/ChartsTooltip/index.js

@@ -111,4 +111,16 @@ Object.keys(_useAxisTooltip).forEach(function (key) {
     }
   });
 });
-var _utils = require("./utils");
+var _utils = require("./utils");
+var _ChartTooltip = require("./ChartTooltip.types");
+Object.keys(_ChartTooltip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ChartTooltip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartTooltip[key];
+    }
+  });
+});

package/node/ChartsTooltip/useAxisTooltip.js

@@ -1,38 +1,37 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useAxisTooltip = useAxisTooltip;
-var React = _interopRequireWildcard(require("react"));
 var _useSeries = require("../hooks/useSeries");
-var _CartesianProvider = require("../context/CartesianProvider");
-var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
-var _useColorProcessor = require("../context/PluginProvider/useColorProcessor");
-var _useStore = require("../internals/useStore");
-var _useSelector = require("../internals/useSelector");
+var _useColorProcessor = require("../internals/plugins/corePlugins/useChartSeries/useColorProcessor");
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
 var _getLabel = require("../internals/getLabel");
 var _isCartesian = require("../internals/isCartesian");
 var _utils = require("./utils");
 var _useAxis = require("../hooks/useAxis");
-var _InteractionSelectors = require("../context/InteractionSelectors");
+var _useZAxis = require("../hooks/useZAxis");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 function useAxisTooltip() {
   const defaultXAxis = (0, _useAxis.useXAxis)();
   const defaultYAxis = (0, _useAxis.useYAxis)();
   const xAxisHasData = defaultXAxis.data !== undefined && defaultXAxis.data.length !== 0;
   const store = (0, _useStore.useStore)();
-  const axisData = (0, _useSelector.useSelector)(store, xAxisHasData ? _InteractionSelectors.selectorChartsInteractionXAxis : _InteractionSelectors.selectorChartsInteractionYAxis);
+  const axisData = (0, _useSelector.useSelector)(store, xAxisHasData ? _useChartInteraction.selectorChartsInteractionXAxis : _useChartInteraction.selectorChartsInteractionYAxis);
   const series = (0, _useSeries.useSeries)();
   const {
-    xAxis,
+    xAxis
+  } = (0, _useAxis.useXAxes)();
+  const {
     yAxis
-  } = (0, _CartesianProvider.useCartesianContext)();
+  } = (0, _useAxis.useYAxes)();
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
+  } = (0, _useZAxis.useZAxes)();
   const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
   if (axisData === null) {
     return null;
@@ -70,12 +69,15 @@ function useAxisTooltip() {
           color,
           value,
           formattedValue,
-          formattedLabel
+          formattedLabel,
+          markType: seriesToAdd.labelMarkType
         };
       }
       return undefined;
     });
-  }).filter(item => item != null);
+  }).filter(function truthy(item) {
+    return Boolean(item);
+  });
   const axisFormatter = usedAxis.valueFormatter ?? (v => usedAxis.scaleType === 'utc' ? (0, _utils.utcFormatter)(v) : v.toLocaleString());
   const axisFormattedValue = axisFormatter(axisValue, {
     location: 'tooltip'

package/node/ChartsTooltip/useItemTooltip.js

@@ -1,72 +1,45 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useItemTooltip = useItemTooltip;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
 var _useSeries = require("../hooks/useSeries");
-var _CartesianProvider = require("../context/CartesianProvider");
-var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
-var _useColorProcessor = require("../context/PluginProvider/useColorProcessor");
-var _getLabel = require("../internals/getLabel");
-var _InteractionSelectors = require("../context/InteractionSelectors");
-var _useSelector = require("../internals/useSelector");
-var _useStore = require("../internals/useStore");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useSelector = require("../internals/store/useSelector");
+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() {
   const store = (0, _useStore.useStore)();
-  const item = (0, _useSelector.useSelector)(store, _InteractionSelectors.selectorChartsInteractionItem);
+  const identifier = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionItem);
+  const seriesConfig = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesConfig);
   const series = (0, _useSeries.useSeries)();
   const {
     xAxis,
+    xAxisIds
+  } = (0, _useAxis.useXAxes)();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+  } = (0, _useAxis.useYAxes)();
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
-  const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
+  } = (0, _useZAxis.useZAxes)();
   const xAxisId = series.xAxisId ?? xAxisIds[0];
   const yAxisId = series.yAxisId ?? yAxisIds[0];
   const zAxisId = series.zAxisId ?? zAxisIds[0];
-  if (!item || item.dataIndex === undefined) {
+  if (!identifier || identifier.dataIndex === undefined) {
     return null;
   }
-  const itemSeries = series[item.type].series[item.seriesId];
-  const getColor = colorProcessors[itemSeries.type]?.(itemSeries, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
-  if (itemSeries.type === 'pie') {
-    const point = itemSeries.data[item.dataIndex];
-    const label = (0, _getLabel.getLabel)(point.label, 'tooltip');
-    const value = (0, _extends2.default)({}, point, {
-      label
-    });
-    const formattedValue = itemSeries.valueFormatter?.(value, {
-      dataIndex: item.dataIndex
-    });
-    return {
-      identifier: item,
-      color: getColor(item.dataIndex),
-      label,
-      value,
-      formattedValue
-    };
-  }
-  const label = (0, _getLabel.getLabel)(itemSeries.label, 'tooltip');
-  const value = itemSeries.data[item.dataIndex];
-  const formattedValue = itemSeries.valueFormatter?.(value, {
-    dataIndex: item.dataIndex
+  const itemSeries = series[identifier.type].series[identifier.seriesId];
+  const getColor = seriesConfig[itemSeries.type].colorProcessor?.(itemSeries, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
+  return seriesConfig[itemSeries.type].tooltipGetter({
+    series: itemSeries,
+    getColor,
+    identifier
   });
-  return {
-    identifier: item,
-    color: getColor(item.dataIndex),
-    label,
-    value,
-    formattedValue
-  };
 }

package/node/ChartsTooltip/utils.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {