@mui/x-charts 7.11.0 → 7.12.0

package/ChartContainer/useChartContainerProps.d.ts

@@ -1,7 +1,7 @@
 import type { DrawingProviderProps } from '../context/DrawingProvider';
 import type { ColorProviderProps } from '../context/ColorProvider';
 import type { CartesianContextProviderProps } from '../context/CartesianProvider';
-import type { SeriesContextProviderProps } from '../context/SeriesContextProvider';
+import type { SeriesProviderProps } from '../context/SeriesProvider';
 import type { ZAxisContextProviderProps } from '../context/ZAxisContextProvider';
 import type { ChartContainerProps } from './ChartContainer';
 import { HighlightedProviderProps } from '../context';
@@ -10,7 +10,7 @@ export declare const useChartContainerProps: (props: ChartContainerProps, ref: R
     children: import("react").ReactNode;
     drawingProviderProps: Omit<DrawingProviderProps, "children">;
     colorProviderProps: Omit<ColorProviderProps, "children">;
-    seriesContextProps: Omit<SeriesContextProviderProps, "children">;
+    seriesProviderProps: Omit<SeriesProviderProps, "children">;
     cartesianContextProps: Omit<CartesianContextProviderProps, "children">;
     zAxisContextProps: Omit<ZAxisContextProviderProps, "children">;
     highlightedProviderProps: Omit<HighlightedProviderProps, "children">;
@@ -18,69 +18,67 @@ export declare const useChartContainerProps: (props: ChartContainerProps, ref: R
         ref: any;
     };
     xAxis: {
-        reverse?: boolean;
-        fill?: string;
-        stroke?: string;
+        reverse?: boolean | undefined;
+        fill?: string | undefined;
+        stroke?: string | undefined;
         data?: any[] | undefined;
-        label?: string;
-        max?: number | Date;
-        min?: number | Date;
-        classes?: Partial<import("..").ChartsAxisClasses>;
-        slots?: Partial<import("../internals").ChartsAxisSlots>;
-        slotProps?: Partial<import("../internals").ChartsAxisSlotProps>;
-        dataKey?: string;
+        label?: string | undefined;
+        max?: (number | Date) | undefined;
+        min?: (number | Date) | undefined;
+        classes?: Partial<import("..").ChartsAxisClasses> | undefined;
+        slots?: Partial<import("../internals").ChartsAxisSlots> | undefined;
+        slotProps?: Partial<import("../internals").ChartsAxisSlotProps> | undefined;
+        dataKey?: string | undefined;
         valueFormatter?: ((value: any, context: import("../internals").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("../internals").AxisId;
-        disableLine?: boolean;
-        disableTicks?: boolean;
-        tickFontSize?: number;
+        tickMaxStep?: number | undefined;
+        tickMinStep?: number | undefined;
+        tickNumber?: number | undefined;
+        disableLine?: boolean | undefined;
+        disableTicks?: boolean | undefined;
+        tickFontSize?: number | undefined;
         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;
+        tickLabelInterval?: ("auto" | ((value: any, index: number) => boolean)) | undefined;
+        labelFontSize?: number | undefined;
+        tickSize?: number | undefined;
+        tickInterval?: ("auto" | ((value: any, index: number) => boolean) | any[]) | undefined;
+        tickPlacement?: ("start" | "end" | "middle" | "extremities") | undefined;
+        tickLabelPlacement?: ("middle" | "tick") | undefined;
+        scaleType?: "linear" | "time" | "log" | "band" | "point" | "pow" | "sqrt" | "utc" | undefined;
+        hideTooltip?: boolean | undefined;
         id: import("../internals").AxisId;
     }[];
     yAxis: {
-        reverse?: boolean;
-        fill?: string;
-        stroke?: string;
+        reverse?: boolean | undefined;
+        fill?: string | undefined;
+        stroke?: string | undefined;
         data?: any[] | undefined;
-        label?: string;
-        max?: number | Date;
-        min?: number | Date;
-        classes?: Partial<import("..").ChartsAxisClasses>;
-        slots?: Partial<import("../internals").ChartsAxisSlots>;
-        slotProps?: Partial<import("../internals").ChartsAxisSlotProps>;
-        dataKey?: string;
+        label?: string | undefined;
+        max?: (number | Date) | undefined;
+        min?: (number | Date) | undefined;
+        classes?: Partial<import("..").ChartsAxisClasses> | undefined;
+        slots?: Partial<import("../internals").ChartsAxisSlots> | undefined;
+        slotProps?: Partial<import("../internals").ChartsAxisSlotProps> | undefined;
+        dataKey?: string | undefined;
         valueFormatter?: ((value: any, context: import("../internals").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("../internals").AxisId;
-        disableLine?: boolean;
-        disableTicks?: boolean;
-        tickFontSize?: number;
+        tickMaxStep?: number | undefined;
+        tickMinStep?: number | undefined;
+        tickNumber?: number | undefined;
+        disableLine?: boolean | undefined;
+        disableTicks?: boolean | undefined;
+        tickFontSize?: number | undefined;
         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;
+        tickLabelInterval?: ("auto" | ((value: any, index: number) => boolean)) | undefined;
+        labelFontSize?: number | undefined;
+        tickSize?: number | undefined;
+        tickInterval?: ("auto" | ((value: any, index: number) => boolean) | any[]) | undefined;
+        tickPlacement?: ("start" | "end" | "middle" | "extremities") | undefined;
+        tickLabelPlacement?: ("middle" | "tick") | undefined;
+        scaleType?: "linear" | "time" | "log" | "band" | "point" | "pow" | "sqrt" | "utc" | undefined;
+        hideTooltip?: boolean | undefined;
         id: import("../internals").AxisId;
     }[];
 };

package/ChartContainer/useChartContainerProps.js

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

package/ChartContainer/useDefaultizeAxis.d.ts

@@ -2,35 +2,34 @@ import { MakeOptional } from '../models/helpers';
 import { AxisConfig, ScaleName } from '../models';
 import { ChartsAxisProps } from '../models/axis';
 export declare const useDefaultizeAxis: (inXAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsAxisProps>, "id">[] | undefined, inYAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsAxisProps>, "id">[] | undefined) => {
-    reverse?: boolean;
-    fill?: string;
-    stroke?: string;
+    reverse?: boolean | undefined;
+    fill?: string | undefined;
+    stroke?: string | undefined;
     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;
+    label?: string | undefined;
+    max?: (number | Date) | undefined;
+    min?: (number | Date) | undefined;
+    classes?: Partial<import("..").ChartsAxisClasses> | undefined;
+    slots?: Partial<import("../models/axis").ChartsAxisSlots> | undefined;
+    slotProps?: Partial<import("../models/axis").ChartsAxisSlotProps> | undefined;
+    dataKey?: string | undefined;
     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;
+    tickMaxStep?: number | undefined;
+    tickMinStep?: number | undefined;
+    tickNumber?: number | undefined;
+    disableLine?: boolean | undefined;
+    disableTicks?: boolean | undefined;
+    tickFontSize?: number | undefined;
     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;
+    tickLabelInterval?: ("auto" | ((value: any, index: number) => boolean)) | undefined;
+    labelFontSize?: number | undefined;
+    tickSize?: number | undefined;
+    tickInterval?: ("auto" | ((value: any, index: number) => boolean) | any[]) | undefined;
+    tickPlacement?: ("start" | "end" | "middle" | "extremities") | undefined;
+    tickLabelPlacement?: ("middle" | "tick") | undefined;
+    scaleType?: "linear" | "time" | "log" | "band" | "point" | "pow" | "sqrt" | "utc" | undefined;
+    hideTooltip?: boolean | undefined;
     id: import("../models/axis").AxisId;
 }[][];

package/ChartContainer/usePluginsMerge.d.ts

@@ -1,6 +1,6 @@
 import { ChartsPluginType, ColorProcessorsConfig, ExtremumGettersConfig } from '../models';
 import { ChartSeriesType } from '../models/seriesType/config';
-import { SeriesFormatterConfig } from '../context/SeriesContextProvider';
+import { SeriesFormatterConfig } from '../context/SeriesProvider';
 export declare function usePluginsMerge<T extends ChartSeriesType>(plugins?: ChartsPluginType<T>[]): {
     seriesFormatters: SeriesFormatterConfig<keyof import("../models/seriesType/config").ChartsSeriesConfig>;
     colorProcessors: ColorProcessorsConfig<keyof import("../models/seriesType/config").ChartsSeriesConfig>;

package/ChartsAxis/ChartsAxis.js

@@ -66,16 +66,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/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -85,7 +85,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__*/(0, _jsxRuntime.jsxs)(React.Fragment, {

package/ChartsLegend/ChartsLegend.js

@@ -8,10 +8,10 @@ exports.ChartsLegend = ChartsLegend;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/base/utils");
-var _utils2 = require("@mui/utils");
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
-var _utils3 = require("./utils");
+var _utils = require("./utils");
 var _chartsLegendClasses = require("./chartsLegendClasses");
 var _DefaultChartsLegend = require("./DefaultChartsLegend");
 var _hooks = require("../hooks");
@@ -30,7 +30,7 @@ const useUtilityClasses = ownerState => {
     label: ['label'],
     series: ['series']
   };
-  return (0, _utils2.unstable_composeClasses)(slots, _chartsLegendClasses.getLegendUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _chartsLegendClasses.getLegendUtilityClass, classes);
 };
 const defaultProps = {
   position: {
@@ -57,9 +57,9 @@ function ChartsLegend(inProps) {
   }));
   const drawingArea = (0, _hooks.useDrawingArea)();
   const series = (0, _useSeries.useSeries)();
-  const seriesToDisplay = (0, _utils3.getSeriesToDisplay)(series);
+  const seriesToDisplay = (0, _utils.getSeriesToDisplay)(series);
   const ChartLegendRender = slots?.legend ?? _DefaultChartsLegend.DefaultChartsLegend;
-  const chartLegendRenderProps = (0, _utils.useSlotProps)({
+  const chartLegendRenderProps = (0, _useSlotProps.default)({
     elementType: ChartLegendRender,
     externalSlotProps: slotProps?.legend,
     additionalProps: {

package/ChartsLegend/DefaultChartsLegend.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormattedSeries } from '../context/SeriesContextProvider';
+import { FormattedSeries } from '../context/SeriesProvider';
 import { LegendPerItemProps } from './LegendPerItem';
 import { DrawingArea } from '../context/DrawingProvider';
 export interface LegendRendererProps extends Omit<LegendPerItemProps, 'itemsToDisplay'> {

package/ChartsLegend/LegendPerItem.js

@@ -9,7 +9,7 @@ exports.LegendPerItem = LegendPerItem;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _NoSsr = require("@mui/base/NoSsr");
+var _NoSsr = _interopRequireDefault(require("@mui/material/NoSsr"));
 var _styles = require("@mui/material/styles");
 var _ChartsText = require("../ChartsText");
 var _getWordsByLines = require("../internals/getWordsByLines");
@@ -120,7 +120,7 @@ function LegendPerItem(props) {
   if (hidden) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.NoSsr, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.default, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsLegendRoot, {
       className: classes?.root,
       children: itemsWithPosition.map(({

package/ChartsLegend/utils.d.ts

@@ -1,2 +1,2 @@
-import { FormattedSeries } from '../context/SeriesContextProvider';
+import { FormattedSeries } from '../context/SeriesProvider';
 export declare function getSeriesToDisplay(series: FormattedSeries): import("./chartsLegend.types").LegendItemParams[];

package/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -46,7 +46,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];
           }

package/ChartsOverlay/ChartsOverlay.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
+import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';
 export declare function useNoData(): boolean;
 export type CommonOverlayProps = React.SVGAttributes<SVGTextElement> & {
     /**
@@ -21,8 +22,8 @@ export interface ChartsOverlaySlots {
     noDataOverlay?: React.ElementType<CommonOverlayProps>;
 }
 export interface ChartsOverlaySlotProps {
-    loadingOverlay?: Partial<CommonOverlayProps>;
-    noDataOverlay?: Partial<CommonOverlayProps>;
+    loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+    noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
 }
 export interface ChartsOverlayProps {
     /**

package/ChartsReferenceLine/ChartsReferenceLine.js

@@ -19,10 +19,10 @@ function ChartsReferenceLine(props) {
     y
   } = props;
   if (x !== undefined && y !== undefined) {
-    throw new Error('MUI X Charts: The ChartsReferenceLine cannot have both `x` and `y` props set.');
+    throw new Error('MUI X: The ChartsReferenceLine cannot have both `x` and `y` props set.');
   }
   if (x === undefined && y === undefined) {
-    throw new Error('MUI X Charts: The ChartsReferenceLine should have a value in `x` or `y` prop.');
+    throw new Error('MUI X: The ChartsReferenceLine should have a value in `x` or `y` prop.');
   }
   if (x !== undefined) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsXReferenceLine.ChartsXReferenceLine, (0, _extends2.default)({}, props));

package/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -57,7 +57,6 @@ function getXReferenceLineClasses(classes) {
     label: ['label']
   }, _chartsReferenceLineClasses.getReferenceLineUtilityClass, classes);
 }
-const valueError = (0, _warning.buildWarning)((value, id) => `MUI X Charts: the value ${value} does not exist in the data of x axis with id ${id}.`, 'error');
 function ChartsXReferenceLine(props) {
   const {
     x,
@@ -77,7 +76,7 @@ function ChartsXReferenceLine(props) {
   const xPosition = xAxisScale(x);
   if (xPosition === undefined) {
     if (process.env.NODE_ENV !== 'production') {
-      valueError(x, axisId);
+      (0, _warning.warnOnce)(`MUI X: the value ${x} does not exist in the data of x axis with id ${axisId}.`, 'error');
     }
     return null;
   }

package/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -57,7 +57,6 @@ function getYReferenceLineClasses(classes) {
     label: ['label']
   }, _chartsReferenceLineClasses.getReferenceLineUtilityClass, classes);
 }
-const valueError = (0, _warning.buildWarning)((value, id) => `MUI X Charts: the value ${value} does not exist in the data of y axis with id ${id}.`, 'error');
 function ChartsYReferenceLine(props) {
   const {
     y,
@@ -77,7 +76,7 @@ function ChartsYReferenceLine(props) {
   const yPosition = yAxisScale(y);
   if (yPosition === undefined) {
     if (process.env.NODE_ENV !== 'production') {
-      valueError(y, axisId);
+      (0, _warning.warnOnce)(`MUI X: the value ${y} does not exist in the data of y axis with id ${axisId}.`, 'error');
     }
     return null;
   }

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsAxisTooltipContent = ChartsAxisTooltipContent;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("@mui/base/utils");
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _CartesianProvider = require("../context/CartesianProvider");
 var _DefaultChartsAxisTooltipContent = require("./DefaultChartsAxisTooltipContent");
 var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
@@ -49,11 +49,15 @@ function ChartsAxisTooltipContent(props) {
     Object.keys(series).filter(_isCartesian.isCartesianSeriesType).forEach(seriesType => {
       series[seriesType].seriesOrder.forEach(seriesId => {
         const item = series[seriesType].series[seriesId];
-        const axisKey = isXaxis ? item.xAxisKey : item.yAxisKey;
+        const providedXAxisId = item.xAxisId ?? item.xAxisKey;
+        const providedYAxisId = item.yAxisId ?? item.yAxisKey;
+        const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
         if (axisKey === undefined || axisKey === USED_AXIS_ID) {
           const seriesToAdd = series[seriesType].series[seriesId];
-          const zAxisKey = seriesToAdd.zAxisKey ?? zAxisIds[0];
-          const getColor = colorProcessors[seriesType]?.(seriesToAdd, xAxis[seriesToAdd.xAxisKey ?? xAxisIds[0]], yAxis[seriesToAdd.yAxisKey ?? yAxisIds[0]], zAxisKey && zAxis[zAxisKey]) ?? (() => '');
+          const xAxisId = providedXAxisId ?? xAxisIds[0];
+          const yAxisId = providedYAxisId ?? yAxisIds[0];
+          const zAxisId = seriesToAdd.zAxisId ?? seriesToAdd.zAxisKey ?? zAxisIds[0];
+          const getColor = colorProcessors[seriesType]?.(seriesToAdd, xAxis[xAxisId], yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
           rep.push((0, _extends2.default)({}, seriesToAdd, {
             getColor
           }));
@@ -66,7 +70,7 @@ function ChartsAxisTooltipContent(props) {
     return isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
   }, [USED_AXIS_ID, isXaxis, xAxis, yAxis]);
   const Content = content ?? _DefaultChartsAxisTooltipContent.DefaultChartsAxisTooltipContent;
-  const chartTooltipContentProps = (0, _utils.useSlotProps)({
+  const chartTooltipContentProps = (0, _useSlotProps.default)({
     elementType: Content,
     externalSlotProps: contentProps,
     additionalProps: {

package/ChartsTooltip/ChartsItemTooltipContent.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsItemTooltipContent = ChartsItemTooltipContent;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("@mui/base/utils");
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _DefaultChartsItemTooltipContent = require("./DefaultChartsItemTooltipContent");
 var _CartesianProvider = require("../context/CartesianProvider");
 var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
@@ -39,12 +39,12 @@ function ChartsItemTooltipContent(props) {
     zAxisIds
   } = React.useContext(_ZAxisContextProvider.ZAxisContext);
   const colorProcessors = (0, _useColor.useColorProcessor)();
-  const xAxisKey = series.xAxisKey ?? xAxisIds[0];
-  const yAxisKey = series.yAxisKey ?? yAxisIds[0];
-  const zAxisKey = series.zAxisKey ?? zAxisIds[0];
-  const getColor = colorProcessors[series.type]?.(series, xAxisKey && xAxis[xAxisKey], yAxisKey && yAxis[yAxisKey], zAxisKey && zAxis[zAxisKey]) ?? (() => '');
+  const xAxisId = series.xAxisId ?? series.xAxisKey ?? xAxisIds[0];
+  const yAxisId = series.yAxisId ?? series.yAxisKey ?? yAxisIds[0];
+  const zAxisId = series.zAxisId ?? series.zAxisKey ?? zAxisIds[0];
+  const getColor = colorProcessors[series.type]?.(series, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
   const Content = content ?? _DefaultChartsItemTooltipContent.DefaultChartsItemTooltipContent;
-  const chartTooltipContentProps = (0, _utils.useSlotProps)({
+  const chartTooltipContentProps = (0, _useSlotProps.default)({
     elementType: Content,
     externalSlotProps: contentProps,
     additionalProps: {

package/ChartsTooltip/ChartsTooltip.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
-import { PopperProps as BasePopperProps } from '@mui/base/Popper';
+import { PopperProps as BasePopperProps } from '@mui/material/Popper';
 import { TriggerOptions } from './utils';
 import { ChartSeriesType } from '../models/seriesType/config';
 import { ChartsItemContentProps } from './ChartsItemTooltipContent';

package/ChartsTooltip/ChartsTooltip.js

@@ -10,11 +10,11 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
-var _Popper = require("@mui/base/Popper");
-var _NoSsr = require("@mui/base/NoSsr");
-var _utils = require("@mui/base/utils");
+var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
+var _NoSsr = _interopRequireDefault(require("@mui/material/NoSsr"));
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _InteractionProvider = require("../context/InteractionProvider");
-var _utils2 = require("./utils");
+var _utils = require("./utils");
 var _ChartsItemTooltipContent = require("./ChartsItemTooltipContent");
 var _ChartsAxisTooltipContent = require("./ChartsAxisTooltipContent");
 var _chartsTooltipClasses = require("./chartsTooltipClasses");
@@ -37,7 +37,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _chartsTooltipClasses.getChartsTooltipUtilityClass, classes);
 };
-const ChartsTooltipRoot = (0, _styles.styled)(_Popper.Popper, {
+const ChartsTooltipRoot = (0, _styles.styled)(_Popper.default, {
   name: 'MuiChartsTooltip',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -69,25 +69,25 @@ function ChartsTooltip(props) {
     slots,
     slotProps
   } = themeProps;
-  const mousePosition = (0, _utils2.useMouseTracker)();
+  const mousePosition = (0, _utils.useMouseTracker)();
   const {
     item,
     axis
   } = React.useContext(_InteractionProvider.InteractionContext);
   const displayedData = trigger === 'item' ? item : axis;
-  const tooltipHasData = (0, _utils2.getTooltipHasData)(trigger, displayedData);
+  const tooltipHasData = (0, _utils.getTooltipHasData)(trigger, displayedData);
   const popperOpen = mousePosition !== null && tooltipHasData;
   const classes = useUtilityClasses({
     classes: themeProps.classes
   });
   const PopperComponent = slots?.popper ?? ChartsTooltipRoot;
-  const popperProps = (0, _utils.useSlotProps)({
+  const popperProps = (0, _useSlotProps.default)({
     elementType: PopperComponent,
     externalSlotProps: slotProps?.popper,
     additionalProps: {
       open: popperOpen,
       placement: mousePosition?.pointerType === 'mouse' ? 'right-start' : 'top',
-      anchorEl: (0, _utils2.generateVirtualElement)(mousePosition),
+      anchorEl: (0, _utils.generateVirtualElement)(mousePosition),
       modifiers: [{
         name: 'offset',
         options: {
@@ -100,7 +100,7 @@ function ChartsTooltip(props) {
   if (trigger === 'none') {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.NoSsr, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.default, {
     children: popperOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(PopperComponent, (0, _extends2.default)({}, popperProps, {
       children: trigger === 'item' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsItemTooltipContent.ChartsItemTooltipContent, {
         itemData: displayedData,

package/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsVoronoiHandler = ChartsVoronoiHandler;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _d3Delaunay = require("d3-delaunay");
+var _d3Delaunay = require("@mui/x-charts-vendor/d3-delaunay");
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _InteractionProvider = require("../context/InteractionProvider");
 var _CartesianProvider = require("../context/CartesianProvider");
@@ -72,11 +72,13 @@ function ChartsVoronoiHandler(props) {
     seriesOrder.forEach(seriesId => {
       const {
         data,
+        xAxisId,
+        yAxisId,
         xAxisKey,
         yAxisKey
       } = series[seriesId];
-      const xScale = xAxis[xAxisKey ?? defaultXAxisId].scale;
-      const yScale = yAxis[yAxisKey ?? defaultYAxisId].scale;
+      const xScale = xAxis[xAxisId ?? xAxisKey ?? defaultXAxisId].scale;
+      const yScale = yAxis[yAxisId ?? yAxisKey ?? defaultYAxisId].scale;
       const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
       const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
       const seriesPoints = data.flatMap(({

package/ChartsXAxis/ChartsXAxis.js

@@ -9,8 +9,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/base/utils");
-var _utils2 = require("@mui/utils");
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
 var _CartesianProvider = require("../context/CartesianProvider");
 var _useTicks = require("../hooks/useTicks");
@@ -38,7 +38,7 @@ const useUtilityClasses = ownerState => {
     tickLabel: ['tickLabel'],
     label: ['label']
   };
-  return (0, _utils2.unstable_composeClasses)(slots, _axisClasses.getAxisUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _axisClasses.getAxisUtilityClass, classes);
 };
 function addLabelDimension(xTicks, {
   tickLabelStyle: style,
@@ -164,7 +164,7 @@ function ChartsXAxis(inProps) {
   const Tick = slots?.axisTick ?? 'line';
   const TickLabel = slots?.axisTickLabel ?? _ChartsText.ChartsText;
   const Label = slots?.axisLabel ?? _ChartsText.ChartsText;
-  const axisTickLabelProps = (0, _utils.useSlotProps)({
+  const axisTickLabelProps = (0, _useSlotProps.default)({
     elementType: TickLabel,
     externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
@@ -195,7 +195,7 @@ function ChartsXAxis(inProps) {
     x: left + width / 2,
     y: positionSign * (tickSize + 22)
   };
-  const axisLabelProps = (0, _utils.useSlotProps)({
+  const axisLabelProps = (0, _useSlotProps.default)({
     elementType: Label,
     externalSlotProps: slotProps?.axisLabel,
     additionalProps: {