@mui/x-charts 9.3.0 → 9.5.0

package/ScatterChart/ScatterChart.js

@@ -148,7 +148,9 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   /**
    * Options to enable features planned for the next major.
    */
-  experimentalFeatures: _propTypes.default.object,
+  experimentalFeatures: _propTypes.default.shape({
+    progressiveRendering: _propTypes.default.bool
+  }),
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -307,13 +309,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   onTooltipItemChange: _propTypes.default.func,
   /**
    * The type of renderer to use for the scatter plot.
-   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element, synchronously.
+   * - `svg-progressive`: Renders every scatter item in a `<circle />` element, in progressive batches that paint over several animation frames to keep the main thread responsive.
    * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
    *                Read more: https://mui.com/x/react-charts/scatter/#performance
    *
+   * When not set, defaults to `svg-single`. Enable the `progressiveRendering` experimental feature to auto-select `svg-progressive` above an internal point-count threshold; this will become the default in the next major version.
    * @default 'svg-single'
    */
-  renderer: _propTypes.default.oneOf(['svg-batch', 'svg-single']),
+  renderer: _propTypes.default.oneOf(['svg-batch', 'svg-progressive', 'svg-single']),
   /**
    * The series to display in the scatter chart.
    * An array of [[ScatterSeries]] objects.
@@ -406,6 +410,27 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     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

@@ -141,7 +141,9 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   /**
    * Options to enable features planned for the next major.
    */
-  experimentalFeatures: PropTypes.object,
+  experimentalFeatures: PropTypes.shape({
+    progressiveRendering: PropTypes.bool
+  }),
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -300,13 +302,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   onTooltipItemChange: PropTypes.func,
   /**
    * The type of renderer to use for the scatter plot.
-   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element, synchronously.
+   * - `svg-progressive`: Renders every scatter item in a `<circle />` element, in progressive batches that paint over several animation frames to keep the main thread responsive.
    * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
    *                Read more: https://mui.com/x/react-charts/scatter/#performance
    *
+   * When not set, defaults to `svg-single`. Enable the `progressiveRendering` experimental feature to auto-select `svg-progressive` above an internal point-count threshold; this will become the default in the next major version.
    * @default 'svg-single'
    */
