@mui/x-charts 8.0.0-alpha.0 → 8.0.0-alpha.2

package/node/context/DrawingAreaProvider/DrawingArea.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/context/DrawingAreaProvider/DrawingAreaContext.js

@@ -0,0 +1,21 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawingAreaContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+const DrawingAreaContext = exports.DrawingAreaContext = /*#__PURE__*/React.createContext({
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  height: 300,
+  width: 400,
+  isPointInside: () => false
+});
+if (process.env.NODE_ENV !== 'production') {
+  DrawingAreaContext.displayName = 'DrawingContext';
+}

package/node/context/{DrawingProvider.js → DrawingAreaProvider/DrawingAreaProvider.js}

@@ -6,48 +6,23 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DrawingContext = void 0;
-exports.DrawingProvider = DrawingProvider;
-exports.SvgContext = void 0;
+exports.DrawingAreaProvider = DrawingAreaProvider;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
-var _useChartDimensions = _interopRequireDefault(require("../hooks/useChartDimensions"));
+var _useChartDimensions = _interopRequireDefault(require("../../hooks/useChartDimensions"));
+var _DrawingAreaContext = require("./DrawingAreaContext");
+var _SizeProvider = require("../SizeProvider");
 var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Defines the area in which it is possible to draw the charts.
- */
-
-const DrawingContext = exports.DrawingContext = /*#__PURE__*/React.createContext({
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
-  height: 300,
-  width: 400,
-  chartId: '',
-  isPointInside: () => false
-});
-if (process.env.NODE_ENV !== 'production') {
-  DrawingContext.displayName = 'DrawingContext';
-}
-const SvgContext = exports.SvgContext = /*#__PURE__*/React.createContext({
-  isInitialized: false,
-  data: {
-    current: null
-  }
-});
-if (process.env.NODE_ENV !== 'production') {
-  SvgContext.displayName = 'SvgContext';
-}
-function DrawingProvider(props) {
+function DrawingAreaProvider(props) {
   const {
-    width,
-    height,
     margin,
-    svgRef,
     children
   } = props;
+  const {
+    width,
+    height
+  } = (0, _SizeProvider.useSize)();
   const drawingArea = (0, _useChartDimensions.default)(width, height, margin);
   const chartId = (0, _useId.default)();
   const isPointInside = React.useCallback(({
@@ -73,15 +48,8 @@ function DrawingProvider(props) {
   }, drawingArea, {
     isPointInside
   }), [chartId, drawingArea, isPointInside]);
-  const refValue = React.useMemo(() => ({
-    isInitialized: true,
-    data: svgRef
-  }), [svgRef]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SvgContext.Provider, {
-    value: refValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawingContext.Provider, {
-      value: value,
-      children: children
-    })
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingAreaContext.DrawingAreaContext.Provider, {
+    value: value,
+    children: children
   });
 }

package/node/context/DrawingAreaProvider/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _DrawingArea = require("./DrawingArea.types");
+Object.keys(_DrawingArea).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DrawingArea[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DrawingArea[key];
+    }
+  });
+});
+var _DrawingAreaProvider = require("./DrawingAreaProvider");
+Object.keys(_DrawingAreaProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DrawingAreaProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DrawingAreaProvider[key];
+    }
+  });
+});
+var _DrawingAreaContext = require("./DrawingAreaContext");
+Object.keys(_DrawingAreaContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DrawingAreaContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DrawingAreaContext[key];
+    }
+  });
+});

