@mui/x-charts 8.15.0 → 8.17.0

package/RadarChart/RadarChart.plugins.d.ts

@@ -1,5 +1,5 @@
 import { UseChartPolarAxisSignature } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
 import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-export declare const RADAR_PLUGINS: readonly [import("../internals/index.js").ChartPlugin<UseChartPolarAxisSignature<any>>, import("../internals/index.js").ChartPlugin<UseChartInteractionSignature>, import("../internals/index.js").ChartPlugin<UseChartHighlightSignature>];
-export type RadarChartPluginSignatures = [UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature];
+export declare const RADAR_PLUGINS: readonly [import("../internals/index.js").ChartPlugin<UseChartInteractionSignature>, import("../internals/index.js").ChartPlugin<UseChartPolarAxisSignature<any>>, import("../internals/index.js").ChartPlugin<UseChartHighlightSignature>];
+export type RadarChartPluginSignatures = [UseChartInteractionSignature, UseChartPolarAxisSignature, UseChartHighlightSignature];

package/RadarChart/RadarChart.plugins.js

@@ -7,4 +7,4 @@ exports.RADAR_PLUGINS = void 0;
 var _useChartPolarAxis = require("../internals/plugins/featurePlugins/useChartPolarAxis");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
-const RADAR_PLUGINS = exports.RADAR_PLUGINS = [_useChartPolarAxis.useChartPolarAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight];
+const RADAR_PLUGINS = exports.RADAR_PLUGINS = [_useChartInteraction.useChartInteraction, _useChartPolarAxis.useChartPolarAxis, _useChartHighlight.useChartHighlight];

package/RadarChart/RadarDataProvider/RadarDataProvider.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { MakeOptional } from '@mui/x-internals/types';
 import { RadarChartPluginSignatures } from "../RadarChart.plugins.js";
 import { RadarSeriesType } from "../../models/seriesType/radar.js";
@@ -22,5 +21,5 @@ export type RadarDataProviderProps<TSignatures extends readonly ChartAnyPluginSi
    */
   highlight?: 'axis' | 'series' | 'none';
 };
-declare function RadarDataProvider<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginSignatures>(props: RadarDataProviderProps<TSignatures>): React.JSX.Element;
+declare function RadarDataProvider<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginSignatures>(props: RadarDataProviderProps<TSignatures>): import("react/jsx-runtime").JSX.Element;
 export { RadarDataProvider };

package/RadarChart/RadarGrid/CircularRadarGrid.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import { RadarGridRenderProps } from "./RadarGrid.types.js";
 /**
  * @ignore - internal component.
  */
-export declare function CircularRadarGrid(props: RadarGridRenderProps): React.JSX.Element;
+export declare function CircularRadarGrid(props: RadarGridRenderProps): import("react/jsx-runtime").JSX.Element;

package/RadarChart/RadarGrid/CircularRadarStripes.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import { RadarGridStripeRenderProps } from "./RadarGrid.types.js";
 /**
  * @ignore - internal component.
  */
-export declare function CircularRadarStripes(props: RadarGridStripeRenderProps): React.JSX.Element;
+export declare function CircularRadarStripes(props: RadarGridStripeRenderProps): import("react/jsx-runtime").JSX.Element;