-  renderer: PropTypes.oneOf(['svg-batch', 'svg-single']),
+  renderer: PropTypes.oneOf(['svg-batch', 'svg-progressive', 'svg-single']),
   /**
    * The series to display in the scatter chart.
    * An array of [[ScatterSeries]] objects.
@@ -399,6 +403,27 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     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/ScatterChart.plugins.d.mts

@@ -8,5 +8,6 @@ import { type UseChartClosestPointSignature } from "../internals/plugins/feature
 import { type UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.mjs";
 import { type UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.mjs";
 import { type UseChartVisibilityManagerSignature } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.mjs";
-export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature<'scatter'>, UseChartInteractionSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartHighlightSignature<'scatter'>, UseChartVisibilityManagerSignature<'scatter'>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+import { type UseProgressiveRenderingSignature } from "../internals/plugins/featurePlugins/useProgressiveRendering/index.mjs";
+export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature<'scatter'>, UseChartInteractionSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartHighlightSignature<'scatter'>, UseChartVisibilityManagerSignature<'scatter'>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseProgressiveRenderingSignature];
 export declare const SCATTER_CHART_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartPluginSignatures>;

package/ScatterChart/ScatterChart.plugins.d.ts

@@ -8,5 +8,6 @@ import { type UseChartClosestPointSignature } from "../internals/plugins/feature
 import { type UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { type UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
 import { type UseChartVisibilityManagerSignature } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.js";
-export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature<'scatter'>, UseChartInteractionSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartHighlightSignature<'scatter'>, UseChartVisibilityManagerSignature<'scatter'>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+import { type UseProgressiveRenderingSignature } from "../internals/plugins/featurePlugins/useProgressiveRendering/index.js";
+export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature<'scatter'>, UseChartInteractionSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartHighlightSignature<'scatter'>, UseChartVisibilityManagerSignature<'scatter'>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseProgressiveRenderingSignature];
 export declare const SCATTER_CHART_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartPluginSignatures>;

package/ScatterChart/ScatterChart.plugins.js

@@ -13,4 +13,5 @@ var _useChartClosestPoint = require("../internals/plugins/featurePlugins/useChar
 var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
 var _useChartBrush = require("../internals/plugins/featurePlugins/useChartBrush");
 var _useChartVisibilityManager = require("../internals/plugins/featurePlugins/useChartVisibilityManager");
-const SCATTER_CHART_PLUGINS = exports.SCATTER_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartVisibilityManager.useChartVisibilityManager, _useChartClosestPoint.useChartClosestPoint, _useChartKeyboardNavigation.useChartKeyboardNavigation];
+var _useProgressiveRendering = require("../internals/plugins/featurePlugins/useProgressiveRendering");
+const SCATTER_CHART_PLUGINS = exports.SCATTER_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartVisibilityManager.useChartVisibilityManager, _useChartClosestPoint.useChartClosestPoint, _useChartKeyboardNavigation.useChartKeyboardNavigation, _useProgressiveRendering.useProgressiveRendering];

package/ScatterChart/ScatterChart.plugins.mjs

@@ -7,4 +7,5 @@ import { useChartClosestPoint } from "../internals/plugins/featurePlugins/useCha
 import { useChartKeyboardNavigation } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.mjs";
 import { useChartBrush } from "../internals/plugins/featurePlugins/useChartBrush/index.mjs";
 import { useChartVisibilityManager } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.mjs";
-export const SCATTER_CHART_PLUGINS = [useChartZAxis, useChartBrush, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartVisibilityManager, useChartClosestPoint, useChartKeyboardNavigation];
+import { useProgressiveRendering } from "../internals/plugins/featurePlugins/useProgressiveRendering/index.mjs";
+export const SCATTER_CHART_PLUGINS = [useChartZAxis, useChartBrush, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartVisibilityManager, useChartClosestPoint, useChartKeyboardNavigation, useProgressiveRendering];

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'> {
@@ -21,13 +22,15 @@ export interface ScatterPlotProps extends Pick<ScatterProps, 'onItemClick' | 'cl
   slotProps?: ScatterPlotSlotProps;
   /**
    * The type of renderer to use for the scatter plot.
-   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element, synchronously.
+   * - `svg-progressive`: Renders every scatter item in a `<circle />` element, in progressive batches that paint over several animation frames to keep the main thread responsive.
    * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
    *                Read more: https://mui.com/x/react-charts/scatter/#performance
    *
+   * When not set, defaults to `svg-single`. Enable the `progressiveRendering` experimental feature to auto-select `svg-progressive` above an internal point-count threshold; this will become the default in the next major version.
    * @default 'svg-single'
    */
-  renderer?: RendererType;
+  renderer?: RendererType | 'svg-progressive';
 }
 /**
  * Demos:

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'> {
@@ -21,13 +22,15 @@ export interface ScatterPlotProps extends Pick<ScatterProps, 'onItemClick' | 'cl
   slotProps?: ScatterPlotSlotProps;
   /**
    * The type of renderer to use for the scatter plot.
-   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element, synchronously.
+   * - `svg-progressive`: Renders every scatter item in a `<circle />` element, in progressive batches that paint over several animation frames to keep the main thread responsive.
    * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
    *                Read more: https://mui.com/x/react-charts/scatter/#performance
    *
+   * When not set, defaults to `svg-single`. Enable the `progressiveRendering` experimental feature to auto-select `svg-progressive` above an internal point-count threshold; this will become the default in the next major version.
    * @default 'svg-single'
    */
