@mui/x-charts 9.2.0 → 9.4.0

package/ChartsLayerContainer/ChartsLayerContainer.js

@@ -81,37 +81,43 @@ const ChartsLayerContainer = exports.ChartsLayerContainer = /*#__PURE__*/React.f
       }
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChartsLayerContainerDiv, (0, _extends2.default)({
-    ref: handleRef,
-    ownerState: {
-      width: propsWidth,
-      height: propsHeight
-    },
-    role: "presentation",
-    "aria-label": title,
-    "aria-describedby": desc ? descId : undefined,
-    className: (0, _clsx.default)(classes.root, className)
-  }, other, {
-    onPointerEnter: event => {
-      other.onPointerEnter?.(event);
-      instance.handlePointerEnter?.(event);
-    },
-    onPointerLeave: event => {
-      other.onPointerLeave?.(event);
-      instance.handlePointerLeave?.(event);
-    },
-    onClick: event => {
-      other.onClick?.(event);
-      instance.handleClick?.(event);
-    },
-    children: [isKeyboardNavigationEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAccessibilityProxy.ChartsAccessibilityProxy, {}), desc && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      id: descId,
-      style: {
-        display: 'none'
+  return (
+    /*#__PURE__*/
+    // `role="none"` is an alias for `role="presentation"`, but aria-query treats them differently.
+    // See https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/1090
+    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
+    (0, _jsxRuntime.jsxs)(ChartsLayerContainerDiv, (0, _extends2.default)({
+      ref: handleRef,
+      ownerState: {
+        width: propsWidth,
+        height: propsHeight
       },
-      children: desc
-    }), children]
-  }));
+      role: "none",
+      "aria-label": title,
+      "aria-describedby": desc ? descId : undefined,
+      className: (0, _clsx.default)(classes.root, className)
+    }, other, {
+      onPointerEnter: event => {
+        other.onPointerEnter?.(event);
+        instance.handlePointerEnter?.(event);
+      },
+      onPointerLeave: event => {
+        other.onPointerLeave?.(event);
+        instance.handlePointerLeave?.(event);
+      },
+      onClick: event => {
+        other.onClick?.(event);
+        instance.handleClick?.(event);
+      },
+      children: [isKeyboardNavigationEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAccessibilityProxy.ChartsAccessibilityProxy, {}), desc && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        id: descId,
+        style: {
+          display: 'none'
+        },
+        children: desc
+      }), children]
+    }))
+  );
 });
 if (process.env.NODE_ENV !== "production") ChartsLayerContainer.displayName = "ChartsLayerContainer";
 process.env.NODE_ENV !== "production" ? ChartsLayerContainer.propTypes = {

package/ChartsLayerContainer/ChartsLayerContainer.mjs

@@ -75,37 +75,43 @@ const ChartsLayerContainer = /*#__PURE__*/React.forwardRef(function ChartsLayerC
       }
     });
   }
