@mui/x-charts 7.6.2 → 7.7.1

package/modern/BarChart/BarLabel/BarLabelPlot.js

@@ -2,7 +2,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["bars", "skipAnimation"];
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
 import { BarLabelItem } from './BarLabelItem';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -73,26 +72,4 @@ function BarLabelPlot(props) {
     })))
   });
 }
-process.env.NODE_ENV !== "production" ? BarLabelPlot.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
-  bars: PropTypes.arrayOf(PropTypes.shape({
-    color: PropTypes.string.isRequired,
-    dataIndex: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    layout: PropTypes.oneOf(['horizontal', 'vertical']),
-    maskId: PropTypes.string.isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    value: PropTypes.number,
-    width: PropTypes.number.isRequired,
-    x: PropTypes.number.isRequired,
-    xOrigin: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-    yOrigin: PropTypes.number.isRequired
-  })).isRequired,
-  skipAnimation: PropTypes.bool
-} : void 0;
 export { BarLabelPlot };

package/modern/BarChart/BarPlot.js

@@ -4,7 +4,7 @@ const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { BarElement } from './BarElement';
 import getColor from './getColor';
 import { useChartId } from '../hooks';
@@ -47,7 +47,7 @@ const useAggregatedData = () => {
     stackingGroups: [],
     seriesOrder: []
   };
-  const axisData = React.useContext(CartesianContext);
+  const axisData = useCartesianContext();
   const chartId = useChartId();
   const {
     series,

package/modern/BarChart/useBarChartProps.js

@@ -0,0 +1,136 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import useId from '@mui/utils/useId';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
+
+/**
+ * A helper function that extracts BarChartProps from the input props
+ * and returns an object with props for the children components of BarChart.
+ *
+ * @param props The input props for BarChart
+ * @returns An object with props for the children components of BarChart
+ */
+export const useBarChartProps = props => {
+  const {
+    xAxis,
+    yAxis,
+    series,
+    width,
+    height,
+    margin,
+    colors,
+    dataset,
+    sx,
+    tooltip,
+    onAxisClick,
+    axisHighlight,
+    legend,
+    grid,
+    topAxis,
+    leftAxis,
+    rightAxis,
+    bottomAxis,
+    children,
+    slots,
+    slotProps,
+    skipAnimation,
+    loading,
+    layout,
+    onItemClick,
+    highlightedItem,
+    onHighlightChange,
+    borderRadius,
+    barLabel
+  } = props;
+  const id = useId();
+  const clipPathId = `${id}-clip-path`;
+  const hasHorizontalSeries = layout === 'horizontal' || layout === undefined && series.some(item => item.layout === 'horizontal');
+  const defaultAxisConfig = {
+    scaleType: 'band',
+    data: Array.from({
+      length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
+    }, (_, index) => index)
+  };
+  const chartContainerProps = {
+    series: series.map(s => _extends({
+      type: 'bar'
+    }, s, {
+      layout: hasHorizontalSeries ? 'horizontal' : 'vertical'
+    })),
+    width,
+    height,
+    margin,
+    colors,
+    dataset,
+    xAxis: xAxis ?? (hasHorizontalSeries ? undefined : [_extends({
+      id: DEFAULT_X_AXIS_KEY
+    }, defaultAxisConfig)]),
+    yAxis: yAxis ?? (hasHorizontalSeries ? [_extends({
+      id: DEFAULT_Y_AXIS_KEY
+    }, defaultAxisConfig)] : undefined),
+    sx,
+    highlightedItem,
+    onHighlightChange,
+    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick
+  };
+  const barPlotProps = {
+    onItemClick,
+    slots,
+    slotProps,
+    skipAnimation,
+    borderRadius,
+    barLabel
+  };
+  const axisClickHandlerProps = {
+    onAxisClick
+  };
+  const gridProps = {
+    vertical: grid?.vertical,
+    horizontal: grid?.horizontal
+  };
+  const clipPathGroupProps = {
+    clipPath: `url(#${clipPathId})`
+  };
+  const clipPathProps = {
+    id: clipPathId
+  };
+  const overlayProps = {
+    slots,
+    slotProps,
+    loading
+  };
+  const chartsAxisProps = {
+    topAxis,
+    leftAxis,
+    rightAxis,
+    bottomAxis,
+    slots,
+    slotProps
+  };
+  const axisHighlightProps = _extends({}, hasHorizontalSeries ? {
+    y: 'band'
+  } : {
+    x: 'band'
+  }, axisHighlight);
+  const legendProps = _extends({}, legend, {
+    slots,
+    slotProps
+  });
+  const tooltipProps = _extends({}, tooltip, {
+    slots,
+    slotProps
+  });
+  return {
+    chartContainerProps,
+    barPlotProps,
+    axisClickHandlerProps,
+    gridProps,
+    clipPathProps,
+    clipPathGroupProps,
+    overlayProps,
+    chartsAxisProps,
+    axisHighlightProps,
+    legendProps,
+    tooltipProps,
+    children
+  };
+};

package/modern/ChartContainer/ChartContainer.js

@@ -1,15 +1,14 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import useForkRef from '@mui/utils/useForkRef';
 import { DrawingProvider } from '../context/DrawingProvider';
 import { SeriesContextProvider } from '../context/SeriesContextProvider';
 import { InteractionProvider } from '../context/InteractionProvider';
-import { useReducedMotion } from '../hooks/useReducedMotion';
+import { ColorProvider } from '../context/ColorProvider';
 import { ChartsSurface } from '../ChartsSurface';
-import { CartesianContextProvider } from '../context/CartesianContextProvider';
+import { CartesianContextProvider } from '../context/CartesianProvider';
 import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients';
-import { HighlightedProvider } from '../context';
-import { usePluginsMerge } from './usePluginsMerge';
+import { HighlightedProvider, ZAxisContextProvider } from '../context';
+import { useChartContainerHooks } from './useChartContainerHooks';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
@@ -19,6 +18,7 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
     margin,
     xAxis,
     yAxis,
+    zAxis,
     colors,
     dataset,
     sx,
@@ -30,40 +30,50 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
     plugins,
     children
   } = props;