-  renderer?: RendererType;
+  renderer?: RendererType | 'svg-progressive';
 }
 /**
  * Demos:

package/ScatterChart/ScatterPlot.js

@@ -17,9 +17,15 @@ 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 _ScatterAsync = require("./async/ScatterAsync");
 var _scatterClasses = require("./scatterClasses");
+var _ChartsProvider = require("../context/ChartsProvider");
+var _useStore = require("../internals/store/useStore");
+var _useProgressiveRendering = require("../internals/plugins/featurePlugins/useProgressiveRendering");
 var _jsxRuntime = require("react/jsx-runtime");
+const EMPTY_SERIES_IDS = [];
 const ScatterPlotRoot = (0, _styles.styled)('g', {
   name: 'MuiScatterPlot',
   slot: 'Root'
@@ -60,6 +66,14 @@ function ScatterPlot(props) {
   const classes = (0, _scatterClasses.useUtilityClasses)({
     classes: inClasses
   });
+  const {
+    instance
+  } = (0, _ChartsProvider.useChartsContext)();
+  const store = (0, _useStore.useStore)();
+  const plotId = React.useId();
+  const seriesIds = seriesData?.seriesOrder ?? EMPTY_SERIES_IDS;
+  const isProgressive = store.use(_useProgressiveRendering.selectorShouldUseProgressiveRenderer, seriesIds, renderer);
+  React.useEffect(() => instance.registerProgressivePlan(plotId, seriesIds, renderer), [instance, plotId, seriesIds, renderer]);
   if (seriesData === undefined) {
     return null;
   }
@@ -70,7 +84,14 @@ function ScatterPlot(props) {
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   const defaultZAxisId = zAxisIds[0];
-  const DefaultScatterItems = renderer === 'svg-batch' ? _BatchScatter.BatchScatter : _Scatter.Scatter;
+  let DefaultScatterItems;
+  if (renderer === 'svg-batch') {
+    DefaultScatterItems = _BatchScatter.BatchScatter;
+  } else if (isProgressive) {
+    DefaultScatterItems = _ScatterAsync.ScatterAsync;
+  } else {
+    DefaultScatterItems = _Scatter.Scatter;
+  }
   const ScatterItems = slots?.scatter ?? DefaultScatterItems;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ScatterPlotRoot, {
     className: (0, _clsx.default)(classes.root, className),
@@ -79,14 +100,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 +118,7 @@ function ScatterPlot(props) {
         yScale: yScale,
         color: color,
         colorGetter: colorGetter,
+        sizeGetter: sizeGetter,
         series: series[seriesId],
         onItemClick: onItemClick,
         slots: slots,
@@ -115,13 +140,15 @@ process.env.NODE_ENV !== "production" ? ScatterPlot.propTypes = {
   onItemClick: _propTypes.default.func,
   /**
    * The type of renderer to use for the scatter plot.
-   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element, synchronously.
+   * - `svg-progressive`: Renders every scatter item in a `<circle />` element, in progressive batches that paint over several animation frames to keep the main thread responsive.
    * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
    *                Read more: https://mui.com/x/react-charts/scatter/#performance
    *
+   * When not set, defaults to `svg-single`. Enable the `progressiveRendering` experimental feature to auto-select `svg-progressive` above an internal point-count threshold; this will become the default in the next major version.
    * @default 'svg-single'
    */
