@mui/x-charts 9.2.0 → 9.4.0

package/ScatterChart/Scatter.mjs

@@ -46,6 +46,7 @@ function Scatter(props) {
     xScale,
     yScale,
     colorGetter,
+    sizeGetter,
     onItemClick,
     classes: inClasses,
     slots,
@@ -64,8 +65,7 @@ function Scatter(props) {
       elementType: Marker,
       externalSlotProps: slotProps?.marker,
       additionalProps: {
-        seriesId: series.id,
-        size: series.markerSize
+        seriesId: series.id
       },
       ownerState: {}
     }),
@@ -84,6 +84,7 @@ function Scatter(props) {
         className: clsx(classes.marker, markerProps.className),
         dataIndex: dataPoint.dataIndex,
         color: colorGetter(dataPoint.dataIndex),
+        size: sizeGetter(dataPoint.dataIndex),
         isHighlighted: isItemHighlighted,
         isFaded: isItemFaded,
         x: dataPoint.x,
@@ -119,6 +120,10 @@ process.env.NODE_ENV !== "production" ? Scatter.propTypes = {
    */
   onItemClick: PropTypes.func,
   series: PropTypes.object.isRequired,
+  /**
+   * Function to get the marker size of a scatter item given its data index.
+   */
+  sizeGetter: PropTypes.func.isRequired,
   slotProps: PropTypes.object,
   slots: PropTypes.object,
   xScale: PropTypes.func.isRequired,

package/ScatterChart/ScatterChart.d.mts

@@ -7,6 +7,7 @@ import { type ChartsContainerProps } from "../ChartsContainer/index.mjs";
 import { type ScatterSeriesType } from "../models/seriesType/scatter.mjs";
 import { type ChartsTooltipProps } from "../ChartsTooltip/index.mjs";
 import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.mjs";
+import type { TooltipPropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
 import { type ChartsLegendSlotProps, type ChartsLegendSlots } from "../ChartsLegend/index.mjs";
 import { type ChartsOverlayProps, type ChartsOverlaySlotProps, type ChartsOverlaySlots } from "../ChartsOverlay/index.mjs";
 import { type ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.mjs";
@@ -20,7 +21,7 @@ export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotS
    * Slot props for the tooltip component.
    * @default {}
    */
-  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
+  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>> & TooltipPropsOverrides;
 }
 export type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
 export interface ScatterChartProps extends Omit<ChartsContainerProps<'scatter', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ScatterPlotProps, 'renderer'> {

package/ScatterChart/ScatterChart.d.ts

@@ -7,6 +7,7 @@ import { type ChartsContainerProps } from "../ChartsContainer/index.js";
 import { type ScatterSeriesType } from "../models/seriesType/scatter.js";
 import { type ChartsTooltipProps } from "../ChartsTooltip/index.js";
 import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
+import type { TooltipPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
 import { type ChartsLegendSlotProps, type ChartsLegendSlots } from "../ChartsLegend/index.js";
 import { type ChartsOverlayProps, type ChartsOverlaySlotProps, type ChartsOverlaySlots } from "../ChartsOverlay/index.js";
 import { type ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
@@ -20,7 +21,7 @@ export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotS
    * Slot props for the tooltip component.
    * @default {}
    */
-  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
+  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>> & TooltipPropsOverrides;
 }
 export type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
 export interface ScatterChartProps extends Omit<ChartsContainerProps<'scatter', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ScatterPlotProps, 'renderer'> {

package/ScatterChart/ScatterChart.js

@@ -199,11 +199,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    */
   highlightedItem: _propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['scatter']).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string.isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['scatter']).isRequired
   })]),
   /**
    * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
@@ -360,11 +360,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    */
   tooltipItem: _propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['scatter']).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.string.isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['scatter']).isRequired
   })]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
@@ -387,11 +387,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    */
   zAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
-      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-      type: _propTypes.default.oneOf(['ordinal']).isRequired,
-      unknownColor: _propTypes.default.string,
-      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
-    }), _propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
       min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -400,12 +395,38 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
       type: _propTypes.default.oneOf(['piecewise']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
     })]),
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,
     id: _propTypes.default.string,
     max: _propTypes.default.number,
     min: _propTypes.default.number,