package/node/context/InteractionSelectors.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorChartsInteractionYAxisIsDefined = exports.selectorChartsInteractionYAxis = exports.selectorChartsInteractionXAxisIsDefined = exports.selectorChartsInteractionXAxis = exports.selectorChartsInteractionItemIsDefined = exports.selectorChartsInteractionItem = exports.selectorChartsInteractionIsVoronoiEnabled = exports.selectorChartsInteractionAxis = void 0;
+var _selectors = require("../internals/plugins/utils/selectors");
+function selectInteraction(state) {
+  return state.interaction;
+}
+const selectorChartsInteractionItem = exports.selectorChartsInteractionItem = (0, _selectors.createSelector)(selectInteraction, interaction => interaction.item);
+const selectorChartsInteractionAxis = exports.selectorChartsInteractionAxis = (0, _selectors.createSelector)(selectInteraction, interaction => interaction.axis);
+const selectorChartsInteractionXAxis = exports.selectorChartsInteractionXAxis = (0, _selectors.createSelector)(selectInteraction, interaction => interaction.axis.x);
+const selectorChartsInteractionYAxis = exports.selectorChartsInteractionYAxis = (0, _selectors.createSelector)(selectInteraction, interaction => interaction.axis.y);
+const selectorChartsInteractionItemIsDefined = exports.selectorChartsInteractionItemIsDefined = (0, _selectors.createSelector)(selectorChartsInteractionItem, item => item !== null);
+const selectorChartsInteractionXAxisIsDefined = exports.selectorChartsInteractionXAxisIsDefined = (0, _selectors.createSelector)(selectorChartsInteractionXAxis, x => x !== null);
+const selectorChartsInteractionYAxisIsDefined = exports.selectorChartsInteractionYAxisIsDefined = (0, _selectors.createSelector)(selectorChartsInteractionYAxis, y => y !== null);
+const selectorChartsInteractionIsVoronoiEnabled = exports.selectorChartsInteractionIsVoronoiEnabled = (0, _selectors.createSelector)(selectInteraction, interaction => interaction.isVoronoiEnabled);

package/node/context/SizeProvider/Size.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/context/SizeProvider/SizeContext.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SizeContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+const SizeContext = exports.SizeContext = /*#__PURE__*/React.createContext({
+  isInitialized: false,
+  data: {
+    hasIntrinsicSize: false,
+    svgRef: {
+      current: null
+    },
+    height: 0,
+    width: 0
+  }
+});
+if (process.env.NODE_ENV !== 'production') {
+  SizeContext.displayName = 'SizeContext';
+}

package/node/context/SizeProvider/SizeProvider.js

@@ -0,0 +1,29 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SizeProvider = SizeProvider;
+var React = _interopRequireWildcard(require("react"));
+var _SizeContext = require("./SizeContext");
+var _useChartContainerDimensions = require("./useChartContainerDimensions");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * The size provider.
+ *
+ * This differs from the DrawingProvider in that it provides the full size of the container.
+ *
+ * This provider is also responsible for resolving the size of the container before rendering and if the parent size changes.
+ */function SizeProvider(props) {
+  const dimensions = (0, _useChartContainerDimensions.useChartContainerDimensions)(props.width, props.height);
+  const value = React.useMemo(() => ({
+    isInitialized: true,
+    data: dimensions
+  }), [dimensions]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SizeContext.SizeContext.Provider, {
+    value: value,
+    children: props.children
+  });
+}

package/node/context/SizeProvider/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _SizeProvider = require("./SizeProvider");
+Object.keys(_SizeProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SizeProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SizeProvider[key];
+    }
+  });
+});
+var _SizeContext = require("./SizeContext");
+Object.keys(_SizeContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SizeContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SizeContext[key];
+    }
+  });
+});
+var _useSize = require("./useSize");
+Object.keys(_useSize).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useSize[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useSize[key];
+    }
+  });
+});
+var _Size = require("./Size.types");
+Object.keys(_Size).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Size[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Size[key];
+    }
+  });
+});

package/node/{ChartContainer → context/SizeProvider}/useChartContainerDimensions.js

