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

package/ChartsLabel/ChartsLabelGradient.js

@@ -7,20 +7,16 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
+import { useRtl } from '@mui/system/RtlProvider';
 import { useUtilityClasses, labelGradientClasses } from "./labelGradientClasses.js";
 import { consumeThemeProps } from "../internals/consumeThemeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-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 = styled('div', {
   name: 'MuiChartsLabelGradient',
@@ -29,7 +25,7 @@ const Root = 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',
@@ -79,9 +75,12 @@ const ChartsLabelGradient = consumeThemeProps('MuiChartsLabelGradient', {
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const isRtl = useRtl();
   return /*#__PURE__*/_jsx(Root, _extends({
     className: clsx(classes?.root, className),
-    ownerState: props,
+    ownerState: _extends({}, props, {
+      isRtl
+    }),
     "aria-hidden": "true",
     ref: ref
   }, other, {

package/ChartsLegend/ContinuousColorLegend.js

@@ -12,7 +12,7 @@ import { ChartsLabel } from "../ChartsLabel/ChartsLabel.js";
 import { ChartsLabelGradient } from "../ChartsLabel/ChartsLabelGradient.js";
 import { consumeThemeProps } from "../internals/consumeThemeProps.js";
 import { continuousColorLegendClasses, useUtilityClasses } from "./continuousColorLegendClasses.js";
-import { useChartGradientObjectBound } from "../internals/components/ChartsAxesGradients/index.js";
+import { useChartGradientIdObjectBoundBuilder } from "../hooks/useChartGradientId.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const templateAreas = reverse => {
   const startLabel = reverse ? 'max-label' : 'min-label';
@@ -146,7 +146,7 @@ const ContinuousColorLegend = consumeThemeProps('MuiContinuousColorLegend', {
       thickness
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const generateGradientId = useChartGradientObjectBound();
+  const generateGradientId = useChartGradientIdObjectBoundBuilder();
   const axisItem = useAxis({
     axisDirection,
     axisId
@@ -195,7 +195,7 @@ const ContinuousColorLegend = consumeThemeProps('MuiContinuousColorLegend', {
         rotate: rotateGradient,
         reverse: reverse,
         thickness: thickness,
-        gradientId: gradientId ?? generateGradientId(axisItem.id, axisDirection)
+        gradientId: gradientId ?? generateGradientId(axisItem.id)
       })
     }), reverse ? minComponent : maxComponent]
   }));

package/ChartsLegend/useAxis.js

@@ -1,7 +1,7 @@
 'use client';
 
-import { useCartesianContext } from "../context/CartesianProvider/useCartesianContext.js";
-import { useZAxis } from "../hooks/useZAxis.js";
+import { useZAxes } from "../hooks/useZAxis.js";
+import { useXAxes, useYAxes } from "../hooks/useAxis.js";
 /**
  * Helper to select an axis definition according to its direction and id.
  */
@@ -11,14 +11,16 @@ export function useAxis({
 }) {
   const {
     xAxis,
-    xAxisIds,
+    xAxisIds
+  } = useXAxes();
+  const {
     yAxis,
     yAxisIds
-  } = useCartesianContext();
+  } = useYAxes();
   const {
     zAxis,
     zAxisIds
-  } = useZAxis();
+  } = useZAxes();
   switch (axisDirection) {
     case 'x':
       {

package/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -3,8 +3,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useSeries } from "../hooks/useSeries.js";
-import { useSvgRef } from "../hooks/index.js";
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { useSvgRef, useXAxes, useYAxes } from "../hooks/index.js";
 import { useStore } from "../internals/store/useStore.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsOnAxisClickHandler(props) {
@@ -15,11 +14,13 @@ function ChartsOnAxisClickHandler(props) {
   const series = useSeries();
   const store = useStore();
   const {
-    xAxisIds,
     xAxis,
-    yAxisIds,
-    yAxis
-  } = useCartesianContext();
+    xAxisIds
+  } = useXAxes();
+  const {
+    yAxis,
+    yAxisIds
+  } = useYAxes();
   React.useEffect(() => {
     const element = svgRef.current;
     if (element === null || !onAxisClick) {

package/ChartsSurface/ChartsSurface.js

@@ -9,8 +9,10 @@ import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import { useAxisEvents } from "../hooks/useAxisEvents.js";
 import { ChartsAxesGradients } from "../internals/components/ChartsAxesGradients/index.js";
-import { useDrawingArea, useSvgRef } from "../hooks/index.js";
-import { useSize } from "../context/SizeProvider/index.js";
+import { useSvgRef } from "../hooks/useSvgRef.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+import { selectorChartContainerSize, selectorChartPropsSize } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartsSurfaceStyles = styled('svg', {
   name: 'MuiChartsSurface',
@@ -46,22 +48,17 @@ const ChartsSurfaceStyles = styled('svg', {
  * - [ChartsSurface API](https://mui.com/x/api/charts/charts-surface/)
  */
 const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inProps, ref) {
+  const store = useStore();
   const {
-    width,
-    height,
-    left,
-    right,
-    top,
-    bottom
-  } = useDrawingArea();
+    width: svgWidth,
+    height: svgHeight
+  } = useSelector(store, selectorChartContainerSize);
   const {
-    hasIntrinsicSize,
-    svgRef: containerRef,
-    inHeight,
-    inWidth
-  } = useSize();
+    width: propsWidth,
+    height: propsHeight
+  } = useSelector(store, selectorChartPropsSize);
   const svgRef = useSvgRef();
-  const handleRef = useForkRef(containerRef, svgRef, ref);
+  const handleRef = useForkRef(svgRef, ref);
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiChartsSurface'
@@ -74,21 +71,14 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
       desc
     } = themeProps,
     other = _objectWithoutPropertiesLoose(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;
   useAxisEvents(disableAxisListener);
   return /*#__PURE__*/_jsxs(ChartsSurfaceStyles, _extends({
     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/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -5,9 +5,10 @@ import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import clsx from 'clsx';
 import { useUtilityClasses } from "./chartsTooltipClasses.js";
-import { ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow, ChartsTooltipTable } from "./ChartsTooltipTable.js";
+import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipRow, ChartsTooltipTable } from "./ChartsTooltipTable.js";
 import { useAxisTooltip } from "./useAxisTooltip.js";
 import { useXAxis, useYAxis } from "../hooks/index.js";
+import { ChartsLabelMark } from "../ChartsLabel/ChartsLabelMark.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function ChartsAxisTooltipContent(props) {
   const {
@@ -49,7 +50,8 @@ function ChartsAxisTooltipContent(props) {
           seriesId,
           color,
           formattedValue,
-          formattedLabel
+          formattedLabel,
+          markType
         }) => {
           if (formattedValue == null) {
             return null;
@@ -58,7 +60,8 @@ function ChartsAxisTooltipContent(props) {
             className: classes.row,
             children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
               className: clsx(classes.markCell, classes.cell),
-              children: color && /*#__PURE__*/_jsx(ChartsTooltipMark, {
+              children: color && /*#__PURE__*/_jsx(ChartsLabelMark, {
+                type: markType,
                 color: color,
                 className: classes.mark
               })

package/ChartsTooltip/ChartsItemTooltipContent.js

@@ -5,7 +5,8 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useUtilityClasses } from "./chartsTooltipClasses.js";
 import { useItemTooltip } from "./useItemTooltip.js";
-import { ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow, ChartsTooltipTable } from "./ChartsTooltipTable.js";
+import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipRow, ChartsTooltipTable } from "./ChartsTooltipTable.js";
+import { ChartsLabelMark } from "../ChartsLabel/ChartsLabelMark.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function ChartsItemTooltipContent(props) {
   const {
@@ -20,7 +21,8 @@ function ChartsItemTooltipContent(props) {
   const {
     color,
     label,
-    formattedValue
+    formattedValue,
+    markType
   } = tooltipData;
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
@@ -32,7 +34,8 @@ function ChartsItemTooltipContent(props) {
           className: classes.row,
           children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
             className: clsx(classes.markCell, classes.cell),
-            children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
+            children: /*#__PURE__*/_jsx(ChartsLabelMark, {
+              type: markType,
               color: color,
               className: classes.mark
             })

package/ChartsTooltip/ChartsTooltipTable.d.ts

@@ -14,9 +14,3 @@ export declare const ChartsTooltipRow: import("@emotion/styled").StyledComponent
  * @ignore - internal component.
  */
 export declare const ChartsTooltipCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, keyof import("react").ClassAttributes<HTMLTableDataCellElement> | keyof import("react").TdHTMLAttributes<HTMLTableDataCellElement>>, {}>;
-/**
- * @ignore - internal component.
- */
-export declare const ChartsTooltipMark: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    color: string;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/ChartsTooltip/ChartsTooltipTable.js

@@ -1,5 +1,4 @@
 import { styled } from '@mui/material/styles';
-import { shouldForwardProp } from '@mui/system/createStyled';
 import { chartsTooltipClasses } from "./chartsTooltipClasses.js";
 
 /**
@@ -83,23 +82,4 @@ export const ChartsTooltipCell = styled('td', {
   'td:last-of-type&': {
     paddingRight: theme.spacing(1.5)
   }
-}));
-
-/**
- * @ignore - internal component.
- */
-export const ChartsTooltipMark = styled('div', {
-  name: 'MuiChartsTooltip',
-  slot: 'Mark',
-  overridesResolver: (props, styles) => styles.mark,
-  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'color'
-})(({
-  theme,
-  color
-}) => ({
-  width: theme.spacing(1),
-  height: theme.spacing(1),
-  borderRadius: '50%',
-  background: color,
-  boxSizing: 'content-box'
 }));

package/ChartsTooltip/useAxisTooltip.d.ts

@@ -1,5 +1,6 @@
 import { SeriesId } from '../models/seriesType/common';
 import { CartesianChartSeriesType, ChartsSeriesConfig } from '../models/seriesType/config';
+import { ChartsLabelMarkProps } from '../ChartsLabel';
 export interface UseAxisTooltipReturnValue<SeriesT extends CartesianChartSeriesType = CartesianChartSeriesType, AxisValueT extends string | number | Date = string | number | Date> {
     axisDirection: 'x' | 'y';
     dataIndex: number;
@@ -13,6 +14,7 @@ interface SeriesItem<T extends CartesianChartSeriesType> {
     value: ChartsSeriesConfig[T]['valueType'];
     formattedValue: string;
     formattedLabel: string | null;
+    markType: ChartsLabelMarkProps['type'];
 }
-export declare function useAxisTooltip(): null | UseAxisTooltipReturnValue;
+export declare function useAxisTooltip(): UseAxisTooltipReturnValue | null;
 export {};

package/ChartsTooltip/useAxisTooltip.js

@@ -1,15 +1,14 @@
 'use client';
 
 import { useSeries } from "../hooks/useSeries.js";
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
+import { useColorProcessor } from "../internals/plugins/corePlugins/useChartSeries/useColorProcessor.js";
 import { useStore } from "../internals/store/useStore.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { getLabel } from "../internals/getLabel.js";
 import { isCartesianSeriesType } from "../internals/isCartesian.js";
 import { utcFormatter } from "./utils.js";
-import { useXAxis, useYAxis } from "../hooks/useAxis.js";
-import { useZAxis } from "../hooks/useZAxis.js";
+import { useXAxes, useXAxis, useYAxes, useYAxis } from "../hooks/useAxis.js";
+import { useZAxes } from "../hooks/useZAxis.js";
 import { selectorChartsInteractionXAxis, selectorChartsInteractionYAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 export function useAxisTooltip() {
   const defaultXAxis = useXAxis();
@@ -19,13 +18,15 @@ export function useAxisTooltip() {
   const axisData = useSelector(store, xAxisHasData ? selectorChartsInteractionXAxis : selectorChartsInteractionYAxis);
   const series = useSeries();
   const {
-    xAxis,
+    xAxis
+  } = useXAxes();
+  const {
     yAxis
-  } = useCartesianContext();
+  } = useYAxes();
   const {
     zAxis,
     zAxisIds
-  } = useZAxis();
+  } = useZAxes();
   const colorProcessors = useColorProcessor();
   if (axisData === null) {
     return null;
@@ -63,12 +64,15 @@ export 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' ? utcFormatter(v) : v.toLocaleString());
   const axisFormattedValue = axisFormatter(axisValue, {
     location: 'tooltip'

package/ChartsTooltip/useItemTooltip.d.ts

@@ -1,9 +1,11 @@
 import { ChartItemIdentifier, ChartSeriesType, ChartsSeriesConfig } from '../models/seriesType/config';
+import { ChartsLabelMarkProps } from '../ChartsLabel';
 export interface UseItemTooltipReturnValue<T extends ChartSeriesType> {
     identifier: ChartItemIdentifier<T>;
     color: string;
     label: string | undefined;
     value: ChartsSeriesConfig[T]['valueType'];
-    formattedValue: string | undefined;
+    formattedValue: string | null;
+    markType: ChartsLabelMarkProps['type'];
 }
 export declare function useItemTooltip<T extends ChartSeriesType>(): null | UseItemTooltipReturnValue<T>;

package/ChartsTooltip/useItemTooltip.js

@@ -2,27 +2,29 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { useSeries } from "../hooks/useSeries.js";
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
+import { useColorProcessor } from "../internals/plugins/corePlugins/useChartSeries/useColorProcessor.js";
 import { getLabel } from "../internals/getLabel.js";
 import { selectorChartsInteractionItem } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
-import { useZAxis } from "../hooks/useZAxis.js";
+import { useXAxes, useYAxes } from "../hooks/useAxis.js";
+import { useZAxes } from "../hooks/useZAxis.js";
 export function useItemTooltip() {
   const store = useStore();
   const item = useSelector(store, selectorChartsInteractionItem);
   const series = useSeries();
   const {
     xAxis,
+    xAxisIds
+  } = useXAxes();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = useCartesianContext();
+  } = useYAxes();
   const {
     zAxis,
     zAxisIds
-  } = useZAxis();
+  } = useZAxes();
   const colorProcessors = useColorProcessor();
   const xAxisId = series.xAxisId ?? xAxisIds[0];
   const yAxisId = series.yAxisId ?? yAxisIds[0];
@@ -38,7 +40,7 @@ export function useItemTooltip() {
     const value = _extends({}, point, {
       label
     });
-    const formattedValue = itemSeries.valueFormatter?.(value, {
+    const formattedValue = itemSeries.valueFormatter(value, {
       dataIndex: item.dataIndex
     });
     return {
@@ -46,12 +48,13 @@ export function useItemTooltip() {
       color: getColor(item.dataIndex),
       label,
       value,
-      formattedValue
+      formattedValue,
+      markType: point.labelMarkType ?? itemSeries.labelMarkType
     };
   }
   const label = getLabel(itemSeries.label, 'tooltip');
   const value = itemSeries.data[item.dataIndex];
-  const formattedValue = itemSeries.valueFormatter?.(value, {
+  const formattedValue = itemSeries.valueFormatter(value, {
     dataIndex: item.dataIndex
   });
   return {
@@ -59,6 +62,7 @@ export function useItemTooltip() {
     color: getColor(item.dataIndex),
     label,
     value,
-    formattedValue
+    formattedValue,
+    markType: itemSeries.labelMarkType
   };
 }

package/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -5,13 +5,15 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Delaunay } from '@mui/x-charts-vendor/d3-delaunay';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { getValueToPositionMapper } from "../hooks/useScale.js";
 import { useStore } from "../internals/store/useStore.js";
 import { getSVGPoint } from "../internals/getSVGPoint.js";
-import { useDrawingArea, useSvgRef } from "../hooks/index.js";
-import { useHighlighted } from "../context/index.js";
+import { useHighlighted } from "../context/HighlightedProvider/index.js";
 import { useScatterSeries } from "../hooks/useSeries.js";
+import { useChartContext } from "../context/ChartProvider/useChartContext.js";
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
+import { useSvgRef } from "../hooks/useSvgRef.js";
+import { useXAxes, useYAxes } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsVoronoiHandler(props) {
   const {
@@ -20,12 +22,17 @@ function ChartsVoronoiHandler(props) {
   } = props;
   const svgRef = useSvgRef();
   const drawingArea = useDrawingArea();
+  const {
+    instance
+  } = useChartContext();
   const {
     xAxis,
+    xAxisIds
+  } = useXAxes();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = useCartesianContext();
+  } = useYAxes();
   const store = useStore();
   const {
     series,
@@ -79,7 +86,7 @@ function ChartsVoronoiHandler(props) {
       }) => {
         const pointX = getXPosition(x);
         const pointY = getYPosition(y);
-        if (!drawingArea.isPointInside({
+        if (!instance.isPointInside({
           x: pointX,
           y: pointY
         })) {
@@ -99,7 +106,7 @@ function ChartsVoronoiHandler(props) {
     });
     delauneyRef.current = new 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;
@@ -108,7 +115,7 @@ function ChartsVoronoiHandler(props) {
     function getClosestPoint(event) {
       // Get mouse coordinate in global SVG space
       const svgPoint = getSVGPoint(element, event);
-      if (!drawingArea.isPointInside(svgPoint)) {
+      if (!instance.isPointInside(svgPoint)) {
         lastFind.current = undefined;
         return 'outside-chart';
       }
@@ -222,7 +229,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__*/_jsx(React.Fragment, {});

package/ChartsXAxis/ChartsXAxis.js

@@ -8,7 +8,6 @@ import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, useTheme, styled } from '@mui/material/styles';
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { useTicks } from "../hooks/useTicks.js";
 import { getAxisUtilityClass } from "../ChartsAxis/axisClasses.js";
 import { AxisRoot } from "../internals/components/AxisSharedComponents.js";
@@ -19,6 +18,8 @@ import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { getWordsByLines } from "../internals/getWordsByLines.js";
 import { isInfinity } from "../internals/isInfinity.js";
 import { isBandScale } from "../internals/isBandScale.js";
+import { useChartContext } from "../context/ChartProvider/useChartContext.js";
+import { useXAxes } from "../hooks/useAxis.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -114,9 +115,9 @@ const defaultProps = {
  */
 function ChartsXAxis(inProps) {
   const {
-    xAxisIds,
-    xAxis
-  } = useCartesianContext();
+    xAxis,
+    xAxisIds
+  } = useXAxes();
   const _xAxis = xAxis[inProps.axisId ?? xAxisIds[0]],
     {
       scale: xScale,
@@ -155,9 +156,11 @@ function ChartsXAxis(inProps) {
     left,
     top,
     width,
-    height,
-    isPointInside
+    height
   } = useDrawingArea();
+  const {
+    instance
+  } = useChartContext();
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const positionSign = position === 'bottom' ? 1 : -1;
   const Line = slots?.axisLine ?? 'line';
@@ -231,13 +234,13 @@ function ChartsXAxis(inProps) {
     }, index) => {
       const xTickLabel = labelOffset ?? 0;
       const yTickLabel = positionSign * (tickSize + 3);
-      const showTick = isPointInside({
+      const showTick = instance.isPointInside({
         x: offset,
         y: -1
       }, {
         direction: 'x'
       });
-      const showTickLabel = isPointInside({
+      const showTickLabel = instance.isPointInside({
         x: offset + xTickLabel,
         y: -1
       }, {

package/ChartsYAxis/ChartsYAxis.js

@@ -9,7 +9,6 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, useTheme, styled } from '@mui/material/styles';
 import { useRtl } from '@mui/system/RtlProvider';
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { useTicks } from "../hooks/useTicks.js";
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { AxisRoot } from "../internals/components/AxisSharedComponents.js";
@@ -17,6 +16,8 @@ import { ChartsText } from "../ChartsText/index.js";
 import { getAxisUtilityClass } from "../ChartsAxis/axisClasses.js";
 import { isInfinity } from "../internals/isInfinity.js";
 import { isBandScale } from "../internals/isBandScale.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
+import { useYAxes } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -58,7 +59,7 @@ function ChartsYAxis(inProps) {
   const {
     yAxisIds,
     yAxis
-  } = useCartesianContext();
+  } = useYAxes();
   const _yAxis = yAxis[inProps.axisId ?? yAxisIds[0]],
     {
       scale: yScale,
@@ -92,12 +93,14 @@ function ChartsYAxis(inProps) {
   const classes = useUtilityClasses(_extends({}, defaultizedProps, {
     theme
   }));
+  const {
+    instance
+  } = useChartContext();
   const {
     left,
     top,
     width,
-    height,
-    isPointInside
+    height
   } = useDrawingArea();
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const yTicks = useTicks({
@@ -178,7 +181,7 @@ function ChartsYAxis(inProps) {
       const xTickLabel = positionSign * (tickSize + 2);
       const yTickLabel = labelOffset;
       const skipLabel = typeof tickLabelInterval === 'function' && !tickLabelInterval?.(value, index);
-      const showLabel = isPointInside({
+      const showLabel = instance.isPointInside({
         x: -1,
         y: offset
       }, {