+    sizeMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      interpolator: _propTypes.default.oneOf(['linear', 'log', 'sqrt']),
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      size: _propTypes.default.arrayOf(_propTypes.default.number.isRequired).isRequired,
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      size: _propTypes.default.func.isRequired,
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      sizes: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    }), _propTypes.default.shape({
+      sizes: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownSize: _propTypes.default.number,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    })]),
     valueGetter: _propTypes.default.func
   }))
 } : void 0;

package/ScatterChart/ScatterChart.mjs

@@ -192,11 +192,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    */
   highlightedItem: PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['scatter']).isRequired
+    seriesId: PropTypes.string.isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.string.isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['scatter']).isRequired
   })]),
   /**
    * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
@@ -353,11 +353,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    */
   tooltipItem: PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['scatter']).isRequired
+    seriesId: PropTypes.string.isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.string.isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['scatter']).isRequired
   })]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
@@ -380,11 +380,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    */
   zAxis: PropTypes.arrayOf(PropTypes.shape({
     colorMap: PropTypes.oneOfType([PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
-    }), PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
       min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -393,12 +388,38 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
       type: PropTypes.oneOf(['piecewise']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,
     id: PropTypes.string,
     max: PropTypes.number,
     min: PropTypes.number,
+    sizeMap: PropTypes.oneOfType([PropTypes.shape({
+      interpolator: PropTypes.oneOf(['linear', 'log', 'sqrt']),
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      size: PropTypes.arrayOf(PropTypes.number.isRequired).isRequired,
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      size: PropTypes.func.isRequired,
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      sizes: PropTypes.arrayOf(PropTypes.number).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    }), PropTypes.shape({
+      sizes: PropTypes.arrayOf(PropTypes.number).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownSize: PropTypes.number,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    })]),
     valueGetter: PropTypes.func
   }))
 } : void 0;

package/ScatterChart/ScatterMarker.types.d.mts

@@ -1,14 +1,15 @@
 import type * as React from 'react';
 import type { ScatterMarkerProps } from "./ScatterMarker.mjs";
