@mui/x-charts 9.0.1 → 9.0.3

package/BarChart/BarChart.js

@@ -291,7 +291,8 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   onHighlightedAxisChange: _propTypes.default.func,
   /**
    * Callback fired when a bar item is clicked.
-   * @param {MouseEvent} event The event source of the callback.
+   * @param {MouseEvent | React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
+   *        It is a native MouseEvent for `svg-batch` renderer and a React MouseEvent for `svg-single` renderer.
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: _propTypes.default.func,
@@ -439,7 +440,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 +500,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 +547,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 +595,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 +642,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 +689,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 +740,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 +791,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 +838,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 +905,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 +964,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 +1010,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 +1057,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 +1103,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 +1149,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 +1199,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 +1249,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 +1295,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

@@ -284,7 +284,8 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   onHighlightedAxisChange: PropTypes.func,
   /**
    * Callback fired when a bar item is clicked.
-   * @param {MouseEvent} event The event source of the callback.
+   * @param {MouseEvent | React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
+   *        It is a native MouseEvent for `svg-batch` renderer and a React MouseEvent for `svg-single` renderer.
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: PropTypes.func,
@@ -432,7 +433,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 +493,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 +540,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 +588,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 +635,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 +682,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 +733,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 +784,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 +831,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 +898,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 +957,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 +1003,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 +1050,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 +1096,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 +1142,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 +1192,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 +1242,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 +1288,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/BarPlot.js

@@ -102,7 +102,8 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
   className: _propTypes.default.string,
   /**
    * Callback fired when a bar item is clicked.
-   * @param {MouseEvent} event The event source of the callback.
+   * @param {MouseEvent | React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
+   *        It is a native MouseEvent for `svg-batch` renderer and a React MouseEvent for `svg-single` renderer.
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: _propTypes.default.func,

package/BarChart/BarPlot.mjs

@@ -95,7 +95,8 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
   className: PropTypes.string,
   /**
    * Callback fired when a bar item is clicked.
-   * @param {MouseEvent} event The event source of the callback.
+   * @param {MouseEvent | React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
+   *        It is a native MouseEvent for `svg-batch` renderer and a React MouseEvent for `svg-single` renderer.
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: PropTypes.func,

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

@@ -3,14 +3,8 @@ export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'ba
   id: string;
   color: string;
   type: "bar";
-  data?: ReadonlyArray<import("../../../index.mjs").BarValueType | null>;
-  dataKey?: string;
-  label?: string | ((location: "tooltip" | "legend") => string);
-  layout?: "horizontal" | "vertical";
-  stackOffset?: import("../../../index.mjs").StackOffsetType;
-  minBarSize?: number;
-  barLabel?: "value" | ((item: import("@mui/x-charts/BarChart").BarItem, context: import("@mui/x-charts/BarChart").BarLabelContext) => string | null | undefined);
   barLabelPlacement?: "center" | "outside";
+  stackOffset?: import("../../../index.mjs").StackOffsetType;
   valueFormatter?: import("../../../internals/index.mjs").SeriesValueFormatter<number | null> | undefined;
   highlightScope?: import("../../../internals/index.mjs").CommonHighlightScope | undefined;
   labelMarkType?: import("../../../internals/index.mjs").ChartsLabelMarkType;
@@ -19,4 +13,11 @@ export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'ba
   yAxisId?: import("../../../internals/index.mjs").AxisId;
   stack?: string;
   stackOrder?: import("../../../index.mjs").StackOrderType;
+  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";
+  minBarSize?: number;
+  barLabel?: "value" | ((item: import("@mui/x-charts/BarChart").BarItem, context: import("@mui/x-charts/BarChart").BarLabelContext) => string | null | undefined);
 };

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

@@ -3,14 +3,8 @@ export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'ba
   id: string;
   color: string;
   type: "bar";
-  data?: ReadonlyArray<import("../../../index.js").BarValueType | null>;
-  dataKey?: string;
-  label?: string | ((location: "tooltip" | "legend") => string);
-  layout?: "horizontal" | "vertical";
-  stackOffset?: import("../../../index.js").StackOffsetType;
-  minBarSize?: number;
-  barLabel?: "value" | ((item: import("@mui/x-charts/BarChart").BarItem, context: import("@mui/x-charts/BarChart").BarLabelContext) => string | null | undefined);
   barLabelPlacement?: "center" | "outside";
+  stackOffset?: import("../../../index.js").StackOffsetType;
   valueFormatter?: import("../../../internals/index.js").SeriesValueFormatter<number | null> | undefined;
   highlightScope?: import("../../../internals/index.js").CommonHighlightScope | undefined;
   labelMarkType?: import("../../../internals/index.js").ChartsLabelMarkType;
@@ -19,4 +13,11 @@ export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'ba
   yAxisId?: import("../../../internals/index.js").AxisId;
   stack?: string;
   stackOrder?: import("../../../index.js").StackOrderType;
+  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";
+  minBarSize?: number;
+  barLabel?: "value" | ((item: import("@mui/x-charts/BarChart").BarItem, context: import("@mui/x-charts/BarChart").BarLabelContext) => string | null | undefined);
 };

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