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

package/modern/LineChart/useLineChartProps.js

@@ -5,6 +5,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className", "experimentalMarkRendering"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
+import { calculateMargins } from "../internals/calculateMargins.js";
+
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.
@@ -29,6 +31,7 @@ export const useLineChartProps = props => {
       onMarkClick,
       axisHighlight,
       disableLineItemHighlight,
+      hideLegend,
       grid,
       topAxis,
       leftAxis,
@@ -54,7 +57,12 @@ export const useLineChartProps = props => {
     }, s)),
     width,
     height,
-    margin,
+    margin: calculateMargins({
+      margin,
+      hideLegend,
+      slotProps,
+      series
+    }),
     colors,
     dataset,
     xAxis: xAxis ?? [{
@@ -65,7 +73,6 @@ export const useLineChartProps = props => {
       }, (_, index) => index)
     }],
     yAxis,
-    sx,
     highlightedItem,
     onHighlightChange,
     disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
@@ -126,7 +133,13 @@ export const useLineChartProps = props => {
     slots,
     slotProps
   };
+  const chartsWrapperProps = {
+    sx,
+    legendPosition: props.slotProps?.legend?.position,
+    legendDirection: props.slotProps?.legend?.direction
+  };
   return {
+    chartsWrapperProps,
     chartContainerProps,
     axisClickHandlerProps,
     gridProps,

package/modern/PieChart/PieArc.js

@@ -76,7 +76,9 @@ function PieArc(props) {
       innerRadius: iR,
       outerRadius: oR
     })),
-    visibility: to([startAngle, endAngle], (sA, eA) => sA === eA ? 'hidden' : 'visible'),
+    visibility: to([startAngle, endAngle], (sA, eA) => sA === eA ? 'hidden' : 'visible')
+    // @ts-expect-error
+    ,
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,

package/modern/PieChart/PieArcLabel.js

@@ -84,15 +84,19 @@ function PieArcLabel(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(PieArcLabelRoot, _extends({
-    className: classes.root
-  }, other, {
-    style: _extends({
-      x: to([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'x')),
-      y: to([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'y'))
-    }, style),
-    children: formattedArcLabel
-  }));
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error
+    _jsx(PieArcLabelRoot, _extends({
+      className: classes.root
+    }, other, {
+      style: _extends({
+        x: to([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'x')),
+        y: to([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'y'))
+      }, style),
+      children: formattedArcLabel
+    }))
+  );
 }
 process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   // ----------------------------- Warning --------------------------------

package/modern/PieChart/PieArcLabelPlot.js

@@ -133,6 +133,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     index: PropTypes.number.isRequired,
     label: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    labelMarkType: PropTypes.oneOf(['circle', 'line', 'square']),
     padAngle: PropTypes.number.isRequired,
     startAngle: PropTypes.number.isRequired,
     value: PropTypes.number.isRequired

package/modern/PieChart/PieArcPlot.js

@@ -99,6 +99,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     index: PropTypes.number.isRequired,
     label: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    labelMarkType: PropTypes.oneOf(['circle', 'line', 'square']),
     padAngle: PropTypes.number.isRequired,
     startAngle: PropTypes.number.isRequired,
     value: PropTypes.number.isRequired

package/modern/PieChart/PieChart.js

@@ -5,24 +5,20 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "sx", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useRtl } from '@mui/system/RtlProvider';
 import { useThemeProps } from '@mui/material/styles';
-import { ChartContainer } from "../ChartContainer/index.js";
 import { ChartsTooltip } from "../ChartsTooltip/index.js";
 import { ChartsLegend } from "../ChartsLegend/index.js";
 import { PiePlot } from "./PiePlot.js";
 import { ChartsOverlay } from "../ChartsOverlay/index.js";
+import { ChartsSurface } from "../ChartsSurface/index.js";
+import { ChartDataProvider } from "../context/index.js";
+import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
+import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultMargin = {
   top: 5,
   bottom: 5,
   left: 5,
-  right: 100
-};
-const defaultRTLMargin = {
-  top: 5,
-  bottom: 5,
-  left: 100,
   right: 5
 };
 