@@ -11,7 +11,8 @@ exports.useChartContainerDimensions = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _ownerWindow = _interopRequireDefault(require("@mui/utils/ownerWindow"));
-const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBeforeRender) => {
+const MAX_COMPUTE_RUN = 10;
+const useChartContainerDimensions = (inWidth, inHeight) => {
   const hasInSize = inWidth !== undefined && inHeight !== undefined;
   const stateRef = React.useRef({
     displayError: false,
@@ -26,6 +27,10 @@ const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBeforeRender)
   const computeSize = React.useCallback(() => {
     const mainEl = rootRef?.current;
     if (!mainEl) {
+      if (process.env.NODE_ENV !== 'production') {
+        // This is mostly for internal use.
+        throw new Error([`MUI X: ChartContainer does not have a valid reference to the <svg /> element.`, 'This may be caused by a ref forwarding issue.', 'Make sure that the ref from SizedProvider is forwarded correctly.'].join('\n'));
+      }
       return {};
     }
     const win = (0, _ownerWindow.default)(mainEl);
@@ -49,7 +54,7 @@ const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBeforeRender)
   // https://github.com/mui/mui-x/issues/13477#issuecomment-2336634785
   (0, _useEnhancedEffect.default)(() => {
     // computeRun is used to avoid infinite loops.
-    if (hasInSize || !resolveSizeBeforeRender || !stateRef.current.initialCompute || stateRef.current.computeRun > 20) {
+    if (hasInSize || !stateRef.current.initialCompute || stateRef.current.computeRun > MAX_COMPUTE_RUN) {
       return;
     }
     const computedSize = computeSize();
@@ -58,7 +63,7 @@ const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBeforeRender)
     } else if (stateRef.current.initialCompute) {
       stateRef.current.initialCompute = false;
     }
-  }, [width, height, computeSize, resolveSizeBeforeRender, hasInSize]);
+  }, [width, height, computeSize, hasInSize]);
   (0, _useEnhancedEffect.default)(() => {
     if (hasInSize) {
       return () => {};
@@ -97,10 +102,15 @@ const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBeforeRender)
       stateRef.current.displayError = false;
     }
   }
+  const finalWidth = inWidth ?? width;
+  const finalHeight = inHeight ?? height;
   return {
-    containerRef: rootRef,
-    width: inWidth ?? width,
-    height: inHeight ?? height
+    svgRef: rootRef,
+    width: finalWidth,
+    height: finalHeight,
+    hasIntrinsicSize: finalWidth > 0 && finalHeight > 0,
+    inWidth,
+    inHeight
   };
 };
 exports.useChartContainerDimensions = useChartContainerDimensions;

package/node/context/SizeProvider/useSize.js

@@ -0,0 +1,20 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSize = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _SizeContext = require("./SizeContext");
+/**
+ * Returns the size of the chart. And the ref of the container element that the chart is rendered in.
+ */
+const useSize = () => {
+  const {
+    data
+  } = React.useContext(_SizeContext.SizeContext);
+  return data;
+};
+exports.useSize = useSize;

package/node/context/index.js

@@ -4,8 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  ZAxisContextProvider: true
+  ZAxisContextProvider: true,
+  ChartDataProvider: true
 };
+Object.defineProperty(exports, "ChartDataProvider", {
+  enumerable: true,
+  get: function () {
+    return _ChartDataProvider.ChartDataProvider;
+  }
+});
 Object.defineProperty(exports, "ZAxisContextProvider", {
   enumerable: true,
   get: function () {
@@ -24,4 +31,5 @@ Object.keys(_HighlightedProvider).forEach(function (key) {
     }
   });
 });
-var _ZAxisContextProvider = require("./ZAxisContextProvider");
+var _ZAxisContextProvider = require("./ZAxisContextProvider");
+var _ChartDataProvider = require("./ChartDataProvider");

package/node/hooks/useAxisEvents.js

@@ -2,17 +2,19 @@
 '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.useAxisEvents = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _InteractionProvider = require("../context/InteractionProvider");
 var _CartesianProvider = require("../context/CartesianProvider");
 var _isBandScale = require("../internals/isBandScale");
 var _getSVGPoint = require("../internals/getSVGPoint");
 var _useSvgRef = require("./useSvgRef");
 var _useDrawingArea = require("./useDrawingArea");
+var _useStore = require("../internals/store/useStore");
 function getAsANumber(value) {
   return value instanceof Date ? value.getTime() : value;
 }
@@ -25,9 +27,7 @@ const useAxisEvents = disableAxisListener => {
     xAxisIds,
     yAxisIds
   } = (0, _CartesianProvider.useCartesianContext)();
-  const {
-    dispatch
-  } = React.useContext(_InteractionProvider.InteractionContext);
+  const store = (0, _useStore.useStore)(disableAxisListener);
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
 