-  renderer: _propTypes.default.oneOf(['svg-batch', 'svg-single']),
+  renderer: _propTypes.default.oneOf(['svg-batch', 'svg-progressive', 'svg-single']),
   /**
    * The props used for each component slot.
    * @default {}

package/ScatterChart/ScatterPlot.mjs

@@ -10,9 +10,15 @@ 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 { ScatterAsync } from "./async/ScatterAsync.mjs";
 import { useUtilityClasses } from "./scatterClasses.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
+import { useStore } from "../internals/store/useStore.mjs";
+import { selectorShouldUseProgressiveRenderer } from "../internals/plugins/featurePlugins/useProgressiveRendering/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
+const EMPTY_SERIES_IDS = [];
 const ScatterPlotRoot = styled('g', {
   name: 'MuiScatterPlot',
   slot: 'Root'
@@ -53,6 +59,14 @@ function ScatterPlot(props) {
   const classes = useUtilityClasses({
     classes: inClasses
   });
+  const {
+    instance
+  } = useChartsContext();
+  const store = useStore();
+  const plotId = React.useId();
+  const seriesIds = seriesData?.seriesOrder ?? EMPTY_SERIES_IDS;
+  const isProgressive = store.use(selectorShouldUseProgressiveRenderer, seriesIds, renderer);
+  React.useEffect(() => instance.registerProgressivePlan(plotId, seriesIds, renderer), [instance, plotId, seriesIds, renderer]);
   if (seriesData === undefined) {
     return null;
   }
@@ -63,7 +77,14 @@ function ScatterPlot(props) {
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   const defaultZAxisId = zAxisIds[0];
-  const DefaultScatterItems = renderer === 'svg-batch' ? BatchScatter : Scatter;
+  let DefaultScatterItems;
+  if (renderer === 'svg-batch') {
+    DefaultScatterItems = BatchScatter;
+  } else if (isProgressive) {
+    DefaultScatterItems = ScatterAsync;
+  } else {
+    DefaultScatterItems = Scatter;
+  }
   const ScatterItems = slots?.scatter ?? DefaultScatterItems;
   return /*#__PURE__*/_jsx(ScatterPlotRoot, {
     className: clsx(classes.root, className),
@@ -72,14 +93,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 +111,7 @@ function ScatterPlot(props) {
         yScale: yScale,
         color: color,
         colorGetter: colorGetter,
+        sizeGetter: sizeGetter,
         series: series[seriesId],
         onItemClick: onItemClick,
         slots: slots,
@@ -108,13 +133,15 @@ process.env.NODE_ENV !== "production" ? ScatterPlot.propTypes = {
   onItemClick: PropTypes.func,
   /**
    * The type of renderer to use for the scatter plot.
-   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element, synchronously.
+   * - `svg-progressive`: Renders every scatter item in a `<circle />` element, in progressive batches that paint over several animation frames to keep the main thread responsive.
    * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
    *                Read more: https://mui.com/x/react-charts/scatter/#performance
    *
+   * When not set, defaults to `svg-single`. Enable the `progressiveRendering` experimental feature to auto-select `svg-progressive` above an internal point-count threshold; this will become the default in the next major version.
    * @default 'svg-single'
    */
-  renderer: PropTypes.oneOf(['svg-batch', 'svg-single']),
+  renderer: PropTypes.oneOf(['svg-batch', 'svg-progressive', 'svg-single']),
   /**
    * The props used for each component slot.
    * @default {}

package/ScatterChart/async/ScatterAsync.d.mts

@@ -0,0 +1,9 @@
+import { type ScatterProps } from "../Scatter.mjs";
+/**
+ * @ignore - internal component.
+ */
+declare function ScatterAsync(props: ScatterProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ScatterAsync {
+  var propTypes: any;
+}
+export { ScatterAsync };

package/ScatterChart/async/ScatterAsync.d.ts

@@ -0,0 +1,9 @@
+import { type ScatterProps } from "../Scatter.js";
+/**
+ * @ignore - internal component.
+ */
+declare function ScatterAsync(props: ScatterProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ScatterAsync {
+  var propTypes: any;
+}
+export { ScatterAsync };

package/ScatterChart/async/ScatterAsync.js

@@ -0,0 +1,71 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScatterAsync = ScatterAsync;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ScatterAsyncBatch = require("./ScatterAsyncBatch");
+var _useStore = require("../../internals/store/useStore");
+var _useProgressiveRendering = require("../../internals/plugins/featurePlugins/useProgressiveRendering");
+var _scatterRenderData = require("./scatterRenderData.selectors");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * @ignore - internal component.
+ */function ScatterAsync(props) {
+  const {
+    series,
+    colorGetter,
+    onItemClick,
+    slots,
+    slotProps,
+    classes
+  } = props;
+  const store = (0, _useStore.useStore)();
+  const batchSize = store.use(_useProgressiveRendering.selectorProgressiveBatchSize);
+  const revealedBatches = store.use(_useProgressiveRendering.selectorProgressiveSeriesRevealedBatches, series.id);
+  // Size batches by the number of *visible* points so that zooming in (which
+  // shrinks the filtered set in the selector) collapses the progressive wave
+  // into a single tick once everything fits in one batch.
+  const renderData = store.use(_scatterRenderData.selectorScatterSeriesRenderData, series.id);
+  const count = renderData?.count ?? 0;
+  const nBatches = count === 0 ? 0 : Math.ceil(count / Math.max(1, batchSize));
+  const batches = [];
+  for (let b = 0; b < nBatches; b += 1) {
+    const start = b * batchSize;
+    const end = Math.min(count, start + batchSize);
+    batches.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterAsyncBatch.ScatterAsyncBatch, {
+      series: series,
+      colorGetter: colorGetter,
+      onItemClick: onItemClick,
+      slots: slots,
+      slotProps: slotProps,
+      start: start,
+      end: end,
+      classes: classes,
+      revealed: b < revealedBatches
+    }, b));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: batches
+  });
+}
+process.env.NODE_ENV !== "production" ? ScatterAsync.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: _propTypes.default.object,
+  color: _propTypes.default.string.isRequired,
+  colorGetter: _propTypes.default.func.isRequired,
+  onItemClick: _propTypes.default.func,
+  series: _propTypes.default.object.isRequired,
+  slotProps: _propTypes.default.object,
+  slots: _propTypes.default.object,
+  xScale: _propTypes.default.func.isRequired,
+  yScale: _propTypes.default.func.isRequired
+} : void 0;

package/ScatterChart/async/ScatterAsync.mjs

@@ -0,0 +1,67 @@
+'use client';
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { ScatterAsyncBatch } from "./ScatterAsyncBatch.mjs";
+import { useStore } from "../../internals/store/useStore.mjs";
+import { selectorProgressiveBatchSize, selectorProgressiveSeriesRevealedBatches } from "../../internals/plugins/featurePlugins/useProgressiveRendering/index.mjs";
+import { selectorScatterSeriesRenderData } from "./scatterRenderData.selectors.mjs";
+
+/**
+ * @ignore - internal component.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+function ScatterAsync(props) {
+  const {
+    series,
+    colorGetter,
+    onItemClick,
+    slots,
+    slotProps,
+    classes
+  } = props;
+  const store = useStore();
+  const batchSize = store.use(selectorProgressiveBatchSize);
+  const revealedBatches = store.use(selectorProgressiveSeriesRevealedBatches, series.id);
+  // Size batches by the number of *visible* points so that zooming in (which
+  // shrinks the filtered set in the selector) collapses the progressive wave
+  // into a single tick once everything fits in one batch.
+  const renderData = store.use(selectorScatterSeriesRenderData, series.id);
+  const count = renderData?.count ?? 0;
+  const nBatches = count === 0 ? 0 : Math.ceil(count / Math.max(1, batchSize));
+  const batches = [];
+  for (let b = 0; b < nBatches; b += 1) {
+    const start = b * batchSize;
+    const end = Math.min(count, start + batchSize);
+    batches.push(/*#__PURE__*/_jsx(ScatterAsyncBatch, {
+      series: series,
+      colorGetter: colorGetter,
+      onItemClick: onItemClick,
+      slots: slots,
+      slotProps: slotProps,
+      start: start,
+      end: end,
+      classes: classes,
+      revealed: b < revealedBatches
+    }, b));
+  }
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: batches
+  });
+}
+process.env.NODE_ENV !== "production" ? ScatterAsync.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: PropTypes.object,
+  color: PropTypes.string.isRequired,
+  colorGetter: PropTypes.func.isRequired,
+  onItemClick: PropTypes.func,
+  series: PropTypes.object.isRequired,
+  slotProps: PropTypes.object,
+  slots: PropTypes.object,
+  xScale: PropTypes.func.isRequired,
+  yScale: PropTypes.func.isRequired
+} : void 0;
+export { ScatterAsync };