@@ -60,43 +56,48 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const isRtl = useRtl();
-  const margin = _extends({}, isRtl ? defaultRTLMargin : defaultMargin, marginProps);
-  const Tooltip = slots?.tooltip ?? ChartsTooltip;
-  return /*#__PURE__*/_jsxs(ChartContainer, _extends({}, other, {
-    ref: ref,
+  const margin = _extends({}, defaultMargin, marginProps);
+  const {
+    chartDataProviderProps,
+    chartsSurfaceProps
+  } = useChartContainerProps(_extends({}, other, {
     series: series.map(s => _extends({
       type: 'pie'
     }, s)),
-    width: width,
-    height: height,
-    margin: margin,
-    colors: colors,
-    sx: sx,
+    width,
+    height,
+    margin,
+    colors,
     disableAxisListener: true,
-    highlightedItem: highlightedItem,
-    onHighlightChange: onHighlightChange,
-    className: className,
-    skipAnimation: skipAnimation,
-    children: [/*#__PURE__*/_jsx(PiePlot, {
-      slots: slots,
-      slotProps: slotProps,
-      onItemClick: onItemClick
-    }), /*#__PURE__*/_jsx(ChartsOverlay, {
-      loading: loading,
-      slots: slots,
-      slotProps: slotProps
-    }), !hideLegend && /*#__PURE__*/_jsx(ChartsLegend, {
-      direction: "column",
-      position: {
-        vertical: 'middle',
-        horizontal: isRtl ? 'left' : 'right'
-      },
-      slots: slots,
-      slotProps: slotProps
-    }), !loading && /*#__PURE__*/_jsx(Tooltip, _extends({
-      trigger: "item"
-    }, slotProps?.tooltip)), children]
+    highlightedItem,
+    onHighlightChange,
+    className,
+    skipAnimation
+  }), ref);
+  const Tooltip = slots?.tooltip ?? ChartsTooltip;
+  return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
+    children: /*#__PURE__*/_jsxs(ChartsWrapper, {
+      legendPosition: props.slotProps?.legend?.position,
+      legendDirection: props?.slotProps?.legend?.direction ?? 'vertical',
+      sx: sx,
+      children: [!hideLegend && /*#__PURE__*/_jsx(ChartsLegend, {
+        direction: props?.slotProps?.legend?.direction ?? 'vertical',
+        slots: slots,
+        slotProps: slotProps
+      }), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+        children: [/*#__PURE__*/_jsx(PiePlot, {
+          slots: slots,
+          slotProps: slotProps,
+          onItemClick: onItemClick
+        }), /*#__PURE__*/_jsx(ChartsOverlay, {
+          loading: loading,
+          slots: slots,
+          slotProps: slotProps
+        }), !loading && /*#__PURE__*/_jsx(Tooltip, _extends({
+          trigger: "item"
+        }, slotProps?.tooltip)), children]
+      }))]
+    })
   }));
 });
 process.env.NODE_ENV !== "production" ? PieChart.propTypes = {

package/modern/PieChart/legend.js

@@ -11,6 +11,7 @@ const legendGetter = params => {
         return;
       }
       acc.push({
+        markType: item.labelMarkType ?? series[seriesId].labelMarkType ?? 'circle',
         id: item.id,
         seriesId,
         color: item.color,

package/modern/ScatterChart/ScatterChart.js

@@ -5,7 +5,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
 import { ScatterPlot } from "./ScatterPlot.js";
-import { ChartContainer } from "../ChartContainer/index.js";
 import { ChartsAxis } from "../ChartsAxis/index.js";
 import { ChartsTooltip } from "../ChartsTooltip/index.js";
 import { ChartsLegend } from "../ChartsLegend/index.js";
@@ -15,6 +14,10 @@ import { ChartsVoronoiHandler } from "../ChartsVoronoiHandler/ChartsVoronoiHandl
 import { ChartsGrid } from "../ChartsGrid/index.js";
 import { ZAxisContextProvider } from "../context/ZAxisContextProvider.js";
 import { useScatterChartProps } from "./useScatterChartProps.js";
+import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
+import { ChartDataProvider } from "../context/index.js";
+import { ChartsSurface } from "../ChartsSurface/index.js";
+import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -32,6 +35,7 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(inProps
     name: 'MuiScatterChart'
   });
   const {
+    chartsWrapperProps,
     chartContainerProps,
     zAxisProps,
     voronoiHandlerProps,
@@ -43,17 +47,23 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(inProps
     axisHighlightProps,
     children
   } = useScatterChartProps(props);
+  const {
+    chartDataProviderProps,
+    chartsSurfaceProps
+  } = useChartContainerProps(chartContainerProps, ref);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
-  return /*#__PURE__*/_jsx(ChartContainer, _extends({
-    ref: ref
-  }, chartContainerProps, {
-    children: /*#__PURE__*/_jsxs(ZAxisContextProvider, _extends({}, zAxisProps, {
-      children: [!props.disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, _extends({}, voronoiHandlerProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
-        "data-drawing-container": true,
-        children: /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps))
-      }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({
-        trigger: "item"
-      }, props.slotProps?.tooltip)), children]
+  return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
+    children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
+      children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsSurface, _extends({}, chartsSurfaceProps, {
+        children: /*#__PURE__*/_jsxs(ZAxisContextProvider, _extends({}, zAxisProps, {
+          children: [!props.disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, _extends({}, voronoiHandlerProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
+            "data-drawing-container": true,
+            children: /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps))
+          }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({
+            trigger: "item"
+          }, props.slotProps?.tooltip)), children]
+        }))
+      }))]
     }))
   }));
 });

