@mui/x-charts 9.0.1 → 9.0.2

package/BarChart/BarChart.js

@@ -439,7 +439,8 @@ process.env.NODE_ENV !== "production" ? BarChart.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,
@@ -498,7 +499,8 @@ process.env.NODE_ENV !== "production" ? BarChart.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,
@@ -544,7 +546,8 @@ process.env.NODE_ENV !== "production" ? BarChart.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,
@@ -591,7 +594,8 @@ process.env.NODE_ENV !== "production" ? BarChart.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,
@@ -637,7 +641,8 @@ process.env.NODE_ENV !== "production" ? BarChart.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,
@@ -683,7 +688,8 @@ process.env.NODE_ENV !== "production" ? BarChart.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,
@@ -733,7 +739,8 @@ process.env.NODE_ENV !== "production" ? BarChart.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,
@@ -783,7 +790,8 @@ process.env.NODE_ENV !== "production" ? BarChart.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,
@@ -829,7 +837,8 @@ process.env.NODE_ENV !== "production" ? BarChart.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.
@@ -895,6 +904,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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']),
@@ -953,6 +963,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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']),
@@ -998,6 +1009,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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']),
@@ -1044,6 +1056,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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']),
@@ -1089,6 +1102,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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']),
@@ -1134,6 +1148,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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']),
@@ -1183,6 +1198,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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']),
@@ -1232,6 +1248,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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']),
@@ -1277,6 +1294,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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/BarChart/BarChart.mjs

@@ -432,7 +432,8 @@ process.env.NODE_ENV !== "production" ? BarChart.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,
@@ -491,7 +492,8 @@ process.env.NODE_ENV !== "production" ? BarChart.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,
@@ -537,7 +539,8 @@ process.env.NODE_ENV !== "production" ? BarChart.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,
@@ -584,7 +587,8 @@ process.env.NODE_ENV !== "production" ? BarChart.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,
@@ -630,7 +634,8 @@ process.env.NODE_ENV !== "production" ? BarChart.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,
@@ -676,7 +681,8 @@ process.env.NODE_ENV !== "production" ? BarChart.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,
@@ -726,7 +732,8 @@ process.env.NODE_ENV !== "production" ? BarChart.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,
@@ -776,7 +783,8 @@ process.env.NODE_ENV !== "production" ? BarChart.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,
@@ -822,7 +830,8 @@ process.env.NODE_ENV !== "production" ? BarChart.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.
@@ -888,6 +897,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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']),
@@ -946,6 +956,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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']),
@@ -991,6 +1002,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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']),
@@ -1037,6 +1049,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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']),
@@ -1082,6 +1095,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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']),
@@ -1127,6 +1141,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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']),
@@ -1176,6 +1191,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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']),
@@ -1225,6 +1241,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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']),
@@ -1270,6 +1287,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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/BarChart/BarElement.js

