@mui/x-charts 7.6.2 → 7.7.0

package/ScatterChart/ScatterChart.js

@@ -13,7 +13,7 @@ var _ResponsiveChartContainer = require("../ResponsiveChartContainer");
 var _ChartsAxis = require("../ChartsAxis");
 var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsLegend = require("../ChartsLegend");
-var _ChartsOverlay = require("../ChartsOverlay/ChartsOverlay");
+var _ChartsOverlay = require("../ChartsOverlay");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _ChartsVoronoiHandler = require("../ChartsVoronoiHandler/ChartsVoronoiHandler");
 var _ChartsGrid = require("../ChartsGrid");

package/SparkLineChart/SparkLineChart.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
 import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '../ChartsTooltip';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
-import { AxisConfig, ChartsXAxisProps, ScaleName } from '../models/axis';
+import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../models/axis';
 import { MakeOptional } from '../models/helpers';
 import { LineSeriesType } from '../models/seriesType/line';
 import { CardinalDirections } from '../models/layout';
@@ -15,12 +15,17 @@ export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkP
 }
 export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps {
 }
-export interface SparkLineChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'margin' | 'plugins'> {
+export interface SparkLineChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'margin' | 'plugins'> {
     /**
      * The xAxis configuration.
-     * Notice it is a single configuration object, not an array of configuration.
+     * Notice it is a single [[AxisConfig]] object, not an array of configuration.
      */
     xAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, 'id'>;
+    /**
+     * The yAxis configuration.
+     * Notice it is a single [[AxisConfig]] object, not an array of configuration.
+     */
+    yAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>;
     tooltip?: ChartsTooltipProps;
     axisHighlight?: ChartsAxisHighlightProps;
     /**

package/SparkLineChart/SparkLineChart.js

@@ -36,6 +36,7 @@ const SPARKLINE_DEFAULT_MARGIN = {
 const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props, ref) {
   const {
     xAxis,
+    yAxis,
     width,
     height,
     margin = SPARKLINE_DEFAULT_MARGIN,
@@ -82,6 +83,9 @@ const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(fu
       }, (_, index) => index),
       hideTooltip: xAxis === undefined
     }, xAxis)],
+    yAxis: [(0, _extends2.default)({
+      id: _constants.DEFAULT_X_AXIS_KEY
+    }, yAxis)],
     colors: colors,
     sx: sx,
     disableAxisListener: (!showTooltip || tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
@@ -242,7 +246,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   width: _propTypes.default.number,
   /**
    * The xAxis configuration.
-   * Notice it is a single configuration object, not an array of configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
    */
   xAxis: _propTypes.default.shape({
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
@@ -291,5 +295,57 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
+  }),
+  /**
+   * The yAxis configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
+   */
+  yAxis: _propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    classes: _propTypes.default.object,
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    }), _propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    })]),
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    fill: _propTypes.default.string,
+    hideTooltip: _propTypes.default.bool,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    label: _propTypes.default.string,
+    labelFontSize: _propTypes.default.number,
+    labelStyle: _propTypes.default.object,
+    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    position: _propTypes.default.oneOf(['left', 'right']),
+    reverse: _propTypes.default.bool,
+    scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
+    stroke: _propTypes.default.string,
+    tickFontSize: _propTypes.default.number,
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
+    tickLabelStyle: _propTypes.default.object,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: _propTypes.default.number,
+    valueFormatter: _propTypes.default.func
   })
 } : void 0;

package/context/CartesianContextProvider.d.ts

@@ -22,6 +22,14 @@ export type CartesianContextProviderProps = {
      * An array of objects that can be used to populate series and axes data using their `dataKey` property.
      */
     dataset?: DatasetType;
+    /**
+     * An object with x-axis extremum getters per series type.
+     */
+    xExtremumGetters: ExtremumGettersConfig;
+    /**
+     * An object with y-axis extremum getters per series type.
+     */
+    yExtremumGetters: ExtremumGettersConfig;
     children: React.ReactNode;
 };
 type DefaultizedAxisConfig<AxisProps> = {

package/context/CartesianContextProvider.js

@@ -9,9 +9,6 @@ exports.CartesianContextProvider = CartesianContextProvider;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _d3Scale = require("d3-scale");
-var _extremums = require("../BarChart/extremums");
-var _extremums2 = require("../ScatterChart/extremums");
-var _extremums3 = require("../LineChart/extremums");
 var _axis = require("../models/axis");
 var _getScale = require("../internals/getScale");
 var _constants = require("../constants");
@@ -24,18 +21,6 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
-
-// TODO: those might be better placed in a distinct file
-const xExtremumGetters = {
-  bar: _extremums.getExtremumX,
-  scatter: _extremums2.getExtremumX,
-  line: _extremums3.getExtremumX
-};
-const yExtremumGetters = {
-  bar: _extremums.getExtremumY,
-  scatter: _extremums2.getExtremumY,
-  line: _extremums3.getExtremumY
-};
 const CartesianContext = exports.CartesianContext = /*#__PURE__*/React.createContext({
   xAxis: {},
   yAxis: {},
@@ -50,6 +35,8 @@ function CartesianContextProvider(props) {
     xAxis: inXAxis,
     yAxis: inYAxis,
     dataset,
+    xExtremumGetters,
+    yExtremumGetters,
     children
   } = props;
   const formattedSeries = (0, _useSeries.useSeries)();
@@ -82,11 +69,11 @@ function CartesianContextProvider(props) {
     const axisExtremumCallback = (acc, chartType, axis, getters, isDefaultAxis) => {
       const getter = getters[chartType];
       const series = formattedSeries[chartType]?.series ?? {};
-      const [minChartTypeData, maxChartTypeData] = getter({
+      const [minChartTypeData, maxChartTypeData] = getter?.({
         series,
         axis,
         isDefaultAxis
-      });
+      }) ?? [null, null];
       const [minData, maxData] = acc;
       if (minData === null || maxData === null) {
         return [minChartTypeData, maxChartTypeData];
@@ -223,7 +210,7 @@ function CartesianContextProvider(props) {
         id
       }) => id)
     };
-  }, [drawingArea.height, drawingArea.left, drawingArea.top, drawingArea.width, formattedSeries, xAxis, yAxis]);
+  }, [drawingArea.height, drawingArea.left, drawingArea.top, drawingArea.width, formattedSeries, xAxis, xExtremumGetters, yAxis, yExtremumGetters]);
 
   // @ts-ignore
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CartesianContext.Provider, {

package/context/ColorProvider.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ColorProcessorsConfig } from '../models';
+import { ChartSeriesType } from '../internals';
+export interface ColorProviderProps {
+    children: React.ReactNode;
+    /**
+     * A mapping defining for each series type how to get item colors.
+     */
+    colorProcessors: ColorProcessorsConfig<ChartSeriesType>;
+}
+export declare const ColorContext: React.Context<ColorProcessorsConfig<keyof import("../internals").ChartsSeriesConfig>>;
+export declare function ColorProvider(props: ColorProviderProps): React.JSX.Element;