package/modern/ScatterChart/legend.js

@@ -10,6 +10,7 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      markType: series[seriesId].labelMarkType ?? 'circle',
       id: seriesId,
       seriesId,
       color: series[seriesId].color,

package/modern/ScatterChart/useScatterChartProps.js

@@ -3,6 +3,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];
+import { calculateMargins } from "../internals/calculateMargins.js";
+
 /**
  * A helper function that extracts ScatterChartProps from the input props
  * and returns an object with props for the children components of ScatterChart.
@@ -19,6 +21,7 @@ export const useScatterChartProps = props => {
       axisHighlight,
       voronoiMaxRadius,
       disableVoronoi,
+      hideLegend,
       width,
       height,
       margin,
@@ -45,11 +48,15 @@ export const useScatterChartProps = props => {
     }, s)),
     width,
     height,
-    margin,
+    margin: calculateMargins({
+      margin,
+      hideLegend,
+      slotProps,
+      series
+    }),
     colors,
     xAxis,
     yAxis,
-    sx,
     highlightedItem,
     onHighlightChange,
     className
@@ -91,7 +98,13 @@ export const useScatterChartProps = props => {
     y: 'none',
     x: 'none'
   }, axisHighlight);
+  const chartsWrapperProps = {
+    sx,
+    legendPosition: props.slotProps?.legend?.position,
+    legendDirection: props.slotProps?.legend?.direction
+  };
   return {
+    chartsWrapperProps,
     chartContainerProps,
     zAxisProps,
     voronoiHandlerProps,

package/modern/SparkLineChart/SparkLineChart.js

@@ -90,10 +90,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
       skipAnimation: true,
       slots: slots,
-      slotProps: slotProps,
-      sx: {
-        shapeRendering: 'auto'
-      }
+      slotProps: slotProps
     }), plotType === 'line' && /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(AreaPlot, {
         skipAnimation: true,

package/modern/constants/index.js

@@ -5,4 +5,5 @@ export const DEFAULT_MARGINS = {
   bottom: 50,
   left: 50,
   right: 50
-};
+};
+export const DEFAULT_LEGEND_FACING_MARGIN = 20;

package/modern/hooks/index.js

@@ -4,4 +4,5 @@ export * from "./useScale.js";
 export * from "./useAxis.js";
 export * from "./useColorScale.js";
 export * from "./useSvgRef.js";
-export { useSeries as unstable_useSeries, usePieSeries as unstable_usePieSeries, useLineSeries as unstable_useLineSeries, useBarSeries as unstable_useBarSeries, useScatterSeries as unstable_useScatterSeries } from "./useSeries.js";
+export { useSeries as unstable_useSeries, usePieSeries as unstable_usePieSeries, useLineSeries as unstable_useLineSeries, useBarSeries as unstable_useBarSeries, useScatterSeries as unstable_useScatterSeries } from "./useSeries.js";
+export * from "./useLegend.js";

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

@@ -1,16 +1,35 @@
+'use client';
+
 import getBarLegend from "../BarChart/legend.js";
 import getScatterLegend from "../ScatterChart/legend.js";
 import getLineLegend from "../LineChart/legend.js";
 import getPieLegend from "../PieChart/legend.js";
+import { useSeries } from "./useSeries.js";
 const legendGetter = {
   bar: getBarLegend,
   scatter: getScatterLegend,
   line: getLineLegend,
   pie: getPieLegend
 };
-export function getSeriesToDisplay(series) {
+function getSeriesToDisplay(series) {
   return Object.keys(series).flatMap(seriesType => {
     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
+ */
+export function useLegend() {
+  const series = useSeries();
+  return {
+    items: getSeriesToDisplay(series)
+  };
 }

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0-alpha.6
+ * @mui/x-charts v8.0.0-alpha.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -18,6 +18,7 @@ export * from "./ChartsYAxis/index.js";
 export * from "./ChartsGrid/index.js";
 export * from "./ChartsText/index.js";
 export * from "./ChartsTooltip/index.js";
