@mui/x-charts 7.11.0 → 7.11.1

package/BarChart/BarElement.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { AnimatedProps } from '@react-spring/web';
+import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';
 import { SeriesId } from '../models/seriesType/common';
 export interface BarElementClasses {
     /** Styles applied to the root element. */
@@ -1365,7 +1366,7 @@ export interface BarElementSlots {
     bar?: React.ElementType<BarProps>;
 }
 export interface BarElementSlotProps {
-    bar?: Partial<BarProps>;
+    bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
 }
 export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGRectElement>, 'ref' | 'id'> & {
     /**

package/BarChart/BarLabel/BarLabelItem.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SlotComponentPropsFromProps } from '../../internals/SlotComponentPropsFromProps';
 import { BarLabelOwnerState, BarItem, BarLabelContext } from './BarLabel.types';
 import { BarLabelProps } from './BarLabel';
 export interface BarLabelSlots {
@@ -9,7 +10,7 @@ export interface BarLabelSlots {
     barLabel?: React.JSXElementConstructor<BarLabelProps>;
 }
 export interface BarLabelSlotProps {
-    barLabel?: Partial<BarLabelProps>;
+    barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
 }
 export type BarLabelItemProps = Omit<BarLabelOwnerState, 'isFaded' | 'isHighlighted'> & Pick<BarLabelProps, 'style'> & {
     /**

package/BarChart/BarPlot.js

@@ -74,16 +74,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';
-      (0, _checkScaleErrors.checkScaleErrors)(verticalLayout, seriesId, xAxisKey, xAxis, yAxisKey, yAxis);
+      (0, _checkScaleErrors.checkScaleErrors)(verticalLayout, seriesId, xAxisId, xAxis, yAxisId, yAxis);
       const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
       const xScale = xAxisConfig.scale;
       const yScale = yAxisConfig.scale;
-      const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
+      const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
       const bandWidth = baseScaleConfig.scale.bandwidth();
       const {
         barWidth,
@@ -106,8 +106,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/BarChart/checkScaleErrors.d.ts

@@ -1,7 +1,7 @@
 import { AxisDefaultized, AxisId } from '../models/axis';
 import { SeriesId } from '../models/seriesType/common';
-export declare function checkScaleErrors(verticalLayout: boolean, seriesId: SeriesId, xAxisKey: AxisId, xAxis: {
-    [axisKey: AxisId]: AxisDefaultized;
-}, yAxisKey: AxisId, yAxis: {
-    [axisKey: AxisId]: AxisDefaultized;
+export declare function checkScaleErrors(verticalLayout: boolean, seriesId: SeriesId, xAxisId: AxisId, xAxis: {
+    [axisId: AxisId]: AxisDefaultized;
+}, yAxisId: AxisId, yAxis: {
+    [axisId: AxisId]: AxisDefaultized;
 }): void;

package/BarChart/checkScaleErrors.js

@@ -6,28 +6,28 @@ Object.defineProperty(exports, "__esModule", {
 exports.checkScaleErrors = checkScaleErrors;
 var _constants = require("../constants");
 var _axis = require("../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' ? _constants.DEFAULT_X_AXIS_KEY : _constants.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}"`;
 };
-function checkScaleErrors(verticalLayout, seriesId, xAxisKey, xAxis, yAxisKey, yAxis) {
-  const xAxisConfig = xAxis[xAxisKey];
-  const yAxisConfig = yAxis[yAxisKey];
+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 (!(0, _axis.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 ((0, _axis.isBandScaleConfig)(continuousAxisConfig) || (0, _axis.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/BarChart/extremums.js

@@ -18,7 +18,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/BarChart/formatter.js

@@ -32,7 +32,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 = {};
@@ -59,7 +59,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/CHANGELOG.md

@@ -3,6 +3,90 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.11.1
+
+_Jul 25, 2024_
+
+We'd like to offer a big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔎 Allow `Zoom` to be controllable for charts (#13858) @JCQuintas
+- 🌍 Add Icelandic (is-IS) and Norwegian Nynorsk (nn-NO) locales on the Data Grid
+- 🌍 Improve Norwegian Bokmål (nb-NO) and German (de-DE) locales on the Data Grid
+- 🌍 Add Norwegian Nynorsk (nn-NO) locale on the Date and Time Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.11.1`
+
+- [DataGrid] Remove dead code in internal `GridPreferencesPanel` (#13934) @k-rajat19
+- [DataGrid] Do not miss to escape formulas in CSV export (#13888) @arminmeh
+- [l10n] Add Icelandic (is-IS) locale (#13283) @magnimarels
+- [l10n] Add Norwegian nynorsk (nn-NO) locale and improve Norwegian bokmål (nb-NO) locale (#13588) @AnderzL7
+- [l10n] Improve German (de-DE) locale (#13910) @lhilgert9
+
+#### `@mui/x-data-grid-pro@7.11.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.11.1`.
+
+#### `@mui/x-data-grid-premium@7.11.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.11.1`, plus:
+
+- [DataGridPremium] Pass the `api` object to events (#13893) @pcorpet
+- [DataGridPremium] Fix paste to selected cells (#13967) @romgrk
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.11.1`
+
+- [fields] Prevent keyboard editing when disabled (#13900) @arthurbalduini
+- [l10n] Add Norwegian Nynorsk (nn-NO) locale (#13946) @AnderzL7
+
+#### `@mui/x-date-pickers-pro@7.11.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.11.1`.
+
+### Charts
+
+#### `@mui/x-charts@7.11.1`
+
+- [charts] Add `ownerState` function to `slotProps` typing when available (#13965) @alexfauquette
+- [charts] Allow `Zoom` to be controllable (#13858) @JCQuintas
+- [charts] Deprecate `xAxisKey` /`zAxisKey` in favor of `xAxisId`/`zAxisId` (#13940) @alexfauquette
+- [charts] Hide empty arcs in the PieChart (#13897) @alexfauquette
+- [charts] Limit the trigger of exit charts (#13682) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@7.11.1`
+
+- [TreeView] Allow the plugins to enrich the props passed to the item slots (#13953) @flaviendelangle
+
+### Docs
+
+- [docs] Bump pnpm priority as a package manager (#13894) @oliviertassinari
+- [docs] Explicitly mark charts pro as not released (#13905) @alexfauquette
+- [docs] Fix dot consistency a11y table @oliviertassinari
+- [docs] Fix some typos in charts docs (#13906) @cratiu222
+- [docs] Fix spelling (#13902) @nnsW3
+- [docs] Improve error message when moving between plans (#13874) @oliviertassinari
+- [docs] Update `SparkLineChart` reference not being correctly capitalised (#13960) @duckboy81
+- [docs] Fix scroll demos disorientation (#13909) @oliviertassinari
+
+### Core
+
+- [core] Add `@mui/material-nextjs` to `MUI Core` renovate group (#13966) @LukasTy
+- [core] Remove warning message in production (#13911) @oliviertassinari
+- [code-infra] Reuse `useReactVersion` script from the monorepo (#13710) @cherniavskii
+- [infra] Adds order id validation action (#13957) @michelengelen
+- [infra] Fix order id validator action (#13971) @michelengelen
+- [infra] Fix regex in order id validation (#13976) @michelengelen
+- [infra] Issue template improvement (#13954) @michelengelen
+
 ## 7.11.0
 
 _Jul 18, 2024_

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/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

@@ -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
           }));

package/ChartsTooltip/ChartsItemTooltipContent.js

@@ -39,10 +39,10 @@ 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)({
     elementType: Content,

package/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -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/LineChart/AreaElement.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';
 import { AnimatedAreaProps } from './AnimatedArea';
 import { SeriesId } from '../models/seriesType/common';
 export interface AreaElementClasses {
@@ -28,7 +29,7 @@ export interface AreaElementSlots {
     area?: React.JSXElementConstructor<AnimatedAreaProps>;
 }
 export interface AreaElementSlotProps {
-    area?: AnimatedAreaProps;
+    area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
 }
 export interface AreaElementProps extends Omit<AreaElementOwnerState, 'isFaded' | 'isHighlighted'>, Pick<AnimatedAreaProps, 'skipAnimation'>, Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
     d: string;

package/LineChart/AreaPlot.js

@@ -45,22 +45,26 @@ const useAggregatedData = () => {
     return [...groupIds].reverse() // Revert stacked area for a more pleasant animation
     .map(seriesId => {
       const {
+        xAxisId: xAxisIdProp,
+        yAxisId: yAxisIdProp,
         xAxisKey = defaultXAxisId,
         yAxisKey = defaultYAxisId,
         stackedData,
         data,
         connectNulls
       } = series[seriesId];
-      const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisKey].scale);
-      const yScale = yAxis[yAxisKey].scale;
-      const xData = xAxis[xAxisKey].data;
-      const gradientUsed = yAxis[yAxisKey].colorScale && [yAxisKey, 'y'] || xAxis[xAxisKey].colorScale && [xAxisKey, 'x'] || undefined;
+      const xAxisId = xAxisIdProp ?? xAxisKey;
+      const yAxisId = yAxisIdProp ?? yAxisKey;
+      const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
+      const yScale = yAxis[yAxisId].scale;
+      const xData = xAxis[xAxisId].data;
+      const gradientUsed = yAxis[yAxisId].colorScale && [yAxisId, 'y'] || xAxis[xAxisId].colorScale && [xAxisId, 'x'] || undefined;
       if (process.env.NODE_ENV !== 'production') {
         if (xData === undefined) {
-          throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
+          throw new Error(`MUI X: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
         }
         if (xData.length < stackedData.length) {
-          throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+          throw new Error(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
         }
       }
       const areaPath = (0, _d3Shape.area)().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => {

package/LineChart/LineChart.js

@@ -58,7 +58,10 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
   }, chartContainerProps, {
     children: [props.onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, (0, _extends2.default)({}, axisClickHandlerProps)), props.grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, (0, _extends2.default)({}, markPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      "data-drawing-container": true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, (0, _extends2.default)({}, markPlotProps))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {

package/LineChart/LineElement.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';
 import { AnimatedLineProps } from './AnimatedLine';
 import { SeriesId } from '../models/seriesType/common';
 export interface LineElementClasses {
@@ -28,7 +29,7 @@ export interface LineElementSlots {
     line?: React.JSXElementConstructor<AnimatedLineProps>;
 }
 export interface LineElementSlotProps {
-    line?: AnimatedLineProps;
+    line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
 }
 export interface LineElementProps extends Omit<LineElementOwnerState, 'isFaded' | 'isHighlighted'>, Pick<AnimatedLineProps, 'skipAnimation'>, Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
     d: string;

package/LineChart/LineHighlightPlot.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
+import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps';
 import { LineHighlightElementProps } from './LineHighlightElement';
 export interface LineHighlightPlotSlots {
     lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
 }
 export interface LineHighlightPlotSlotProps {
-    lineHighlight?: Partial<LineHighlightElementProps>;
+    lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
 }
 export interface LineHighlightPlotProps extends React.SVGAttributes<SVGSVGElement> {
     /**

package/LineChart/LineHighlightPlot.js

@@ -69,20 +69,24 @@ function LineHighlightPlot(props) {
     }) => {
       return groupIds.flatMap(seriesId => {
         const {
+          xAxisId: xAxisIdProp,
+          yAxisId: yAxisIdProp,
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
           stackedData,
           data,
           disableHighlight
         } = series[seriesId];
+        const xAxisId = xAxisIdProp ?? xAxisKey;
+        const yAxisId = yAxisIdProp ?? yAxisKey;
         if (disableHighlight || data[highlightedIndex] == null) {
           return null;
         }
-        const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisKey].scale);
-        const yScale = yAxis[yAxisKey].scale;
-        const xData = xAxis[xAxisKey].data;
+        const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
+        const yScale = yAxis[yAxisId].scale;
+        const xData = xAxis[xAxisId].data;
         if (xData === undefined) {
-          throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
+          throw new Error(`MUI X: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
         }
         const x = xScale(xData[highlightedIndex]);
         const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
@@ -93,7 +97,7 @@ function LineHighlightPlot(props) {
         })) {
           return null;
         }
-        const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
+        const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({
           id: seriesId,
           color: colorGetter(highlightedIndex),

package/LineChart/LinePlot.js

@@ -44,22 +44,26 @@ const useAggregatedData = () => {
   }) => {
     return groupIds.flatMap(seriesId => {
       const {
+        xAxisId: xAxisIdProp,
+        yAxisId: yAxisIdProp,
         xAxisKey = defaultXAxisId,
         yAxisKey = defaultYAxisId,
         stackedData,
         data,
         connectNulls
       } = series[seriesId];
-      const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisKey].scale);
-      const yScale = yAxis[yAxisKey].scale;
-      const xData = xAxis[xAxisKey].data;
-      const gradientUsed = yAxis[yAxisKey].colorScale && [yAxisKey, 'y'] || xAxis[xAxisKey].colorScale && [xAxisKey, 'x'] || undefined;
+      const xAxisId = xAxisIdProp ?? xAxisKey;
+      const yAxisId = yAxisIdProp ?? yAxisKey;
+      const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
+      const yScale = yAxis[yAxisId].scale;
+      const xData = xAxis[xAxisId].data;
+      const gradientUsed = yAxis[yAxisId].colorScale && [yAxisId, 'y'] || xAxis[xAxisId].colorScale && [xAxisId, 'x'] || undefined;
       if (process.env.NODE_ENV !== 'production') {
         if (xData === undefined) {
-          throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
+          throw new Error(`MUI X: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
         }
         if (xData.length < stackedData.length) {
-          throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+          throw new Error(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
         }
       }
       const linePath = (0, _d3Shape.line)().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));

package/LineChart/MarkPlot.js

@@ -66,6 +66,8 @@ function MarkPlot(props) {
     }) => {
       return groupIds.map(seriesId => {
         const {
+          xAxisId: xAxisIdProp,
+          yAxisId: yAxisIdProp,
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
           stackedData,
@@ -75,15 +77,17 @@ function MarkPlot(props) {
         if (showMark === false) {
           return null;
         }
-        const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisKey].scale);
-        const yScale = yAxis[yAxisKey].scale;
-        const xData = xAxis[xAxisKey].data;
+        const xAxisId = xAxisIdProp ?? xAxisKey;
+        const yAxisId = yAxisIdProp ?? yAxisKey;
+        const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
+        const yScale = yAxis[yAxisId].scale;
+        const xData = xAxis[xAxisId].data;
         if (xData === undefined) {
-          throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
+          throw new Error(`MUI X: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
         }
         const clipId = (0, _cleanId.cleanId)(`${chartId}-${seriesId}-line-clip`); // We assume that if displaying line mark, the line will also be rendered
 
-        const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
+        const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           clipPath: `url(#${clipId})`,
           children: xData?.map((x, index) => {

package/LineChart/extremums.js

@@ -31,7 +31,10 @@ const getExtremumY = 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 {
       area,
       stackedData