-  const svgRef = React.useRef(null);
-  const handleRef = useForkRef(ref, svgRef);
   const {
-    seriesFormatters
-  } = usePluginsMerge(plugins);
-  useReducedMotion(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
-
+    svgRef,
+    handleRef,
+    xExtremumGetters,
+    yExtremumGetters,
+    seriesFormatters,
+    colorProcessors
+  } = useChartContainerHooks(ref, plugins);
   return /*#__PURE__*/_jsx(DrawingProvider, {
     width: width,
     height: height,
     margin: margin,
     svgRef: svgRef,
-    children: /*#__PURE__*/_jsx(SeriesContextProvider, {
-      series: series,
-      colors: colors,
-      dataset: dataset,
-      seriesFormatters: seriesFormatters,
-      children: /*#__PURE__*/_jsx(CartesianContextProvider, {
-        xAxis: xAxis,
-        yAxis: yAxis,
+    children: /*#__PURE__*/_jsx(ColorProvider, {
+      colorProcessors: colorProcessors,
+      children: /*#__PURE__*/_jsx(SeriesContextProvider, {
+        series: series,
+        colors: colors,
         dataset: dataset,
-        children: /*#__PURE__*/_jsx(InteractionProvider, {
-          children: /*#__PURE__*/_jsx(HighlightedProvider, {
-            highlightedItem: highlightedItem,
-            onHighlightChange: onHighlightChange,
-            children: /*#__PURE__*/_jsxs(ChartsSurface, {
-              width: width,
-              height: height,
-              ref: handleRef,
-              sx: sx,
-              title: title,
-              desc: desc,
-              disableAxisListener: disableAxisListener,
-              children: [/*#__PURE__*/_jsx(ChartsAxesGradients, {}), children]
+        seriesFormatters: seriesFormatters,
+        children: /*#__PURE__*/_jsx(CartesianContextProvider, {
+          xAxis: xAxis,
+          yAxis: yAxis,
+          dataset: dataset,
+          xExtremumGetters: xExtremumGetters,
+          yExtremumGetters: yExtremumGetters,
+          children: /*#__PURE__*/_jsx(ZAxisContextProvider, {
+            zAxis: zAxis,
+            dataset: dataset,
+            children: /*#__PURE__*/_jsx(InteractionProvider, {
+              children: /*#__PURE__*/_jsx(HighlightedProvider, {
+                highlightedItem: highlightedItem,
+                onHighlightChange: onHighlightChange,
+                children: /*#__PURE__*/_jsxs(ChartsSurface, {
+                  width: width,
+                  height: height,
+                  ref: handleRef,
+                  sx: sx,
+                  title: title,
+                  desc: desc,
+                  disableAxisListener: disableAxisListener,
+                  children: [/*#__PURE__*/_jsx(ChartsAxesGradients, {}), children]
+                })
+              })
             })
           })
         })
@@ -251,6 +261,29 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
+  })),
+  /**
+   * The configuration of the z-axes.
+   */
+  zAxis: PropTypes.arrayOf(PropTypes.shape({
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    id: PropTypes.string
   }))
 } : void 0;
 export { ChartContainer };

package/modern/ChartContainer/useChartContainerHooks.js

@@ -0,0 +1,24 @@
+import useForkRef from '@mui/utils/useForkRef';
+import * as React from 'react';
+import { usePluginsMerge } from './usePluginsMerge';
+import { useReducedMotion } from '../hooks/useReducedMotion';
+export const useChartContainerHooks = (ref, plugins) => {
+  const svgRef = React.useRef(null);
+  const handleRef = useForkRef(ref, svgRef);
+  const {
+    xExtremumGetters,
+    yExtremumGetters,
+    seriesFormatters,
+    colorProcessors
+  } = usePluginsMerge(plugins);
+  useReducedMotion(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
+
+  return {
+    svgRef,
+    handleRef,
+    xExtremumGetters,
+    yExtremumGetters,
+    seriesFormatters,
+    colorProcessors
+  };
+};

package/modern/ChartsAxis/ChartsAxis.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { ChartsXAxis } from '../ChartsXAxis';
 import { ChartsYAxis } from '../ChartsYAxis';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -47,7 +47,7 @@ function ChartsAxis(props) {
     xAxisIds,
     yAxis,
     yAxisIds
-  } = React.useContext(CartesianContext);
+  } = useCartesianContext();
 
   // TODO: use for plotting line without ticks or any thing
   // const drawingArea = React.useContext(DrawingContext);

package/modern/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -6,7 +6,7 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { styled } from '@mui/material/styles';
 import { InteractionContext } from '../context/InteractionProvider';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { isBandScale } from '../internals/isBandScale';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -55,7 +55,7 @@ function ChartsAxisHighlight(props) {
     xAxis,
     yAxisIds,
     yAxis
-  } = React.useContext(CartesianContext);
+  } = useCartesianContext();
   const classes = useUtilityClasses();
   const USED_X_AXIS_ID = xAxisIds[0];
   const USED_Y_AXIS_ID = yAxisIds[0];

package/modern/ChartsGrid/ChartsGrid.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { useTicks } from '../hooks/useTicks';
 import { getChartsGridUtilityClass, chartsGridClasses } from './chartsGridClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -63,7 +63,7 @@ function ChartsGrid(props) {
     xAxisIds,
     yAxis,
     yAxisIds
-  } = React.useContext(CartesianContext);
+  } = useCartesianContext();
   const classes = useUtilityClasses(themeProps);
   const horizontalAxisId = yAxisIds[0];
   const verticalAxisId = xAxisIds[0];

package/modern/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { InteractionContext } from '../context/InteractionProvider';
-import { CartesianContext } from '../context/CartesianContextProvider';
 import { useSeries } from '../hooks/useSeries';
 import { useSvgRef } from '../hooks';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsOnAxisClickHandler(props) {
   const {
@@ -19,7 +19,7 @@ function ChartsOnAxisClickHandler(props) {
     xAxis,
     yAxisIds,
     yAxis
-  } = React.useContext(CartesianContext);
+  } = useCartesianContext();
   React.useEffect(() => {
     const element = svgRef.current;
     if (element === null || !onAxisClick) {

package/modern/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -5,6 +5,7 @@ import { useDrawingArea, useXScale } from '../hooks';
 import { ReferenceLineRoot } from './common';
 import { ChartsText } from '../ChartsText';
 import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
+import { buildWarning } from '../internals/warning';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getTextParams = ({
   top,
@@ -46,7 +47,7 @@ export function getXReferenceLineClasses(classes) {
     label: ['label']
   }, getReferenceLineUtilityClass, classes);
 }
-let warnedOnce = false;
+const valueError = buildWarning((value, id) => `MUI X Charts: the value ${value} does not exist in the data of x axis with id ${id}.`, 'error');
 function ChartsXReferenceLine(props) {
   const {
     x,
@@ -66,10 +67,7 @@ function ChartsXReferenceLine(props) {
   const xPosition = xAxisScale(x);
   if (xPosition === undefined) {
     if (process.env.NODE_ENV !== 'production') {
-      if (!warnedOnce) {
-        warnedOnce = true;
-        console.error(`MUI X Charts: the value ${x} does not exist in the data of x axis with id ${axisId}.`);
-      }
+      valueError(x, axisId);
     }
     return null;
   }

package/modern/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -5,6 +5,7 @@ import { useDrawingArea, useYScale } from '../hooks';
 import { ReferenceLineRoot } from './common';
 import { ChartsText } from '../ChartsText';
 import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
+import { buildWarning } from '../internals/warning';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getTextParams = ({
   left,
@@ -39,7 +40,6 @@ const getTextParams = ({
       };
   }
 };
-let warnedOnce = false;
 export function getYReferenceLineClasses(classes) {
   return composeClasses({
     root: ['root', 'horizontal'],
@@ -47,6 +47,7 @@ export function getYReferenceLineClasses(classes) {
     label: ['label']
   }, getReferenceLineUtilityClass, classes);
 }
+const valueError = buildWarning((value, id) => `MUI X Charts: the value ${value} does not exist in the data of y axis with id ${id}.`, 'error');
 function ChartsYReferenceLine(props) {
   const {
     y,
@@ -66,10 +67,7 @@ function ChartsYReferenceLine(props) {
   const yPosition = yAxisScale(y);
   if (yPosition === undefined) {
     if (process.env.NODE_ENV !== 'production') {
-      if (!warnedOnce) {
-        warnedOnce = true;
-        console.error(`MUI X Charts: the value ${y} does not exist in the data of y axis with id ${axisId}.`);
-      }
+      valueError(y, axisId);
     }
     return null;
   }

package/modern/ChartsText/ChartsText.js

@@ -49,10 +49,8 @@ function ChartsText(props) {
   if (angle) {
     transforms.push(`rotate(${angle}, ${x}, ${y})`);
   }
-  if (transforms.length) {
-    textProps.transform = transforms.join(' ');
-  }
   return /*#__PURE__*/_jsx("text", _extends({}, textProps, {
+    transform: transforms.length > 0 ? transforms.join(' ') : undefined,
     x: x,
     y: y,
     textAnchor: textAnchor,

package/modern/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -2,11 +2,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useSlotProps } from '@mui/base/utils';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { DefaultChartsAxisTooltipContent } from './DefaultChartsAxisTooltipContent';
-import { isCartesianSeriesType } from '../internals/isCartesian';
-import colorGetter from '../internals/colorGetter';
 import { ZAxisContext } from '../context/ZAxisContextProvider';
+import { useColorProcessor } from '../hooks/useColor';
+import { isCartesianSeriesType } from '../internals/isCartesian';
 import { useSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsAxisTooltipContent(props) {
@@ -25,12 +25,13 @@ function ChartsAxisTooltipContent(props) {
     xAxis,
     yAxisIds,
     yAxis
-  } = React.useContext(CartesianContext);
+  } = useCartesianContext();
   const {
     zAxisIds,
     zAxis
   } = React.useContext(ZAxisContext);
   const series = useSeries();
+  const colorProcessors = useColorProcessor();
   const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
   const relevantSeries = React.useMemo(() => {
     const rep = [];
@@ -40,15 +41,8 @@ function ChartsAxisTooltipContent(props) {
         const axisKey = isXaxis ? item.xAxisKey : item.yAxisKey;
         if (axisKey === undefined || axisKey === USED_AXIS_ID) {
           const seriesToAdd = series[seriesType].series[seriesId];
-          let getColor;
-          switch (seriesToAdd.type) {
-            case 'scatter':
-              getColor = colorGetter(seriesToAdd, xAxis[seriesToAdd.xAxisKey ?? xAxisIds[0]], yAxis[seriesToAdd.yAxisKey ?? yAxisIds[0]], zAxis[seriesToAdd.zAxisKey ?? zAxisIds[0]]);
-              break;
-            default:
-              getColor = colorGetter(seriesToAdd, xAxis[seriesToAdd.xAxisKey ?? xAxisIds[0]], yAxis[seriesToAdd.yAxisKey ?? yAxisIds[0]]);
-              break;
-          }
+          const zAxisKey = seriesToAdd.zAxisKey ?? zAxisIds[0];
+          const getColor = colorProcessors[seriesType]?.(seriesToAdd, xAxis[seriesToAdd.xAxisKey ?? xAxisIds[0]], yAxis[seriesToAdd.yAxisKey ?? yAxisIds[0]], zAxisKey && zAxis[zAxisKey]) ?? (() => '');
           rep.push(_extends({}, seriesToAdd, {
             getColor
           }));
@@ -56,7 +50,7 @@ function ChartsAxisTooltipContent(props) {
       });
     });
     return rep;
-  }, [USED_AXIS_ID, isXaxis, series, xAxis, xAxisIds, yAxis, yAxisIds, zAxis, zAxisIds]);
+  }, [USED_AXIS_ID, colorProcessors, isXaxis, series, xAxis, xAxisIds, yAxis, yAxisIds, zAxis, zAxisIds]);
   const relevantAxis = React.useMemo(() => {
     return isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
   }, [USED_AXIS_ID, isXaxis, xAxis, yAxis]);

package/modern/ChartsTooltip/ChartsItemTooltipContent.js

@@ -3,9 +3,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useSlotProps } from '@mui/base/utils';
 import { DefaultChartsItemTooltipContent } from './DefaultChartsItemTooltipContent';
-import { CartesianContext } from '../context/CartesianContextProvider';
-import colorGetter from '../internals/colorGetter';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { ZAxisContext } from '../context/ZAxisContextProvider';
+import { useColorProcessor } from '../hooks/useColor';
 import { useSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsItemTooltipContent(props) {
@@ -22,26 +22,16 @@ function ChartsItemTooltipContent(props) {
     yAxis,
     xAxisIds,
     yAxisIds
-  } = React.useContext(CartesianContext);
+  } = useCartesianContext();
   const {
     zAxis,
     zAxisIds
   } = React.useContext(ZAxisContext);
-  const defaultXAxisId = xAxisIds[0];
-  const defaultYAxisId = yAxisIds[0];
-  const defaultZAxisId = zAxisIds[0];
-  let getColor;
-  switch (series.type) {
-    case 'pie':
-      getColor = colorGetter(series);
-      break;
-    case 'scatter':
-      getColor = colorGetter(series, xAxis[series.xAxisKey ?? defaultXAxisId], yAxis[series.yAxisKey ?? defaultYAxisId], zAxis[series.zAxisKey ?? defaultZAxisId]);
-      break;
-    default:
-      getColor = colorGetter(series, xAxis[series.xAxisKey ?? defaultXAxisId], yAxis[series.yAxisKey ?? defaultYAxisId]);
-      break;
-  }
+  const colorProcessors = useColorProcessor();
+  const xAxisKey = series.xAxisKey ?? xAxisIds[0];
+  const yAxisKey = series.yAxisKey ?? yAxisIds[0];
+  const zAxisKey = series.zAxisKey ?? zAxisIds[0];
+  const getColor = colorProcessors[series.type]?.(series, xAxisKey && xAxis[xAxisKey], yAxisKey && yAxis[yAxisKey], zAxisKey && zAxis[zAxisKey]) ?? (() => '');
   const Content = content ?? DefaultChartsItemTooltipContent;
   const chartTooltipContentProps = useSlotProps({
     elementType: Content,

package/modern/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -38,7 +38,6 @@ function DefaultChartsAxisTooltipContent(props) {
         })
       }), /*#__PURE__*/_jsx("tbody", {
         children: series.filter(isCartesianSeries).map(({
-          color,
           id,
           label,
           valueFormatter,
@@ -53,12 +52,13 @@ function DefaultChartsAxisTooltipContent(props) {
             return null;
           }
           const formattedLabel = getLabel(label, 'tooltip');
+          const color = getColor(dataIndex);
           return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
             className: classes.row,
             children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
               className: clsx(classes.markCell, classes.cell),
-              children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
-                color: getColor(dataIndex) ?? color,
+              children: color && /*#__PURE__*/_jsx(ChartsTooltipMark, {
+                color: color,
                 className: classes.mark
               })
             }), /*#__PURE__*/_jsx(ChartsTooltipCell, {

package/modern/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -23,7 +23,7 @@ function DefaultChartsItemTooltipContent(props) {
     color: getColor(itemData.dataIndex),
     displayedLabel: getLabel(series.data[itemData.dataIndex].label, 'tooltip')
   } : {
-    color: getColor(itemData.dataIndex) ?? series.color,
+    color: getColor(itemData.dataIndex),
     displayedLabel: getLabel(series.label, 'tooltip')
   };
   const value = series.type === 'pie' ? _extends({}, series.data[itemData.dataIndex], {

package/modern/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Delaunay } from 'd3-delaunay';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { InteractionContext } from '../context/InteractionProvider';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { getSVGPoint } from '../internals/utils';
 import { useDrawingArea, useSvgRef } from '../hooks';
@@ -27,7 +27,7 @@ function ChartsVoronoiHandler(props) {
     yAxis,
     xAxisIds,
     yAxisIds
-  } = React.useContext(CartesianContext);
+  } = useCartesianContext();
   const {
     dispatch
   } = React.useContext(InteractionContext);