@@ -39,7 +39,7 @@ const useAxisEvents = disableAxisListener => {
   });
   React.useEffect(() => {
     const element = svgRef.current;
-    if (element === null || disableAxisListener) {
+    if (element === null || disableAxisListener || !store) {
       return () => {};
     }
     function getNewAxisState(axisConfig, mouseValue) {
@@ -98,9 +98,15 @@ const useAxisEvents = disableAxisListener => {
         x: -1,
         y: -1
       };
-      dispatch({
-        type: 'exitChart'
-      });
+      store.update(prev => (0, _extends2.default)({}, prev, {
+        interaction: {
+          item: null,
+          axis: {
+            x: null,
+            y: null
+          }
+        }
+      }));
     };
     const handleMove = event => {
       const target = 'targetTouches' in event ? event.targetTouches[0] : event;
@@ -111,9 +117,15 @@ const useAxisEvents = disableAxisListener => {
         targetElement: event.target
       })) {
         if (mousePosition.current.isInChart) {
-          dispatch({
-            type: 'exitChart'
-          });
+          store.update(prev => (0, _extends2.default)({}, prev, {
+            interaction: {
+              item: null,
+              axis: {
+                x: null,
+                y: null
+              }
+            }
+          }));
           mousePosition.current.isInChart = false;
         }
         return;
@@ -121,13 +133,15 @@ const useAxisEvents = disableAxisListener => {
       mousePosition.current.isInChart = true;
       const newStateX = getNewAxisState(xAxis[usedXAxis], svgPoint.x);
       const newStateY = getNewAxisState(yAxis[usedYAxis], svgPoint.y);
-      dispatch({
-        type: 'updateAxis',
-        data: {
-          x: newStateX,
-          y: newStateY
-        }
-      });
+      store.update(prev => (0, _extends2.default)({}, prev, {
+        interaction: (0, _extends2.default)({}, prev.interaction, {
+          axis: (0, _extends2.default)({}, prev.interaction.axis, prev.interaction.axis.x?.index !== newStateX?.index || prev.interaction.axis.x?.value !== newStateX?.value ? {
+            x: newStateX
+          } : {}, prev.interaction.axis.y?.index !== newStateY?.index || prev.interaction.axis.y?.value !== newStateY?.value ? {
+            y: newStateY
+          } : {})
+        })
+      }));
     };
     const handleDown = event => {
       const target = event.currentTarget;
@@ -150,6 +164,6 @@ const useAxisEvents = disableAxisListener => {
       element.removeEventListener('pointercancel', handleOut);
       element.removeEventListener('pointerleave', handleOut);
     };
-  }, [svgRef, dispatch, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, drawingArea]);
+  }, [svgRef, store, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, drawingArea]);
 };
 exports.useAxisEvents = useAxisEvents;

package/node/hooks/useChartId.js

@@ -1,16 +1,14 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useChartId = useChartId;
-var React = _interopRequireWildcard(require("react"));
-var _DrawingProvider = require("../context/DrawingProvider");
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
+var _useChartId = require("../internals/plugins/corePlugins/useChartId/useChartId.selectors");
 function useChartId() {
-  const {
-    chartId
-  } = React.useContext(_DrawingProvider.DrawingContext);
-  return React.useMemo(() => chartId, [chartId]);
+  const store = (0, _useStore.useStore)();
+  return (0, _useSelector.useSelector)(store, _useChartId.selectorChartId);
 }

package/node/hooks/useDrawingArea.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDrawingArea = useDrawingArea;
 var React = _interopRequireWildcard(require("react"));