@@ -47,11 +47,7 @@ function BarElement(props) {
   const highlightState = (0, _useItemHighlightState.useItemHighlightState)(itemIdentifier);
   const isHighlighted = highlightState === 'highlighted';
   const isFaded = highlightState === 'faded';
-  const isFocused = (0, _useIsItemFocused.useIsItemFocused)(React.useMemo(() => ({
-    type: 'bar',
-    seriesId,
-    dataIndex
-  }), [seriesId, dataIndex]));
+  const isFocused = (0, _useIsItemFocused.useIsItemFocused)(itemIdentifier);
   const ownerState = {
     seriesId,
     dataIndex,

package/BarChart/BarElement.mjs

@@ -40,11 +40,7 @@ function BarElement(props) {
   const highlightState = useItemHighlightState(itemIdentifier);
   const isHighlighted = highlightState === 'highlighted';
   const isFaded = highlightState === 'faded';
-  const isFocused = useIsItemFocused(React.useMemo(() => ({
-    type: 'bar',
-    seriesId,
-    dataIndex
-  }), [seriesId, dataIndex]));
+  const isFocused = useIsItemFocused(itemIdentifier);
   const ownerState = {
     seriesId,
     dataIndex,

package/BarChart/seriesConfig/bar/getSeriesWithDefaultValues.d.mts

@@ -5,6 +5,7 @@ export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'ba
   type: "bar";
   data?: ReadonlyArray<import("../../../index.mjs").BarValueType | null>;
   dataKey?: string;
+  valueGetter?: (item: import("../../../internals/index.mjs").DatasetElementType<unknown>) => import("../../../index.mjs").BarValueType | null;
   label?: string | ((location: "tooltip" | "legend") => string);
   layout?: "horizontal" | "vertical";
   stackOffset?: import("../../../index.mjs").StackOffsetType;

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

@@ -5,6 +5,7 @@ export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'ba
   type: "bar";
   data?: ReadonlyArray<import("../../../index.js").BarValueType | null>;
   dataKey?: string;
+  valueGetter?: (item: import("../../../internals/index.js").DatasetElementType<unknown>) => import("../../../index.js").BarValueType | null;
   label?: string | ((location: "tooltip" | "legend") => string);
   layout?: "horizontal" | "vertical";
   stackOffset?: import("../../../index.js").StackOffsetType;

package/BarChart/seriesConfig/bar/seriesProcessor.js

@@ -32,22 +32,36 @@ const seriesProcessor = (params, dataset, isItemVisible) => {
           d3Dataset[index][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, index) => {
+        const value = series[id].valueGetter(entry);
+        if (d3Dataset.length <= index) {
+          d3Dataset.push({
+            [id]: value
+          });
+        } else {
+          d3Dataset[index][id] = value;
+        }
+      });
     } else if (dataset === undefined) {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Bar 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)(33, id));
     }
     if (process.env.NODE_ENV !== 'production') {
       if (!data && dataset) {
         const dataKey = series[id].dataKey;
-        if (!dataKey) {
-          throw new Error(`MUI X Charts: Bar 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: Bar 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 bars, 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 bars, but the dataset contains the non-null non-numerical element "${value}" at index ${index}.
 Bar plots only support numeric and null values.`);
-          }
-        });
+            }
+          });
+        }
       }
     }
   });
@@ -82,11 +96,21 @@ Bar 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: 'bar',
         seriesId: id

package/BarChart/seriesConfig/bar/seriesProcessor.mjs

@@ -25,22 +25,36 @@ const seriesProcessor = (params, dataset, isItemVisible) => {
           d3Dataset[index][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, index) => {
+        const value = series[id].valueGetter(entry);
+        if (d3Dataset.length <= index) {
+          d3Dataset.push({
+            [id]: value
+          });
+        } else {
+          d3Dataset[index][id] = value;
+        }
+      });
     } else if (dataset === undefined) {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Bar 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(33, id));
     }
     if (process.env.NODE_ENV !== 'production') {
       if (!data && dataset) {
         const dataKey = series[id].dataKey;
-        if (!dataKey) {
-          throw new Error(`MUI X Charts: Bar 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: Bar 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 bars, 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 bars, but the dataset contains the non-null non-numerical element "${value}" at index ${index}.
 Bar plots only support numeric and null values.`);
-          }
-        });
+            }
+          });
+        }
       }
     }
   });
@@ -75,11 +89,21 @@ Bar 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: 'bar',
         seriesId: id

package/CHANGELOG.md

@@ -1,5 +1,126 @@
 # Changelog
 
