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

package/node/context/index.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  ZAxisContextProvider: true,
   ChartDataProvider: true
 };
 Object.defineProperty(exports, "ChartDataProvider", {
@@ -13,12 +12,6 @@ Object.defineProperty(exports, "ChartDataProvider", {
     return _ChartDataProvider.ChartDataProvider;
   }
 });
-Object.defineProperty(exports, "ZAxisContextProvider", {
-  enumerable: true,
-  get: function () {
-    return _ZAxisContextProvider.ZAxisContextProvider;
-  }
-});
 var _HighlightedProvider = require("./HighlightedProvider");
 Object.keys(_HighlightedProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -31,5 +24,4 @@ Object.keys(_HighlightedProvider).forEach(function (key) {
     }
   });
 });
-var _ZAxisContextProvider = require("./ZAxisContextProvider");
 var _ChartDataProvider = require("./ChartDataProvider");

package/node/hooks/index.js

@@ -8,7 +8,9 @@ var _exportNames = {
   unstable_usePieSeries: true,
   unstable_useLineSeries: true,
   unstable_useBarSeries: true,
-  unstable_useScatterSeries: true
+  unstable_useScatterSeries: true,
+  useChartGradientId: true,
+  useChartGradientIdObjectBound: true
 };
 Object.defineProperty(exports, "unstable_useBarSeries", {
   enumerable: true,
@@ -40,6 +42,18 @@ Object.defineProperty(exports, "unstable_useSeries", {
     return _useSeries.useSeries;
   }
 });
+Object.defineProperty(exports, "useChartGradientId", {
+  enumerable: true,
+  get: function () {
+    return _useChartGradientId.useChartGradientId;
+  }
+});
+Object.defineProperty(exports, "useChartGradientIdObjectBound", {
+  enumerable: true,
+  get: function () {
+    return _useChartGradientId.useChartGradientIdObjectBound;
+  }
+});
 var _useDrawingArea = require("./useDrawingArea");
 Object.keys(_useDrawingArea).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -88,6 +102,18 @@ Object.keys(_useAxis).forEach(function (key) {
     }
   });
 });
+var _useZAxis = require("./useZAxis");
+Object.keys(_useZAxis).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useZAxis[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useZAxis[key];
+    }
+  });
+});
 var _useColorScale = require("./useColorScale");
 Object.keys(_useColorScale).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -112,4 +138,17 @@ Object.keys(_useSvgRef).forEach(function (key) {
     }
   });
 });
-var _useSeries = require("./useSeries");
+var _useSeries = require("./useSeries");
+var _useLegend = require("./useLegend");
+Object.keys(_useLegend).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useLegend[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useLegend[key];
+    }
+  });
+});
+var _useChartGradientId = require("./useChartGradientId");

package/node/hooks/useAxis.js

@@ -4,22 +4,50 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.useXAxes = useXAxes;
 exports.useXAxis = useXAxis;
+exports.useYAxes = useYAxes;
 exports.useYAxis = useYAxis;
