@mui/x-charts 9.0.0 → 9.0.2

package/LineChart/LineChart.d.mts

@@ -5,7 +5,6 @@ import { type AreaPlotProps, type AreaPlotSlotProps, type AreaPlotSlots } from "
 import { type LinePlotProps, type LinePlotSlotProps, type LinePlotSlots } from "./LinePlot.mjs";
 import { type ChartsContainerProps } from "../ChartsContainer/index.mjs";
 import { type MarkPlotProps, type MarkPlotSlotProps, type MarkPlotSlots } from "./MarkPlot.mjs";
-import { type ChartsAxisProps } from "../ChartsAxis/ChartsAxis.mjs";
 import { type LineSeriesType } from "../models/seriesType/line.mjs";
 import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.mjs";
 import { type ChartsLegendSlotProps, type ChartsLegendSlots } from "../ChartsLegend/index.mjs";
@@ -19,7 +18,7 @@ import type { ChartsToolbarSlots, ChartsToolbarSlotProps } from "../Toolbar/inde
 export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export type LineSeries = MakeOptional<LineSeriesType, 'type'>;
-export interface LineChartProps extends Omit<ChartsContainerProps<'line', LineChartPluginSignatures>, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+export interface LineChartProps extends Omit<ChartsContainerProps<'line', LineChartPluginSignatures>, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the line chart.
    * An array of [[LineSeries]] objects.

package/LineChart/LineChart.d.ts

@@ -5,7 +5,6 @@ import { type AreaPlotProps, type AreaPlotSlotProps, type AreaPlotSlots } from "
 import { type LinePlotProps, type LinePlotSlotProps, type LinePlotSlots } from "./LinePlot.js";
 import { type ChartsContainerProps } from "../ChartsContainer/index.js";
 import { type MarkPlotProps, type MarkPlotSlotProps, type MarkPlotSlots } from "./MarkPlot.js";
-import { type ChartsAxisProps } from "../ChartsAxis/ChartsAxis.js";
 import { type LineSeriesType } from "../models/seriesType/line.js";
 import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
 import { type ChartsLegendSlotProps, type ChartsLegendSlots } from "../ChartsLegend/index.js";
@@ -19,7 +18,7 @@ import type { ChartsToolbarSlots, ChartsToolbarSlotProps } from "../Toolbar/inde
 export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export type LineSeries = MakeOptional<LineSeriesType, 'type'>;
-export interface LineChartProps extends Omit<ChartsContainerProps<'line', LineChartPluginSignatures>, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+export interface LineChartProps extends Omit<ChartsContainerProps<'line', LineChartPluginSignatures>, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the line chart.
    * An array of [[LineSeries]] objects.

package/LineChart/LineChart.js

@@ -440,7 +440,8 @@ process.env.NODE_ENV !== "production" ? LineChart.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,
@@ -499,7 +500,8 @@ process.env.NODE_ENV !== "production" ? LineChart.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,
@@ -545,7 +547,8 @@ process.env.NODE_ENV !== "production" ? LineChart.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,
@@ -592,7 +595,8 @@ process.env.NODE_ENV !== "production" ? LineChart.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,
@@ -638,7 +642,8 @@ process.env.NODE_ENV !== "production" ? LineChart.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,
@@ -684,7 +689,8 @@ process.env.NODE_ENV !== "production" ? LineChart.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,
@@ -734,7 +740,8 @@ process.env.NODE_ENV !== "production" ? LineChart.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,
@@ -784,7 +791,8 @@ process.env.NODE_ENV !== "production" ? LineChart.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,
@@ -830,7 +838,8 @@ process.env.NODE_ENV !== "production" ? LineChart.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.
@@ -896,6 +905,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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']),
@@ -954,6 +964,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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']),
@@ -999,6 +1010,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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']),
@@ -1045,6 +1057,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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']),
@@ -1090,6 +1103,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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']),
@@ -1135,6 +1149,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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']),
@@ -1184,6 +1199,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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']),
@@ -1233,6 +1249,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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']),
@@ -1278,6 +1295,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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)
 } : void 0;

package/LineChart/LineChart.mjs