-  return /*#__PURE__*/_jsxs(ChartsLayerContainerDiv, _extends({
-    ref: handleRef,
-    ownerState: {
-      width: propsWidth,
-      height: propsHeight
-    },
-    role: "presentation",
-    "aria-label": title,
-    "aria-describedby": desc ? descId : undefined,
-    className: clsx(classes.root, className)
-  }, other, {
-    onPointerEnter: event => {
-      other.onPointerEnter?.(event);
-      instance.handlePointerEnter?.(event);
-    },
-    onPointerLeave: event => {
-      other.onPointerLeave?.(event);
-      instance.handlePointerLeave?.(event);
-    },
-    onClick: event => {
-      other.onClick?.(event);
-      instance.handleClick?.(event);
-    },
-    children: [isKeyboardNavigationEnabled && /*#__PURE__*/_jsx(ChartsAccessibilityProxy, {}), desc && /*#__PURE__*/_jsx("span", {
-      id: descId,
-      style: {
-        display: 'none'
+  return (
+    /*#__PURE__*/
+    // `role="none"` is an alias for `role="presentation"`, but aria-query treats them differently.
+    // See https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/1090
+    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
+    _jsxs(ChartsLayerContainerDiv, _extends({
+      ref: handleRef,
+      ownerState: {
+        width: propsWidth,
+        height: propsHeight
       },
-      children: desc
-    }), children]
-  }));
+      role: "none",
+      "aria-label": title,
+      "aria-describedby": desc ? descId : undefined,
+      className: clsx(classes.root, className)
+    }, other, {
+      onPointerEnter: event => {
+        other.onPointerEnter?.(event);
+        instance.handlePointerEnter?.(event);
+      },
+      onPointerLeave: event => {
+        other.onPointerLeave?.(event);
+        instance.handlePointerLeave?.(event);
+      },
+      onClick: event => {
+        other.onClick?.(event);
+        instance.handleClick?.(event);
+      },
+      children: [isKeyboardNavigationEnabled && /*#__PURE__*/_jsx(ChartsAccessibilityProxy, {}), desc && /*#__PURE__*/_jsx("span", {
+        id: descId,
+        style: {
+          display: 'none'
+        },
+        children: desc
+      }), children]
+    }))
+  );
 });
 if (process.env.NODE_ENV !== "production") ChartsLayerContainer.displayName = "ChartsLayerContainer";
 process.env.NODE_ENV !== "production" ? ChartsLayerContainer.propTypes = {

package/ChartsLegend/chartsLegend.types.d.mts

@@ -2,15 +2,16 @@ import type { ChartsLegendProps } from "./ChartsLegend.mjs";
 import { type ContinuousColorLegendProps } from "./ContinuousColorLegend.mjs";
 import { type ChartsLegendPosition } from "./legend.types.mjs";
 import { type PiecewiseColorLegendProps } from "./PiecewiseColorLegend.mjs";
+import type { LegendPropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
 export interface ChartsLegendSlots {
   /**
    * Custom rendering of the legend.
    * @default ChartsLegend
    */
-  legend?: React.JSXElementConstructor<ChartsLegendProps> | React.JSXElementConstructor<ContinuousColorLegendProps> | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  legend?: React.JSXElementConstructor<ChartsLegendProps & LegendPropsOverrides> | React.JSXElementConstructor<ContinuousColorLegendProps & LegendPropsOverrides> | React.JSXElementConstructor<PiecewiseColorLegendProps & LegendPropsOverrides>;
 }
 export interface ChartsLegendSlotProps {
-  legend?: Partial<ChartsLegendProps | ContinuousColorLegendProps | PiecewiseColorLegendProps> & ChartsLegendPosition;
+  legend?: Partial<ChartsLegendProps | ContinuousColorLegendProps | PiecewiseColorLegendProps> & ChartsLegendPosition & LegendPropsOverrides;
 }
 export interface ChartsLegendSlotExtension {
   /**

package/ChartsLegend/chartsLegend.types.d.ts

@@ -2,15 +2,16 @@ import type { ChartsLegendProps } from "./ChartsLegend.js";
 import { type ContinuousColorLegendProps } from "./ContinuousColorLegend.js";
 import { type ChartsLegendPosition } from "./legend.types.js";
 import { type PiecewiseColorLegendProps } from "./PiecewiseColorLegend.js";
+import type { LegendPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
 export interface ChartsLegendSlots {
   /**
    * Custom rendering of the legend.
    * @default ChartsLegend
    */
-  legend?: React.JSXElementConstructor<ChartsLegendProps> | React.JSXElementConstructor<ContinuousColorLegendProps> | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  legend?: React.JSXElementConstructor<ChartsLegendProps & LegendPropsOverrides> | React.JSXElementConstructor<ContinuousColorLegendProps & LegendPropsOverrides> | React.JSXElementConstructor<PiecewiseColorLegendProps & LegendPropsOverrides>;
 }
 export interface ChartsLegendSlotProps {
-  legend?: Partial<ChartsLegendProps | ContinuousColorLegendProps | PiecewiseColorLegendProps> & ChartsLegendPosition;
+  legend?: Partial<ChartsLegendProps | ContinuousColorLegendProps | PiecewiseColorLegendProps> & ChartsLegendPosition & LegendPropsOverrides;
 }
 export interface ChartsLegendSlotExtension {
   /**

package/ChartsLegend/piecewiseColorLegendClasses.js

@@ -8,8 +8,14 @@ exports.useUtilityClasses = exports.piecewiseColorLegendClasses = void 0;
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+const CORRECT_PREFIX = 'MuiPiecewiseColorLegend';
+// TODO v10: remove `MuiPiecewiseColorLegendClasses`. Kept for backwards compatibility with
+// users targeting the historically-incorrect prefix.
+const LEGACY_PREFIX = 'MuiPiecewiseColorLegendClasses';
+
+// Used by `useUtilityClasses` to also emit the legacy prefix in the rendered className.
 function getLegendUtilityClass(slot) {
-  return (0, _generateUtilityClass.default)('MuiPiecewiseColorLegendClasses', slot);
+  return `${(0, _generateUtilityClass.default)(CORRECT_PREFIX, slot)} ${(0, _generateUtilityClass.default)(LEGACY_PREFIX, slot)}`;
 }
 const useUtilityClasses = props => {
   const {
@@ -28,4 +34,4 @@ const useUtilityClasses = props => {
   return (0, _composeClasses.default)(slots, getLegendUtilityClass, classes);
 };
 exports.useUtilityClasses = useUtilityClasses;
-const piecewiseColorLegendClasses = exports.piecewiseColorLegendClasses = (0, _generateUtilityClasses.default)('MuiPiecewiseColorLegendClasses', ['root', 'minLabel', 'maxLabel', 'item', 'vertical', 'horizontal', 'start', 'end', 'extremes', 'inlineStart', 'inlineEnd', 'mark', 'label']);
+const piecewiseColorLegendClasses = exports.piecewiseColorLegendClasses = (0, _generateUtilityClasses.default)(CORRECT_PREFIX, ['root', 'minLabel', 'maxLabel', 'item', 'vertical', 'horizontal', 'start', 'end', 'extremes', 'inlineStart', 'inlineEnd', 'mark', 'label']);

package/ChartsLegend/piecewiseColorLegendClasses.mjs

@@ -1,8 +1,14 @@
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import composeClasses from '@mui/utils/composeClasses';
+const CORRECT_PREFIX = 'MuiPiecewiseColorLegend';
+// TODO v10: remove `MuiPiecewiseColorLegendClasses`. Kept for backwards compatibility with
+// users targeting the historically-incorrect prefix.
+const LEGACY_PREFIX = 'MuiPiecewiseColorLegendClasses';
+
+// Used by `useUtilityClasses` to also emit the legacy prefix in the rendered className.
 function getLegendUtilityClass(slot) {
-  return generateUtilityClass('MuiPiecewiseColorLegendClasses', slot);
+  return `${generateUtilityClass(CORRECT_PREFIX, slot)} ${generateUtilityClass(LEGACY_PREFIX, slot)}`;
 }
 export const useUtilityClasses = props => {
   const {
@@ -20,4 +26,4 @@ export const useUtilityClasses = props => {
   };
   return composeClasses(slots, getLegendUtilityClass, classes);
 };
-export const piecewiseColorLegendClasses = generateUtilityClasses('MuiPiecewiseColorLegendClasses', ['root', 'minLabel', 'maxLabel', 'item', 'vertical', 'horizontal', 'start', 'end', 'extremes', 'inlineStart', 'inlineEnd', 'mark', 'label']);
+export const piecewiseColorLegendClasses = generateUtilityClasses(CORRECT_PREFIX, ['root', 'minLabel', 'maxLabel', 'item', 'vertical', 'horizontal', 'start', 'end', 'extremes', 'inlineStart', 'inlineEnd', 'mark', 'label']);

package/ChartsOverlay/ChartsOverlay.d.mts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { type SxProps, type Theme } from '@mui/material/styles';
 import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import type { LoadingOverlayPropsOverrides, NoDataOverlayPropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
 export declare function useNoData(): boolean;
 export type CommonOverlayProps = React.SVGAttributes<SVGTextElement> & {
   sx?: SxProps<Theme>;
@@ -10,16 +11,16 @@ export interface ChartsOverlaySlots {
    * Overlay component rendered when the chart is in a loading state.
    * @default ChartsLoadingOverlay
    */
-  loadingOverlay?: React.ElementType<CommonOverlayProps>;
+  loadingOverlay?: React.ElementType<CommonOverlayProps & LoadingOverlayPropsOverrides>;
   /**
    * Overlay component rendered when the chart has no data to display.
    * @default ChartsNoDataOverlay
    */
-  noDataOverlay?: React.ElementType<CommonOverlayProps>;
+  noDataOverlay?: React.ElementType<CommonOverlayProps & NoDataOverlayPropsOverrides>;
 }
 export interface ChartsOverlaySlotProps {
-  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
-  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, LoadingOverlayPropsOverrides, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, NoDataOverlayPropsOverrides, {}>;
 }
 export interface ChartsOverlayProps {
   /**

package/ChartsOverlay/ChartsOverlay.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { type SxProps, type Theme } from '@mui/material/styles';
 import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import type { LoadingOverlayPropsOverrides, NoDataOverlayPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
 export declare function useNoData(): boolean;
 export type CommonOverlayProps = React.SVGAttributes<SVGTextElement> & {
   sx?: SxProps<Theme>;
@@ -10,16 +11,16 @@ export interface ChartsOverlaySlots {
    * Overlay component rendered when the chart is in a loading state.
    * @default ChartsLoadingOverlay
    */
-  loadingOverlay?: React.ElementType<CommonOverlayProps>;
+  loadingOverlay?: React.ElementType<CommonOverlayProps & LoadingOverlayPropsOverrides>;
   /**
    * Overlay component rendered when the chart has no data to display.
    * @default ChartsNoDataOverlay
    */
-  noDataOverlay?: React.ElementType<CommonOverlayProps>;
+  noDataOverlay?: React.ElementType<CommonOverlayProps & NoDataOverlayPropsOverrides>;
 }
 export interface ChartsOverlaySlotProps {
-  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
-  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, LoadingOverlayPropsOverrides, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, NoDataOverlayPropsOverrides, {}>;
 }
 export interface ChartsOverlayProps {
   /**

package/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -76,7 +76,9 @@ function ChartsXReferenceLine(props) {
   } = props;
   const {
     top,
-    height
+    height,
+    left,
+    width
   } = (0, _hooks.useDrawingArea)();
   const xAxisScale = (0, _hooks.useXScale)(axisId);
   const xPosition = xAxisScale(x);
@@ -86,6 +88,9 @@ function ChartsXReferenceLine(props) {
     }
     return null;
   }
+  if (xPosition < left || xPosition > left + width) {
+    return null;
+  }
   const d = `M ${xPosition} ${top} l 0 ${height}`;
   const classes = getXReferenceLineClasses(inClasses);
   const textParams = (0, _extends2.default)({

package/ChartsReferenceLine/ChartsXReferenceLine.mjs

@@ -69,7 +69,9 @@ function ChartsXReferenceLine(props) {
   } = props;
   const {
     top,
-    height
+    height,
+    left,
+    width
   } = useDrawingArea();
   const xAxisScale = useXScale(axisId);
   const xPosition = xAxisScale(x);
@@ -79,6 +81,9 @@ function ChartsXReferenceLine(props) {
     }
     return null;
   }
+  if (xPosition < left || xPosition > left + width) {
+    return null;
+  }
   const d = `M ${xPosition} ${top} l 0 ${height}`;
   const classes = getXReferenceLineClasses(inClasses);
   const textParams = _extends({

package/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -75,6 +75,8 @@ function ChartsYReferenceLine(props) {
     axisId
   } = props;
   const {
+    top,
+    height,
     left,
     width
   } = (0, _hooks.useDrawingArea)();
@@ -86,6 +88,9 @@ function ChartsYReferenceLine(props) {
     }
     return null;
   }
+  if (yPosition < top || yPosition > top + height) {
+    return null;
+  }
   const d = `M ${left} ${yPosition} l ${width} 0`;
   const classes = getYReferenceLineClasses(inClasses);
   const textParams = (0, _extends2.default)({

package/ChartsReferenceLine/ChartsYReferenceLine.mjs

@@ -68,6 +68,8 @@ function ChartsYReferenceLine(props) {
     axisId
   } = props;
   const {
+    top,
+    height,
     left,
     width
   } = useDrawingArea();
@@ -79,6 +81,9 @@ function ChartsYReferenceLine(props) {
     }
     return null;
   }
+  if (yPosition < top || yPosition > top + height) {
+    return null;
+  }
   const d = `M ${left} ${yPosition} l ${width} 0`;
   const classes = getYReferenceLineClasses(inClasses);
   const textParams = _extends({

package/ChartsTooltip/ChartTooltip.types.d.mts

@@ -1,16 +1,17 @@
 import { type ChartsTooltipProps } from "./ChartsTooltip.mjs";
 import { type TriggerOptions } from "./utils.mjs";
+import type { TooltipPropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
 export interface ChartsTooltipSlots<T extends TriggerOptions = TriggerOptions> {
   /**
    * Custom component for the tooltip popper.
    * @default ChartsTooltipRoot
    */
-  tooltip?: React.ElementType<ChartsTooltipProps<T>>;
+  tooltip?: React.ElementType<ChartsTooltipProps<T> & TooltipPropsOverrides>;
 }
 export interface ChartsTooltipSlotProps<T extends TriggerOptions = TriggerOptions> {
   /**
    * Custom component for the tooltip popper.
    * @default ChartsTooltipRoot
    */
-  tooltip?: Partial<ChartsTooltipProps<T>>;
+  tooltip?: Partial<ChartsTooltipProps<T>> & TooltipPropsOverrides;
 }

package/ChartsTooltip/ChartTooltip.types.d.ts

@@ -1,16 +1,17 @@
 import { type ChartsTooltipProps } from "./ChartsTooltip.js";
 import { type TriggerOptions } from "./utils.js";
+import type { TooltipPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
 export interface ChartsTooltipSlots<T extends TriggerOptions = TriggerOptions> {
   /**
    * Custom component for the tooltip popper.
    * @default ChartsTooltipRoot
    */
-  tooltip?: React.ElementType<ChartsTooltipProps<T>>;
+  tooltip?: React.ElementType<ChartsTooltipProps<T> & TooltipPropsOverrides>;
 }
 export interface ChartsTooltipSlotProps<T extends TriggerOptions = TriggerOptions> {
   /**
    * Custom component for the tooltip popper.
    * @default ChartsTooltipRoot
    */
-  tooltip?: Partial<ChartsTooltipProps<T>>;
+  tooltip?: Partial<ChartsTooltipProps<T>> & TooltipPropsOverrides;
 }

package/ChartsTooltip/useAxesTooltip.js

@@ -137,11 +137,11 @@ function useAxesTooltip(params) {
       }) => axisDirection === 'x' && axisId === providedXAxisId || axisDirection === 'y' && axisId === providedYAxisId);
       // Test if the series uses the default axis
       if (tooltipItemIndex >= 0) {
-        const zAxisId = 'zAxisId' in seriesToAdd ? seriesToAdd.zAxisId : zAxisIds[0];
+        const colorAxisId = 'colorAxisId' in seriesToAdd && seriesToAdd.colorAxisId || 'zAxisId' in seriesToAdd && seriesToAdd.zAxisId || zAxisIds[0];
         const {
           dataIndex
         } = tooltipAxes[tooltipItemIndex];
-        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[providedXAxisId], yAxis[providedYAxisId], zAxisId ? zAxis[zAxisId] : undefined)(dataIndex) ?? '';
+        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[providedXAxisId], yAxis[providedYAxisId], colorAxisId ? zAxis[colorAxisId] : undefined)(dataIndex) ?? '';
         const rawValue = seriesToAdd.data[dataIndex] ?? null;
         const formattedLabel = (0, _getLabel.getLabel)(seriesToAdd.label, 'tooltip') ?? null;
         let value;