package/context/ColorProvider.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorContext = void 0;
+exports.ColorProvider = ColorProvider;
+var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ColorContext = exports.ColorContext = /*#__PURE__*/React.createContext({});
+if (process.env.NODE_ENV !== 'production') {
+  ColorContext.displayName = 'ColorContext';
+}
+function ColorProvider(props) {
+  const {
+    colorProcessors,
+    children
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorContext.Provider, {
+    value: colorProcessors,
+    children: children
+  });
+}

package/esm/ChartContainer/ChartContainer.js

@@ -4,11 +4,12 @@ import useForkRef from '@mui/utils/useForkRef';
 import { DrawingProvider } from '../context/DrawingProvider';
 import { SeriesContextProvider } from '../context/SeriesContextProvider';
 import { InteractionProvider } from '../context/InteractionProvider';
+import { ColorProvider } from '../context/ColorProvider';
 import { useReducedMotion } from '../hooks/useReducedMotion';
 import { ChartsSurface } from '../ChartsSurface';
 import { CartesianContextProvider } from '../context/CartesianContextProvider';
 import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients';
-import { HighlightedProvider } from '../context';
+import { HighlightedProvider, ZAxisContextProvider } from '../context';
 import { usePluginsMerge } from './usePluginsMerge';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
@@ -19,6 +20,7 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
     margin,
     xAxis,
     yAxis,
+    zAxis,
     colors,
     dataset,
     sx,
@@ -33,7 +35,10 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
   const svgRef = React.useRef(null);
   const handleRef = useForkRef(ref, svgRef);
   const {
-    seriesFormatters
+    xExtremumGetters,
+    yExtremumGetters,
+    seriesFormatters,
+    colorProcessors
   } = usePluginsMerge(plugins);
   useReducedMotion(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
 
@@ -42,28 +47,37 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
     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 +265,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/esm/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/esm/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/esm/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/esm/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 import { useSlotProps } from '@mui/base/utils';
 import { CartesianContext } from '../context/CartesianContextProvider';
 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) {
@@ -31,6 +31,7 @@ function ChartsAxisTooltipContent(props) {
     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/esm/ChartsTooltip/ChartsItemTooltipContent.js

@@ -4,8 +4,8 @@ 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 { 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) {
@@ -27,21 +27,11 @@ function ChartsItemTooltipContent(props) {
     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/esm/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/esm/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/esm/LineChart/LineChart.js

@@ -15,7 +15,7 @@ import { ChartsClipPath } from '../ChartsClipPath';
 import { LineHighlightPlot } from './LineHighlightPlot';
 import { ChartsGrid } from '../ChartsGrid';
 import { ChartsOnAxisClickHandler } from '../ChartsOnAxisClickHandler';
-import { ChartsOverlay } from '../ChartsOverlay/ChartsOverlay';
+import { ChartsOverlay } from '../ChartsOverlay';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:

package/esm/PieChart/PieChart.js

@@ -9,7 +9,7 @@ import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { PiePlot } from './PiePlot';
 import { useIsRTL } from '../internals/useIsRTL';
-import { ChartsOverlay } from '../ChartsOverlay/ChartsOverlay';
+import { ChartsOverlay } from '../ChartsOverlay';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultMargin = {
   top: 5,

package/esm/ResponsiveChartContainer/ResizableContainer.js

@@ -0,0 +1,26 @@
+import { styled } from '@mui/material/styles';
+/**
+ * Wrapping div that take the shape of its parent.
+ *
+ * @ignore - do not document.
+ */
+export const ResizableContainer = styled('div', {
+  name: 'MuiResponsiveChart',
+  slot: 'Container'
+})(({
+  ownerState
+}) => ({
+  width: ownerState.width ?? '100%',
+  height: ownerState.height ?? '100%',
+  display: 'flex',
+  position: 'relative',
+  flexGrow: 1,
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
+  '&>svg': {
+    width: '100%',
+    height: '100%'
+  }
+}));