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

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/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 _DrawingAreaProvider = require("../context/DrawingAreaProvider");
+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(_DrawingAreaProvider.DrawingAreaContext);
-  return React.useMemo(() => chartId, [chartId]);
+  const store = (0, _useStore.useStore)();
+  return (0, _useSelector.useSelector)(store, _useChartId.selectorChartId);
 }

package/node/hooks/useColorScale.js

@@ -1,21 +1,19 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useXColorScale = useXColorScale;
 exports.useYColorScale = useYColorScale;
 exports.useZColorScale = useZColorScale;
-var React = _interopRequireWildcard(require("react"));
-var _CartesianProvider = require("../context/CartesianProvider");
-var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
+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;
 }
@@ -23,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;
 }
@@ -31,7 +29,7 @@ function useZColorScale(identifier) {
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
+  } = (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/hooks/useInteractionItemProps.js

@@ -1,20 +1,15 @@
 "use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useInteractionItemProps = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _context = require("../context");
-var _useStore = require("../internals/useStore");
+var _ChartProvider = require("../context/ChartProvider");
 const useInteractionItemProps = skip => {
-  const store = (0, _useStore.useStore)();
   const {
-    setHighlighted,
-    clearHighlighted
-  } = (0, _context.useHighlighted)();
+    instance
+  } = (0, _ChartProvider.useChartContext)();
   if (skip) {
     return () => ({});
   }
@@ -25,31 +20,18 @@ const useInteractionItemProps = skip => {
       }
     };
     const onPointerEnter = () => {
-      store.update(prev => (0, _extends2.default)({}, prev, {
-        interaction: (0, _extends2.default)({}, prev.interaction, {
-          item: data
-        })
-      }));
-      setHighlighted({
+      instance.setItemInteraction(data);
+      instance.setHighlight({
         seriesId: data.seriesId,
         dataIndex: data.dataIndex
       });
     };
     const onPointerLeave = event => {
-      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();
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      instance.removeItemInteraction(data);
+      instance.clearHighlight();
     };
     return {
       onPointerEnter,

package/node/hooks/useItemHighlighted.js

@@ -0,0 +1,28 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useItemHighlighted = useItemHighlighted;
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
+var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
+/**
+ * A hook to check the highlighted state of the item.
+ * This function already calculates that an item is not faded if it is highlighted.
+ *
+ * If you need fine control over the state, use the `useItemHighlightedGetter` hook instead.
+ *
+ * @param {HighlightItemData | null} item is the item to check
+ * @returns {UseItemHighlightedReturnType} the state of the item
+ */
+function useItemHighlighted(item) {
+  const store = (0, _useStore.useStore)();
+  const isHighlighted = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartsIsHighlighted, item);
+  const isFaded = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartsIsFaded, item);
+  return {
+    isHighlighted,
+    isFaded: !isHighlighted && isFaded
+  };
+}

package/node/hooks/useItemHighlightedGetter.js

@@ -0,0 +1,27 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useItemHighlightedGetter = useItemHighlightedGetter;
+var _useSelector = require("../internals/store/useSelector");
+var _useStore = require("../internals/store/useStore");
+var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors");
+/**
+ * A hook to check the highlighted state of multiple items.
+ * If you're interested by a single one, consider using `useItemHighlighted`.
+ *
+ * Warning: highlighted and faded can both be true at the same time.
+ * We recommend to first test if item is highlighted: `const faded = !highlighted && isFaded(item)`
+ * @returns {{ isHighlighted, isFaded }} callbacks to get the state of the item.
+ */
+function useItemHighlightedGetter() {
+  const store = (0, _useStore.useStore)();
+  const isHighlighted = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartsIsHighlightedCallback);
+  const isFaded = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartsIsFadedCallback);
+  return {
+    isHighlighted,
+    isFaded
+  };
+}

package/node/hooks/useLegend.js

@@ -0,0 +1,35 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLegend = useLegend;
+var _useChartSeries = require("../internals/plugins/corePlugins/useChartSeries");
+var _useSeries = require("./useSeries");
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
+function getSeriesToDisplay(series, seriesConfig) {
+  return Object.keys(series).flatMap(seriesType => {
+    const getter = seriesConfig[seriesType].legendGetter;
+    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)();
+  const store = (0, _useStore.useStore)();
+  const seriesConfig = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesConfig);
+  return {
+    items: getSeriesToDisplay(series, seriesConfig)
+  };
+}

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/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 _SvgRefProvider = require("../context/SvgRefProvider");
+var _ChartProvider = require("../context/ChartProvider");
 function useSvgRef() {
-  const {
-    isInitialized,
-    data
-  } = React.useContext(_SvgRefProvider.SvgRefContext);
-  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.svgRef;
+  return context.svgRef;
 }

package/node/hooks/useZAxis.js

@@ -0,0 +1,33 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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.1
+ * @mui/x-charts v8.0.0-alpha.11
  *
  * @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;
@@ -186,17 +197,6 @@ Object.keys(_ChartsVoronoiHandler).forEach(function (key) {
     }
   });
 });
-var _ChartsOnAxisClickHandler = require("./ChartsOnAxisClickHandler");
-Object.keys(_ChartsOnAxisClickHandler).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ChartsOnAxisClickHandler[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ChartsOnAxisClickHandler[key];
-    }
-  });
-});
 var _BarChart = require("./BarChart");
 Object.keys(_BarChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -284,4 +284,15 @@ Object.keys(_ChartContainer).forEach(function (key) {
       return _ChartContainer[key];
     }
   });
+});
+var _ChartDataProvider = require("./ChartDataProvider");
+Object.keys(_ChartDataProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartDataProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartDataProvider[key];
+    }
+  });
 });

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 === 'start') {
+      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,20 +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 _DrawingAreaProvider = require("../../../context/DrawingAreaProvider");
 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
-  } = React.useContext(_DrawingAreaProvider.DrawingAreaContext);
-  return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}`, [chartId]);
-}
 function ChartsAxesGradients() {
   const {
     top,
@@ -31,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,
@@ -63,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,
@@ -93,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",