package/RadarChart/RadarGrid/RadarGrid.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import { RadarGridProps } from "./RadarGrid.types.js";
-declare function RadarGrid(props: RadarGridProps): React.JSX.Element | null;
+declare function RadarGrid(props: RadarGridProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace RadarGrid {
   var propTypes: any;
 }

package/RadarChart/RadarGrid/SharpRadarGrid.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import { RadarGridRenderProps } from "./RadarGrid.types.js";
 /**
  * @ignore - internal component.
  */
-export declare function SharpRadarGrid(props: RadarGridRenderProps): React.JSX.Element;
+export declare function SharpRadarGrid(props: RadarGridRenderProps): import("react/jsx-runtime").JSX.Element;

package/RadarChart/RadarGrid/SharpRadarStripes.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import { RadarGridStripeRenderProps } from "./RadarGrid.types.js";
 /**
  * @ignore - internal component.
  */
-export declare function SharpRadarStripes(props: RadarGridStripeRenderProps): React.JSX.Element;
+export declare function SharpRadarStripes(props: RadarGridStripeRenderProps): import("react/jsx-runtime").JSX.Element;

package/RadarChart/RadarMetricLabels/RadarMetricLabels.d.ts

@@ -1,3 +1,2 @@
-import * as React from 'react';
-declare function RadarMetricLabels(): React.JSX.Element;
+declare function RadarMetricLabels(): import("react/jsx-runtime").JSX.Element;
 export { RadarMetricLabels };

package/RadarChart/RadarSeriesPlot/RadarSeriesArea.d.ts

@@ -16,7 +16,7 @@ interface GetPathPropsParams {
   color: string;
 }
 export declare function getPathProps(params: GetPathPropsParams): React.SVGProps<SVGPathElement>;
-declare function RadarSeriesArea(props: RadarSeriesAreaProps): React.JSX.Element;
+declare function RadarSeriesArea(props: RadarSeriesAreaProps): import("react/jsx-runtime").JSX.Element;
 declare namespace RadarSeriesArea {
   var propTypes: any;
 }

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.d.ts

@@ -16,7 +16,7 @@ interface GetCirclePropsParams {
   color: string;
 }
 export declare function getCircleProps(params: GetCirclePropsParams): React.SVGProps<SVGCircleElement>;
-declare function RadarSeriesMarks(props: RadarSeriesMarksProps): React.JSX.Element;
+declare function RadarSeriesMarks(props: RadarSeriesMarksProps): import("react/jsx-runtime").JSX.Element;
 declare namespace RadarSeriesMarks {
   var propTypes: any;
 }

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.js

@@ -58,7 +58,6 @@ function RadarSeriesMarks(props) {
     children: seriesCoordinates?.map(({
       seriesId: id,
       points,
-      color,
       hideMark,
       fillArea
     }) => {
@@ -69,7 +68,7 @@ function RadarSeriesMarks(props) {
         children: points.map((point, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({}, getCircleProps({
           seriesId: id,
           point,
-          color,
+          color: point.color,
           fillArea,
           isFaded,
           isHighlighted,

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import { RadarSeriesPlotProps } from "./RadarSeriesPlot.types.js";
-declare function RadarSeriesPlot(props: RadarSeriesPlotProps): React.JSX.Element;
+declare function RadarSeriesPlot(props: RadarSeriesPlotProps): import("react/jsx-runtime").JSX.Element;
 declare namespace RadarSeriesPlot {
   var propTypes: any;
 }

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.js

@@ -1,13 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RadarSeriesPlot = RadarSeriesPlot;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useRadarSeriesData = require("./useRadarSeriesData");
 var _useInteractionItemProps = require("../../hooks/useInteractionItemProps");
@@ -60,7 +58,7 @@ function RadarSeriesPlot(props) {
         }, interactionProps[seriesIndex]), seriesId), !hideMark && points.map((point, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({}, (0, _RadarSeriesMarks.getCircleProps)({
           seriesId,
           point,
-          color,
+          color: point.color,
           fillArea,
           isFaded,
           isHighlighted,

package/RadarChart/RadarSeriesPlot/useRadarSeriesData.d.ts

@@ -14,11 +14,14 @@ export declare function useRadarSeriesData(querySeriesId?: SeriesId): {
     isItemHighlighted: boolean;
     isItemFaded: boolean;
     dataIndex: number;
+    value: number;
+    color: string;
   }[];
   type: "radar";
   label?: string | ((location: "tooltip" | "legend") => string) | undefined;
-  highlightScope?: import("../../index.js").HighlightScope | undefined;
   labelMarkType?: import("../../internals/index.js").ChartsLabelMarkType | undefined;
+  highlightScope?: import("../../index.js").HighlightScope | undefined;
+  colorGetter?: ((data: import("../../internals/index.js").ColorCallbackValue<number>) => string) | undefined;
   hideMark?: boolean | undefined;
   fillArea?: boolean | undefined;
   data: number[];

package/RadarChart/RadarSeriesPlot/useRadarSeriesData.js

@@ -11,6 +11,7 @@ var _useRadarSeries = require("../../hooks/useRadarSeries");
 var _useAxis = require("../../hooks/useAxis");
 var _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
 var _useChartContext = require("../../context/ChartProvider/useChartContext");
+var _getSeriesColorFn = require("../../internals/getSeriesColorFn");
 /**
  * This hook provides all the data needed to display radar series.
  * @param querySeriesId The id of the series to display
@@ -39,6 +40,7 @@ function useRadarSeriesData(querySeriesId) {
     const isSeriesFaded = !isSeriesHighlighted && isItemFaded({
       seriesId
     });
+    const getColor = (0, _getSeriesColorFn.getSeriesColorFn)(series);
     return (0, _extends2.default)({}, series, {
       seriesId: series.id,
       isSeriesHighlighted,
@@ -60,7 +62,12 @@ function useRadarSeriesData(querySeriesId) {
           y,
           isItemHighlighted: highlighted,
           isItemFaded: faded,
-          dataIndex
+          dataIndex,
+          value,
+          color: getColor({
+            value,
+            dataIndex
+          })
         };
       })
     });

package/RadarChart/seriesConfig/getColor.js

@@ -4,7 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _getSeriesColorFn = require("../../internals/getSeriesColorFn");
 const getColor = series => {
-  return () => series.color;
+  const getSeriesColor = (0, _getSeriesColorFn.getSeriesColorFn)(series);
+  return dataIndex => {
+    if (dataIndex === undefined) {
+      return series.color;
+    }
+    const value = series.data[dataIndex];
+    return getSeriesColor({
+      value,
+      dataIndex
+    });
+  };
 };
 var _default = exports.default = getColor;

package/RadarChart/seriesConfig/getSeriesWithDefaultValues.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
-  return (0, _extends2.default)({
+  return (0, _extends2.default)({}, seriesData, {
     id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
-    color: colors[seriesIndex % colors.length]
-  }, seriesData);
+    color: seriesData.color ?? colors[seriesIndex % colors.length]
+  });
 };
 var _default = exports.default = getSeriesWithDefaultValues;

package/ScatterChart/BatchScatter.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { DefaultizedScatterSeriesType } from "../models/seriesType/scatter.js";
 import { D3Scale } from "../models/axis.js";
 import { ScatterClasses } from "./scatterClasses.js";
@@ -29,4 +28,4 @@ export interface BatchScatterPathsProps {
  *
  * You can read about all the limitations [here](https://mui.com/x/react-charts/scatter/#performance).
  */
-export declare function BatchScatter(props: BatchScatterProps): React.JSX.Element;
+export declare function BatchScatter(props: BatchScatterProps): import("react/jsx-runtime").JSX.Element;

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/ScatterChart.plugins.d.ts

@@ -6,5 +6,5 @@ import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helper
 import { UseChartClosestPointSignature } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
 import { UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
 export declare const SCATTER_CHART_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartPluginSignatures>;

package/ScatterChart/ScatterChart.plugins.js

@@ -11,4 +11,4 @@ var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHi
 var _useChartClosestPoint = require("../internals/plugins/featurePlugins/useChartClosestPoint");
 var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
 var _useChartBrush = require("../internals/plugins/featurePlugins/useChartBrush");
-const SCATTER_CHART_PLUGINS = exports.SCATTER_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartCartesianAxis.useChartCartesianAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight, _useChartClosestPoint.useChartClosestPoint, _useChartKeyboardNavigation.useChartKeyboardNavigation];
+const SCATTER_CHART_PLUGINS = exports.SCATTER_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartClosestPoint.useChartClosestPoint, _useChartKeyboardNavigation.useChartKeyboardNavigation];

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/getSeriesWithDefaultValues.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
-  return (0, _extends2.default)({
+  return (0, _extends2.default)({}, seriesData, {
     id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
-    color: colors[seriesIndex % colors.length]
-  }, seriesData);
+    color: seriesData.color ?? colors[seriesIndex % colors.length]
+  });
 };
 var _default = exports.default = getSeriesWithDefaultValues;

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,18 +4,20 @@ 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"));
 var _legend = _interopRequireDefault(require("./legend"));
 var _tooltip = _interopRequireDefault(require("./tooltip"));
 var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWithDefaultValues"));
-const seriesConfig = exports.seriesConfig = {
+var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
+const scatterSeriesConfig = exports.scatterSeriesConfig = {
   seriesProcessor: _seriesProcessor.default,
   colorProcessor: _getColor.default,
   legendGetter: _legend.default,
   tooltipGetter: _tooltip.default,
+  tooltipItemPositionGetter: _tooltipPosition.default,
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default

package/ScatterChart/seriesConfig/tooltipPosition.d.ts

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

package/ScatterChart/seriesConfig/tooltipPosition.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const tooltipItemPositionGetter = params => {
+  const {
+    series,
+    identifier,
+    axesConfig
+  } = params;
+  if (!identifier || identifier.dataIndex === undefined) {
+    return null;
+  }
+  const itemSeries = series.scatter?.series[identifier.seriesId];
+  if (itemSeries == null) {
+    return null;
+  }
+  if (axesConfig.x === undefined || axesConfig.y === undefined) {
+    return null;
+  }
+  const xValue = itemSeries.data?.[identifier.dataIndex].x;
+  const yValue = itemSeries.data?.[identifier.dataIndex].y;
+  if (xValue == null || yValue == null) {
+    return null;
+  }
+  return {
+    x: axesConfig.x.scale(xValue),
+    y: axesConfig.y.scale(yValue)
+  };
+};
+var _default = exports.default = tooltipItemPositionGetter;

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,15 +20,15 @@ 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.
 // To remove them, you can provide a `plugins` props.
-const defaultPlugins = [_useChartZAxis.useChartZAxis, _useChartCartesianAxis.useChartCartesianAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight];
+const defaultPlugins = [_useChartZAxis.useChartZAxis, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight];
 function ChartProvider(props) {
   const {
     children,

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/BarChart.plugins.d.ts

@@ -5,5 +5,5 @@ import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/
 import { UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
 import { UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-export type BarChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<'bar'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
+export type BarChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'bar'>, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
 export declare const BAR_CHART_PLUGINS: ConvertSignaturesIntoPlugins<BarChartPluginSignatures>;

package/esm/BarChart/BarChart.plugins.js

@@ -4,4 +4,4 @@ import { useChartInteraction } from "../internals/plugins/featurePlugins/useChar
 import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { useChartKeyboardNavigation } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { useChartBrush } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-export const BAR_CHART_PLUGINS = [useChartZAxis, useChartBrush, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation];
+export const BAR_CHART_PLUGINS = [useChartZAxis, useChartBrush, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartKeyboardNavigation];