@mui/x-charts 9.0.1 → 9.0.3

package/LineChart/seriesConfig/seriesProcessor.mjs

@@ -5,7 +5,7 @@ import { warnOnce } from '@mui/x-internals/warning';
 import { getStackingGroups } from "../../internals/stacking/index.mjs";
 const defaultShapes = ['circle', 'square', 'diamond', 'cross', 'star', 'triangle', 'wye'];
 const lineValueFormatter = v => v == null ? '' : v.toLocaleString();
-const seriesProcessor = (params, dataset, isItemVisible) => {
+function seriesProcessor(params, dataset, isItemVisible) {
   const {
     seriesOrder,
     series
@@ -31,22 +31,36 @@ const seriesProcessor = (params, dataset, isItemVisible) => {
           d3Dataset[dataIndex][id] = value;
         }
       });
+    } else if (series[id].valueGetter && dataset) {
+      // When valueGetter is used without dataKey, populate d3Dataset with the series id as key
+      dataset.forEach((entry, dataIndex) => {
+        const value = series[id].valueGetter(entry);
+        if (d3Dataset.length <= dataIndex) {
+          d3Dataset.push({
+            [id]: value
+          });
+        } else {
+          d3Dataset[dataIndex][id] = value;
+        }
+      });
     } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Line series with id="${id}" has no data. ` + 'The chart cannot render this series without data. ' + 'Provide a data property to the series or use the dataset prop.' : _formatErrorMessage(27, id));
     }
     if (process.env.NODE_ENV !== 'production') {
       if (!data && dataset) {
         const dataKey = series[id].dataKey;
-        if (!dataKey) {
-          throw new Error(`MUI X Charts: Line series with id="${id}" has no data and no dataKey. ` + 'When using the dataset prop, each series must have a dataKey to identify which dataset column to use. ' + 'Add a dataKey property to the series configuration.');
+        if (!dataKey && !series[id].valueGetter) {
+          throw new Error(`MUI X Charts: Line series with id="${id}" has no data, no dataKey, and no valueGetter. ` + 'When using the dataset prop, each series must have a dataKey or valueGetter to identify which dataset values to use. ' + 'Add a dataKey or valueGetter property to the series configuration.');
         }
-        dataset.forEach((entry, index) => {
-          const value = entry[dataKey];
-          if (value != null && typeof value !== 'number') {
-            warnOnce(`MUI X Charts: your dataset key "${dataKey}" is used for plotting lines, but the dataset contains the non-null non-numerical element "${value}" at index ${index}.
+        if (dataKey) {
+          dataset.forEach((entry, index) => {
+            const value = entry[dataKey];
+            if (value != null && typeof value !== 'number') {
+              warnOnce(`MUI X Charts: your dataset key "${dataKey}" is used for plotting lines, but the dataset contains the non-null non-numerical element "${value}" at index ${index}.
 Line plots only support numeric and null values.`);
-          }
-        });
+            }
+          });
+        }
       }
     }
   });
@@ -81,11 +95,21 @@ Line plots only support numeric and null values.`);
       return d[key] ?? 0;
     }).order(fixedOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach((id, index) => {
-      const dataKey = series[id].dataKey;
-      const data = dataKey ? dataset.map(d => {
-        const value = d[dataKey];
-        return typeof value === 'number' ? value : null;
-      }) : series[id].data;
+      const {
+        dataKey,
+        valueGetter
+      } = series[id];
+      let data;
+      if (valueGetter) {
+        data = dataset.map(d => valueGetter(d));
+      } else if (dataKey) {
+        data = dataset.map(d => {
+          const value = d[dataKey];
+          return typeof value === 'number' ? value : null;
+        });
+      } else {
+        data = series[id].data;
+      }
       const hidden = !isItemVisible?.({
         type: 'line',
         seriesId: id
@@ -107,5 +131,5 @@ Line plots only support numeric and null values.`);
     stackingGroups,
     series: completedSeries
   };
-};
+}
 export default seriesProcessor;

package/RadarChart/RadarSeriesPlot/useRadarSeriesData.d.mts