+export * from "./ChartsLabel/index.js";
 export * from "./ChartsLegend/index.js";
 export * from "./ChartsAxisHighlight/index.js";
 export * from "./ChartsVoronoiHandler/index.js";

package/modern/internals/calculateMargins.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { DEFAULT_MARGINS, DEFAULT_LEGEND_FACING_MARGIN } from "../constants/index.js";
+export const calculateMargins = props => {
+  if (props.hideLegend || !props.series?.some(s => s.label)) {
+    return _extends({}, DEFAULT_MARGINS, props.margin);
+  }
+  if (props.slotProps?.legend?.direction === 'vertical') {
+    if (props.slotProps?.legend?.position?.horizontal === 'left') {
+      return _extends({}, DEFAULT_MARGINS, {
+        left: DEFAULT_LEGEND_FACING_MARGIN
+      }, props.margin);
+    }
+    return _extends({}, DEFAULT_MARGINS, {
+      right: DEFAULT_LEGEND_FACING_MARGIN
+    }, props.margin);
+  }
+  if (props.slotProps?.legend?.position?.vertical === 'bottom') {
+    return _extends({}, DEFAULT_MARGINS, {
+      bottom: DEFAULT_LEGEND_FACING_MARGIN
+    }, props.margin);
+  }
+  return _extends({}, DEFAULT_MARGINS, {
+    top: DEFAULT_LEGEND_FACING_MARGIN
+  }, props.margin);
+};

package/modern/internals/components/ChartsAxesGradients/ChartsAxesGradients.js

@@ -3,11 +3,19 @@ import { useCartesianContext } from "../../../context/CartesianProvider/index.js
 import { useChartId, useDrawingArea } from "../../../hooks/index.js";
 import ChartsPiecewiseGradient from "./ChartsPiecewiseGradient.js";
 import ChartsContinuousGradient from "./ChartsContinuousGradient.js";