-var _DrawingProvider = require("../context/DrawingProvider");
+var _DrawingAreaProvider = require("../context/DrawingAreaProvider");
 function useDrawingArea() {
   const {
     left,
@@ -17,7 +17,7 @@ function useDrawingArea() {
     bottom,
     right,
     isPointInside
-  } = React.useContext(_DrawingProvider.DrawingContext);
+  } = React.useContext(_DrawingAreaProvider.DrawingAreaContext);
   return React.useMemo(() => ({
     left,
     top,

package/node/hooks/useInteractionItemProps.js

@@ -1,18 +1,16 @@
 "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.useInteractionItemProps = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _InteractionProvider = require("../context/InteractionProvider");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _context = require("../context");
+var _useStore = require("../internals/store/useStore");
 const useInteractionItemProps = skip => {
-  const {
-    dispatch: dispatchInteraction
-  } = React.useContext(_InteractionProvider.InteractionContext);
+  const store = (0, _useStore.useStore)();
   const {
     setHighlighted,
     clearHighlighted
@@ -27,20 +25,31 @@ const useInteractionItemProps = skip => {
       }
     };
     const onPointerEnter = () => {
-      dispatchInteraction({
-        type: 'enterItem',
-        data
-      });
+      store.update(prev => (0, _extends2.default)({}, prev, {
+        interaction: (0, _extends2.default)({}, prev.interaction, {
+          item: data
+        })
+      }));
       setHighlighted({
         seriesId: data.seriesId,
         dataIndex: data.dataIndex
       });
     };
     const onPointerLeave = event => {
-      event.currentTarget.releasePointerCapture(event.pointerId);
-      dispatchInteraction({
-        type: 'leaveItem',
-        data
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      store.update(prev => {
+        const prevItem = prev.interaction.item;
+        if (prevItem === null || Object.keys(data).some(key => data[key] !== prevItem[key])) {
+          // The item is already something else, no need to clean it.
+          return prev;
+        }
+        return (0, _extends2.default)({}, prev, {
+          interaction: (0, _extends2.default)({}, prev.interaction, {
+            item: null
+          })
+        });
       });
       clearHighlighted();
     };

package/node/hooks/useSvgRef.js

@@ -1,20 +1,15 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSvgRef = useSvgRef;
-var React = _interopRequireWildcard(require("react"));
-var _DrawingProvider = require("../context/DrawingProvider");
+var _ChartProvider = require("../context/ChartProvider");
 function useSvgRef() {
-  const {
-    isInitialized,
-    data
-  } = React.useContext(_DrawingProvider.SvgContext);
-  if (!isInitialized) {
+  const context = (0, _ChartProvider.useChartContext)();
+  if (!context) {
     throw new Error(['MUI X: Could not find the svg ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
   }
-  return data;
+  return context.svgRef;
 }

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0-alpha.0
+ * @mui/x-charts v8.0.0-alpha.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/components/ChartsAxesGradients/ChartsAxesGradients.js

@@ -9,15 +9,12 @@ exports.ChartsAxesGradients = ChartsAxesGradients;
 exports.useChartGradient = useChartGradient;
 var React = _interopRequireWildcard(require("react"));
 var _CartesianProvider = require("../../../context/CartesianProvider");
-var _DrawingProvider = require("../../../context/DrawingProvider");
 var _hooks = require("../../../hooks");
 var _ChartsPiecewiseGradient = _interopRequireDefault(require("./ChartsPiecewiseGradient"));
 var _ChartsContinuousGradient = _interopRequireDefault(require("./ChartsContinuousGradient"));
 var _jsxRuntime = require("react/jsx-runtime");
 function useChartGradient() {
-  const {
-    chartId
-  } = React.useContext(_DrawingProvider.DrawingContext);
+  const chartId = (0, _hooks.useChartId)();
   return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}`, [chartId]);
 }
 function ChartsAxesGradients() {
@@ -38,8 +35,13 @@ function ChartsAxesGradients() {
     yAxisIds,
     yAxis
   } = (0, _CartesianProvider.useCartesianContext)();
+  const filteredYAxisIds = yAxisIds.filter(axisId => yAxis[axisId].colorMap !== undefined);
+  const filteredXAxisIds = xAxisIds.filter(axisId => xAxis[axisId].colorMap !== undefined);
+  if (filteredYAxisIds.length === 0 && filteredXAxisIds.length === 0) {
+    return null;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("defs", {
-    children: [yAxisIds.filter(axisId => yAxis[axisId].colorMap !== undefined).map(axisId => {
+    children: [filteredYAxisIds.map(axisId => {
       const gradientId = getGradientId(axisId, 'y');
       const {
         colorMap,
@@ -69,7 +71,7 @@ function ChartsAxesGradients() {
         }, gradientId);
       }
       return null;
-    }), xAxisIds.filter(axisId => xAxis[axisId].colorMap !== undefined).map(axisId => {
+    }), filteredXAxisIds.map(axisId => {
       const gradientId = getGradientId(axisId, 'x');
       const {
         colorMap,