@mui/x-charts 7.10.0 → 7.11.1

package/internals/defaultizeColor.d.ts

@@ -56,6 +56,8 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     highlightScope?: Partial<import("..").HighlightScope>;
     xAxisKey?: string;
     yAxisKey?: string;
+    xAxisId?: string;
+    yAxisId?: string;
     stack?: string;
     stackOrder?: import("..").StackOrderType;
 } | {
@@ -76,6 +78,8 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     highlightScope?: Partial<import("..").HighlightScope>;
     xAxisKey?: string;
     yAxisKey?: string;
+    xAxisId?: string;
+    yAxisId?: string;
     stackOrder?: import("..").StackOrderType;
 } | {
     type: "scatter";
@@ -84,10 +88,13 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     label?: string | ((location: "tooltip" | "legend") => string);
     disableHover?: boolean;
     zAxisKey?: string;
+    zAxisId?: string;
     id?: import(".").SeriesId;
     color: string;
     valueFormatter?: import(".").SeriesValueFormatter<import("../models/seriesType").ScatterValueType> | undefined;
     highlightScope?: Partial<import("..").HighlightScope>;
     xAxisKey?: string;
     yAxisKey?: string;
+    xAxisId?: string;
+    yAxisId?: string;
 };

package/internals/geometry.js

