@mui/x-charts 7.11.0 → 7.12.0

package/hooks/useTicks.d.ts

@@ -41,7 +41,7 @@ export interface TickParams {
     tickLabelPlacement?: 'middle' | 'tick';
 }
 export declare function getTickNumber(params: TickParams & {
-    range: any[];
+    range: number[];
     domain: any[];
 }): number;
 export type TickItemType = {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.11.0
+ * @mui/x-charts v7.12.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/SlotComponentPropsFromProps.d.ts

@@ -0,0 +1 @@
+export type SlotComponentPropsFromProps<TProps extends {}, TOverrides extends {}, TOwnerState extends {}> = (Partial<TProps> & TOverrides) | ((ownerState: TOwnerState) => Partial<TProps> & TOverrides);

package/internals/SlotComponentPropsFromProps.js

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

package/internals/colorScale.d.ts

@@ -1,5 +1,5 @@
-import { ScaleOrdinal } from 'd3-scale';
+import { ScaleOrdinal } from '@mui/x-charts-vendor/d3-scale';
 import { ContinuousColorConfig, PiecewiseColorConfig, OrdinalColorConfig } from '../models/colorMapping';
-export declare function getSequentialColorScale<Value extends number | Date>(config: ContinuousColorConfig<Value> | PiecewiseColorConfig<Value>): import("d3-scale").ScaleThreshold<Value, string, never> | import("d3-scale").ScaleSequential<string, never>;
+export declare function getSequentialColorScale<Value extends number | Date>(config: ContinuousColorConfig<Value> | PiecewiseColorConfig<Value>): import("@mui/x-charts-vendor/d3-scale").ScaleThreshold<Value, string, never> | import("@mui/x-charts-vendor/d3-scale").ScaleSequential<string, never>;
 export declare function getOrdinalColorScale<Value extends number | Date | string>(config: OrdinalColorConfig<Value>): ScaleOrdinal<Value, string, null | string> | ScaleOrdinal<number, string, null | string>;
-export declare function getColorScale(config: ContinuousColorConfig | PiecewiseColorConfig | OrdinalColorConfig): import("d3-scale").ScaleSequential<string, never> | ScaleOrdinal<number, string, string | null> | ScaleOrdinal<string | number | Date, string, string | null> | import("d3-scale").ScaleThreshold<number | Date, string, never>;
+export declare function getColorScale(config: ContinuousColorConfig | PiecewiseColorConfig | OrdinalColorConfig): import("@mui/x-charts-vendor/d3-scale").ScaleSequential<string, never> | ScaleOrdinal<number, string, string | null> | ScaleOrdinal<string | number | Date, string, string | null> | import("@mui/x-charts-vendor/d3-scale").ScaleThreshold<number | Date, string, never>;

package/internals/colorScale.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getColorScale = getColorScale;
 exports.getOrdinalColorScale = getOrdinalColorScale;
 exports.getSequentialColorScale = getSequentialColorScale;
-var _d3Scale = require("d3-scale");
+var _d3Scale = require("@mui/x-charts-vendor/d3-scale");
 function getSequentialColorScale(config) {
   if (config.type === 'piecewise') {
     return (0, _d3Scale.scaleThreshold)(config.thresholds, config.colors);

package/internals/components/ChartsAxesGradients/ChartsContinuousGradient.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = ChartsContinuousGradient;
 var React = _interopRequireWildcard(require("react"));
-var _d3Interpolate = require("d3-interpolate");
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
 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; }

package/internals/defaultizeColor.d.ts

@@ -2,7 +2,7 @@ import { AllSeriesType } from '../models/seriesType';
 export declare function defaultizeColor(series: AllSeriesType, seriesIndex: number, colors?: string[]): {
     data: {
         color: string;
-        label?: string | ((location: "tooltip" | "legend" | "arc") => string);
+        label?: (string | ((location: "tooltip" | "legend" | "arc") => string)) | undefined;
         value: number;
         id?: import("../models/seriesType").PieItemId | undefined;
     }[];
@@ -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/getCurve.d.ts

@@ -1,2 +1,2 @@
 import { CurveType } from '../models/seriesType/line';
-export default function getCurveFactory(curveType?: CurveType): import("d3-shape").CurveFactory;
+export default function getCurveFactory(curveType?: CurveType): import("@mui/x-charts-vendor/d3-shape").CurveFactory;

package/internals/getCurve.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = getCurveFactory;
-var _d3Shape = require("d3-shape");
+var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 function getCurveFactory(curveType) {
   switch (curveType) {
     case 'catmullRom':

package/internals/getPercentageValue.js

@@ -30,5 +30,5 @@ function getPercentageValue(value, refValue) {
       return val;
     }
   }
-  throw Error(`MUI X Charts: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
+  throw Error(`MUI X: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
 }

package/internals/getScale.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getScale = getScale;
-var _d3Scale = require("d3-scale");
+var _d3Scale = require("@mui/x-charts-vendor/d3-scale");
 function getScale(scaleType, domain, range) {
   switch (scaleType) {
     case 'log':

package/internals/index.d.ts

@@ -19,7 +19,7 @@ export * from '../context/CartesianProvider';
 export * from '../context/DrawingProvider';
 export * from '../context/ColorProvider';
 export * from '../context/InteractionProvider';
-export * from '../context/SeriesContextProvider';
+export * from '../context/SeriesProvider';
 export * from '../context/ZAxisContextProvider';
 export type * from '../context/context.types';
 export * from '../models/seriesType/config';

package/internals/index.js

@@ -221,15 +221,15 @@ Object.keys(_InteractionProvider).forEach(function (key) {
     }
   });
 });
-var _SeriesContextProvider = require("../context/SeriesContextProvider");
-Object.keys(_SeriesContextProvider).forEach(function (key) {
+var _SeriesProvider = require("../context/SeriesProvider");
+Object.keys(_SeriesProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _SeriesContextProvider[key]) return;
+  if (key in exports && exports[key] === _SeriesProvider[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _SeriesContextProvider[key];
+      return _SeriesProvider[key];
     }
   });
 });

package/internals/isBandScale.d.ts

@@ -1,4 +1,4 @@
-import type { ScaleBand, ScalePoint } from 'd3-scale';
+import type { ScaleBand, ScalePoint } from '@mui/x-charts-vendor/d3-scale';
 import { D3Scale } from '../models/axis';
 export declare function isBandScale<T extends {
     toString(): string;

package/internals/stackSeries.d.ts

@@ -1,4 +1,4 @@
-import { Series } from 'd3-shape';
+import { Series } from '@mui/x-charts-vendor/d3-shape';
 import type { BarSeriesType, LineSeriesType } from '../models/seriesType';
 import type { StackOffsetType, StackOrderType } from '../models/stacking';
 import { SeriesId } from '../models/seriesType/common';

package/internals/stackSeries.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getStackingGroups = exports.StackOrder = exports.StackOffset = void 0;
-var _d3Shape = require("d3-shape");
+var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 const StackOrder = exports.StackOrder = {
   /**
    * Series order such that the earliest series (according to the maximum value) is at the bottom.

package/internals/useAnimatedPath.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useAnimatedPath = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _d3Interpolate = require("d3-interpolate");
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
 var _web = require("@react-spring/web");
 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; }

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

@@ -1,4 +1,4 @@
-import type { ScaleBand, ScaleLogarithmic, ScalePower, ScaleTime, ScaleLinear, ScalePoint, ScaleOrdinal, ScaleSequential, ScaleThreshold } from 'd3-scale';
+import type { ScaleBand, ScaleLogarithmic, ScalePower, ScaleTime, ScaleLinear, ScalePoint, ScaleOrdinal, ScaleSequential, ScaleThreshold } from '@mui/x-charts-vendor/d3-scale';
 import { ChartsAxisClasses } from '../ChartsAxis/axisClasses';
 import type { TickParams } from '../hooks/useTicks';
 import { ChartsTextProps } from '../ChartsText';
@@ -254,7 +254,7 @@ 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 & AxisConfigExtension;
+} & Omit<Partial<AxisProps>, 'axisId'> & 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] & {

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/pie.d.ts

@@ -1,4 +1,4 @@
-import { PieArcDatum as D3PieArcDatum } from 'd3-shape';
+import { PieArcDatum as D3PieArcDatum } from '@mui/x-charts-vendor/d3-shape';
 import { DefaultizedProps } from '../helpers';
 import { CommonDefaultizedProps, CommonSeriesType, SeriesId } from './common';
 export type PieItemId = string | number;

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/models/z-axis.d.ts

@@ -1,4 +1,4 @@
-import type { ScaleOrdinal, ScaleSequential, ScaleThreshold } from 'd3-scale';
+import type { ScaleOrdinal, ScaleSequential, ScaleThreshold } from '@mui/x-charts-vendor/d3-scale';
 import { ContinuousColorConfig, OrdinalColorConfig, PiecewiseColorConfig } from './colorMapping';
 export interface ZAxisConfig<V = any> {
     id: string;

package/modern/BarChart/BarChart.js

@@ -239,7 +239,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -292,7 +291,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,

package/modern/BarChart/BarElement.js

@@ -4,11 +4,11 @@ const _excluded = ["id", "dataIndex", "classes", "color", "slots", "slotProps",
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { useSlotProps } from '@mui/base/utils';
+import useSlotProps from '@mui/utils/useSlotProps';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
-import { color as d3Color } from 'd3-color';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import { color as d3Color } from '@mui/x-charts-vendor/d3-color';
 import { animated } from '@react-spring/web';
 import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { useItemHighlighted } from '../context';

package/modern/BarChart/BarLabel/BarLabelItem.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["seriesId", "classes", "color", "style", "dataIndex", "barLabel", "slots", "slotProps", "height", "width", "value"],
   _excluded2 = ["ownerState"];
 import * as React from 'react';
-import { useSlotProps } from '@mui/base/utils';
+import useSlotProps from '@mui/utils/useSlotProps';
 import PropTypes from 'prop-types';
 import { useUtilityClasses } from './barLabelClasses';
 import { getBarLabel } from './getBarLabel';

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { stack as d3Stack } from 'd3-shape';
+import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
 import { getStackingGroups } from '../internals/stackSeries';
 import { defaultizeValueFormatter } from '../internals/defaultizeValueFormatter';
 let warnOnce = false;
@@ -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/ChartContainer/ChartContainer.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { DrawingProvider } from '../context/DrawingProvider';
-import { SeriesContextProvider } from '../context/SeriesContextProvider';
+import { SeriesProvider } from '../context/SeriesProvider';
 import { InteractionProvider } from '../context/InteractionProvider';
 import { ColorProvider } from '../context/ColorProvider';
 import { ChartsSurface } from '../ChartsSurface';
@@ -16,7 +16,7 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
     children,
     drawingProviderProps,
     colorProviderProps,
-    seriesContextProps,
+    seriesProviderProps,
     cartesianContextProps,
     zAxisContextProps,
     highlightedProviderProps,
@@ -24,7 +24,7 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
   } = useChartContainerProps(props, ref);
   return /*#__PURE__*/_jsx(DrawingProvider, _extends({}, drawingProviderProps, {
     children: /*#__PURE__*/_jsx(ColorProvider, _extends({}, colorProviderProps, {
-      children: /*#__PURE__*/_jsx(SeriesContextProvider, _extends({}, seriesContextProps, {
+      children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
         children: /*#__PURE__*/_jsx(CartesianContextProvider, _extends({}, cartesianContextProps, {
           children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
             children: /*#__PURE__*/_jsx(InteractionProvider, {
@@ -121,7 +121,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -174,7 +173,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,

package/modern/ChartContainer/useChartContainerProps.js

@@ -42,7 +42,7 @@ export const useChartContainerProps = (props, ref) => {
   const colorProviderProps = {
     colorProcessors
   };
-  const seriesContextProps = {
+  const seriesProviderProps = {
     series,
     colors,
     dataset,
@@ -76,7 +76,7 @@ export const useChartContainerProps = (props, ref) => {
     children,
     drawingProviderProps,
     colorProviderProps,
-    seriesContextProps,
+    seriesProviderProps,
     cartesianContextProps,
     zAxisContextProps,
     highlightedProviderProps,

package/modern/ChartsAxis/ChartsAxis.js

@@ -57,16 +57,16 @@ function ChartsAxis(props) {
   const topId = getAxisId(topAxis, xAxisIds[0]);
   const rightId = getAxisId(rightAxis, yAxisIds[0]);
   if (topId !== null && !xAxis[topId]) {
-    throw Error([`MUI X Charts: id used for top axis "${topId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
+    throw Error([`MUI X: id used for top axis "${topId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
   }
   if (leftId !== null && !yAxis[leftId]) {
-    throw Error([`MUI X Charts: id used for left axis "${leftId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
+    throw Error([`MUI X: id used for left axis "${leftId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
   }
   if (rightId !== null && !yAxis[rightId]) {
-    throw Error([`MUI X Charts: id used for right axis "${rightId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
+    throw Error([`MUI X: id used for right axis "${rightId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
   }
   if (bottomId !== null && !xAxis[bottomId]) {
-    throw Error([`MUI X Charts: id used for bottom axis "${bottomId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
+    throw Error([`MUI X: id used for bottom axis "${bottomId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
   }
   const topAxisProps = mergeProps(topAxis, slots, slotProps);
   const bottomAxisProps = mergeProps(bottomAxis, slots, slotProps);

package/modern/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -74,7 +74,7 @@ function ChartsAxisHighlight(props) {
     const isXError = isBandScaleX && xScale(axisX.value) === undefined;
     const isYError = isBandScaleY && yScale(axisY.value) === undefined;
     if (isXError || isYError) {
-      console.error([`MUI X Charts: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
+      console.error([`MUI X: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
     }
   }
   return /*#__PURE__*/_jsxs(React.Fragment, {

package/modern/ChartsLegend/ChartsLegend.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useSlotProps } from '@mui/base/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import useSlotProps from '@mui/utils/useSlotProps';
+import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, useTheme } from '@mui/material/styles';
 import { getSeriesToDisplay } from './utils';
 import { getLegendUtilityClass } from './chartsLegendClasses';

package/modern/ChartsLegend/LegendPerItem.js

@@ -2,7 +2,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["rotate", "dominantBaseline"];
 import * as React from 'react';
-import { NoSsr } from '@mui/base/NoSsr';
+import NoSsr from '@mui/material/NoSsr';
 import { useTheme, styled } from '@mui/material/styles';
 import { ChartsText } from '../ChartsText';
 import { getWordsByLines } from '../internals/getWordsByLines';

package/modern/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -37,7 +37,9 @@ function ChartsOnAxisClickHandler(props) {
       Object.keys(series).filter(seriesType => ['bar', 'line'].includes(seriesType)).forEach(seriesType => {
         series[seriesType]?.seriesOrder.forEach(seriesId => {
           const seriesItem = series[seriesType].series[seriesId];
-          const axisKey = isXaxis ? seriesItem.xAxisKey : seriesItem.yAxisKey;
+          const providedXAxisId = seriesItem.xAxisId ?? seriesItem.xAxisKey;
+          const providedYAxisId = seriesItem.yAxisId ?? seriesItem.yAxisKey;
+          const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
           if (axisKey === undefined || axisKey === USED_AXIS_ID) {
             seriesValues[seriesId] = seriesItem.data[dataIndex];
           }