+## 9.0.2
+
+<!-- generated comparing v9.0.1..master -->
+
+_Apr 15, 2026_
+
+We'd like to extend a big thank you to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Added `valueGetter` to axes and series configurations, which allow for dynamically getting data out of a `dataset`.
+- 🐞 Bugfixes
+- 📚 Docs updates
+
+Special thanks go out to these community members for their valuable contributions:
+@Anexus5919, @nk10nikhil
+
+The following team members contributed to this release:
+@aemartos, @alexfauquette, @brijeshb42, @Janpot, @JCQuintas, @LukasTy, @MBilalShafi, @michelengelen, @rita-codes, @sai6855
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.0.2`
+
+- [DataGrid] Fix skeleton overlay backdrop issue (#21951) @MBilalShafi
+- [DataGrid] Make `overridesResolver` of `ResizablePanelHandle` dynamic (#21724) @sai6855
+
+#### `@mui/x-data-grid-pro@9.0.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@9.0.2`.
+
+#### `@mui/x-data-grid-premium@9.0.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@9.0.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.0.2`
+
+- [fields] Allow `openPickerButtonPosition` on single-input range fields (#22011) @LukasTy
+- [pickers] Fix spurious `onBlur`/`onFocus` firing during field focus transitions (#22098) @LukasTy
+- [pickers] Use `convertToMeridiem` utility in `transferDateSectionValue` (#22062) @michelengelen
+
+#### `@mui/x-date-pickers-pro@9.0.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@9.0.2`.
+
+### Charts
+
+#### `@mui/x-charts@9.0.2`
+
+- [charts] Add `valueGetter` to axes and series (#21963) @JCQuintas
+- [charts] Create a `ChartsRadialDataProvider` (#22047) @alexfauquette
+- [charts] Create a `ChartsRadialGrid` (#22085) @alexfauquette
+- [charts] Deprecate `Scatter` component (#22060) @JCQuintas
+- [charts] Remove duplicate `useThemeProps` call (#22045) @alexfauquette
+- [charts] Simplify focus state handling in `BarElement` component (#22101) @sai6855
+
+#### `@mui/x-charts-pro@9.0.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@9.0.2`, plus:
+
+- [charts-pro] Add range buttons to toolbar (#21964) @JCQuintas
+
+#### `@mui/x-charts-premium@9.0.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@9.0.2`.
+
+### Tree View
+
+#### `@mui/x-tree-view@9.0.2`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@9.0.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@9.0.2`, plus:
+
+- [tree view] Move `lazyLoadedItems` initialization to state initializer (#22073) @michelengelen
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.0-alpha.2`
+
+- [scheduler] Add recurrence icon to recurring events in `EventTimeline` (#22019) (#22046) @nk10nikhil
+- [scheduler] Reset scroll position when navigating to a new time period (#22036) @Anexus5919
+- [l10n] Improve German (de-DE) locale (#21944) @rita-codes
+- [l10n] Improve Portuguese - Portugal (pt-PT) locale & Improve Portuguese - Brazil (pt-BR) locale (#21943) @rita-codes
+
+#### `@mui/x-scheduler-premium@9.0.0-alpha.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-scheduler@9.0.0-alpha.2`.
+
+### Chat
+
+#### `@mui/x-chat@9.0.0-alpha.1`
+
+- Internal changes.
+
+#### `@mui/x-chat-headless@9.0.0-alpha.1`
+
+- Internal changes.
+
+### Docs
+
+- [docs] Add data grid `isAnyOf` paste recipe (#21961) @MBilalShafi
+- [docs] Add `@mui/material` upgrade requirement to v9 migration guides (#22068) @LukasTy
+- [docs] Fix pages width with `disableToc` (#22051) @LukasTy
+- [docs] Split charts axis page (#22069) @alexfauquette
+- [docs] Update `ChartsRadialDataProvider` API page imports (#22072) @JCQuintas
+
+### Core
+
+- [code-infra] Fix lock file (#22053) @JCQuintas
+- [code-infra] Limit `release:build` lerna concurrency to 6 (#22077) @Janpot
+- [docs-infra] Update monorepo dependency with relevant migration (#22041) @brijeshb42
+
+### Miscellaneous
+
+- [telemetry] Skip runtime resolution when telemetry is disabled (#22078) @aemartos
+- [test] Remove v7 suffix from test helpers and stale comments (#22023) @LukasTy
+- [scheduler] Fix README for published packages (#22042) @rita-codes
+
 ## 9.0.1
 
 <!-- generated comparing v9.0.0..master -->