@@ -19,14 +19,14 @@ export declare function useRadarSeriesData(querySeriesId?: SeriesId): {
   }[];
   hidden: boolean;
   type: "radar";
-  label?: string | ((location: "tooltip" | "legend") => string) | undefined;
   highlightScope?: import("../../internals/index.mjs").CommonHighlightScope | undefined;
   labelMarkType?: import("../../internals/index.mjs").ChartsLabelMarkType | undefined;
   colorGetter?: ((data: import("../../internals/index.mjs").ColorCallbackValue<number>) => string) | undefined;
+  label?: string | ((location: "tooltip" | "legend") => string) | undefined;
   hideMark?: boolean | undefined;
   fillArea?: boolean | undefined;
-  data: number[];
   id: SeriesId;
   valueFormatter: import("../../internals/index.mjs").SeriesValueFormatter<number>;
   color: string;
+  data: number[];
 }[];

package/RadarChart/RadarSeriesPlot/useRadarSeriesData.d.ts

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

package/ScatterChart/Scatter.d.mts

@@ -4,6 +4,9 @@ import { type DefaultizedScatterSeriesType, type ScatterItemIdentifier } from ".
 import { type D3Scale } from "../models/axis.mjs";
 import { type ColorGetter } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
 import type { ScatterClasses } from "./scatterClasses.mjs";
