@mui/x-charts 8.16.0 → 8.17.0

package/ScatterChart/BatchScatter.js

@@ -125,10 +125,10 @@ function BatchScatter(props) {
   const {
     store
   } = (0, _ChartProvider.useChartContext)();
-  const isSeriesHighlighted = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartIsSeriesHighlighted, [series.id]);
-  const isSeriesFaded = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartIsSeriesFaded, [series.id]);
-  const seriesHighlightedItem = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartSeriesHighlightedItem, [series.id]);
-  const seriesUnfadedItem = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartSeriesUnfadedItem, [series.id]);
+  const isSeriesHighlighted = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartIsSeriesHighlighted, series.id);
+  const isSeriesFaded = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartIsSeriesFaded, series.id);
+  const seriesHighlightedItem = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartSeriesHighlightedItem, series.id);
+  const seriesUnfadedItem = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartSeriesUnfadedItem, series.id);
   const highlightedModifier = 1.2;
   const markerSize = series.markerSize * (isSeriesHighlighted ? highlightedModifier : 1);
   const classes = (0, _scatterClasses.useUtilityClasses)(inClasses);

package/ScatterChart/Scatter.d.ts

@@ -9,7 +9,12 @@ export interface ScatterProps {
   xScale: D3Scale;
   yScale: D3Scale;
   color: string;
-  colorGetter?: ColorGetter<'scatter'>;
+  /**
+   * Function to get the color of a scatter item given its data index.
+   * The data index argument is optional. If not provided, the color for the entire series is returned.
+   * If provided, the color for the specific scatter item is returned.
+   */
+  colorGetter: ColorGetter<'scatter'>;
   /**
    * Callback fired when clicking on a scatter item.
    * @param {MouseEvent} event Mouse event recorded on the `<svg/>` element.
@@ -32,7 +37,7 @@ export interface ScatterSlotProps extends ScatterMarkerSlotProps {}
  *
  * - [Scatter API](https://mui.com/x/api/charts/scatter/)
  */
-declare function Scatter(props: ScatterProps): React.JSX.Element;
+declare function Scatter(props: ScatterProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Scatter {
   var propTypes: any;
 }

package/ScatterChart/Scatter.js

@@ -39,7 +39,6 @@ function Scatter(props) {
     series,
     xScale,
     yScale,
-    color,
     colorGetter,
     onItemClick,
     classes: inClasses,
@@ -83,7 +82,7 @@ function Scatter(props) {
       });
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(Marker, (0, _extends2.default)({
         dataIndex: dataPoint.dataIndex,
-        color: colorGetter ? colorGetter(dataPoint.dataIndex) : color,
+        color: colorGetter(dataPoint.dataIndex),
         isHighlighted: isItemHighlighted,
         isFaded: isItemFaded,
         x: dataPoint.x,
@@ -107,7 +106,12 @@ process.env.NODE_ENV !== "production" ? Scatter.propTypes = {
   // ----------------------------------------------------------------------
   classes: _propTypes.default.object,
   color: _propTypes.default.string.isRequired,
-  colorGetter: _propTypes.default.func,
+  /**
+   * Function to get the color of a scatter item given its data index.
+   * The data index argument is optional. If not provided, the color for the entire series is returned.
+   * If provided, the color for the specific scatter item is returned.
+   */
+  colorGetter: _propTypes.default.func.isRequired,
   /**
    * Callback fired when clicking on a scatter item.
    * @param {MouseEvent} event Mouse event recorded on the `<svg/>` element.

package/ScatterChart/ScatterMarker.d.ts

@@ -39,7 +39,7 @@ export interface ScatterMarkerProps {
    */
   onClick?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
 }
-declare function ScatterMarker(props: ScatterMarkerProps): React.JSX.Element;
+declare function ScatterMarker(props: ScatterMarkerProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ScatterMarker {
   var propTypes: any;
 }

package/ScatterChart/ScatterPlot.d.ts

@@ -38,7 +38,7 @@ export interface ScatterPlotProps extends Pick<ScatterProps, 'onItemClick'> {
  *
  * - [ScatterPlot API](https://mui.com/x/api/charts/scatter-plot/)
  */
-declare function ScatterPlot(props: ScatterPlotProps): React.JSX.Element | null;
+declare function ScatterPlot(props: ScatterPlotProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace ScatterPlot {
   var propTypes: any;
 }

package/ScatterChart/ScatterPlot.js

@@ -68,7 +68,7 @@ function ScatterPlot(props) {
         zAxisId,
         color
       } = series[seriesId];
-      const colorGetter = _seriesConfig.seriesConfig.colorProcessor(series[seriesId], xAxis[xAxisId ?? defaultXAxisId], yAxis[yAxisId ?? defaultYAxisId], zAxis[zAxisId ?? defaultZAxisId]);
+      const colorGetter = _seriesConfig.scatterSeriesConfig.colorProcessor(series[seriesId], xAxis[xAxisId ?? defaultXAxisId], yAxis[yAxisId ?? defaultYAxisId], zAxis[zAxisId ?? defaultZAxisId]);
       const xScale = xAxis[xAxisId ?? defaultXAxisId].scale;
       const yScale = yAxis[yAxisId ?? defaultYAxisId].scale;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(ScatterItems, (0, _extends2.default)({

package/ScatterChart/seriesConfig/getColor.js

@@ -4,10 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _getSeriesColorFn = require("../../internals/getSeriesColorFn");
 const getColor = (series, xAxis, yAxis, zAxis) => {
   const zColorScale = zAxis?.colorScale;
   const yColorScale = yAxis?.colorScale;
   const xColorScale = xAxis?.colorScale;
+  const getSeriesColor = (0, _getSeriesColorFn.getSeriesColorFn)(series);
   if (zColorScale) {
     return dataIndex => {
       if (dataIndex === undefined) {
@@ -20,9 +22,15 @@ const getColor = (series, xAxis, yAxis, zAxis) => {
         }
       }
       const value = series.data[dataIndex];
-      const color = value === null ? series.color : zColorScale(value.z);
+      const color = value === null ? getSeriesColor({
+        value,
+        dataIndex
+      }) : zColorScale(value.z);
       if (color === null) {
-        return series.color;
+        return getSeriesColor({
+          value,
+          dataIndex
+        });
       }
       return color;
     };
@@ -33,9 +41,15 @@ const getColor = (series, xAxis, yAxis, zAxis) => {
         return series.color;
       }
       const value = series.data[dataIndex];
-      const color = value === null ? series.color : yColorScale(value.y);
+      const color = value === null ? getSeriesColor({
+        value,
+        dataIndex
+      }) : yColorScale(value.y);
       if (color === null) {
-        return series.color;
+        return getSeriesColor({
+          value,
+          dataIndex
+        });
       }
       return color;
     };
@@ -46,13 +60,28 @@ const getColor = (series, xAxis, yAxis, zAxis) => {
         return series.color;
       }
       const value = series.data[dataIndex];
-      const color = value === null ? series.color : xColorScale(value.x);
+      const color = value === null ? getSeriesColor({
+        value,
+        dataIndex
+      }) : xColorScale(value.x);
       if (color === null) {
-        return series.color;
+        return getSeriesColor({
+          value,
+          dataIndex
+        });
       }
       return color;
     };
   }
-  return () => series.color;
+  return dataIndex => {
+    if (dataIndex === undefined) {
+      return series.color;
+    }
+    const value = series.data[dataIndex];
+    return getSeriesColor({
+      value,
+      dataIndex
+    });
+  };
 };
 var _default = exports.default = getColor;

package/ScatterChart/seriesConfig/index.d.ts

@@ -1,2 +1,2 @@
 import { ChartSeriesTypeConfig } from "../../internals/plugins/models/seriesConfig/index.js";
-export declare const seriesConfig: ChartSeriesTypeConfig<'scatter'>;
+export declare const scatterSeriesConfig: ChartSeriesTypeConfig<'scatter'>;

package/ScatterChart/seriesConfig/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.seriesConfig = void 0;
+exports.scatterSeriesConfig = void 0;
 var _extremums = require("./extremums");
 var _seriesProcessor = _interopRequireDefault(require("./seriesProcessor"));
 var _getColor = _interopRequireDefault(require("./getColor"));
@@ -12,7 +12,7 @@ var _legend = _interopRequireDefault(require("./legend"));
 var _tooltip = _interopRequireDefault(require("./tooltip"));
 var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWithDefaultValues"));
 var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
-const seriesConfig = exports.seriesConfig = {
+const scatterSeriesConfig = exports.scatterSeriesConfig = {
   seriesProcessor: _seriesProcessor.default,
   colorProcessor: _getColor.default,
   legendGetter: _legend.default,

package/context/ChartProvider/ChartProvider.d.ts

@@ -4,5 +4,5 @@ import { ChartAnyPluginSignature } from "../../internals/plugins/models/index.js
 import { ChartSeriesConfig } from "../../internals/plugins/models/seriesConfig/index.js";
 import { ChartSeriesType } from "../../models/seriesType/config.js";
 export declare const defaultSeriesConfig: ChartSeriesConfig<'bar' | 'scatter' | 'line' | 'pie'>;
-declare function ChartProvider<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]>(props: React.PropsWithChildren<ChartProviderProps<TSeriesType, TSignatures>>): React.JSX.Element;
+declare function ChartProvider<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]>(props: React.PropsWithChildren<ChartProviderProps<TSeriesType, TSignatures>>): import("react/jsx-runtime").JSX.Element;
 export { ChartProvider };

package/context/ChartProvider/ChartProvider.js

@@ -20,10 +20,10 @@ var _seriesConfig3 = require("../../LineChart/seriesConfig");
 var _seriesConfig4 = require("../../PieChart/seriesConfig");
 var _jsxRuntime = require("react/jsx-runtime");
 const defaultSeriesConfig = exports.defaultSeriesConfig = {
-  bar: _seriesConfig.seriesConfig,
-  scatter: _seriesConfig2.seriesConfig,
-  line: _seriesConfig3.seriesConfig,
-  pie: _seriesConfig4.seriesConfig
+  bar: _seriesConfig.barSeriesConfig,
+  scatter: _seriesConfig2.scatterSeriesConfig,
+  line: _seriesConfig3.lineSeriesConfig,
+  pie: _seriesConfig4.pieSeriesConfig
 };
 
 // For consistency with the v7, the cartesian axes are set by default.

package/context/ChartProvider/ChartProvider.types.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { ChartAnyPluginSignature, ChartInstance, ChartPublicAPI, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from "../../internals/plugins/models/index.js";
-import type { ChartStore } from "../../internals/plugins/utils/ChartStore.js";
+import { Store } from '@mui/x-internals/store';
+import type { ChartAnyPluginSignature, ChartInstance, ChartPublicAPI, ChartState, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from "../../internals/plugins/models/index.js";
 import type { ChartCorePluginSignatures } from "../../internals/plugins/corePlugins/index.js";
 import type { ChartSeriesConfig } from "../../internals/plugins/models/seriesConfig/index.js";
 import type { UseChartBaseProps } from "../../internals/store/useCharts.types.js";
@@ -17,7 +17,7 @@ export type ChartContextValue<TSignatures extends readonly ChartAnyPluginSignatu
   /**
    * The internal state of the chart.
    */
-  store: ChartStore<TSignatures>;
+  store: Store<ChartState<TSignatures, TOptionalSignatures>>;
   /**
    * The ref to the <svg />.
    */

package/context/ChartsSlotsContext.d.ts

@@ -16,5 +16,5 @@ interface ChartsSlotsProviderProps {
   slotProps?: Partial<ChartsSlotProps>;
   defaultSlots: ChartsSlots;
 }
-export declare function ChartsSlotsProvider(props: React.PropsWithChildren<ChartsSlotsProviderProps>): React.JSX.Element;
+export declare function ChartsSlotsProvider(props: React.PropsWithChildren<ChartsSlotsProviderProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/BarChart/AnimatedBarElement.d.ts

@@ -39,4 +39,4 @@ export interface BarProps extends Omit<React.SVGProps<SVGRectElement>, 'id' | 'c
    */
   skipAnimation: boolean;
 }
-export declare function AnimatedBarElement(props: BarProps): React.JSX.Element;
+export declare function AnimatedBarElement(props: BarProps): import("react/jsx-runtime").JSX.Element;

package/esm/BarChart/BarChart.js

@@ -83,6 +83,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     y: PropTypes.oneOf(['band', 'line', 'none'])
   }),
   /**
+   * @deprecated Use `barLabel` in the chart series instead.
    * If provided, the function will be used to format the label of the bar.
    * It can be set to 'value' to display the current value.
    * @param {BarItem} item The item to format.

package/esm/BarChart/BarClipPath.d.ts

@@ -33,5 +33,5 @@ export interface BarClipPathProps {
 /**
  * @ignore - internal component.
  */
-declare function BarClipPath(props: BarClipPathProps): React.JSX.Element | null;
+declare function BarClipPath(props: BarClipPathProps): import("react/jsx-runtime").JSX.Element | null;
 export { BarClipPath };

package/esm/BarChart/BarElement.d.ts

@@ -32,7 +32,7 @@ export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighligh
   layout: 'horizontal' | 'vertical';
   skipAnimation: boolean;
 };
-declare function BarElement(props: BarElementProps): React.JSX.Element;
+declare function BarElement(props: BarElementProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BarElement {
   var propTypes: any;
 }

package/esm/BarChart/BarElement.js

@@ -32,23 +32,21 @@ function BarElement(props) {
       height
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const interactionProps = useInteractionItemProps({
+  const itemIdentifier = React.useMemo(() => ({
     type: 'bar',
     seriesId: id,
     dataIndex
-  });
+  }), [id, dataIndex]);
+  const interactionProps = useInteractionItemProps(itemIdentifier);
   const {
     isFaded,
     isHighlighted
-  } = useItemHighlighted({
-    seriesId: id,
-    dataIndex
-  });
-  const isFocused = useIsItemFocused({
+  } = useItemHighlighted(itemIdentifier);
+  const isFocused = useIsItemFocused(React.useMemo(() => ({
     seriesType: 'bar',
     seriesId: id,
     dataIndex
-  });
+  }), [id, dataIndex]));
   const ownerState = {
     id,
     dataIndex,

package/esm/BarChart/BarLabel/BarLabel.d.ts

@@ -27,7 +27,7 @@ export type BarLabelProps = Omit<React.SVGProps<SVGTextElement>, 'ref' | 'id' |
    */
   height: number;
 };
-declare function BarLabel(inProps: BarLabelProps): React.JSX.Element;
+declare function BarLabel(inProps: BarLabelProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BarLabel {
   var propTypes: any;
 }

package/esm/BarChart/BarLabel/BarLabelItem.d.ts

@@ -71,7 +71,7 @@ export type BarLabelItemProps = Omit<BarLabelOwnerState, 'isFaded' | 'isHighligh
 /**
  * @ignore - internal component.
  */
-declare function BarLabelItem(props: BarLabelItemProps): React.JSX.Element | null;
+declare function BarLabelItem(props: BarLabelItemProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace BarLabelItem {
   var propTypes: any;
 }

package/esm/BarChart/BarLabel/BarLabelPlot.d.ts

@@ -1,13 +1,12 @@
-import * as React from 'react';
 import type { ProcessedBarSeriesData } from "../types.js";
 import { BarLabelItemProps } from "./BarLabelItem.js";
 type BarLabelPlotProps = {
-  bars: ProcessedBarSeriesData[];
+  processedSeries: ProcessedBarSeriesData;
   skipAnimation?: boolean;
   barLabel?: BarLabelItemProps['barLabel'];
 };
 /**
  * @ignore - internal component.
  */
-declare function BarLabelPlot(props: BarLabelPlotProps): React.JSX.Element;
+declare function BarLabelPlot(props: BarLabelPlotProps): import("react/jsx-runtime").JSX.Element | null;
 export { BarLabelPlot };

package/esm/BarChart/BarLabel/BarLabelPlot.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["bars", "skipAnimation"];
+const _excluded = ["processedSeries", "skipAnimation"];
 import * as React from 'react';
 import { BarLabelItem } from "./BarLabelItem.js";
 import { useUtilityClasses } from "../barClasses.js";
@@ -10,44 +10,49 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 function BarLabelPlot(props) {
   const {
-      bars,
+      processedSeries,
       skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    seriesId,
+    data
+  } = processedSeries;
   const classes = useUtilityClasses();
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: bars.flatMap(({
-      seriesId,
-      data
-    }) => /*#__PURE__*/_jsx("g", {
-      className: classes.seriesLabels,
-      "data-series": seriesId,
-      children: data.map(({
-        xOrigin,
-        yOrigin,
-        x,
-        y,
-        dataIndex,
-        color,
-        value,
-        width,
-        height,
-        layout
-      }) => /*#__PURE__*/_jsx(BarLabelItem, _extends({
-        seriesId: seriesId,
-        dataIndex: dataIndex,
-        value: value,
-        color: color,
-        xOrigin: xOrigin,
-        yOrigin: yOrigin,
-        x: x,
-        y: y,
-        width: width,
-        height: height,
-        skipAnimation: skipAnimation ?? false,
-        layout: layout ?? 'vertical'
-      }, other), dataIndex))
-    }, seriesId))
-  });
+  const barLabel = processedSeries.barLabel ?? props.barLabel;
+  if (!barLabel) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("g", {
+    className: classes.seriesLabels,
+    "data-series": seriesId,
+    children: data.map(({
+      xOrigin,
+      yOrigin,
+      x,
+      y,
+      dataIndex,
+      color,
+      value,
+      width,
+      height,
+      layout
+    }) => /*#__PURE__*/_jsx(BarLabelItem, _extends({
+      seriesId: seriesId,
+      dataIndex: dataIndex,
+      value: value,
+      color: color,
+      xOrigin: xOrigin,
+      yOrigin: yOrigin,
+      x: x,
+      y: y,
+      width: width,
+      height: height,
+      skipAnimation: skipAnimation ?? false,
+      layout: layout ?? 'vertical'
+    }, other, {
+      barLabel: barLabel
+    }), dataIndex))
+  }, seriesId);
 }
 export { BarLabelPlot };

package/esm/BarChart/BarPlot.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { BarElementSlotProps, BarElementSlots } from "./BarElement.js";
 import { BarItemIdentifier } from "../models/index.js";
-import { BarLabelItemProps, BarLabelSlotProps, BarLabelSlots } from "./BarLabel/BarLabelItem.js";
+import { BarLabelSlotProps, BarLabelSlots } from "./BarLabel/BarLabelItem.js";
+import { BarItem, BarLabelContext } from "./BarLabel/index.js";
 export interface BarPlotSlots extends BarElementSlots, BarLabelSlots {}
 export interface BarPlotSlotProps extends BarElementSlotProps, BarLabelSlotProps {}
-export interface BarPlotProps extends Pick<BarLabelItemProps, 'barLabel'> {
+export interface BarPlotProps {
   /**
    * If `true`, animations are skipped.
    * @default undefined
@@ -20,6 +21,15 @@ export interface BarPlotProps extends Pick<BarLabelItemProps, 'barLabel'> {
    * Defines the border radius of the bar element.
    */
   borderRadius?: number;
+  /**
+   * @deprecated Use `barLabel` in the chart series instead.
+   * If provided, the function will be used to format the label of the bar.
+   * It can be set to 'value' to display the current value.
+   * @param {BarItem} item The item to format.
+   * @param {BarLabelContext} context data about the bar.
+   * @returns {string} The formatted label.
+   */
+  barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
   /**
    * The props used for each component slot.
    * @default {}
@@ -42,7 +52,7 @@ export interface BarPlotProps extends Pick<BarLabelItemProps, 'barLabel'> {
  *
  * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
  */
-declare function BarPlot(props: BarPlotProps): React.JSX.Element;
+declare function BarPlot(props: BarPlotProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BarPlot {
   var propTypes: any;
 }

package/esm/BarChart/BarPlot.js

@@ -135,11 +135,11 @@ function BarPlot(props) {
           }, dataIndex);
         })
       }, seriesId);
-    }), barLabel && /*#__PURE__*/_jsx(BarLabelPlot, _extends({
-      bars: completedData,
+    }), completedData.map(processedSeries => /*#__PURE__*/_jsx(BarLabelPlot, _extends({
+      processedSeries: processedSeries,
       skipAnimation: skipAnimation,
       barLabel: barLabel
-    }, other))]
+    }, other), processedSeries.seriesId))]
   });
 }
 process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {

package/esm/BarChart/seriesConfig/{extremums.d.ts → bar/extremums.d.ts}

@@ -1,3 +1,3 @@
-import { CartesianExtremumGetter } from "../../internals/plugins/models/seriesConfig/index.js";
+import { CartesianExtremumGetter } from "../../../internals/plugins/models/seriesConfig/index.js";
 export declare const getExtremumX: CartesianExtremumGetter<'bar'>;
 export declare const getExtremumY: CartesianExtremumGetter<'bar'>;

package/esm/BarChart/seriesConfig/{extremums.js → bar/extremums.js}

@@ -1,4 +1,4 @@
-import { findMinMax } from "../../internals/findMinMax.js";
+import { findMinMax } from "../../../internals/findMinMax.js";
 const createResult = (data, direction) => {
   if (direction === 'x') {
     return {

package/esm/BarChart/seriesConfig/bar/getColor.d.ts

@@ -0,0 +1,3 @@
+import { ColorProcessor } from "../../../internals/plugins/models/index.js";
+declare const getColor: ColorProcessor<'bar'>;
+export default getColor;

package/esm/BarChart/seriesConfig/{getColor.js → bar/getColor.js}

@@ -1,17 +1,25 @@
+import { getSeriesColorFn } from "../../../internals/getSeriesColorFn.js";
 const getColor = (series, xAxis, yAxis) => {
   const verticalLayout = series.layout === 'vertical';
   const bandColorScale = verticalLayout ? xAxis?.colorScale : yAxis?.colorScale;
   const valueColorScale = verticalLayout ? yAxis?.colorScale : xAxis?.colorScale;
   const bandValues = verticalLayout ? xAxis?.data : yAxis?.data;
+  const getSeriesColor = getSeriesColorFn(series);
   if (valueColorScale) {
     return dataIndex => {
       if (dataIndex === undefined) {
         return series.color;
       }
       const value = series.data[dataIndex];
-      const color = value === null ? series.color : valueColorScale(value);
+      const color = value === null ? getSeriesColor({
+        value,
+        dataIndex
+      }) : valueColorScale(value);
       if (color === null) {
-        return series.color;
+        return getSeriesColor({
+          value,
+          dataIndex
+        });
       }
       return color;
     };
@@ -22,13 +30,28 @@ const getColor = (series, xAxis, yAxis) => {
         return series.color;
       }
       const value = bandValues[dataIndex];
-      const color = value === null ? series.color : bandColorScale(value);
+      const color = value === null ? getSeriesColor({
+        value,
+        dataIndex
+      }) : bandColorScale(value);
       if (color === null) {
-        return series.color;
+        return getSeriesColor({
+          value,
+          dataIndex
+        });
       }
       return color;
     };
   }
-  return () => series.color;
+  return dataIndex => {
+    if (dataIndex === undefined) {
+      return series.color;
+    }
+    const value = series.data[dataIndex];
+    return getSeriesColor({
+      value,
+      dataIndex
+    });
+  };
 };
 export default getColor;

package/esm/BarChart/seriesConfig/bar/getSeriesWithDefaultValues.d.ts

@@ -0,0 +1,3 @@
+import type { GetSeriesWithDefaultValues } from "../../../internals/plugins/models/seriesConfig/index.js";
+declare const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'bar'>;
+export default getSeriesWithDefaultValues;

package/esm/BarChart/seriesConfig/bar/legend.d.ts

@@ -0,0 +1,3 @@
+import { LegendGetter } from "../../../internals/plugins/models/index.js";
+declare const legendGetter: LegendGetter<'bar'>;
+export default legendGetter;

package/esm/BarChart/seriesConfig/{legend.js → bar/legend.js}

@@ -1,4 +1,4 @@
-import { getLabel } from "../../internals/getLabel.js";
+import { getLabel } from "../../../internals/getLabel.js";
 const legendGetter = params => {
   const {
     seriesOrder,

package/esm/BarChart/seriesConfig/bar/seriesProcessor.d.ts

@@ -0,0 +1,3 @@
+import { SeriesProcessor } from "../../../internals/plugins/models/index.js";
+declare const seriesProcessor: SeriesProcessor<'bar'>;
+export default seriesProcessor;

package/esm/BarChart/seriesConfig/{seriesProcessor.js → bar/seriesProcessor.js}

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
 import { warnOnce } from '@mui/x-internals/warning';
-import { getStackingGroups } from "../../internals/stackSeries.js";
+import { getStackingGroups } from "../../../internals/stackSeries.js";
 const barValueFormatter = v => v == null ? '' : v.toLocaleString();
 const seriesProcessor = (params, dataset) => {
   const {

package/esm/BarChart/seriesConfig/bar/tooltip.d.ts

@@ -0,0 +1,4 @@
+import type { AxisTooltipGetter, TooltipGetter } from "../../../internals/plugins/models/index.js";
+declare const tooltipGetter: TooltipGetter<'bar'>;
+export declare const axisTooltipGetter: AxisTooltipGetter<'bar', 'x' | 'y'>;
+export default tooltipGetter;

package/esm/BarChart/seriesConfig/{tooltip.js → bar/tooltip.js}

@@ -1,4 +1,4 @@
-import { getLabel } from "../../internals/getLabel.js";
+import { getLabel } from "../../../internals/getLabel.js";
 const tooltipGetter = params => {
   const {
     series,

package/esm/BarChart/seriesConfig/bar/tooltipPosition.d.ts

@@ -0,0 +1,3 @@
+import type { TooltipItemPositionGetter } from "../../../internals/plugins/models/seriesConfig/tooltipItemPositionGetter.types.js";
+declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'bar'>;
+export default tooltipItemPositionGetter;