package/ChartsTooltip/useAxesTooltip.mjs

@@ -132,11 +132,11 @@ export function useAxesTooltip(params) {
       }) => axisDirection === 'x' && axisId === providedXAxisId || axisDirection === 'y' && axisId === providedYAxisId);
       // Test if the series uses the default axis
       if (tooltipItemIndex >= 0) {
-        const zAxisId = 'zAxisId' in seriesToAdd ? seriesToAdd.zAxisId : zAxisIds[0];
+        const colorAxisId = 'colorAxisId' in seriesToAdd && seriesToAdd.colorAxisId || 'zAxisId' in seriesToAdd && seriesToAdd.zAxisId || zAxisIds[0];
         const {
           dataIndex
         } = tooltipAxes[tooltipItemIndex];
-        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[providedXAxisId], yAxis[providedYAxisId], zAxisId ? zAxis[zAxisId] : undefined)(dataIndex) ?? '';
+        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[providedXAxisId], yAxis[providedYAxisId], colorAxisId ? zAxis[colorAxisId] : undefined)(dataIndex) ?? '';
         const rawValue = seriesToAdd.data[dataIndex] ?? null;
         const formattedLabel = getLabel(seriesToAdd.label, 'tooltip') ?? null;
         let value;

package/ChartsTooltip/useItemTooltip.js