@@ -20,7 +20,7 @@ function getMinXTranslation(width, height, angle = 0) {
   if (process.env.NODE_ENV !== 'production') {
     if (!warnedOnce && angle > 90 && angle < -90) {
       warnedOnce = true;
-      console.warn([`MUI X Charts: It seems you applied an angle larger than 90° or smaller than -90° to an axis text.`, `This could cause some text overlapping.`, `If you encounter a use case where it's needed, please open an issue.`].join('\n'));
+      console.warn([`MUI X: It seems you applied an angle larger than 90° or smaller than -90° to an axis text.`, `This could cause some text overlapping.`, `If you encounter a use case where it's needed, please open an issue.`].join('\n'));
     }
   }
   const standardAngle = Math.min(Math.abs(angle) % 180, Math.abs(Math.abs(angle) % 180 - 180) % 180); // Map from R to [0, 90]

package/internals/getPercentageValue.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Helper that converts values and percentages into values.
+ * @param value The value provided by the developer. Can either be a number or a string with '%' or 'px'.
+ * @param refValue The numerical value associated to 100%.
+ * @returns The numerical value associated to the provided value.
+ */
+export declare function getPercentageValue(value: number | string, refValue: number): number;

package/internals/{utils.js → getPercentageValue.js}

@@ -3,14 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.cleanId = cleanId;
 exports.getPercentageValue = getPercentageValue;
-exports.getSymbol = getSymbol;
-// Returns the index of a defined shape
-function getSymbol(shape) {
-  const symbolNames = 'circle cross diamond square star triangle wye'.split(/ /);
-  return symbolNames.indexOf(shape) || 0;
-}
 /**
  * Helper that converts values and percentages into values.
  * @param value The value provided by the developer. Can either be a number or a string with '%' or 'px'.
@@ -37,12 +30,5 @@ function getPercentageValue(value, refValue) {
       return val;
     }
   }
-  throw Error(`MUI-Charts: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
-}
-
-/**
- * Remove spaces to have viable ids
- */
-function cleanId(id) {
-  return id.replace(' ', '_');
+  throw Error(`MUI X: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
 }

package/internals/getSymbol.d.ts

@@ -0,0 +1,2 @@
+export type SymbolsTypes = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+export declare function getSymbol(shape: SymbolsTypes): number;

package/internals/getSymbol.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSymbol = getSymbol;
+// Returns the index of a defined shape
+function getSymbol(shape) {
+  const symbolNames = 'circle cross diamond square star triangle wye'.split(/ /);
+  return symbolNames.indexOf(shape) || 0;
+}

package/internals/index.d.ts

@@ -5,14 +5,16 @@ export { useReducedMotion } from '../hooks/useReducedMotion';
 export { useSeries } from '../hooks/useSeries';
 export { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 export { useDrawingArea } from '../hooks/useDrawingArea';
-export { useChartContainerHooks } from '../ChartContainer/useChartContainerHooks';
 export { useScatterChartProps } from '../ScatterChart/useScatterChartProps';
 export { useLineChartProps } from '../LineChart/useLineChartProps';
 export { useBarChartProps } from '../BarChart/useBarChartProps';
+export { useResponsiveChartContainerProps } from '../ResponsiveChartContainer/useResponsiveChartContainerProps';
+export { useChartContainerProps } from '../ChartContainer/useChartContainerProps';
 export * from './defaultizeValueFormatter';
 export * from './configInit';
 export * from './getLabel';
 export * from './getSVGPoint';
+export * from './isDefined';
 export * from '../context/CartesianProvider';
 export * from '../context/DrawingProvider';
 export * from '../context/ColorProvider';

package/internals/index.js

@@ -8,10 +8,11 @@ var _exportNames = {
   useSeries: true,
   useInteractionItemProps: true,
   useDrawingArea: true,
-  useChartContainerHooks: true,
   useScatterChartProps: true,
   useLineChartProps: true,
-  useBarChartProps: true
+  useBarChartProps: true,
+  useResponsiveChartContainerProps: true,
+  useChartContainerProps: true
 };
 Object.defineProperty(exports, "useBarChartProps", {
   enumerable: true,
@@ -19,10 +20,10 @@ Object.defineProperty(exports, "useBarChartProps", {
     return _useBarChartProps.useBarChartProps;
   }
 });
-Object.defineProperty(exports, "useChartContainerHooks", {
+Object.defineProperty(exports, "useChartContainerProps", {
   enumerable: true,
   get: function () {
-    return _useChartContainerHooks.useChartContainerHooks;
+    return _useChartContainerProps.useChartContainerProps;
   }
 });
 Object.defineProperty(exports, "useDrawingArea", {
@@ -49,6 +50,12 @@ Object.defineProperty(exports, "useReducedMotion", {
     return _useReducedMotion.useReducedMotion;
   }
 });
+Object.defineProperty(exports, "useResponsiveChartContainerProps", {
+  enumerable: true,
+  get: function () {
+    return _useResponsiveChartContainerProps.useResponsiveChartContainerProps;
+  }
+});
 Object.defineProperty(exports, "useScatterChartProps", {
   enumerable: true,
   get: function () {
@@ -101,10 +108,11 @@ var _useReducedMotion = require("../hooks/useReducedMotion");
 var _useSeries = require("../hooks/useSeries");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useDrawingArea = require("../hooks/useDrawingArea");
-var _useChartContainerHooks = require("../ChartContainer/useChartContainerHooks");
 var _useScatterChartProps = require("../ScatterChart/useScatterChartProps");
 var _useLineChartProps = require("../LineChart/useLineChartProps");
 var _useBarChartProps = require("../BarChart/useBarChartProps");
+var _useResponsiveChartContainerProps = require("../ResponsiveChartContainer/useResponsiveChartContainerProps");
+var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
 var _defaultizeValueFormatter = require("./defaultizeValueFormatter");
 Object.keys(_defaultizeValueFormatter).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -153,6 +161,18 @@ Object.keys(_getSVGPoint).forEach(function (key) {
     }
   });
 });
+var _isDefined = require("./isDefined");
+Object.keys(_isDefined).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _isDefined[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _isDefined[key];
+    }
+  });
+});
 var _CartesianProvider = require("../context/CartesianProvider");
 Object.keys(_CartesianProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/isDefined.d.ts

@@ -0,0 +1 @@
+export declare function isDefined<T>(value: T | null | undefined): value is NonNullable<T>;

package/internals/isDefined.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isDefined = isDefined;
+function isDefined(value) {
+  return value !== null && value !== undefined;
+}

package/internals/notNull.d.ts

@@ -0,0 +1 @@
+export declare function notNull<T>(value: T): value is NonNullable<T>;

package/internals/notNull.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.notNull = notNull;
+function notNull(value) {
+  return value !== null;
+}

package/internals/ts-generic.d.ts

@@ -0,0 +1,5 @@
+type Without<T, U> = {
+    [P in Exclude<keyof T, keyof U>]?: never;
+};
+export type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
+export {};

package/internals/ts-generic.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/internals/warning.d.ts

@@ -1 +1,2 @@
-export declare function buildWarning(message: (...args: any) => string, gravity?: 'warning' | 'error'): (...args: any) => void;
+export declare function warnOnce(message: string | string[], gravity?: 'warning' | 'error'): void;
+export declare function clearWarningsCache(): void;

package/internals/warning.js

@@ -3,17 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.buildWarning = buildWarning;
-function buildWarning(message, gravity = 'warning') {
-  let alreadyWarned = false;
-  return (...args) => {
-    if (!alreadyWarned) {
-      alreadyWarned = true;
-      if (gravity === 'error') {
-        console.error(message(...args));
-      } else {
-        console.warn(message(...args));
-      }
+exports.clearWarningsCache = clearWarningsCache;
+exports.warnOnce = warnOnce;
+const warnedOnceCache = new Set();
+
+// TODO move to @mui/x-internals
+// TODO eventually move to @base_ui/internals. Base UI, etc. too need this helper.
+function warnOnce(message, gravity = 'warning') {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+  const cleanMessage = Array.isArray(message) ? message.join('\n') : message;
+  if (!warnedOnceCache.has(cleanMessage)) {
+    warnedOnceCache.add(cleanMessage);
+    if (gravity === 'error') {
+      console.error(cleanMessage);
+    } else {
+      console.warn(cleanMessage);
     }
-  };
+  }
+}
+function clearWarningsCache() {
+  warnedOnceCache.clear();
 }

package/models/axis.d.ts

@@ -212,8 +212,9 @@ export type AxisValueFormatterContext = {
      * Location indicates where the value will be displayed.
      * - `'tick'` The value is displayed on the axis ticks.
      * - `'tooltip'` The value is displayed in the tooltip when hovering the chart.
+     * - `'legend'` The value is displayed in the legend when using color legend.
      */
-    location: 'tick' | 'tooltip';
+    location: 'tick' | 'tooltip' | 'legend';
 };
 export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps = ChartsXAxisProps | ChartsYAxisProps> = {
     /**
@@ -253,7 +254,9 @@ export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps = Cha
      * If `true`, Reverse the axis scaleBand.
      */
     reverse?: boolean;
-} & Partial<AxisProps> & Partial<Omit<AxisScaleConfig[S], 'scale'>> & TickParams;
+} & Partial<AxisProps> & Partial<Omit<AxisScaleConfig[S], 'scale'>> & TickParams & AxisConfigExtension;
+export interface AxisConfigExtension {
+}
 export type AxisDefaultized<S extends ScaleName = ScaleName, V = any, AxisProps = ChartsXAxisProps | ChartsYAxisProps> = Omit<AxisConfig<S, V, AxisProps>, 'scaleType'> & AxisScaleConfig[S] & AxisScaleComputedConfig[S] & {
     /**
      * An indication of the expected number of ticks.

package/models/helpers.d.ts

@@ -1,2 +1,3 @@
 export type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+export type MakeRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
 export type DefaultizedProps<P extends {}, RequiredProps extends keyof P, AdditionalProps extends {} = {}> = Omit<P, RequiredProps | keyof AdditionalProps> & Required<Pick<P, RequiredProps>> & AdditionalProps;

package/models/seriesType/common.d.ts

@@ -27,12 +27,22 @@ export type CommonDefaultizedProps = 'id' | 'valueFormatter' | 'data';
 export type CartesianSeriesType = {
     /**
      * The id of the x-axis used to render the series.
+     * @deprecated Use `xAxisId` instead
      */
     xAxisKey?: string;
     /**
      * The id of the y-axis used to render the series.
+     * @deprecated Use `xAxisId` instead
      */
     yAxisKey?: string;
+    /**
+     * The id of the x-axis used to render the series.
+     */
+    xAxisId?: string;
+    /**
+     * The id of the y-axis used to render the series.
+     */
+    yAxisId?: string;
 };
 export type StackableSeriesType = {
     /**

package/models/seriesType/config.d.ts

@@ -6,6 +6,7 @@ import { AxisConfig } from '../axis';
 import { DefaultizedProps, MakeOptional } from '../helpers';
 import { StackingGroupsType } from '../../internals/stackSeries';
 import { SeriesId } from './common';
+import { LegendItemParams } from '../../ChartsLegend/chartsLegend.types';
 export interface ChartsSeriesConfig {
     bar: {
         /**
@@ -102,20 +103,5 @@ export type DatasetElementType<T> = {
 };
 export type DatasetType<T = number | string | Date | null | undefined> = DatasetElementType<T>[];
 export type Formatter<T extends ChartSeriesType> = (params: FormatterParams<T>, dataset?: DatasetType) => FormatterResult<T>;
-export type LegendParams = {
-    /**
-     * The color used in the legend
-     */
-    color: string;
-    /**
-     * The label displayed in the legend
-     */
-    label: string;
-    /**
-     * The identifier of the legend element.
-     * Used for internal purpose such as `key` props
-     */
-    id: SeriesId;
-};
-export type LegendGetter<T extends ChartSeriesType> = (series: FormatterResult<T>) => LegendParams[];
+export type LegendGetter<T extends ChartSeriesType> = (series: FormatterResult<T>) => LegendItemParams[];
 export {};

package/models/seriesType/scatter.d.ts

@@ -24,8 +24,13 @@ export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType>, C
     disableHover?: boolean;
     /**
      * The id of the z-axis used to render the series.
+     * @deprecated Use `zAxisId` instead.
      */
     zAxisKey?: string;
+    /**
+     * The id of the z-axis used to render the series.
+     */
+    zAxisId?: string;
 }
 /**
  * An object that allows to identify a single scatter item.

package/modern/BarChart/BarChart.js

@@ -43,8 +43,8 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     ref: ref
   }, chartContainerProps, {
     children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), props.grid && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
-      children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps))]
-    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+      children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
+    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {

package/modern/BarChart/BarPlot.js

@@ -66,16 +66,16 @@ const useAggregatedData = () => {
     ids: groupIds
   }, groupIndex) => {
     return groupIds.flatMap(seriesId => {
-      const xAxisKey = series[seriesId].xAxisKey ?? defaultXAxisId;
-      const yAxisKey = series[seriesId].yAxisKey ?? defaultYAxisId;
-      const xAxisConfig = xAxis[xAxisKey];
-      const yAxisConfig = yAxis[yAxisKey];
+      const xAxisId = series[seriesId].xAxisId ?? series[seriesId].xAxisKey ?? defaultXAxisId;
+      const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey ?? defaultYAxisId;
+      const xAxisConfig = xAxis[xAxisId];
+      const yAxisConfig = yAxis[yAxisId];
       const verticalLayout = series[seriesId].layout === 'vertical';
-      checkScaleErrors(verticalLayout, seriesId, xAxisKey, xAxis, yAxisKey, yAxis);
+      checkScaleErrors(verticalLayout, seriesId, xAxisId, xAxis, yAxisId, yAxis);
       const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
       const xScale = xAxisConfig.scale;
       const yScale = yAxisConfig.scale;
-      const colorGetter = getColor(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
+      const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
       const bandWidth = baseScaleConfig.scale.bandwidth();
       const {
         barWidth,
@@ -98,8 +98,8 @@ const useAggregatedData = () => {
           seriesId,
           dataIndex,
           layout: series[seriesId].layout,
-          x: verticalLayout ? xScale(xAxis[xAxisKey].data?.[dataIndex]) + barOffset : minValueCoord,
-          y: verticalLayout ? minValueCoord : yScale(yAxis[yAxisKey].data?.[dataIndex]) + barOffset,
+          x: verticalLayout ? xScale(xAxis[xAxisId].data?.[dataIndex]) + barOffset : minValueCoord,
+          y: verticalLayout ? minValueCoord : yScale(yAxis[yAxisId].data?.[dataIndex]) + barOffset,
           xOrigin: xScale(0),
           yOrigin: yScale(0),
           height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,

package/modern/BarChart/checkScaleErrors.js

@@ -1,27 +1,27 @@
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import { isBandScaleConfig, isPointScaleConfig } from '../models/axis';
-const getAxisMessage = (axisDirection, axisKey) => {
+const getAxisMessage = (axisDirection, axisId) => {
   const axisName = `${axisDirection}-axis`;
-  const axisKeyName = `${axisDirection}Axis`;
+  const axisIdName = `${axisDirection}Axis`;
   const axisDefaultKey = axisDirection === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
-  return axisKey === axisDefaultKey ? `The first \`${axisKeyName}\`` : `The ${axisName} with id "${axisKey}"`;
+  return axisId === axisDefaultKey ? `The first \`${axisIdName}\`` : `The ${axisName} with id "${axisId}"`;
 };
-export function checkScaleErrors(verticalLayout, seriesId, xAxisKey, xAxis, yAxisKey, yAxis) {
-  const xAxisConfig = xAxis[xAxisKey];
-  const yAxisConfig = yAxis[yAxisKey];
+export function checkScaleErrors(verticalLayout, seriesId, xAxisId, xAxis, yAxisId, yAxis) {
+  const xAxisConfig = xAxis[xAxisId];
+  const yAxisConfig = yAxis[yAxisId];
   const discreteAxisConfig = verticalLayout ? xAxisConfig : yAxisConfig;
   const continuousAxisConfig = verticalLayout ? yAxisConfig : xAxisConfig;
-  const discreteAxisKey = verticalLayout ? xAxisKey : yAxisKey;
-  const continuousAxisKey = verticalLayout ? yAxisKey : xAxisKey;
+  const discreteAxisId = verticalLayout ? xAxisId : yAxisId;
+  const continuousAxisId = verticalLayout ? yAxisId : xAxisId;
   const discreteAxisDirection = verticalLayout ? 'x' : 'y';
   const continuousAxisDirection = verticalLayout ? 'y' : 'x';
   if (!isBandScaleConfig(discreteAxisConfig)) {
-    throw new Error(`MUI X Charts: ${getAxisMessage(discreteAxisDirection, discreteAxisKey)} should be of type "band" to display the bar series of id "${seriesId}".`);
+    throw new Error(`MUI X: ${getAxisMessage(discreteAxisDirection, discreteAxisId)} should be of type "band" to display the bar series of id "${seriesId}".`);
   }
   if (discreteAxisConfig.data === undefined) {
-    throw new Error(`MUI X Charts: ${getAxisMessage(discreteAxisDirection, discreteAxisKey)} should have data property.`);
+    throw new Error(`MUI X: ${getAxisMessage(discreteAxisDirection, discreteAxisId)} should have data property.`);
   }
   if (isBandScaleConfig(continuousAxisConfig) || isPointScaleConfig(continuousAxisConfig)) {
-    throw new Error(`MUI X Charts: ${getAxisMessage(continuousAxisDirection, continuousAxisKey)} should be a continuous type to display the bar series of id "${seriesId}".`);
+    throw new Error(`MUI X: ${getAxisMessage(continuousAxisDirection, continuousAxisId)} should be a continuous type to display the bar series of id "${seriesId}".`);
   }
 }

package/modern/BarChart/extremums.js

@@ -12,7 +12,10 @@ const getValueExtremum = params => {
     axis,
     isDefaultAxis
   } = params;
-  return Object.keys(series).filter(seriesId => series[seriesId].yAxisKey === axis.id || isDefaultAxis && series[seriesId].yAxisKey === undefined).reduce((acc, seriesId) => {
+  return Object.keys(series).filter(seriesId => {
+    const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
+    return yAxisId === axis.id || isDefaultAxis && yAxisId === undefined;
+  }).reduce((acc, seriesId) => {
     const [seriesMin, seriesMax] = series[seriesId].stackedData?.reduce((seriesAcc, values) => [Math.min(...values, ...(seriesAcc[0] === null ? [] : [seriesAcc[0]])), Math.max(...values, ...(seriesAcc[1] === null ? [] : [seriesAcc[1]]))], series[seriesId].stackedData[0]) ?? [null, null];
     return [acc[0] === null ? seriesMin : Math.min(seriesMin, acc[0]), acc[1] === null ? seriesMax : Math.max(seriesMax, acc[1])];
   }, [null, null]);

package/modern/BarChart/formatter.js

@@ -25,7 +25,7 @@ const formatter = (params, dataset) => {
         }
       });
     } else if (dataset === undefined) {
-      throw new Error([`MUI X Charts: bar series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
+      throw new Error([`MUI X: bar series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
   });
   const completedSeries = {};
@@ -52,7 +52,7 @@ const formatter = (params, dataset) => {
           if (typeof value !== 'number') {
             if (process.env.NODE_ENV !== 'production' && !warnOnce && value !== null) {
               warnOnce = true;
-              console.error([`MUI-X charts: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`, 'Bar plots only support numbers and null values.']);
+              console.error([`MUI X charts: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`, 'Bar plots only support numbers and null values.'].join('\n'));
             }
             return 0;
           }

package/modern/BarChart/useBarChartProps.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "axisHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 /**
@@ -10,36 +12,38 @@ import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
  */
 export const useBarChartProps = props => {
   const {
-    xAxis,
-    yAxis,
-    series,
-    width,
-    height,
-    margin,
-    colors,
-    dataset,
-    sx,
-    tooltip,
-    onAxisClick,
-    axisHighlight,
-    legend,
-    grid,
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
-    children,
-    slots,
-    slotProps,
-    skipAnimation,
-    loading,
-    layout,
-    onItemClick,
-    highlightedItem,
-    onHighlightChange,
-    borderRadius,
-    barLabel
-  } = props;
+      xAxis,
+      yAxis,
+      series,
+      width,
+      height,
+      margin,
+      colors,
+      dataset,
+      sx,
+      tooltip,
+      onAxisClick,
+      axisHighlight,
+      legend,
+      grid,
+      topAxis,
+      leftAxis,
+      rightAxis,
+      bottomAxis,
+      children,
+      slots,
+      slotProps,
+      skipAnimation,
+      loading,
+      layout,
+      onItemClick,
+      highlightedItem,
+      onHighlightChange,
+      borderRadius,
+      barLabel,
+      className
+    } = props,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
   const clipPathId = `${id}-clip-path`;
   const hasHorizontalSeries = layout === 'horizontal' || layout === undefined && series.some(item => item.layout === 'horizontal');
@@ -49,7 +53,7 @@ export const useBarChartProps = props => {
       length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
     }, (_, index) => index)
   };
-  const chartContainerProps = {
+  const chartContainerProps = _extends({}, rest, {
     series: series.map(s => _extends({
       type: 'bar'
     }, s, {
@@ -69,8 +73,9 @@ export const useBarChartProps = props => {
     sx,
     highlightedItem,
     onHighlightChange,
-    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick
-  };
+    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    className
+  });
   const barPlotProps = {
     onItemClick,
     slots,