-var _CartesianProvider = require("../context/CartesianProvider");
-function useXAxis(identifier) {
+var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors");
+var _useSelector = require("../internals/store/useSelector");
+var _useStore = require("../internals/store/useStore");
+function useXAxes() {
+  const store = (0, _useStore.useStore)();
   const {
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartXAxis);
+  return {
     xAxis,
     xAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+  };
+}
+function useYAxes() {
+  const store = (0, _useStore.useStore)();
+  const {
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartYAxis);
+  return {
+    yAxis,
+    yAxisIds
+  };
+}
+function useXAxis(identifier) {
+  const store = (0, _useStore.useStore)();
+  const {
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartXAxis);
   const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
   return xAxis[id];
 }
 function useYAxis(identifier) {
+  const store = (0, _useStore.useStore)();
   const {
-    yAxis,
-    yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartYAxis);
   const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
   return yAxis[id];
 }

package/node/hooks/useAxisEvents.js

@@ -9,25 +9,29 @@ Object.defineProperty(exports, "__esModule", {
 exports.useAxisEvents = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-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");
+var _ChartProvider = require("../context/ChartProvider");
+var _useAxis = require("./useAxis");
 function getAsANumber(value) {
   return value instanceof Date ? value.getTime() : value;
 }
 const useAxisEvents = disableAxisListener => {
   const svgRef = (0, _useSvgRef.useSvgRef)();
-  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
   const {
     xAxis,
+    xAxisIds
+  } = (0, _useAxis.useXAxes)();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
-  const store = (0, _useStore.useStore)(disableAxisListener);
+  } = (0, _useAxis.useYAxes)();
+  const store = (0, _useStore.useStore)();
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
 
@@ -113,7 +117,7 @@ const useAxisEvents = disableAxisListener => {
       const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, target);
       mousePosition.current.x = svgPoint.x;
       mousePosition.current.y = svgPoint.y;
-      if (!drawingArea.isPointInside(svgPoint, {
+      if (!instance.isPointInside(svgPoint, {
         targetElement: event.target
       })) {
         if (mousePosition.current.isInChart) {
@@ -164,6 +168,6 @@ const useAxisEvents = disableAxisListener => {
       element.removeEventListener('pointercancel', handleOut);
       element.removeEventListener('pointerleave', handleOut);
     };
-  }, [svgRef, store, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, drawingArea]);
+  }, [svgRef, store, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, instance]);
 };
 exports.useAxisEvents = useAxisEvents;

package/node/hooks/useChartGradientId.js

@@ -0,0 +1,56 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartGradientId = useChartGradientId;
+exports.useChartGradientIdBuilder = useChartGradientIdBuilder;
+exports.useChartGradientIdObjectBound = useChartGradientIdObjectBound;
+exports.useChartGradientIdObjectBoundBuilder = useChartGradientIdObjectBoundBuilder;
+var React = _interopRequireWildcard(require("react"));
+var _useChartId = require("./useChartId");
+/**
+ * Returns a function that generates a gradient id for the given axis id.
+ */
+function useChartGradientIdBuilder() {
+  const chartId = (0, _useChartId.useChartId)();
+  return React.useCallback(axisId => `${chartId}-gradient-${axisId}`, [chartId]);
+}
+
+/**
+ * Returns a function that generates a gradient id for the given axis id.
+ */
+function useChartGradientIdObjectBoundBuilder() {
+  const chartId = (0, _useChartId.useChartId)();
+  return React.useCallback(axisId => `${chartId}-gradient-${axisId}-object-bound`, [chartId]);
+}
+
+/**
+ * Returns a gradient id for the given axis id.
+ *
+ * Can be useful when reusing the same gradient on custom components.
+ *
+ * For a gradient that respects the coordinates of the object on which it is applied, use `useChartGradientIdObjectBound` instead.
+ *
+ * @param axisId the axis id
+ * @returns the gradient id
+ */
+function useChartGradientId(axisId) {
+  return useChartGradientIdBuilder()(axisId);
+}
+
+/**
+ * Returns a gradient id for the given axis id.
+ *
+ * Can be useful when reusing the same gradient on custom components.
+ *
+ * This gradient differs from `useChartGradientId` in that it respects the coordinates of the object on which it is applied.
+ *
+ * @param axisId the axis id
+ * @returns the gradient id
+ */
+function useChartGradientIdObjectBound(axisId) {
+  return useChartGradientIdObjectBoundBuilder()(axisId);
+}

package/node/hooks/useColorScale.js

@@ -7,13 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.useXColorScale = useXColorScale;
 exports.useYColorScale = useYColorScale;
 exports.useZColorScale = useZColorScale;
-var _CartesianProvider = require("../context/CartesianProvider");
+var _useAxis = require("./useAxis");
 var _useZAxis = require("./useZAxis");
 function useXColorScale(identifier) {
   const {
     xAxis,
     xAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+  } = (0, _useAxis.useXAxes)();
   const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
   return xAxis[id].colorScale;
 }
@@ -21,7 +21,7 @@ function useYColorScale(identifier) {
   const {
     yAxis,
     yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+  } = (0, _useAxis.useYAxes)();
   const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
   return yAxis[id].colorScale;
 }
@@ -29,7 +29,7 @@ function useZColorScale(identifier) {
   const {
     zAxis,
     zAxisIds
-  } = (0, _useZAxis.useZAxis)();
+  } = (0, _useZAxis.useZAxes)();
   const id = typeof identifier === 'string' ? identifier : zAxisIds[identifier ?? 0];
   return zAxis[id]?.colorScale;
 }

package/node/hooks/useDrawingArea.js

@@ -1,30 +1,14 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useDrawingArea = useDrawingArea;
-var React = _interopRequireWildcard(require("react"));
-var _DrawingAreaProvider = require("../context/DrawingAreaProvider");
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
+var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors");
 function useDrawingArea() {
-  const {
-    left,
-    top,
-    width,
-    height,
-    bottom,
-    right,
-    isPointInside
-  } = React.useContext(_DrawingAreaProvider.DrawingAreaContext);
-  return React.useMemo(() => ({
-    left,
-    top,
-    width,
-    height,
-    bottom,
-    right,
-    isPointInside
-  }), [height, left, top, width, bottom, right, isPointInside]);
+  const store = (0, _useStore.useStore)();
+  return (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartDrawingArea);
 }

package/node/{ChartsLegend/utils.js → hooks/useLegend.js}

@@ -1,14 +1,16 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSeriesToDisplay = getSeriesToDisplay;
+exports.useLegend = useLegend;
 var _legend = _interopRequireDefault(require("../BarChart/legend"));
 var _legend2 = _interopRequireDefault(require("../ScatterChart/legend"));
 var _legend3 = _interopRequireDefault(require("../LineChart/legend"));
 var _legend4 = _interopRequireDefault(require("../PieChart/legend"));
+var _useSeries = require("./useSeries");
 const legendGetter = {
   bar: _legend.default,
   scatter: _legend2.default,
@@ -20,4 +22,20 @@ function getSeriesToDisplay(series) {
     const getter = legendGetter[seriesType];
     return getter === undefined ? [] : getter(series[seriesType]);
   });
+}
+
+/**
+ * Get the legend items to display.
+ *
+ * This hook is used by the `ChartsLegend` component. And will return the legend items formatted for display.
+ *
+ * An alternative is to use the `useSeries` hook and format the legend items yourself.
+ *
+ * @returns legend data
+ */
+function useLegend() {
+  const series = (0, _useSeries.useSeries)();
+  return {
+    items: getSeriesToDisplay(series)
+  };
 }

package/node/hooks/useSeries.js

@@ -11,7 +11,9 @@ exports.usePieSeries = usePieSeries;
 exports.useScatterSeries = useScatterSeries;
 exports.useSeries = useSeries;
 var React = _interopRequireWildcard(require("react"));
-var _SeriesProvider = require("../context/SeriesProvider");
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
+var _useChartSeries = require("../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors");
 /**
  * Get access to the internal state of series.
  * Structured by type of series:
@@ -19,14 +21,8 @@ var _SeriesProvider = require("../context/SeriesProvider");
  * @returns FormattedSeries series
  */
 function useSeries() {
-  const {
-    isInitialized,
-    data
-  } = React.useContext(_SeriesProvider.SeriesContext);
-  if (!isInitialized) {
-    throw new Error(['MUI X: Could not find the series ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
-  }
-  return data;
+  const store = (0, _useStore.useStore)();
+  return (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesProcessed);
 }
 
 /**

package/node/hooks/useZAxis.js

@@ -1,15 +1,33 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useZAxis = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
-const useZAxis = () => {
-  const data = React.useContext(_ZAxisContextProvider.ZAxisContext);
-  return data;
-};
-exports.useZAxis = useZAxis;
+exports.useZAxes = useZAxes;
+exports.useZAxis = useZAxis;
+var _useStore = require("../internals/store/useStore");
+var _useChartZAxis = require("../internals/plugins/featurePlugins/useChartZAxis");
+var _useSelector = require("../internals/store/useSelector");
+function useZAxes() {
+  const store = (0, _useStore.useStore)();
+  const {
+    axis: zAxis,
+    axisIds: zAxisIds
+  } = (0, _useSelector.useSelector)(store, _useChartZAxis.selectorChartZAxis) ?? {
+    axis: {},
+    axisIds: []
+  };
+  return {
+    zAxis,
+    zAxisIds
+  };
+}
+function useZAxis(identifier) {
+  const {
+    zAxis,
+    zAxisIds
+  } = useZAxes();
+  const id = typeof identifier === 'string' ? identifier : zAxisIds[identifier ?? 0];
+  return zAxis[id];
+}

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0-alpha.6
+ * @mui/x-charts v8.0.0-alpha.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -153,6 +153,17 @@ Object.keys(_ChartsTooltip).forEach(function (key) {
     }
   });
 });
+var _ChartsLabel = require("./ChartsLabel");
+Object.keys(_ChartsLabel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsLabel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsLabel[key];
+    }
+  });
+});
 var _ChartsLegend = require("./ChartsLegend");
 Object.keys(_ChartsLegend).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/node/internals/calculateMargins.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculateMargins = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _constants = require("../constants");
+const calculateMargins = props => {
+  if (props.hideLegend || !props.series?.some(s => s.label)) {
+    return (0, _extends2.default)({}, _constants.DEFAULT_MARGINS, props.margin);
+  }
+  if (props.slotProps?.legend?.direction === 'vertical') {
+    if (props.slotProps?.legend?.position?.horizontal === 'left') {
+      return (0, _extends2.default)({}, _constants.DEFAULT_MARGINS, {
+        left: _constants.DEFAULT_LEGEND_FACING_MARGIN
+      }, props.margin);
+    }
+    return (0, _extends2.default)({}, _constants.DEFAULT_MARGINS, {
+      right: _constants.DEFAULT_LEGEND_FACING_MARGIN
+    }, props.margin);
+  }
+  if (props.slotProps?.legend?.position?.vertical === 'bottom') {
+    return (0, _extends2.default)({}, _constants.DEFAULT_MARGINS, {
+      bottom: _constants.DEFAULT_LEGEND_FACING_MARGIN
+    }, props.margin);
+  }
+  return (0, _extends2.default)({}, _constants.DEFAULT_MARGINS, {
+    top: _constants.DEFAULT_LEGEND_FACING_MARGIN
+  }, props.margin);
+};
+exports.calculateMargins = calculateMargins;

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

@@ -6,17 +6,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsAxesGradients = ChartsAxesGradients;
-exports.useChartGradient = useChartGradient;
 var React = _interopRequireWildcard(require("react"));
-var _CartesianProvider = require("../../../context/CartesianProvider");
 var _hooks = require("../../../hooks");
 var _ChartsPiecewiseGradient = _interopRequireDefault(require("./ChartsPiecewiseGradient"));
 var _ChartsContinuousGradient = _interopRequireDefault(require("./ChartsContinuousGradient"));
+var _ChartsContinuousGradientObjectBound = _interopRequireDefault(require("./ChartsContinuousGradientObjectBound"));
+var _useZAxis = require("../../../hooks/useZAxis");
+var _useChartGradientId = require("../../../hooks/useChartGradientId");
 var _jsxRuntime = require("react/jsx-runtime");
-function useChartGradient() {
-  const chartId = (0, _hooks.useChartId)();
-  return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}`, [chartId]);
-}
 function ChartsAxesGradients() {
   const {
     top,
@@ -28,21 +25,30 @@ function ChartsAxesGradients() {
   } = (0, _hooks.useDrawingArea)();
   const svgHeight = top + height + bottom;
   const svgWidth = left + width + right;
-  const getGradientId = useChartGradient();
+  const getGradientId = (0, _useChartGradientId.useChartGradientIdBuilder)();
+  const getObjectBoundGradientId = (0, _useChartGradientId.useChartGradientIdObjectBoundBuilder)();
   const {
-    xAxisIds,
     xAxis,
-    yAxisIds,
-    yAxis
-  } = (0, _CartesianProvider.useCartesianContext)();
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _hooks.useYAxes)();
+  const {
+    zAxis,
+    zAxisIds
+  } = (0, _useZAxis.useZAxes)();
   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) {
+  const filteredZAxisIds = zAxisIds.filter(axisId => zAxis[axisId].colorMap !== undefined);
+  if (filteredYAxisIds.length === 0 && filteredXAxisIds.length === 0 && filteredZAxisIds.length === 0) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("defs", {
     children: [filteredYAxisIds.map(axisId => {
-      const gradientId = getGradientId(axisId, 'y');
+      const gradientId = getGradientId(axisId);
+      const objectBoundGradientId = getObjectBoundGradientId(axisId);
       const {
         colorMap,
         scale,
@@ -60,19 +66,27 @@ function ChartsAxesGradients() {
         }, gradientId);
       }
       if (colorMap?.type === 'continuous') {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsContinuousGradient.default, {
-          isReversed: !reverse,
-          scale: scale,
-          colorScale: colorScale,
-          colorMap: colorMap,
-          size: svgHeight,
-          gradientId: gradientId,
-          direction: "y"
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsContinuousGradient.default, {
+            isReversed: !reverse,
+            scale: scale,
+            colorScale: colorScale,
+            colorMap: colorMap,
+            size: svgHeight,
+            gradientId: gradientId,
+            direction: "y"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsContinuousGradientObjectBound.default, {
+            isReversed: reverse,
+            colorScale: colorScale,
+            colorMap: colorMap,
+            gradientId: objectBoundGradientId
+          })]
         }, gradientId);
       }
       return null;
     }), filteredXAxisIds.map(axisId => {
-      const gradientId = getGradientId(axisId, 'x');
+      const gradientId = getGradientId(axisId);
+      const objectBoundGradientId = getObjectBoundGradientId(axisId);
       const {
         colorMap,
         scale,
@@ -90,15 +104,36 @@ function ChartsAxesGradients() {
         }, gradientId);
       }
       if (colorMap?.type === 'continuous') {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsContinuousGradient.default, {
-          isReversed: reverse,
-          scale: scale,
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsContinuousGradient.default, {
+            isReversed: reverse,
+            scale: scale,
+            colorScale: colorScale,
+            colorMap: colorMap,
+            size: svgWidth,
+            gradientId: gradientId,
+            direction: "x"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsContinuousGradientObjectBound.default, {
+            isReversed: reverse,
+            colorScale: colorScale,
+            colorMap: colorMap,
+            gradientId: objectBoundGradientId
+          })]
+        }, gradientId);
+      }
+      return null;
+    }), filteredZAxisIds.map(axisId => {
+      const objectBoundGradientId = getObjectBoundGradientId(axisId);
+      const {
+        colorMap,
+        colorScale
+      } = zAxis[axisId];
+      if (colorMap?.type === 'continuous') {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsContinuousGradientObjectBound.default, {
           colorScale: colorScale,
           colorMap: colorMap,
-          size: svgWidth,
-          gradientId: gradientId,
-          direction: "x"
-        }, gradientId);
+          gradientId: objectBoundGradientId
+        }, objectBoundGradientId);
       }
       return null;
     })]

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

@@ -20,14 +20,14 @@ function ChartsContinuousGradient(props) {
     colorScale,
     colorMap
   } = props;
-  const extremValues = [colorMap.min ?? 0, colorMap.max ?? 100];
-  const extremPositions = extremValues.map(scale).filter(p => p !== undefined);
-  if (extremPositions.length !== 2) {
+  const extremumValues = [colorMap.min ?? 0, colorMap.max ?? 100];
+  const extremumPositions = extremumValues.map(scale).filter(p => p !== undefined);
+  if (extremumPositions.length !== 2) {
     return null;
   }
-  const interpolator = typeof extremValues[0] === 'number' ? (0, _d3Interpolate.interpolateNumber)(extremValues[0], extremValues[1]) : (0, _d3Interpolate.interpolateDate)(extremValues[0], extremValues[1]);
-  const numberOfPoints = Math.round((Math.max(...extremPositions) - Math.min(...extremPositions)) / PX_PRECISION);
-  const keyPrefix = `${extremValues[0]}-${extremValues[1]}-`;
+  const interpolator = typeof extremumValues[0] === 'number' ? (0, _d3Interpolate.interpolateNumber)(extremumValues[0], extremumValues[1]) : (0, _d3Interpolate.interpolateDate)(extremumValues[0], extremumValues[1]);
+  const numberOfPoints = Math.round((Math.max(...extremumPositions) - Math.min(...extremumPositions)) / PX_PRECISION);
+  const keyPrefix = `${extremumValues[0]}-${extremumValues[1]}-`;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("linearGradient", {
     id: gradientId,
     x1: "0",