+import ChartsContinuousGradientObjectBound from "./ChartsContinuousGradientObjectBound.js";
+import { useZAxis } from "../../../hooks/useZAxis.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function useChartGradient() {
   const chartId = useChartId();
   return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}`, [chartId]);
 }
+
+// TODO: make public?
+export function useChartGradientObjectBound() {
+  const chartId = useChartId();
+  return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}-object-bound`, [chartId]);
+}
 export function ChartsAxesGradients() {
   const {
     top,
@@ -20,20 +28,27 @@ export function ChartsAxesGradients() {
   const svgHeight = top + height + bottom;
   const svgWidth = left + width + right;
   const getGradientId = useChartGradient();
+  const getObjectBoundGradientId = useChartGradientObjectBound();
   const {
     xAxisIds,
     xAxis,
     yAxisIds,
     yAxis
   } = useCartesianContext();
+  const {
+    zAxisIds,
+    zAxis
+  } = useZAxis();
   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__*/_jsxs("defs", {
     children: [filteredYAxisIds.map(axisId => {
       const gradientId = getGradientId(axisId, 'y');
+      const objectBoundGradientId = getObjectBoundGradientId(axisId, 'y');
       const {
         colorMap,
         scale,
@@ -51,19 +66,27 @@ export function ChartsAxesGradients() {
         }, gradientId);
       }
       if (colorMap?.type === 'continuous') {
-        return /*#__PURE__*/_jsx(ChartsContinuousGradient, {
-          isReversed: !reverse,
-          scale: scale,
-          colorScale: colorScale,
-          colorMap: colorMap,
-          size: svgHeight,
-          gradientId: gradientId,
-          direction: "y"
+        return /*#__PURE__*/_jsxs(React.Fragment, {
+          children: [/*#__PURE__*/_jsx(ChartsContinuousGradient, {
+            isReversed: !reverse,
+            scale: scale,
+            colorScale: colorScale,
+            colorMap: colorMap,
+            size: svgHeight,
+            gradientId: gradientId,
+            direction: "y"
+          }), /*#__PURE__*/_jsx(ChartsContinuousGradientObjectBound, {
+            isReversed: reverse,
+            colorScale: colorScale,
+            colorMap: colorMap,
+            gradientId: objectBoundGradientId
+          })]
         }, gradientId);
       }
       return null;
     }), filteredXAxisIds.map(axisId => {
       const gradientId = getGradientId(axisId, 'x');
+      const objectBoundGradientId = getObjectBoundGradientId(axisId, 'x');
       const {
         colorMap,
         scale,
@@ -81,15 +104,36 @@ export function ChartsAxesGradients() {
         }, gradientId);
       }
       if (colorMap?.type === 'continuous') {
-        return /*#__PURE__*/_jsx(ChartsContinuousGradient, {
-          isReversed: reverse,
-          scale: scale,
+        return /*#__PURE__*/_jsxs(React.Fragment, {
+          children: [/*#__PURE__*/_jsx(ChartsContinuousGradient, {
+            isReversed: reverse,
+            scale: scale,
+            colorScale: colorScale,
+            colorMap: colorMap,
+            size: svgWidth,
+            gradientId: gradientId,
+            direction: "x"
+          }), /*#__PURE__*/_jsx(ChartsContinuousGradientObjectBound, {
+            isReversed: reverse,
+            colorScale: colorScale,
+            colorMap: colorMap,
+            gradientId: objectBoundGradientId
+          })]
+        }, gradientId);
+      }
+      return null;
+    }), filteredZAxisIds.map(axisId => {
+      const objectBoundGradientId = getObjectBoundGradientId(axisId, 'z');
+      const {
+        colorMap,
+        colorScale
+      } = zAxis[axisId];
+      if (colorMap?.type === 'continuous') {
+        return /*#__PURE__*/_jsx(ChartsContinuousGradientObjectBound, {
           colorScale: colorScale,
           colorMap: colorMap,
-          size: svgWidth,
-          gradientId: gradientId,
-          direction: "x"
-        }, gradientId);
+          gradientId: objectBoundGradientId
+        }, objectBoundGradientId);
       }
       return null;
     })]

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

@@ -13,14 +13,14 @@ export default 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' ? interpolateNumber(extremValues[0], extremValues[1]) : 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' ? interpolateNumber(extremumValues[0], extremumValues[1]) : 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__*/_jsx("linearGradient", {
     id: gradientId,
     x1: "0",