@@ -433,7 +433,8 @@ process.env.NODE_ENV !== "production" ? LineChart.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,
@@ -492,7 +493,8 @@ process.env.NODE_ENV !== "production" ? LineChart.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,
@@ -538,7 +540,8 @@ process.env.NODE_ENV !== "production" ? LineChart.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,
@@ -585,7 +588,8 @@ process.env.NODE_ENV !== "production" ? LineChart.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,
@@ -631,7 +635,8 @@ process.env.NODE_ENV !== "production" ? LineChart.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,
@@ -677,7 +682,8 @@ process.env.NODE_ENV !== "production" ? LineChart.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,
@@ -727,7 +733,8 @@ process.env.NODE_ENV !== "production" ? LineChart.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,
@@ -777,7 +784,8 @@ process.env.NODE_ENV !== "production" ? LineChart.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,
@@ -823,7 +831,8 @@ process.env.NODE_ENV !== "production" ? LineChart.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.
@@ -889,6 +898,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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']),
@@ -947,6 +957,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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']),
@@ -992,6 +1003,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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']),
@@ -1038,6 +1050,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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']),
@@ -1083,6 +1096,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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']),
@@ -1128,6 +1142,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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']),
@@ -1177,6 +1192,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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']),
@@ -1226,6 +1242,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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']),
@@ -1271,6 +1288,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   })]).isRequired)
 } : void 0;

package/LineChart/seriesConfig/seriesProcessor.js

@@ -38,22 +38,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.' : (0, _formatErrorMessage2.default)(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') {
-            (0, _warning.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') {
+              (0, _warning.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.`);
-          }
-        });
+            }
+          });
+        }
       }
     }
   });
@@ -88,11 +102,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

package/LineChart/seriesConfig/seriesProcessor.mjs

@@ -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

package/RadarChart/RadarAxis/useRadarAxis.d.mts

@@ -16,7 +16,7 @@ export interface UseRadarAxisParams {
   divisions?: number;
 }
 /**
- * Returns an array with on item par metrics with the different point to label.
+ * Returns an array with one item per metric with the different points to label.
  */
 export declare function useRadarAxis(params: UseRadarAxisParams): {
   metric: string;

package/RadarChart/RadarAxis/useRadarAxis.d.ts

@@ -16,7 +16,7 @@ export interface UseRadarAxisParams {
   divisions?: number;
 }
 /**
- * Returns an array with on item par metrics with the different point to label.
+ * Returns an array with one item per metric with the different points to label.
  */
 export declare function useRadarAxis(params: UseRadarAxisParams): {
   metric: string;

package/RadarChart/RadarAxis/useRadarAxis.js

@@ -14,7 +14,7 @@ var _degToRad = require("../../internals/degToRad");
 var _clampAngle = require("../../internals/clampAngle");
 var _angleConversion = require("../../internals/angleConversion");
 /**
- * Returns an array with on item par metrics with the different point to label.
+ * Returns an array with one item per metric with the different points to label.
  */
 function useRadarAxis(params) {
   const {
@@ -39,7 +39,7 @@ function useRadarAxis(params) {
   }
   const existingMetrics = rotationScale.domain();
   if (!existingMetrics.includes(metric)) {
-    (0, _warning.warnOnce)([`MUI X Charts: You radar axis try displaying values for the metric "${metric}" which does nto exist.`, `either add this metric to your radar, or pick one from the existing metrics: ${existingMetrics.join(', ')}`]);
+    (0, _warning.warnOnce)([`MUI X Charts: Your radar axis tries to display values for the metric "${metric}" which does not exist.`, `Either add this metric to your radar, or pick one from the existing metrics: ${existingMetrics.join(', ')}`]);
   }
   const anglesWithDefault = angle !== undefined ? (0, _degToRad.degToRad)(angle) : rotationScale(metric) ?? 0;
   const radiusRatio = Array.from({

package/RadarChart/RadarAxis/useRadarAxis.mjs

@@ -8,7 +8,7 @@ import { degToRad } from "../../internals/degToRad.mjs";
 import { clampAngle } from "../../internals/clampAngle.mjs";
 import { rad2deg } from "../../internals/angleConversion.mjs";
 /**
- * Returns an array with on item par metrics with the different point to label.
+ * Returns an array with one item per metric with the different points to label.
  */
 export function useRadarAxis(params) {
   const {
@@ -33,7 +33,7 @@ export function useRadarAxis(params) {
   }
   const existingMetrics = rotationScale.domain();
   if (!existingMetrics.includes(metric)) {
-    warnOnce([`MUI X Charts: You radar axis try displaying values for the metric "${metric}" which does nto exist.`, `either add this metric to your radar, or pick one from the existing metrics: ${existingMetrics.join(', ')}`]);
+    warnOnce([`MUI X Charts: Your radar axis tries to display values for the metric "${metric}" which does not exist.`, `Either add this metric to your radar, or pick one from the existing metrics: ${existingMetrics.join(', ')}`]);
   }
   const anglesWithDefault = angle !== undefined ? degToRad(angle) : rotationScale(metric) ?? 0;
   const radiusRatio = Array.from({

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/)