package/ScatterChart/async/ScatterAsyncBatch.d.mts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { type DefaultizedScatterSeriesType } from "../../models/seriesType/scatter.mjs";
+import type { ColorGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
+import { type ScatterProps } from "../Scatter.mjs";
+export interface ScatterAsyncBatchProps extends Pick<ScatterProps, 'series' | 'colorGetter' | 'onItemClick' | 'slots' | 'slotProps' | 'classes'> {
+  series: DefaultizedScatterSeriesType;
+  colorGetter: ColorGetter<'scatter'>;
+  /** First point index of this batch (inclusive). */
+  start: number;
+  /** Last point index of this batch (exclusive). */
+  end: number;
+  /**
+   * Whether this batch is allowed to render its markers yet. `ScatterAsync`
+   * ramps this up batch by batch across animation frames for a progressive
+   * paint. When `false` the `<g>` still mounts but stays empty.
+   */
+  revealed: boolean;
+}
+/**
+ * @ignore - internal component.
+ */
+declare function ScatterAsyncBatchComponent(props: ScatterAsyncBatchProps): import("react/jsx-runtime").JSX.Element;
+declare const ScatterAsyncBatch: React.MemoExoticComponent<typeof ScatterAsyncBatchComponent>;
+export { ScatterAsyncBatch };