+/**
+ * @deprecated The `Scatter` component is an internal implementation detail of `ScatterPlot` and will be removed from the public API in v10. Use `ScatterPlot` instead.
+ */
 export interface ScatterProps {
   series: DefaultizedScatterSeriesType;
   xScale: D3Scale;
@@ -25,9 +28,17 @@ export interface ScatterProps {
   slots?: ScatterSlots;
   slotProps?: ScatterSlotProps;
 }
+/**
+ * @deprecated The `Scatter` component is an internal implementation detail of `ScatterPlot` and will be removed from the public API in v10. Use `ScatterPlot` instead.
+ */
 export interface ScatterSlots extends ScatterMarkerSlots {}
+/**
+ * @deprecated The `Scatter` component is an internal implementation detail of `ScatterPlot` and will be removed from the public API in v10. Use `ScatterPlot` instead.
+ */
 export interface ScatterSlotProps extends ScatterMarkerSlotProps {}
 /**
+ * @deprecated The `Scatter` component is an internal implementation detail of `ScatterPlot` and will be removed from the public API in v10. Use `ScatterPlot` instead.
+ *
  * Demos:
  *
  * - [Scatter](https://mui.com/x/react-charts/scatter/)

package/ScatterChart/Scatter.d.ts

@@ -4,6 +4,9 @@ import { type DefaultizedScatterSeriesType, type ScatterItemIdentifier } from ".
 import { type D3Scale } from "../models/axis.js";
 import { type ColorGetter } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 import type { ScatterClasses } from "./scatterClasses.js";
+/**
+ * @deprecated The `Scatter` component is an internal implementation detail of `ScatterPlot` and will be removed from the public API in v10. Use `ScatterPlot` instead.
+ */
 export interface ScatterProps {
   series: DefaultizedScatterSeriesType;
   xScale: D3Scale;
@@ -25,9 +28,17 @@ export interface ScatterProps {
   slots?: ScatterSlots;
   slotProps?: ScatterSlotProps;
 }
+/**
+ * @deprecated The `Scatter` component is an internal implementation detail of `ScatterPlot` and will be removed from the public API in v10. Use `ScatterPlot` instead.
+ */
 export interface ScatterSlots extends ScatterMarkerSlots {}
+/**
+ * @deprecated The `Scatter` component is an internal implementation detail of `ScatterPlot` and will be removed from the public API in v10. Use `ScatterPlot` instead.
+ */
 export interface ScatterSlotProps extends ScatterMarkerSlotProps {}
 /**
+ * @deprecated The `Scatter` component is an internal implementation detail of `ScatterPlot` and will be removed from the public API in v10. Use `ScatterPlot` instead.
+ *
  * Demos:
  *
  * - [Scatter](https://mui.com/x/react-charts/scatter/)

package/ScatterChart/Scatter.js

@@ -24,6 +24,17 @@ var _ChartsProvider = require("../context/ChartsProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["ownerState"];
 /**
+ * @deprecated The `Scatter` component is an internal implementation detail of `ScatterPlot` and will be removed from the public API in v10. Use `ScatterPlot` instead.
+ */
+/**
+ * @deprecated The `Scatter` component is an internal implementation detail of `ScatterPlot` and will be removed from the public API in v10. Use `ScatterPlot` instead.
+ */
+/**
+ * @deprecated The `Scatter` component is an internal implementation detail of `ScatterPlot` and will be removed from the public API in v10. Use `ScatterPlot` instead.
+ */
+/**
+ * @deprecated The `Scatter` component is an internal implementation detail of `ScatterPlot` and will be removed from the public API in v10. Use `ScatterPlot` instead.
+ *
  * Demos:
  *
  * - [Scatter](https://mui.com/x/react-charts/scatter/)

package/ScatterChart/Scatter.mjs

@@ -15,8 +15,22 @@ import { ScatterMarker } from "./ScatterMarker.mjs";
 import { useUtilityClasses } from "./scatterClasses.mjs";
 import { useScatterPlotData } from "./useScatterPlotData.mjs";
 import { useChartsContext } from "../context/ChartsProvider/index.mjs";
+
+/**
+ * @deprecated The `Scatter` component is an internal implementation detail of `ScatterPlot` and will be removed from the public API in v10. Use `ScatterPlot` instead.
+ */
+
+/**
+ * @deprecated The `Scatter` component is an internal implementation detail of `ScatterPlot` and will be removed from the public API in v10. Use `ScatterPlot` instead.
+ */
+
+/**
+ * @deprecated The `Scatter` component is an internal implementation detail of `ScatterPlot` and will be removed from the public API in v10. Use `ScatterPlot` instead.
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
+ * @deprecated The `Scatter` component is an internal implementation detail of `ScatterPlot` and will be removed from the public API in v10. Use `ScatterPlot` instead.
+ *
  * Demos:
  *
  * - [Scatter](https://mui.com/x/react-charts/scatter/)

package/ScatterChart/ScatterChart.js

@@ -435,7 +435,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
-    valueFormatter: _propTypes.default.func
+    valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
@@ -494,7 +495,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
-    valueFormatter: _propTypes.default.func
+    valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
@@ -540,7 +542,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
-    valueFormatter: _propTypes.default.func
+    valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
@@ -587,7 +590,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
-    valueFormatter: _propTypes.default.func
+    valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
@@ -633,7 +637,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
-    valueFormatter: _propTypes.default.func
+    valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
@@ -679,7 +684,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
-    valueFormatter: _propTypes.default.func
+    valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
@@ -729,7 +735,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
-    valueFormatter: _propTypes.default.func
+    valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
@@ -779,7 +786,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
-    valueFormatter: _propTypes.default.func
+    valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
@@ -825,7 +833,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
-    valueFormatter: _propTypes.default.func
+    valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func
   })]).isRequired),
   /**
    * The configuration of the y-axes.
@@ -891,6 +900,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
@@ -949,6 +959,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
@@ -994,6 +1005,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
@@ -1040,6 +1052,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
@@ -1085,6 +1098,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
@@ -1130,6 +1144,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
@@ -1179,6 +1194,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
@@ -1228,6 +1244,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
@@ -1273,6 +1290,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   })]).isRequired),
   /**
@@ -1298,6 +1316,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     dataKey: _propTypes.default.string,
     id: _propTypes.default.string,
     max: _propTypes.default.number,
-    min: _propTypes.default.number
+    min: _propTypes.default.number,
+    valueGetter: _propTypes.default.func
   }))
 } : void 0;

package/ScatterChart/ScatterChart.mjs

@@ -428,7 +428,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
-    valueFormatter: PropTypes.func
+    valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
@@ -487,7 +488,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
-    valueFormatter: PropTypes.func
+    valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
@@ -533,7 +535,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
-    valueFormatter: PropTypes.func
+    valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
@@ -580,7 +583,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
-    valueFormatter: PropTypes.func
+    valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
@@ -626,7 +630,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
-    valueFormatter: PropTypes.func
+    valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
@@ -672,7 +677,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
-    valueFormatter: PropTypes.func
+    valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
@@ -722,7 +728,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
-    valueFormatter: PropTypes.func
+    valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
@@ -772,7 +779,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
-    valueFormatter: PropTypes.func
+    valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
@@ -818,7 +826,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
-    valueFormatter: PropTypes.func
+    valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func
   })]).isRequired),
   /**
    * The configuration of the y-axes.
@@ -884,6 +893,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
@@ -942,6 +952,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
@@ -987,6 +998,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
@@ -1033,6 +1045,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
@@ -1078,6 +1091,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
@@ -1123,6 +1137,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
@@ -1172,6 +1187,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
@@ -1221,6 +1237,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
@@ -1266,6 +1283,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   })]).isRequired),
   /**
@@ -1291,7 +1309,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     dataKey: PropTypes.string,
     id: PropTypes.string,
     max: PropTypes.number,
-    min: PropTypes.number
+    min: PropTypes.number,
+    valueGetter: PropTypes.func
   }))
 } : void 0;
 export { ScatterChart };

package/ScatterChart/seriesConfig/seriesProcessor.js

@@ -17,14 +17,19 @@ const seriesProcessor = ({
     if (seriesData?.datasetKeys && missingKeys.length > 0) {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Scatter series with id="${seriesId}" has incomplete datasetKeys. ` + `Properties ${missingKeys.map(key => `"${key}"`).join(', ')} are missing. ` + 'Scatter plots require both "x" and "y" keys to map dataset values to coordinates. ' + 'Add the missing datasetKeys to the series configuration.' : (0, _formatErrorMessage2.default)(29, seriesId, missingKeys.map(key => `"${key}"`).join(', ')));
     }
-    const data = !datasetKeys ? seriesData.data ?? [] : dataset?.map(d => {
-      return {
+    let data;
+    if (seriesData.valueGetter) {
+      data = dataset?.map(seriesData.valueGetter) ?? [];
+    } else if (datasetKeys) {
+      data = dataset?.map(d => ({
         x: d[datasetKeys.x] ?? null,
         y: d[datasetKeys.y] ?? null,
         z: datasetKeys.z && d[datasetKeys.z],
         id: datasetKeys.id && d[datasetKeys.id]
-      };
-    }) ?? [];
+      })) ?? [];
+    } else {
+      data = seriesData.data ?? [];
+    }
     return [seriesId, (0, _extends2.default)({
       labelMarkType: 'circle',
       markerSize: 4

package/ScatterChart/seriesConfig/seriesProcessor.mjs

@@ -10,14 +10,19 @@ const seriesProcessor = ({
     if (seriesData?.datasetKeys && missingKeys.length > 0) {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Scatter series with id="${seriesId}" has incomplete datasetKeys. ` + `Properties ${missingKeys.map(key => `"${key}"`).join(', ')} are missing. ` + 'Scatter plots require both "x" and "y" keys to map dataset values to coordinates. ' + 'Add the missing datasetKeys to the series configuration.' : _formatErrorMessage(29, seriesId, missingKeys.map(key => `"${key}"`).join(', ')));
     }
-    const data = !datasetKeys ? seriesData.data ?? [] : dataset?.map(d => {
-      return {
+    let data;
+    if (seriesData.valueGetter) {
+      data = dataset?.map(seriesData.valueGetter) ?? [];
+    } else if (datasetKeys) {
+      data = dataset?.map(d => ({
         x: d[datasetKeys.x] ?? null,
         y: d[datasetKeys.y] ?? null,
         z: datasetKeys.z && d[datasetKeys.z],
         id: datasetKeys.id && d[datasetKeys.id]
-      };
-    }) ?? [];
+      })) ?? [];
+    } else {
+      data = seriesData.data ?? [];
+    }
     return [seriesId, _extends({
       labelMarkType: 'circle',
       markerSize: 4