+import type { MarkerPropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
 export interface ScatterMarkerSlots {
   /**
    * The component that renders the marker for a scatter point.
    * @default ScatterMarker
    */
-  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+  marker?: React.JSXElementConstructor<ScatterMarkerProps & MarkerPropsOverrides>;
 }
 export interface ScatterMarkerSlotProps {
-  marker?: ScatterMarkerProps;
+  marker?: Partial<ScatterMarkerProps> & MarkerPropsOverrides;
 }
 export interface ScatterMarkerSlotExtension {
   /**

package/ScatterChart/ScatterMarker.types.d.ts

@@ -1,14 +1,15 @@
 import type * as React from 'react';
 import type { ScatterMarkerProps } from "./ScatterMarker.js";
+import type { MarkerPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
 export interface ScatterMarkerSlots {
   /**
    * The component that renders the marker for a scatter point.
    * @default ScatterMarker
    */
-  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+  marker?: React.JSXElementConstructor<ScatterMarkerProps & MarkerPropsOverrides>;
 }
 export interface ScatterMarkerSlotProps {
-  marker?: ScatterMarkerProps;
+  marker?: Partial<ScatterMarkerProps> & MarkerPropsOverrides;
 }
 export interface ScatterMarkerSlotExtension {
   /**

package/ScatterChart/ScatterPlot.d.mts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { type ScatterProps, type ScatterSlotProps, type ScatterSlots } from "./Scatter.mjs";
+import type { ScatterPropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
 export interface ScatterPlotSlots extends ScatterSlots {
-  scatter?: React.JSXElementConstructor<ScatterProps>;
+  scatter?: React.JSXElementConstructor<ScatterProps & ScatterPropsOverrides>;
 }
 export interface ScatterPlotSlotProps extends ScatterSlotProps {
-  scatter?: Partial<ScatterProps>;
+  scatter?: Partial<ScatterProps> & ScatterPropsOverrides;
 }
 export type RendererType = 'svg-single' | 'svg-batch';
 export interface ScatterPlotProps extends Pick<ScatterProps, 'onItemClick' | 'classes'> {

package/ScatterChart/ScatterPlot.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { type ScatterProps, type ScatterSlotProps, type ScatterSlots } from "./Scatter.js";
+import type { ScatterPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
 export interface ScatterPlotSlots extends ScatterSlots {
-  scatter?: React.JSXElementConstructor<ScatterProps>;
+  scatter?: React.JSXElementConstructor<ScatterProps & ScatterPropsOverrides>;
 }
 export interface ScatterPlotSlotProps extends ScatterSlotProps {
-  scatter?: Partial<ScatterProps>;
+  scatter?: Partial<ScatterProps> & ScatterPropsOverrides;
 }
 export type RendererType = 'svg-single' | 'svg-batch';
 export interface ScatterPlotProps extends Pick<ScatterProps, 'onItemClick' | 'classes'> {

package/ScatterChart/ScatterPlot.js

@@ -17,6 +17,7 @@ var _useScatterSeries = require("../hooks/useScatterSeries");
 var _hooks = require("../hooks");
 var _useZAxis = require("../hooks/useZAxis");
 var _seriesConfig = require("./seriesConfig");
+var _getMarkerSize = _interopRequireDefault(require("./seriesConfig/getMarkerSize"));
 var _BatchScatter = require("./BatchScatter");
 var _scatterClasses = require("./scatterClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -79,14 +80,17 @@ function ScatterPlot(props) {
         id,
         xAxisId,
         yAxisId,
+        colorAxisId,
         zAxisId,
+        sizeAxisId,
         color,
         hidden
       } = series[seriesId];
       if (hidden) {
         return null;
       }
-      const colorGetter = _seriesConfig.scatterSeriesConfig.colorProcessor(series[seriesId], xAxis[xAxisId ?? defaultXAxisId], yAxis[yAxisId ?? defaultYAxisId], zAxis[zAxisId ?? defaultZAxisId]);
+      const colorGetter = _seriesConfig.scatterSeriesConfig.colorProcessor(series[seriesId], xAxis[xAxisId ?? defaultXAxisId], yAxis[yAxisId ?? defaultYAxisId], zAxis[colorAxisId ?? zAxisId ?? defaultZAxisId]);
+      const sizeGetter = (0, _getMarkerSize.default)(series[seriesId], zAxis[sizeAxisId ?? defaultZAxisId]);
       const xScale = xAxis[xAxisId ?? defaultXAxisId].scale;
       const yScale = yAxis[yAxisId ?? defaultYAxisId].scale;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(ScatterItems, (0, _extends2.default)({
@@ -94,6 +98,7 @@ function ScatterPlot(props) {
         yScale: yScale,
         color: color,
         colorGetter: colorGetter,
+        sizeGetter: sizeGetter,
         series: series[seriesId],
         onItemClick: onItemClick,
         slots: slots,

package/ScatterChart/ScatterPlot.mjs

@@ -10,6 +10,7 @@ import { useScatterSeriesContext } from "../hooks/useScatterSeries.mjs";
 import { useXAxes, useYAxes } from "../hooks/index.mjs";
 import { useZAxes } from "../hooks/useZAxis.mjs";
 import { scatterSeriesConfig } from "./seriesConfig/index.mjs";
+import getMarkerSize from "./seriesConfig/getMarkerSize.mjs";
 import { BatchScatter } from "./BatchScatter.mjs";
 import { useUtilityClasses } from "./scatterClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -72,14 +73,17 @@ function ScatterPlot(props) {
         id,
         xAxisId,
         yAxisId,
+        colorAxisId,
         zAxisId,
+        sizeAxisId,
         color,
         hidden
       } = series[seriesId];
       if (hidden) {
         return null;
       }
-      const colorGetter = scatterSeriesConfig.colorProcessor(series[seriesId], xAxis[xAxisId ?? defaultXAxisId], yAxis[yAxisId ?? defaultYAxisId], zAxis[zAxisId ?? defaultZAxisId]);
+      const colorGetter = scatterSeriesConfig.colorProcessor(series[seriesId], xAxis[xAxisId ?? defaultXAxisId], yAxis[yAxisId ?? defaultYAxisId], zAxis[colorAxisId ?? zAxisId ?? defaultZAxisId]);
+      const sizeGetter = getMarkerSize(series[seriesId], zAxis[sizeAxisId ?? defaultZAxisId]);
       const xScale = xAxis[xAxisId ?? defaultXAxisId].scale;
       const yScale = yAxis[yAxisId ?? defaultYAxisId].scale;
       return /*#__PURE__*/_jsx(ScatterItems, _extends({
@@ -87,6 +91,7 @@ function ScatterPlot(props) {
         yScale: yScale,
         color: color,
         colorGetter: colorGetter,
+        sizeGetter: sizeGetter,
         series: series[seriesId],
         onItemClick: onItemClick,
         slots: slots,

package/ScatterChart/seriesConfig/extremums.js

@@ -17,6 +17,9 @@ const getExtremumX = params => {
     if (!Object.hasOwn(series, seriesId)) {
       continue;
     }
+    if (axis.domainSeries === 'visible' && series[seriesId].hidden) {
+      continue;
+    }
     const axisId = series[seriesId].xAxisId;
     if (!(axisId === axis.id || axisId === undefined && isDefaultAxis)) {
       continue;
@@ -59,6 +62,9 @@ const getExtremumY = params => {
     if (!Object.hasOwn(series, seriesId)) {
       continue;
     }
+    if (axis.domainSeries === 'visible' && series[seriesId].hidden) {
+      continue;
+    }
     const axisId = series[seriesId].yAxisId;
     if (!(axisId === axis.id || axisId === undefined && isDefaultAxis)) {
       continue;

package/ScatterChart/seriesConfig/extremums.mjs

@@ -11,6 +11,9 @@ export const getExtremumX = params => {
     if (!Object.hasOwn(series, seriesId)) {
       continue;
     }
+    if (axis.domainSeries === 'visible' && series[seriesId].hidden) {
+      continue;
+    }
     const axisId = series[seriesId].xAxisId;
     if (!(axisId === axis.id || axisId === undefined && isDefaultAxis)) {
       continue;
@@ -52,6 +55,9 @@ export const getExtremumY = params => {
     if (!Object.hasOwn(series, seriesId)) {
       continue;
     }
+    if (axis.domainSeries === 'visible' && series[seriesId].hidden) {
+      continue;
+    }
     const axisId = series[seriesId].yAxisId;
     if (!(axisId === axis.id || axisId === undefined && isDefaultAxis)) {
       continue;

package/ScatterChart/seriesConfig/getColor.js

@@ -25,7 +25,7 @@ const getColor = (series, xAxis, yAxis, zAxis) => {
       const color = value === null ? getSeriesColor({
         value,
         dataIndex
-      }) : zColorScale(value.z);
+      }) : zColorScale(value.colorValue ?? value.z);
       if (color === null) {
         return getSeriesColor({
           value,

package/ScatterChart/seriesConfig/getColor.mjs

@@ -19,7 +19,7 @@ const getColor = (series, xAxis, yAxis, zAxis) => {
       const color = value === null ? getSeriesColor({
         value,
         dataIndex
-      }) : zColorScale(value.z);
+      }) : zColorScale(value.colorValue ?? value.z);
       if (color === null) {
         return getSeriesColor({
           value,

package/ScatterChart/seriesConfig/getMarkerSize.d.mts

@@ -0,0 +1,18 @@
+import { type DefaultizedScatterSeriesType } from "../../models/seriesType/scatter.mjs";
+import { type ZAxisDefaultized } from "../../models/z-axis.mjs";
+/**
+ * Returns the marker size of a scatter item given its data index.
+ * @param {number} dataIndex The index of the scatter item.
+ * @returns {number} The marker size in pixels.
+ */
+export type ScatterSizeGetter = (dataIndex: number) => number;
+/**
+ * Builds a getter returning the marker size of each scatter item.
+ *
+ * When the size axis defines a `sizeMap`, the size is computed by mapping a value
+ * through the resulting `sizeScale`. The mapped value is taken from the size axis
+ * `data` when available, otherwise from the `sizeValue` of the scatter point.
+ * It falls back to the series `markerSize` when no size can be computed.
+ */
+declare const getMarkerSize: (series: DefaultizedScatterSeriesType, sizeZAxis?: ZAxisDefaultized) => ScatterSizeGetter;
+export default getMarkerSize;

package/ScatterChart/seriesConfig/getMarkerSize.d.ts

@@ -0,0 +1,18 @@
+import { type DefaultizedScatterSeriesType } from "../../models/seriesType/scatter.js";
+import { type ZAxisDefaultized } from "../../models/z-axis.js";
+/**
+ * Returns the marker size of a scatter item given its data index.
+ * @param {number} dataIndex The index of the scatter item.
+ * @returns {number} The marker size in pixels.
+ */
+export type ScatterSizeGetter = (dataIndex: number) => number;
+/**
+ * Builds a getter returning the marker size of each scatter item.
+ *
+ * When the size axis defines a `sizeMap`, the size is computed by mapping a value
+ * through the resulting `sizeScale`. The mapped value is taken from the size axis
+ * `data` when available, otherwise from the `sizeValue` of the scatter point.
+ * It falls back to the series `markerSize` when no size can be computed.
+ */
+declare const getMarkerSize: (series: DefaultizedScatterSeriesType, sizeZAxis?: ZAxisDefaultized) => ScatterSizeGetter;
+export default getMarkerSize;

package/ScatterChart/seriesConfig/getMarkerSize.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * Returns the marker size of a scatter item given its data index.
+ * @param {number} dataIndex The index of the scatter item.
+ * @returns {number} The marker size in pixels.
+ */
+
+/**
+ * Builds a getter returning the marker size of each scatter item.
+ *
+ * When the size axis defines a `sizeMap`, the size is computed by mapping a value
+ * through the resulting `sizeScale`. The mapped value is taken from the size axis
+ * `data` when available, otherwise from the `sizeValue` of the scatter point.
+ * It falls back to the series `markerSize` when no size can be computed.
+ */
+const getMarkerSize = (series, sizeZAxis) => {
+  const sizeScale = sizeZAxis?.sizeScale;
+  if (!sizeScale) {
+    return () => series.markerSize;
+  }
+  return dataIndex => {
+    if (sizeZAxis?.data?.[dataIndex] !== undefined) {
+      const size = sizeScale(sizeZAxis.data[dataIndex]);
+      if (size != null && !Number.isNaN(size)) {
+        return size;
+      }
+    }
+    const value = series.data[dataIndex];
+    if (value != null) {
+      const size = sizeScale(value.sizeValue);
+      if (size != null && !Number.isNaN(size)) {
+        return size;
+      }
+    }
+    return series.markerSize;
+  };
+};
+var _default = exports.default = getMarkerSize;

package/ScatterChart/seriesConfig/getMarkerSize.mjs

@@ -0,0 +1,37 @@
+/**
+ * Returns the marker size of a scatter item given its data index.
+ * @param {number} dataIndex The index of the scatter item.
+ * @returns {number} The marker size in pixels.
+ */
+
+/**
+ * Builds a getter returning the marker size of each scatter item.
+ *
+ * When the size axis defines a `sizeMap`, the size is computed by mapping a value
+ * through the resulting `sizeScale`. The mapped value is taken from the size axis
+ * `data` when available, otherwise from the `sizeValue` of the scatter point.
+ * It falls back to the series `markerSize` when no size can be computed.
+ */
+const getMarkerSize = (series, sizeZAxis) => {
+  const sizeScale = sizeZAxis?.sizeScale;
+  if (!sizeScale) {
+    return () => series.markerSize;
+  }
+  return dataIndex => {
+    if (sizeZAxis?.data?.[dataIndex] !== undefined) {
+      const size = sizeScale(sizeZAxis.data[dataIndex]);
+      if (size != null && !Number.isNaN(size)) {
+        return size;
+      }
+    }
+    const value = series.data[dataIndex];
+    if (value != null) {
+      const size = sizeScale(value.sizeValue);
+      if (size != null && !Number.isNaN(size)) {
+        return size;
+      }
+    }
+    return series.markerSize;
+  };
+};
+export default getMarkerSize;

package/ScatterChart/seriesConfig/seriesProcessor.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
+var _incompleteDatasetKeysError = require("../../internals/incompleteDatasetKeysError");
 const seriesProcessor = ({
   series,
   seriesOrder
@@ -15,18 +15,33 @@ const seriesProcessor = ({
     const datasetKeys = seriesData?.datasetKeys;
     const missingKeys = ['x', 'y'].filter(key => typeof datasetKeys?.[key] !== 'string');
     if (seriesData?.datasetKeys && missingKeys.length > 0) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Scatter series with id="${seriesId}" has incomplete datasetKeys. ` + `Properties ${missingKeys.map(key => `"${key}"`).join(', ')} are missing. ` + 'Scatter plots require both "x" and "y" keys to map dataset values to coordinates. ' + 'Add the missing datasetKeys to the series configuration.' : (0, _formatErrorMessage2.default)(29, seriesId, missingKeys.map(key => `"${key}"`).join(', ')));
+      (0, _incompleteDatasetKeysError.incompleteDatasetKeysError)('Scatter', seriesId, missingKeys);
     }
     let data;
     if (seriesData.valueGetter) {
       data = dataset?.map(seriesData.valueGetter) ?? [];
     } else if (datasetKeys) {
-      data = dataset?.map(d => ({
-        x: d[datasetKeys.x] ?? null,
-        y: d[datasetKeys.y] ?? null,
-        z: datasetKeys.z && d[datasetKeys.z],
-        id: datasetKeys.id && d[datasetKeys.id]
-      })) ?? [];
+      data = dataset?.map(d => {
+        const x = d[datasetKeys.x];
+        const y = d[datasetKeys.y];
+        const rep = {
+          x,
+          y
+        };
+        if (datasetKeys.colorValue !== undefined) {
+          rep.colorValue = d[datasetKeys.colorValue];
+        }
+        if (datasetKeys.sizeValue !== undefined) {
+          rep.sizeValue = d[datasetKeys.sizeValue];
+        }
+        if (datasetKeys.z !== undefined) {
+          rep.z = d[datasetKeys.z];
+        }
+        if (datasetKeys.id !== undefined) {
+          rep.id = d[datasetKeys.id];
+        }
+        return rep;
+      }) ?? [];
     } else {
       data = seriesData.data ?? [];
     }

package/ScatterChart/seriesConfig/seriesProcessor.mjs

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
+import { incompleteDatasetKeysError } from "../../internals/incompleteDatasetKeysError.mjs";
 const seriesProcessor = ({
   series,
   seriesOrder
@@ -8,18 +8,33 @@ const seriesProcessor = ({
     const datasetKeys = seriesData?.datasetKeys;
     const missingKeys = ['x', 'y'].filter(key => typeof datasetKeys?.[key] !== 'string');
     if (seriesData?.datasetKeys && missingKeys.length > 0) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Scatter series with id="${seriesId}" has incomplete datasetKeys. ` + `Properties ${missingKeys.map(key => `"${key}"`).join(', ')} are missing. ` + 'Scatter plots require both "x" and "y" keys to map dataset values to coordinates. ' + 'Add the missing datasetKeys to the series configuration.' : _formatErrorMessage(29, seriesId, missingKeys.map(key => `"${key}"`).join(', ')));
+      incompleteDatasetKeysError('Scatter', seriesId, missingKeys);
     }
     let data;
     if (seriesData.valueGetter) {
       data = dataset?.map(seriesData.valueGetter) ?? [];
     } else if (datasetKeys) {
-      data = dataset?.map(d => ({
-        x: d[datasetKeys.x] ?? null,
-        y: d[datasetKeys.y] ?? null,
-        z: datasetKeys.z && d[datasetKeys.z],
-        id: datasetKeys.id && d[datasetKeys.id]
-      })) ?? [];
+      data = dataset?.map(d => {
+        const x = d[datasetKeys.x];
+        const y = d[datasetKeys.y];
+        const rep = {
+          x,
+          y
+        };
+        if (datasetKeys.colorValue !== undefined) {
+          rep.colorValue = d[datasetKeys.colorValue];
+        }
+        if (datasetKeys.sizeValue !== undefined) {
+          rep.sizeValue = d[datasetKeys.sizeValue];
+        }
+        if (datasetKeys.z !== undefined) {
+          rep.z = d[datasetKeys.z];
+        }
+        if (datasetKeys.id !== undefined) {
+          rep.id = d[datasetKeys.id];
+        }
+        return rep;
+      }) ?? [];
     } else {
       data = seriesData.data ?? [];
     }