@@ -50,14 +50,14 @@ function useInternalItemTooltip() {
   const yAxisId = (0, _isCartesian.isCartesianSeries)(itemSeries) ? itemSeries.yAxisId ?? yAxisIds[0] : undefined;
   const radiusAxisId = (0, _isPolar.isPolarSeries)(itemSeries) ? ('radiusAxisId' in itemSeries ? itemSeries.radiusAxisId : undefined) ?? radiusAxisIds[0] : undefined;
   const rotationAxisId = (0, _isPolar.isPolarSeries)(itemSeries) ? ('rotationAxisId' in itemSeries ? itemSeries.rotationAxisId : undefined) ?? rotationAxisIds[0] : undefined;
-  const zAxisId = 'zAxisId' in itemSeries ? itemSeries.zAxisId ?? zAxisIds[0] : zAxisIds[0];
+  const colorAxisId = ('colorAxisId' in itemSeries ? itemSeries.colorAxisId : undefined) ?? ('zAxisId' in itemSeries ? itemSeries.zAxisId : undefined) ?? zAxisIds[0];
   const mainAxis =
   // eslint-disable-next-line no-nested-ternary
   rotationAxisId !== undefined ? rotationAxis[rotationAxisId] : xAxisId !== undefined ? xAxis[xAxisId] : undefined;
   const secondAxis =
   // eslint-disable-next-line no-nested-ternary
   radiusAxisId !== undefined ? radiusAxis[radiusAxisId] : yAxisId !== undefined ? yAxis[yAxisId] : undefined;
-  const getColor = seriesConfig[itemSeries.type].colorProcessor(itemSeries, mainAxis, secondAxis, zAxisId !== undefined ? zAxis[zAxisId] : undefined);
+  const getColor = seriesConfig[itemSeries.type].colorProcessor(itemSeries, mainAxis, secondAxis, colorAxisId !== undefined ? zAxis[colorAxisId] : undefined);
   const axesConfig = {};
   if (xAxisId !== undefined) {
     axesConfig.x = xAxis[xAxisId];

package/ChartsTooltip/useItemTooltip.mjs

@@ -44,14 +44,14 @@ export function useInternalItemTooltip() {
   const yAxisId = isCartesianSeries(itemSeries) ? itemSeries.yAxisId ?? yAxisIds[0] : undefined;
   const radiusAxisId = isPolarSeries(itemSeries) ? ('radiusAxisId' in itemSeries ? itemSeries.radiusAxisId : undefined) ?? radiusAxisIds[0] : undefined;
   const rotationAxisId = isPolarSeries(itemSeries) ? ('rotationAxisId' in itemSeries ? itemSeries.rotationAxisId : undefined) ?? rotationAxisIds[0] : undefined;
-  const zAxisId = 'zAxisId' in itemSeries ? itemSeries.zAxisId ?? zAxisIds[0] : zAxisIds[0];
+  const colorAxisId = ('colorAxisId' in itemSeries ? itemSeries.colorAxisId : undefined) ?? ('zAxisId' in itemSeries ? itemSeries.zAxisId : undefined) ?? zAxisIds[0];
   const mainAxis =
   // eslint-disable-next-line no-nested-ternary
   rotationAxisId !== undefined ? rotationAxis[rotationAxisId] : xAxisId !== undefined ? xAxis[xAxisId] : undefined;
   const secondAxis =
   // eslint-disable-next-line no-nested-ternary
   radiusAxisId !== undefined ? radiusAxis[radiusAxisId] : yAxisId !== undefined ? yAxis[yAxisId] : undefined;
-  const getColor = seriesConfig[itemSeries.type].colorProcessor(itemSeries, mainAxis, secondAxis, zAxisId !== undefined ? zAxis[zAxisId] : undefined);
+  const getColor = seriesConfig[itemSeries.type].colorProcessor(itemSeries, mainAxis, secondAxis, colorAxisId !== undefined ? zAxis[colorAxisId] : undefined);
   const axesConfig = {};
   if (xAxisId !== undefined) {
     axesConfig.x = xAxis[xAxisId];

package/ChartsXAxis/ChartsXAxis.js

@@ -28,7 +28,9 @@ function ChartsXAxis(inProps) {
   } = (0, _useAxis.useXAxes)();
   const axis = xAxis[inProps.axisId ?? xAxisIds[0]];
   if (!axis) {
-    (0, _warning.warnOnce)(`MUI X Charts: No axis found. The axisId "${inProps.axisId}" is probably invalid.`);
+    if (process.env.NODE_ENV !== 'production') {
+      (0, _warning.warnOnce)(`MUI X Charts: No axis found. The axisId "${inProps.axisId}" is probably invalid.`);
+    }
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsXAxisImpl.ChartsXAxisImpl, (0, _extends2.default)({}, inProps, {

package/ChartsXAxis/ChartsXAxis.mjs

@@ -22,7 +22,9 @@ function ChartsXAxis(inProps) {
   } = useXAxes();
   const axis = xAxis[inProps.axisId ?? xAxisIds[0]];
   if (!axis) {
-    warnOnce(`MUI X Charts: No axis found. The axisId "${inProps.axisId}" is probably invalid.`);
+    if (process.env.NODE_ENV !== 'production') {
+      warnOnce(`MUI X Charts: No axis found. The axisId "${inProps.axisId}" is probably invalid.`);
+    }
     return null;
   }
   return /*#__PURE__*/_jsx(ChartsXAxisImpl, _extends({}, inProps, {