@mui/x-charts 8.0.0-alpha.7 → 8.0.0-alpha.8

package/node/ChartContainer/useChartContainerProps.js

@@ -8,7 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useChartContainerProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "xAxis", "yAxis", "zAxis", "skipAnimation"];
+var _allPlugins = require("../internals/plugins/allPlugins");
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "skipAnimation", "seriesConfig"];
 const useChartContainerProps = (props, ref) => {
   const {
       width,
@@ -22,13 +23,13 @@ const useChartContainerProps = (props, ref) => {
       disableAxisListener,
       highlightedItem,
       onHighlightChange,
-      plugins,
       sx,
       title,
       xAxis,
       yAxis,
       zAxis,
-      skipAnimation
+      skipAnimation,
+      seriesConfig
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const chartsSurfaceProps = (0, _extends2.default)({
@@ -45,13 +46,14 @@ const useChartContainerProps = (props, ref) => {
     dataset,
     highlightedItem,
     onHighlightChange,
-    plugins,
     xAxis,
     yAxis,
     zAxis,
     skipAnimation,
     width,
-    height
+    height,
+    seriesConfig,
+    plugins: _allPlugins.ALL_PLUGINS
   };
   return {
     chartDataProviderProps,

package/node/ChartsAxis/ChartsAxis.js

@@ -10,9 +10,9 @@ exports.ChartsAxis = ChartsAxis;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _CartesianProvider = require("../context/CartesianProvider");
 var _ChartsXAxis = require("../ChartsXAxis");
 var _ChartsYAxis = require("../ChartsYAxis");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const getAxisId = (propsValue, defaultAxisId) => {
   if (propsValue == null) {
@@ -53,10 +53,12 @@ function ChartsAxis(props) {
   } = props;
   const {
     xAxis,
-    xAxisIds,
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
     yAxis,
     yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+  } = (0, _hooks.useYAxes)();
   const leftId = getAxisId(leftAxis === undefined ? yAxisIds[0] : leftAxis, yAxisIds[0]);
   const bottomId = getAxisId(bottomAxis === undefined ? xAxisIds[0] : bottomAxis, xAxisIds[0]);
   const topId = getAxisId(topAxis, xAxisIds[0]);

package/node/ChartsGrid/ChartsGrid.js

@@ -13,12 +13,12 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
-var _CartesianProvider = require("../context/CartesianProvider");
 var _chartsGridClasses = require("./chartsGridClasses");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _styledComponents = require("./styledComponents");
 var _ChartsVerticalGrid = require("./ChartsVerticalGrid");
 var _ChartsHorizontalGrid = require("./ChartsHorizontalGrid");
+var _useAxis = require("../hooks/useAxis");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["vertical", "horizontal"];
 const useUtilityClasses = ({
@@ -53,10 +53,12 @@ function ChartsGrid(inProps) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
     xAxis,
-    xAxisIds,
+    xAxisIds
+  } = (0, _useAxis.useXAxes)();
+  const {
     yAxis,
     yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+  } = (0, _useAxis.useYAxes)();
   const classes = useUtilityClasses(props);
   const horizontalAxis = yAxis[yAxisIds[0]];
   const verticalAxis = xAxis[xAxisIds[0]];
@@ -64,11 +66,13 @@ function ChartsGrid(inProps) {
     className: classes.root,
     children: [vertical && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVerticalGrid.ChartsGridVertical, {
       axis: verticalAxis,
-      drawingArea: drawingArea,
+      start: drawingArea.top,
+      end: drawingArea.height + drawingArea.top,
       classes: classes
     }), horizontal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsHorizontalGrid.ChartsGridHorizontal, {
       axis: horizontalAxis,
-      drawingArea: drawingArea,
+      start: drawingArea.left,
+      end: drawingArea.width + drawingArea.left,
       classes: classes
     })]
   }));

package/node/ChartsGrid/ChartsHorizontalGrid.js

@@ -15,7 +15,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 function ChartsGridHorizontal(props) {
   const {
     axis,
-    drawingArea,
+    start,
+    end,
     classes
   } = props;
   const {
@@ -35,8 +36,8 @@ function ChartsGridHorizontal(props) {
     }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.GridLine, {
       y1: offset,
       y2: offset,
-      x1: drawingArea.left,
-      x2: drawingArea.left + drawingArea.width,
+      x1: start,
+      x2: end,
       className: classes.horizontalLine
     }, `horizontal-${value}`))
   });

package/node/ChartsGrid/ChartsVerticalGrid.js

@@ -15,7 +15,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 function ChartsGridVertical(props) {
   const {
     axis,
-    drawingArea,
+    start,
+    end,
     classes
   } = props;
   const {
@@ -33,8 +34,8 @@ function ChartsGridVertical(props) {
       value,
       offset
     }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.GridLine, {
-      y1: drawingArea.top,
-      y2: drawingArea.top + drawingArea.height,
+      y1: start,
+      y2: end,
       x1: offset,
       x2: offset,
       className: classes.verticalLine

package/node/ChartsLabel/ChartsLabelGradient.js

@@ -13,21 +13,17 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _clsx = _interopRequireDefault(require("clsx"));
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _labelGradientClasses = require("./labelGradientClasses");
 var _consumeThemeProps = require("../internals/consumeThemeProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["gradientId", "direction", "classes", "className", "rotate", "reverse", "thickness"];
-const getRotation = (direction, reverse, rotate) => {
-  if (!rotate && reverse) {
-    return direction === 'vertical' ? 90 : 180;
+const getRotation = (direction, reverse, rotate, isRtl) => {
+  const angle = (direction === 'vertical' ? -90 : 0) + (rotate ? 90 : 0) + (reverse ? 180 : 0);
+  if (isRtl && direction !== 'vertical') {
+    return angle + 180;
   }
-  if (rotate && !reverse) {
-    return direction === 'vertical' ? 0 : 90;
-  }
-  if (rotate && reverse) {
-    return direction === 'vertical' ? 180 : -90;
-  }
-  return direction === 'vertical' ? -90 : 0;
+  return angle;
 };
 const Root = (0, _styles.styled)('div', {
   name: 'MuiChartsLabelGradient',
@@ -36,7 +32,7 @@ const Root = (0, _styles.styled)('div', {
 })(({
   ownerState
 }) => {
-  const rotation = getRotation(ownerState.direction, ownerState.reverse, ownerState.rotate);
+  const rotation = getRotation(ownerState.direction, ownerState.reverse, ownerState.rotate, ownerState.isRtl);
   return {
     display: 'flex',
     alignItems: 'center',
@@ -86,9 +82,12 @@ const ChartsLabelGradient = exports.ChartsLabelGradient = (0, _consumeThemeProps
       className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const isRtl = (0, _RtlProvider.useRtl)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({
     className: (0, _clsx.default)(classes?.root, className),
-    ownerState: props,
+    ownerState: (0, _extends2.default)({}, props, {
+      isRtl
+    }),
     "aria-hidden": "true",
     ref: ref
   }, other, {

package/node/ChartsLegend/ContinuousColorLegend.js

@@ -18,7 +18,7 @@ var _ChartsLabel = require("../ChartsLabel/ChartsLabel");
 var _ChartsLabelGradient = require("../ChartsLabel/ChartsLabelGradient");
 var _consumeThemeProps = require("../internals/consumeThemeProps");
 var _continuousColorLegendClasses = require("./continuousColorLegendClasses");
-var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
+var _useChartGradientId = require("../hooks/useChartGradientId");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["minLabel", "maxLabel", "direction", "axisDirection", "axisId", "rotateGradient", "reverse", "classes", "className", "gradientId", "labelPosition", "thickness"];
 const templateAreas = reverse => {
@@ -153,7 +153,7 @@ const ContinuousColorLegend = exports.ContinuousColorLegend = (0, _consumeThemeP
       thickness
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const generateGradientId = (0, _ChartsAxesGradients.useChartGradientObjectBound)();
+  const generateGradientId = (0, _useChartGradientId.useChartGradientIdObjectBoundBuilder)();
   const axisItem = (0, _useAxis.useAxis)({
     axisDirection,
     axisId
@@ -202,7 +202,7 @@ const ContinuousColorLegend = exports.ContinuousColorLegend = (0, _consumeThemeP
         rotate: rotateGradient,
         reverse: reverse,
         thickness: thickness,
-        gradientId: gradientId ?? generateGradientId(axisItem.id, axisDirection)
+        gradientId: gradientId ?? generateGradientId(axisItem.id)
       })
     }), reverse ? minComponent : maxComponent]
   }));

package/node/ChartsLegend/useAxis.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useAxis = useAxis;
-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.
  */
@@ -16,14 +16,16 @@ function useAxis({
 }) {
   const {
     xAxis,
-    xAxisIds,
+    xAxisIds
+  } = (0, _useAxis.useXAxes)();
+  const {
     yAxis,
     yAxisIds
-  } = (0, _useCartesianContext.useCartesianContext)();
+  } = (0, _useAxis.useYAxes)();
   const {
     zAxis,
     zAxisIds
-  } = (0, _useZAxis.useZAxis)();
+  } = (0, _useZAxis.useZAxes)();
   switch (axisDirection) {
     case 'x':
       {

package/node/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -11,7 +11,6 @@ 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/store/useStore");
 var _jsxRuntime = require("react/jsx-runtime");
 function ChartsOnAxisClickHandler(props) {
@@ -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,8 +15,10 @@ 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 _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', {
@@ -53,22 +55,17 @@ const ChartsSurfaceStyles = (0, _styles.styled)('svg', {
  * - [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,
-    svgRef: containerRef,
-    inHeight,
-    inWidth
-  } = (0, _SizeProvider.useSize)();
-  const svgRef = (0, _hooks.useSvgRef)();
-  const handleRef = (0, _useForkRef.default)(containerRef, svgRef, 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'
@@ -81,21 +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)({
     ownerState: {
-      width: inWidth,
-      height: inHeight
+      width: propsWidth,
+      height: propsHeight
     },
-    viewBox: `${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`,
+    viewBox: `${0} ${0} ${svgWidth} ${svgHeight}`,
     className: className
   }, other, {
     ref: handleRef,

package/node/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -15,6 +15,7 @@ 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 {
@@ -56,7 +57,8 @@ function ChartsAxisTooltipContent(props) {
           seriesId,
           color,
           formattedValue,
-          formattedLabel
+          formattedLabel,
+          markType
         }) => {
           if (formattedValue == null) {
             return null;
@@ -65,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/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 _createStyled = require("@mui/system/createStyled");
 var _chartsTooltipClasses = require("./chartsTooltipClasses");
 /**
  * @ignore - internal component.
@@ -88,23 +87,4 @@ const ChartsTooltipCell = exports.ChartsTooltipCell = (0, _styles.styled)('td',
   'td:last-of-type&': {
     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, _createStyled.shouldForwardProp)(prop) && prop !== 'color'
-})(({
-  theme,
-  color
-}) => ({
-  width: theme.spacing(1),
-  height: theme.spacing(1),
-  borderRadius: '50%',
-  background: color,
-  boxSizing: 'content-box'
 }));

package/node/ChartsTooltip/useAxisTooltip.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useAxisTooltip = useAxisTooltip;
 var _useSeries = require("../hooks/useSeries");
-var _CartesianProvider = require("../context/CartesianProvider");
-var _useColorProcessor = require("../context/PluginProvider/useColorProcessor");
+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");
@@ -24,13 +23,15 @@ function useAxisTooltip() {
   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
-  } = (0, _useZAxis.useZAxis)();
+  } = (0, _useZAxis.useZAxes)();
   const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
   if (axisData === null) {
     return null;
@@ -68,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

@@ -8,12 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.useItemTooltip = useItemTooltip;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useSeries = require("../hooks/useSeries");
-var _CartesianProvider = require("../context/CartesianProvider");
-var _useColorProcessor = require("../context/PluginProvider/useColorProcessor");
+var _useColorProcessor = require("../internals/plugins/corePlugins/useChartSeries/useColorProcessor");
 var _getLabel = require("../internals/getLabel");
 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");
 function useItemTooltip() {
   const store = (0, _useStore.useStore)();
@@ -21,14 +21,16 @@ function useItemTooltip() {
   const series = (0, _useSeries.useSeries)();
   const {
     xAxis,
+    xAxisIds
+  } = (0, _useAxis.useXAxes)();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+  } = (0, _useAxis.useYAxes)();
   const {
     zAxis,
     zAxisIds
-  } = (0, _useZAxis.useZAxis)();
+  } = (0, _useZAxis.useZAxes)();
   const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
   const xAxisId = series.xAxisId ?? xAxisIds[0];
   const yAxisId = series.yAxisId ?? yAxisIds[0];
@@ -44,7 +46,7 @@ function useItemTooltip() {
     const value = (0, _extends2.default)({}, point, {
       label
     });
-    const formattedValue = itemSeries.valueFormatter?.(value, {
+    const formattedValue = itemSeries.valueFormatter(value, {
       dataIndex: item.dataIndex
     });
     return {
@@ -52,12 +54,13 @@ function useItemTooltip() {
       color: getColor(item.dataIndex),
       label,
       value,
-      formattedValue
+      formattedValue,
+      markType: point.labelMarkType ?? itemSeries.labelMarkType
     };
   }
   const label = (0, _getLabel.getLabel)(itemSeries.label, 'tooltip');
   const value = itemSeries.data[item.dataIndex];
-  const formattedValue = itemSeries.valueFormatter?.(value, {
+  const formattedValue = itemSeries.valueFormatter(value, {
     dataIndex: item.dataIndex
   });
   return {
@@ -65,6 +68,7 @@ function useItemTooltip() {
     color: getColor(item.dataIndex),
     label,
     value,
-    formattedValue
+    formattedValue,
+    markType: itemSeries.labelMarkType
   };
 }

package/node/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -12,27 +12,34 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _d3Delaunay = require("@mui/x-charts-vendor/d3-delaunay");
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
-var _CartesianProvider = require("../context/CartesianProvider");
 var _useScale = require("../hooks/useScale");
 var _useStore = require("../internals/store/useStore");
 var _getSVGPoint = require("../internals/getSVGPoint");
-var _hooks = require("../hooks");
-var _context = require("../context");
+var _HighlightedProvider = require("../context/HighlightedProvider");
 var _useSeries = require("../hooks/useSeries");
+var _useChartContext = require("../context/ChartProvider/useChartContext");
+var _useDrawingArea = require("../hooks/useDrawingArea");
+var _useSvgRef = require("../hooks/useSvgRef");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 function ChartsVoronoiHandler(props) {
   const {
     voronoiMaxRadius,
     onItemClick
   } = props;
-  const svgRef = (0, _hooks.useSvgRef)();
-  const drawingArea = (0, _hooks.useDrawingArea)();
+  const svgRef = (0, _useSvgRef.useSvgRef)();
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
+  const {
+    instance
+  } = (0, _useChartContext.useChartContext)();
   const {
     xAxis,
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+  } = (0, _hooks.useYAxes)();
   const store = (0, _useStore.useStore)();
   const {
     series,
@@ -44,7 +51,7 @@ function ChartsVoronoiHandler(props) {
   const {
     setHighlighted,
     clearHighlighted
-  } = (0, _context.useHighlighted)();
+  } = (0, _HighlightedProvider.useHighlighted)();
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   (0, _useEnhancedEffect.default)(() => {
@@ -86,7 +93,7 @@ function ChartsVoronoiHandler(props) {
       }) => {
         const pointX = getXPosition(x);
         const pointY = getYPosition(y);
-        if (!drawingArea.isPointInside({
+        if (!instance.isPointInside({
           x: pointX,
           y: pointY
         })) {
@@ -106,7 +113,7 @@ function ChartsVoronoiHandler(props) {
     });
     delauneyRef.current = new _d3Delaunay.Delaunay(points);
     lastFind.current = undefined;
-  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis, drawingArea]);
+  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis, drawingArea, instance]);
   React.useEffect(() => {
     if (svgRef.current === null) {
       return undefined;
@@ -115,7 +122,7 @@ function ChartsVoronoiHandler(props) {
     function getClosestPoint(event) {
       // Get mouse coordinate in global SVG space
       const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event);
-      if (!drawingArea.isPointInside(svgPoint)) {
+      if (!instance.isPointInside(svgPoint)) {
         lastFind.current = undefined;
         return 'outside-chart';
       }
@@ -229,7 +236,7 @@ function ChartsVoronoiHandler(props) {
       element.removeEventListener('pointermove', handleMouseMove);
       element.removeEventListener('click', handleMouseClick);
     };
-  }, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, setHighlighted, clearHighlighted, drawingArea, store]);
+  }, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, setHighlighted, clearHighlighted, drawingArea, store, instance]);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {});