@mui/x-charts 7.10.0 → 7.11.1

package/context/CartesianProvider/CartesianProvider.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../../models/axis';
 import { DatasetType } from '../../models/seriesType/config';
-import { MakeOptional } from '../../models/helpers';
 import { ExtremumGettersConfig } from '../../models';
 export type CartesianContextProviderProps = {
     /**
@@ -9,13 +8,13 @@ export type CartesianContextProviderProps = {
      * If not provided, a default axis config is used.
      * An array of [[AxisConfig]] objects.
      */
-    xAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, 'id'>[];
+    xAxis: AxisConfig<ScaleName, any, ChartsXAxisProps>[];
     /**
      * The configuration of the y-axes.
      * If not provided, a default axis config is used.
      * An array of [[AxisConfig]] objects.
      */
-    yAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>[];
+    yAxis: AxisConfig<ScaleName, any, ChartsYAxisProps>[];
     /**
      * An array of objects that can be used to populate series and axes data using their `dataKey` property.
      */

package/context/CartesianProvider/CartesianProvider.js

@@ -8,15 +8,14 @@ var React = _interopRequireWildcard(require("react"));
 var _useDrawingArea = require("../../hooks/useDrawingArea");
 var _useSeries = require("../../hooks/useSeries");
 var _CartesianContext = require("./CartesianContext");
-var _normalizeAxis = require("./normalizeAxis");
 var _computeValue = require("./computeValue");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function CartesianContextProvider(props) {
   const {
-    xAxis: inXAxis,
-    yAxis: inYAxis,
+    xAxis,
+    yAxis,
     dataset,
     xExtremumGetters,
     yExtremumGetters,
@@ -24,10 +23,22 @@ function CartesianContextProvider(props) {
   } = props;
   const formattedSeries = (0, _useSeries.useSeries)();
   const drawingArea = (0, _useDrawingArea.useDrawingArea)();
-  const xAxis = React.useMemo(() => (0, _normalizeAxis.normalizeAxis)(inXAxis, dataset, 'x'), [inXAxis, dataset]);
-  const yAxis = React.useMemo(() => (0, _normalizeAxis.normalizeAxis)(inYAxis, dataset, 'y'), [inYAxis, dataset]);
-  const xValues = React.useMemo(() => (0, _computeValue.computeValue)(drawingArea, formattedSeries, xAxis, xExtremumGetters, 'x'), [drawingArea, formattedSeries, xAxis, xExtremumGetters]);
-  const yValues = React.useMemo(() => (0, _computeValue.computeValue)(drawingArea, formattedSeries, yAxis, yExtremumGetters, 'y'), [drawingArea, formattedSeries, yAxis, yExtremumGetters]);
+  const xValues = React.useMemo(() => (0, _computeValue.computeValue)({
+    drawingArea,
+    formattedSeries,
+    axis: xAxis,
+    extremumGetters: xExtremumGetters,
+    dataset,
+    axisDirection: 'x'
+  }), [drawingArea, formattedSeries, xAxis, xExtremumGetters, dataset]);
+  const yValues = React.useMemo(() => (0, _computeValue.computeValue)({
+    drawingArea,
+    formattedSeries,
+    axis: yAxis,
+    extremumGetters: yExtremumGetters,
+    dataset,
+    axisDirection: 'y'
+  }), [drawingArea, formattedSeries, yAxis, yExtremumGetters, dataset]);
   const value = React.useMemo(() => ({
     isInitialized: true,
     data: {

package/context/CartesianProvider/computeValue.d.ts

@@ -1,19 +1,42 @@
 import { AxisConfig, ScaleName } from '../../models';
-import { ChartsXAxisProps, ChartsAxisProps, ChartsYAxisProps } from '../../models/axis';
-import { CartesianChartSeriesType, ExtremumGetter } from '../../models/seriesType/config';
+import { ChartsXAxisProps, ChartsAxisProps, ChartsYAxisProps, AxisId } from '../../models/axis';
+import { CartesianChartSeriesType, DatasetType, ExtremumGetter } from '../../models/seriesType/config';
 import { DefaultizedAxisConfig } from './CartesianContext';
 import { DrawingArea } from '../DrawingProvider';
 import { FormattedSeries } from '../SeriesContextProvider';
-import { MakeOptional } from '../../models/helpers';
-export declare function computeValue(drawingArea: DrawingArea, formattedSeries: FormattedSeries, axis: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>[] | undefined, extremumGetters: {
-    [K in CartesianChartSeriesType]?: ExtremumGetter<K>;
-}, axisName: 'y', zoomRange?: [number, number]): {
+export declare function computeValue(options: {
+    drawingArea: DrawingArea;
+    formattedSeries: FormattedSeries;
+    axis: AxisConfig<ScaleName, any, ChartsYAxisProps>[] | undefined;
+    extremumGetters: {
+        [K in CartesianChartSeriesType]?: ExtremumGetter<K>;
+    };
+    axisDirection: 'y';
+    dataset: DatasetType | undefined;
+    zoomData?: {
+        axisId: AxisId;
+        start: number;
+        end: number;
+    }[];
+}): {
     axis: DefaultizedAxisConfig<ChartsYAxisProps>;
     axisIds: string[];
 };
-export declare function computeValue(drawingArea: DrawingArea, formattedSeries: FormattedSeries, inAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, 'id'>[] | undefined, extremumGetters: {
-    [K in CartesianChartSeriesType]?: ExtremumGetter<K>;
-}, axisName: 'x', zoomRange?: [number, number]): {
+export declare function computeValue(options: {
+    drawingArea: DrawingArea;
+    formattedSeries: FormattedSeries;
+    axis: AxisConfig<ScaleName, any, ChartsXAxisProps>[] | undefined;
+    extremumGetters: {
+        [K in CartesianChartSeriesType]?: ExtremumGetter<K>;
+    };
+    axisDirection: 'x';
+    dataset: DatasetType | undefined;
+    zoomData?: {
+        axisId: AxisId;
+        start: number;
+        end: number;
+    }[];
+}): {
     axis: DefaultizedAxisConfig<ChartsAxisProps>;
     axisIds: string[];
 };

package/context/CartesianProvider/computeValue.js

@@ -7,14 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.computeValue = computeValue;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _d3Scale = require("d3-scale");
-var _constants = require("../../constants");
 var _axis = require("../../models/axis");
 var _colorScale = require("../../internals/colorScale");
 var _useTicks = require("../../hooks/useTicks");
 var _getScale = require("../../internals/getScale");
 var _getAxisExtremum = require("./getAxisExtremum");
-const getRange = (drawingArea, axisName, isReverse) => {
-  const range = axisName === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
+var _normalizeAxis = require("./normalizeAxis");
+const getRange = (drawingArea, axisDirection, isReverse) => {
+  const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return isReverse ? range.reverse() : range;
 };
 const zoomedScaleRange = (scaleRange, zoomRange) => {
@@ -36,26 +36,30 @@ function createDateFormatter(axis, range) {
 }
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
-function computeValue(drawingArea, formattedSeries, inAxis, extremumGetters, axisName, zoomRange = [0, 100]) {
-  const DEFAULT_AXIS_KEY = axisName === 'x' ? _constants.DEFAULT_X_AXIS_KEY : _constants.DEFAULT_Y_AXIS_KEY;
-  const allAxis = [...(inAxis?.map((axis, index) => (0, _extends2.default)({
-    id: `defaultized-${axisName}-axis-${index}`
-  }, axis)) ?? []), ...(inAxis === undefined || inAxis.findIndex(({
-    id
-  }) => id === DEFAULT_AXIS_KEY) === -1 ? [{
-    id: DEFAULT_AXIS_KEY,
-    scaleType: 'linear'
-  }] : [])];
+function computeValue({
+  drawingArea,
+  formattedSeries,
+  axis: inAxis,
+  extremumGetters,
+  dataset,
+  axisDirection,
+  zoomData
+}) {
+  const allAxis = (0, _normalizeAxis.normalizeAxis)(inAxis, dataset, axisDirection);
   const completeAxis = {};
   allAxis.forEach((axis, axisIndex) => {
     const isDefaultAxis = axisIndex === 0;
     const [minData, maxData] = (0, _getAxisExtremum.getAxisExtremum)(axis, extremumGetters, isDefaultAxis, formattedSeries);
-    const range = getRange(drawingArea, axisName, axis.reverse);
+    const zoom = zoomData?.find(({
+      axisId
+    }) => axisId === axis.id);
+    const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
+    const range = getRange(drawingArea, axisDirection, axis.reverse);
     if ((0, _axis.isBandScaleConfig)(axis)) {
       const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
       const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
       // Reverse range because ordinal scales are presented from top to bottom on y-axis
-      const scaleRange = axisName === 'x' ? range : [range[1], range[0]];
+      const scaleRange = axisDirection === 'x' ? range : [range[1], range[0]];
       const zoomedRange = zoomedScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = (0, _extends2.default)({
         categoryGapRatio,
@@ -73,7 +77,7 @@ function computeValue(drawingArea, formattedSeries, inAxis, extremumGetters, axi
       }
     }
     if ((0, _axis.isPointScaleConfig)(axis)) {
-      const scaleRange = axisName === 'x' ? range : [...range].reverse();
+      const scaleRange = axisDirection === 'x' ? range : [...range].reverse();
       const zoomedRange = zoomedScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = (0, _extends2.default)({}, axis, {
         scale: (0, _d3Scale.scalePoint)(axis.data, zoomedRange),

package/context/CartesianProvider/defaultizeAxis.d.ts

@@ -0,0 +1,36 @@
+import { MakeOptional } from '../../models/helpers';
+import { AxisConfig, ScaleName } from '../../models';
+import { ChartsAxisProps } from '../../models/axis';
+export declare const defaultizeAxis: (inAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsAxisProps>, "id">[] | undefined, axisName: "x" | "y") => {
+    reverse?: boolean;
+    fill?: string;
+    stroke?: string;
+    data?: any[] | undefined;
+    label?: string;
+    max?: number | Date;
+    min?: number | Date;
+    classes?: Partial<import("../..").ChartsAxisClasses>;
+    slots?: Partial<import("../../models/axis").ChartsAxisSlots>;
+    slotProps?: Partial<import("../../models/axis").ChartsAxisSlotProps>;
+    dataKey?: string;
+    valueFormatter?: ((value: any, context: import("../../models/axis").AxisValueFormatterContext) => string) | undefined;
+    colorMap?: import("../../models/colorMapping").ContinuousColorConfig<number | Date> | import("../../models/colorMapping").PiecewiseColorConfig<number | Date> | import("../../models/colorMapping").OrdinalColorConfig<string | number | Date> | undefined;
+    tickMaxStep?: number;
+    tickMinStep?: number;
+    tickNumber?: number;
+    tickPlacement?: "start" | "end" | "middle" | "extremities";
+    tickLabelPlacement?: "middle" | "tick";
+    scaleType?: "linear" | "time" | "log" | "band" | "point" | "pow" | "sqrt" | "utc" | undefined;
+    axisId?: import("../../models/axis").AxisId;
+    disableLine?: boolean;
+    disableTicks?: boolean;
+    tickFontSize?: number;
+    tickLabelStyle?: import("../..").ChartsTextProps["style"];
+    labelStyle?: import("../..").ChartsTextProps["style"];
+    tickLabelInterval?: "auto" | ((value: any, index: number) => boolean);
+    labelFontSize?: number;
+    tickSize?: number;
+    tickInterval?: "auto" | ((value: any, index: number) => boolean) | any[];
+    hideTooltip?: boolean;
+    id: import("../../models/axis").AxisId;
+}[];

package/context/CartesianProvider/defaultizeAxis.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultizeAxis = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _constants = require("../../constants");
+const defaultizeAxis = (inAxis, axisName) => {
+  const DEFAULT_AXIS_KEY = axisName === 'x' ? _constants.DEFAULT_X_AXIS_KEY : _constants.DEFAULT_Y_AXIS_KEY;
+  return [...(inAxis?.map((axis, index) => (0, _extends2.default)({
+    id: `defaultized-${axisName}-axis-${index}`
+  }, axis)) ?? []), ...(inAxis === undefined || inAxis.findIndex(({
+    id
+  }) => id === DEFAULT_AXIS_KEY) === -1 ? [{
+    id: DEFAULT_AXIS_KEY,
+    scaleType: 'linear'
+  }] : [])];
+};
+exports.defaultizeAxis = defaultizeAxis;

package/context/CartesianProvider/index.d.ts

@@ -4,6 +4,5 @@ export * from './CartesianContext';
 export * from './useCartesianContext';
 declare const cartesianProviderUtils: {
     computeValue: typeof computeValue;
-    normalizeAxis: <T extends import("../../internals").ChartsAxisProps, R extends import("../../internals").MakeOptional<import("../..").AxisConfig<import("../..").ScaleName, any, T>, "id">>(axis: R[] | undefined, dataset: import("../../internals").DatasetType | undefined, axisName: "x" | "y") => R[] | undefined;
 };
 export { cartesianProviderUtils };

package/context/CartesianProvider/index.js

@@ -8,7 +8,6 @@ var _exportNames = {
 };
 exports.cartesianProviderUtils = void 0;
 var _computeValue = require("./computeValue");
-var _normalizeAxis = require("./normalizeAxis");
 var _CartesianProvider = require("./CartesianProvider");
 Object.keys(_CartesianProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -46,6 +45,5 @@ Object.keys(_useCartesianContext).forEach(function (key) {
   });
 });
 const cartesianProviderUtils = exports.cartesianProviderUtils = {
-  computeValue: _computeValue.computeValue,
-  normalizeAxis: _normalizeAxis.normalizeAxis
+  computeValue: _computeValue.computeValue
 };

package/context/CartesianProvider/normalizeAxis.d.ts

@@ -2,4 +2,4 @@ import type { AxisConfig, ScaleName } from '../../models';
 import { ChartsAxisProps } from '../../models/axis';
 import { MakeOptional } from '../../models/helpers';
 import { DatasetType } from '../../models/seriesType/config';
-export declare const normalizeAxis: <T extends ChartsAxisProps, R extends MakeOptional<AxisConfig<ScaleName, any, T>, "id">>(axis: R[] | undefined, dataset: DatasetType | undefined, axisName: "x" | "y") => R[] | undefined;
+export declare const normalizeAxis: <T extends ChartsAxisProps, R extends MakeOptional<AxisConfig<ScaleName, any, T>, "id">>(axis: R[] | undefined, dataset: DatasetType | undefined, axisName: "x" | "y") => R[];

package/context/CartesianProvider/normalizeAxis.js

@@ -13,11 +13,11 @@ const normalizeAxis = (axis, dataset, axisName) => {
       return axisConfig;
     }
     if (dataset === undefined) {
-      throw Error(`MUI X Charts: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+      throw Error(`MUI X: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
     }
     return (0, _extends2.default)({}, axisConfig, {
       data: dataset.map(d => d[dataKey])
     });
-  });
+  }) ?? [];
 };
 exports.normalizeAxis = normalizeAxis;

package/context/DrawingProvider.d.ts

@@ -33,6 +33,18 @@ export type DrawingArea = {
      * The height of the drawing area.
      */
     height: number;
+    /**
+     * Checks if a point is inside the drawing area.
+     * @param {Object} point The point to check.
+     * @param {number} point.x The x coordinate of the point.
+     * @param {number} point.y The y coordinate of the point.
+     * @param {Element} targetElement The target element if relevant.
+     * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
+     */
+    isPointInside: (point: {
+        x: number;
+        y: number;
+    }, targetElement?: Element) => boolean;
 };
 export declare const DrawingContext: React.Context<DrawingArea & {
     /**

package/context/DrawingProvider.js

@@ -25,7 +25,8 @@ const DrawingContext = exports.DrawingContext = /*#__PURE__*/React.createContext
   right: 0,
   height: 300,
   width: 400,
-  chartId: ''
+  chartId: '',
+  isPointInside: () => false
 });
 if (process.env.NODE_ENV !== 'production') {
   DrawingContext.displayName = 'DrawingContext';
@@ -49,9 +50,21 @@ function DrawingProvider(props) {
   } = props;
   const drawingArea = (0, _useChartDimensions.default)(width, height, margin);
   const chartId = (0, _useId.default)();
+  const isPointInside = React.useCallback(({
+    x,
+    y
+  }, targetElement) => {
+    // For element allowed to overflow, wrapping them in <g data-drawing-container /> make them fully part of the drawing area.
+    if (targetElement && targetElement.closest('[data-drawing-container]')) {
+      return true;
+    }
+    return x >= drawingArea.left && x <= drawingArea.left + drawingArea.width && y >= drawingArea.top && y <= drawingArea.top + drawingArea.height;
+  }, [drawingArea]);
   const value = React.useMemo(() => (0, _extends2.default)({
     chartId: chartId ?? ''
-  }, drawingArea), [chartId, drawingArea]);
+  }, drawingArea, {
+    isPointInside
+  }), [chartId, drawingArea, isPointInside]);
   const refValue = React.useMemo(() => ({
     isInitialized: true,
     data: svgRef

package/context/HighlightedProvider/HighlightedProvider.js

@@ -24,11 +24,11 @@ const mergeDeprecatedOptions = options => {
       highlighted,
       faded
     } = _ref,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   return (0, _extends2.default)({
     highlight: highlighted,
     fade: faded
-  }, rest);
+  }, other);
 };
 function HighlightedProvider({
   children,

package/context/SeriesContextProvider.js

@@ -44,7 +44,7 @@ const preprocessSeries = (series, colors, seriesFormatters, dataset) => {
       };
     }
     if (seriesGroups[type]?.series[id] !== undefined) {
-      throw new Error(`MUI X Charts: series' id "${id}" is not unique.`);
+      throw new Error(`MUI X: series' id "${id}" is not unique.`);
     }
     seriesGroups[type].series[id] = (0, _extends2.default)({
       id

package/context/ZAxisContextProvider.d.ts

@@ -14,7 +14,7 @@ export type ZAxisContextProviderProps = {
     children: React.ReactNode;
 };
 type DefaultizedZAxisConfig = {
-    [axisKey: string]: ZAxisDefaultized;
+    [axisId: string]: ZAxisDefaultized;
 };
 export declare const ZAxisContext: React.Context<{
     /**

package/context/ZAxisContextProvider.js

@@ -32,7 +32,7 @@ function ZAxisContextProvider(props) {
       return axisConfig;
     }
     if (dataset === undefined) {
-      throw Error('MUI X Charts: z-axis uses `dataKey` but no `dataset` is provided.');
+      throw Error('MUI X: z-axis uses `dataKey` but no `dataset` is provided.');
     }
     return (0, _extends2.default)({}, axisConfig, {
       data: dataset.map(d => d[dataKey])

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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,