@mui/x-charts 9.3.0 → 9.5.0

package/internals/index.js

@@ -541,6 +541,18 @@ Object.keys(_useChartItemClick).forEach(function (key) {
     }
   });
 });
+var _useProgressiveRendering = require("./plugins/featurePlugins/useProgressiveRendering");
+Object.keys(_useProgressiveRendering).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useProgressiveRendering[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useProgressiveRendering[key];
+    }
+  });
+});
 var _selectors = require("./plugins/utils/selectors");
 Object.keys(_selectors).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -832,6 +844,30 @@ Object.keys(_colorScale).forEach(function (key) {
     }
   });
 });
+var _sizeScale = require("./sizeScale");
+Object.keys(_sizeScale).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _sizeScale[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _sizeScale[key];
+    }
+  });
+});
+var _incompleteDatasetKeysError = require("./incompleteDatasetKeysError");
+Object.keys(_incompleteDatasetKeysError).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _incompleteDatasetKeysError[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _incompleteDatasetKeysError[key];
+    }
+  });
+});
 var _ticks = require("./ticks");
 Object.keys(_ticks).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/index.mjs

@@ -42,6 +42,7 @@ export * from "./plugins/featurePlugins/useChartKeyboardNavigation/index.mjs";
 export * from "./plugins/featurePlugins/useChartClosestPoint/index.mjs";
 export * from "./plugins/featurePlugins/useChartBrush/index.mjs";
 export * from "./plugins/featurePlugins/useChartItemClick/index.mjs";
+export * from "./plugins/featurePlugins/useProgressiveRendering/index.mjs";
 export * from "./plugins/utils/selectors.mjs";
 export { getAxisTriggerTooltip as getCartesianAxisTriggerTooltip } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisTriggerTooltip.mjs";
 export { getAxisIndex as getCartesianAxisIndex } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisValue.mjs";
@@ -73,6 +74,8 @@ export * from "./consumeSlots.mjs";
 export * from "./consumeThemeProps.mjs";
 export * from "./defaultizeMargin.mjs";
 export * from "./colorScale.mjs";
+export * from "./sizeScale.mjs";
+export * from "./incompleteDatasetKeysError.mjs";
 export * from "./ticks.mjs";
 export * from "./dateHelpers.mjs";
 export * from "./invertScale.mjs";

package/internals/plugins/allPlugins.d.mts

@@ -9,6 +9,7 @@ import { type UseChartZAxisSignature } from "./featurePlugins/useChartZAxis/inde
 import { type UseChartBrushSignature } from "./featurePlugins/useChartBrush/index.mjs";
 import { type UseChartVisibilityManagerSignature } from "./featurePlugins/useChartVisibilityManager/index.mjs";
 import { type UseChartTooltipSignature } from "./featurePlugins/useChartTooltip/index.mjs";
-export type AllPluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<SeriesType>, UseChartPolarAxisSignature, UseChartTooltipSignature<SeriesType>, UseChartInteractionSignature, UseChartHighlightSignature<SeriesType>, UseChartVisibilityManagerSignature<SeriesType>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
-export type DefaultPluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature<SeriesType>, UseChartInteractionSignature, UseChartCartesianAxisSignature<SeriesType>, UseChartHighlightSignature<SeriesType>, UseChartVisibilityManagerSignature<SeriesType>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
-export declare const DEFAULT_PLUGINS: readonly [import("./models/index.mjs").ChartPlugin<UseChartZAxisSignature>, import("./models/index.mjs").ChartPlugin<UseChartBrushSignature>, import("./models/index.mjs").ChartPlugin<UseChartTooltipSignature<any>>, import("./models/index.mjs").ChartPlugin<UseChartInteractionSignature>, import("./models/index.mjs").ChartPlugin<UseChartCartesianAxisSignature<any>>, import("./models/index.mjs").ChartPlugin<UseChartHighlightSignature<any>>, import("./models/index.mjs").ChartPlugin<UseChartVisibilityManagerSignature<any>>, import("./models/index.mjs").ChartPlugin<UseChartClosestPointSignature>, import("./models/index.mjs").ChartPlugin<UseChartKeyboardNavigationSignature>];
+import { type UseProgressiveRenderingSignature } from "./featurePlugins/useProgressiveRendering/index.mjs";
+export type AllPluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<SeriesType>, UseChartPolarAxisSignature, UseChartTooltipSignature<SeriesType>, UseChartInteractionSignature, UseChartHighlightSignature<SeriesType>, UseChartVisibilityManagerSignature<SeriesType>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseProgressiveRenderingSignature];
+export type DefaultPluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature<SeriesType>, UseChartInteractionSignature, UseChartCartesianAxisSignature<SeriesType>, UseChartHighlightSignature<SeriesType>, UseChartVisibilityManagerSignature<SeriesType>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseProgressiveRenderingSignature];
+export declare const DEFAULT_PLUGINS: readonly [import("./models/index.mjs").ChartPlugin<UseChartZAxisSignature>, import("./models/index.mjs").ChartPlugin<UseChartBrushSignature>, import("./models/index.mjs").ChartPlugin<UseChartTooltipSignature<any>>, import("./models/index.mjs").ChartPlugin<UseChartInteractionSignature>, import("./models/index.mjs").ChartPlugin<UseChartCartesianAxisSignature<any>>, import("./models/index.mjs").ChartPlugin<UseChartHighlightSignature<any>>, import("./models/index.mjs").ChartPlugin<UseChartVisibilityManagerSignature<any>>, import("./models/index.mjs").ChartPlugin<UseChartClosestPointSignature>, import("./models/index.mjs").ChartPlugin<UseChartKeyboardNavigationSignature>, import("./models/index.mjs").ChartPlugin<UseProgressiveRenderingSignature>];

package/internals/plugins/allPlugins.d.ts

@@ -9,6 +9,7 @@ import { type UseChartZAxisSignature } from "./featurePlugins/useChartZAxis/inde
 import { type UseChartBrushSignature } from "./featurePlugins/useChartBrush/index.js";
 import { type UseChartVisibilityManagerSignature } from "./featurePlugins/useChartVisibilityManager/index.js";
 import { type UseChartTooltipSignature } from "./featurePlugins/useChartTooltip/index.js";
-export type AllPluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<SeriesType>, UseChartPolarAxisSignature, UseChartTooltipSignature<SeriesType>, UseChartInteractionSignature, UseChartHighlightSignature<SeriesType>, UseChartVisibilityManagerSignature<SeriesType>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
-export type DefaultPluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature<SeriesType>, UseChartInteractionSignature, UseChartCartesianAxisSignature<SeriesType>, UseChartHighlightSignature<SeriesType>, UseChartVisibilityManagerSignature<SeriesType>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
-export declare const DEFAULT_PLUGINS: readonly [import("./models/index.js").ChartPlugin<UseChartZAxisSignature>, import("./models/index.js").ChartPlugin<UseChartBrushSignature>, import("./models/index.js").ChartPlugin<UseChartTooltipSignature<any>>, import("./models/index.js").ChartPlugin<UseChartInteractionSignature>, import("./models/index.js").ChartPlugin<UseChartCartesianAxisSignature<any>>, import("./models/index.js").ChartPlugin<UseChartHighlightSignature<any>>, import("./models/index.js").ChartPlugin<UseChartVisibilityManagerSignature<any>>, import("./models/index.js").ChartPlugin<UseChartClosestPointSignature>, import("./models/index.js").ChartPlugin<UseChartKeyboardNavigationSignature>];
+import { type UseProgressiveRenderingSignature } from "./featurePlugins/useProgressiveRendering/index.js";
+export type AllPluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<SeriesType>, UseChartPolarAxisSignature, UseChartTooltipSignature<SeriesType>, UseChartInteractionSignature, UseChartHighlightSignature<SeriesType>, UseChartVisibilityManagerSignature<SeriesType>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseProgressiveRenderingSignature];
+export type DefaultPluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature<SeriesType>, UseChartInteractionSignature, UseChartCartesianAxisSignature<SeriesType>, UseChartHighlightSignature<SeriesType>, UseChartVisibilityManagerSignature<SeriesType>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseProgressiveRenderingSignature];
+export declare const DEFAULT_PLUGINS: readonly [import("./models/index.js").ChartPlugin<UseChartZAxisSignature>, import("./models/index.js").ChartPlugin<UseChartBrushSignature>, import("./models/index.js").ChartPlugin<UseChartTooltipSignature<any>>, import("./models/index.js").ChartPlugin<UseChartInteractionSignature>, import("./models/index.js").ChartPlugin<UseChartCartesianAxisSignature<any>>, import("./models/index.js").ChartPlugin<UseChartHighlightSignature<any>>, import("./models/index.js").ChartPlugin<UseChartVisibilityManagerSignature<any>>, import("./models/index.js").ChartPlugin<UseChartClosestPointSignature>, import("./models/index.js").ChartPlugin<UseChartKeyboardNavigationSignature>, import("./models/index.js").ChartPlugin<UseProgressiveRenderingSignature>];

package/internals/plugins/allPlugins.js

@@ -13,6 +13,7 @@ var _useChartZAxis = require("./featurePlugins/useChartZAxis");
 var _useChartBrush = require("./featurePlugins/useChartBrush");
 var _useChartVisibilityManager = require("./featurePlugins/useChartVisibilityManager");
 var _useChartTooltip = require("./featurePlugins/useChartTooltip");
+var _useProgressiveRendering = require("./featurePlugins/useProgressiveRendering");
 // This file should be removed after creating all plugins in favor of a file per chart type.
 
-const DEFAULT_PLUGINS = exports.DEFAULT_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartVisibilityManager.useChartVisibilityManager, _useChartClosestPoint.useChartClosestPoint, _useChartKeyboardNavigation.useChartKeyboardNavigation];
+const DEFAULT_PLUGINS = exports.DEFAULT_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartVisibilityManager.useChartVisibilityManager, _useChartClosestPoint.useChartClosestPoint, _useChartKeyboardNavigation.useChartKeyboardNavigation, _useProgressiveRendering.useProgressiveRendering];

package/internals/plugins/allPlugins.mjs

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

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.selectors.d.mts

@@ -1,4 +1,13 @@
 import type { ChartSeriesType } from "../../../../models/seriesType/config.mjs";
-import { type ChartRootSelector } from "../../utils/selectors.mjs";
-import type { UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature.types.mjs";
-export declare const selectorChartExperimentalFeaturesState: ChartRootSelector<UseChartExperimentalFeaturesSignature<ChartSeriesType>>;
+import { type ChartState } from "../../models/chart.mjs";
+import type { ChartExperimentalFeatures, UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature.types.mjs";
+/**
+ * Reads the value of a single experimental feature flag from the store.
+ *
+ * @example
+ * const enabled = store.use(
+ *   selectorChartExperimentalFeaturesState,
+ *   'progressiveRendering',
+ * );
+ */
+export declare const selectorChartExperimentalFeaturesState: <K extends keyof ChartExperimentalFeatures>(state: ChartState<[UseChartExperimentalFeaturesSignature<ChartSeriesType>]>, featureName: K) => ChartExperimentalFeatures[K] | undefined;

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.selectors.d.ts

@@ -1,4 +1,13 @@
 import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
-import { type ChartRootSelector } from "../../utils/selectors.js";
-import type { UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature.types.js";
-export declare const selectorChartExperimentalFeaturesState: ChartRootSelector<UseChartExperimentalFeaturesSignature<ChartSeriesType>>;
+import { type ChartState } from "../../models/chart.js";
+import type { ChartExperimentalFeatures, UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature.types.js";
+/**
+ * Reads the value of a single experimental feature flag from the store.
+ *
+ * @example
+ * const enabled = store.use(
+ *   selectorChartExperimentalFeaturesState,
+ *   'progressiveRendering',
+ * );
+ */
+export declare const selectorChartExperimentalFeaturesState: <K extends keyof ChartExperimentalFeatures>(state: ChartState<[UseChartExperimentalFeaturesSignature<ChartSeriesType>]>, featureName: K) => ChartExperimentalFeatures[K] | undefined;

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.selectors.js

@@ -4,5 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectorChartExperimentalFeaturesState = void 0;
-const selectorChartExperimentalFeaturesState = state => state.experimentalFeatures;
+/**
+ * Reads the value of a single experimental feature flag from the store.
+ *
+ * @example
+ * const enabled = store.use(
+ *   selectorChartExperimentalFeaturesState,
+ *   'progressiveRendering',
+ * );
+ */
+const selectorChartExperimentalFeaturesState = (state, featureName) => state.experimentalFeatures?.[featureName];
 exports.selectorChartExperimentalFeaturesState = selectorChartExperimentalFeaturesState;

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.selectors.mjs

@@ -1 +1,10 @@
-export const selectorChartExperimentalFeaturesState = state => state.experimentalFeatures;
+/**
+ * Reads the value of a single experimental feature flag from the store.
+ *
+ * @example
+ * const enabled = store.use(
+ *   selectorChartExperimentalFeaturesState,
+ *   'progressiveRendering',
+ * );
+ */
+export const selectorChartExperimentalFeaturesState = (state, featureName) => state.experimentalFeatures?.[featureName];

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.d.mts

@@ -13,7 +13,21 @@ interface LineExperimentalFeatures {
    */
   enablePositionBasedPointerInteraction?: boolean;
 }
-export type ChartExperimentalFeatures<SeriesType extends ChartSeriesType = ChartSeriesType> = 'line' extends SeriesType ? LineExperimentalFeatures : {};
+interface ScatterExperimentalFeatures {
+  /**
+   * Enables automatic progressive (batched) rendering for scatter series.
+   *
+   * When enabled and the `renderer` prop is left unset, the chart switches to
+   * the `svg-progressive` renderer above an internal point-count threshold,
+   * painting points over several animation frames to keep the main thread
+   * responsive. When disabled, the unset `renderer` keeps the synchronous
+   * `svg-single` renderer. Setting `renderer` explicitly is unaffected.
+   *
+   * This behavior will become the default in the next major version.
+   */
+  progressiveRendering?: boolean;
+}
+export type ChartExperimentalFeatures<SeriesType extends ChartSeriesType = ChartSeriesType> = ('line' extends SeriesType ? LineExperimentalFeatures : {}) & ('scatter' extends SeriesType ? ScatterExperimentalFeatures : {});
 export interface UseChartExperimentalFeaturesParameters<SeriesType extends ChartSeriesType = ChartSeriesType> {
   /**
    * Options to enable features planned for the next major.

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.d.ts

@@ -13,7 +13,21 @@ interface LineExperimentalFeatures {
    */
   enablePositionBasedPointerInteraction?: boolean;
 }
-export type ChartExperimentalFeatures<SeriesType extends ChartSeriesType = ChartSeriesType> = 'line' extends SeriesType ? LineExperimentalFeatures : {};
+interface ScatterExperimentalFeatures {
+  /**
+   * Enables automatic progressive (batched) rendering for scatter series.
+   *
+   * When enabled and the `renderer` prop is left unset, the chart switches to
+   * the `svg-progressive` renderer above an internal point-count threshold,
+   * painting points over several animation frames to keep the main thread
+   * responsive. When disabled, the unset `renderer` keeps the synchronous
+   * `svg-single` renderer. Setting `renderer` explicitly is unaffected.
+   *
+   * This behavior will become the default in the next major version.
+   */
+  progressiveRendering?: boolean;
+}
+export type ChartExperimentalFeatures<SeriesType extends ChartSeriesType = ChartSeriesType> = ('line' extends SeriesType ? LineExperimentalFeatures : {}) & ('scatter' extends SeriesType ? ScatterExperimentalFeatures : {});
 export interface UseChartExperimentalFeaturesParameters<SeriesType extends ChartSeriesType = ChartSeriesType> {
   /**
    * Options to enable features planned for the next major.

package/internals/plugins/featurePlugins/useChartCartesianAxis/createZoomLookup.js

@@ -10,9 +10,10 @@ const createZoomLookup = axisDirection => (axes = []) => axes.reduce((acc, v) =>
   const {
     zoom,
     id: axisId,
-    reverse
+    reverse,
+    scaleType
   } = v;
-  const defaultizedZoom = (0, _defaultizeZoom.defaultizeZoom)(zoom, axisId, axisDirection, reverse);
+  const defaultizedZoom = (0, _defaultizeZoom.defaultizeZoom)(zoom, axisId, axisDirection, (0, _defaultizeZoom.getEffectiveZoomReverse)(axisDirection, scaleType, reverse));
   if (defaultizedZoom) {
     acc[axisId] = defaultizedZoom;
   }

package/internals/plugins/featurePlugins/useChartCartesianAxis/createZoomLookup.mjs

@@ -1,12 +1,13 @@
-import { defaultizeZoom } from "./defaultizeZoom.mjs";
+import { defaultizeZoom, getEffectiveZoomReverse } from "./defaultizeZoom.mjs";
 export const createZoomLookup = axisDirection => (axes = []) => axes.reduce((acc, v) => {
   // @ts-ignore
   const {
     zoom,
     id: axisId,
-    reverse
+    reverse,
+    scaleType
   } = v;
-  const defaultizedZoom = defaultizeZoom(zoom, axisId, axisDirection, reverse);
+  const defaultizedZoom = defaultizeZoom(zoom, axisId, axisDirection, getEffectiveZoomReverse(axisDirection, scaleType, reverse));
   if (defaultizedZoom) {
     acc[axisId] = defaultizedZoom;
   }

package/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.js

@@ -35,7 +35,7 @@ function defaultizeXAxis(inAxes, dataset, axesGap) {
       id,
       position,
       height,
-      zoom: (0, _defaultizeZoom.defaultizeZoom)(axisConfig.zoom, id, 'x', axisConfig.reverse)
+      zoom: (0, _defaultizeZoom.defaultizeZoom)(axisConfig.zoom, id, 'x', (0, _defaultizeZoom.getEffectiveZoomReverse)('x', axisConfig.scaleType, axisConfig.reverse))
     });
 
     // Increment the offset for the next axis
@@ -87,7 +87,7 @@ function defaultizeYAxis(inAxes, dataset, axesGap) {
       id,
       position,
       width,
-      zoom: (0, _defaultizeZoom.defaultizeZoom)(axisConfig.zoom, id, 'y', axisConfig.reverse)
+      zoom: (0, _defaultizeZoom.defaultizeZoom)(axisConfig.zoom, id, 'y', (0, _defaultizeZoom.getEffectiveZoomReverse)('y', axisConfig.scaleType, axisConfig.reverse))
     });
 
     // Increment the offset for the next axis

package/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.mjs

@@ -1,6 +1,6 @@
 import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { defaultizeZoom } from "./defaultizeZoom.mjs";
+import { defaultizeZoom, getEffectiveZoomReverse } from "./defaultizeZoom.mjs";
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY, DEFAULT_AXIS_SIZE_HEIGHT, DEFAULT_AXIS_SIZE_WIDTH, AXIS_LABEL_DEFAULT_HEIGHT } from "../../../../constants/index.mjs";
 export function defaultizeXAxis(inAxes, dataset, axesGap) {
   const offsets = {
@@ -27,7 +27,7 @@ export function defaultizeXAxis(inAxes, dataset, axesGap) {
       id,
       position,
       height,
-      zoom: defaultizeZoom(axisConfig.zoom, id, 'x', axisConfig.reverse)
+      zoom: defaultizeZoom(axisConfig.zoom, id, 'x', getEffectiveZoomReverse('x', axisConfig.scaleType, axisConfig.reverse))
     });
 
     // Increment the offset for the next axis
@@ -79,7 +79,7 @@ export function defaultizeYAxis(inAxes, dataset, axesGap) {
       id,
       position,
       width,
-      zoom: defaultizeZoom(axisConfig.zoom, id, 'y', axisConfig.reverse)
+      zoom: defaultizeZoom(axisConfig.zoom, id, 'y', getEffectiveZoomReverse('y', axisConfig.scaleType, axisConfig.reverse))
     });
 
     // Increment the offset for the next axis

package/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.d.mts

@@ -1,6 +1,15 @@
-import { type AxisId } from "../../../../models/axis.mjs";
+import { type AxisId, type ScaleName } from "../../../../models/axis.mjs";
 import { type DefaultizedZoomOptions } from "./useChartCartesianAxis.types.mjs";
 import { type ZoomOptions } from "./zoom.types.mjs";
+/**
+ * Ordinal Y axes (band/point) render with `domain[0]` at the top of the chart
+ * (see the `range.reverse()` applied in `selectorChartYScales`), which is the
+ * opposite of the cartesian convention assumed by the zoom/pan math.
+ *
+ * Returns the `reverse` flag the zoom handlers should use so that pan/wheel
+ * gestures follow the visual direction of the axis.
+ */
+export declare const getEffectiveZoomReverse: (axisDirection: "x" | "y", scaleType: ScaleName | undefined, reverse: boolean | undefined) => boolean;
 export declare const defaultZoomOptions: {
   minStart: number;
   maxEnd: number;

package/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.d.ts

@@ -1,6 +1,15 @@
-import { type AxisId } from "../../../../models/axis.js";
+import { type AxisId, type ScaleName } from "../../../../models/axis.js";
 import { type DefaultizedZoomOptions } from "./useChartCartesianAxis.types.js";
 import { type ZoomOptions } from "./zoom.types.js";
+/**
+ * Ordinal Y axes (band/point) render with `domain[0]` at the top of the chart
+ * (see the `range.reverse()` applied in `selectorChartYScales`), which is the
+ * opposite of the cartesian convention assumed by the zoom/pan math.
+ *
+ * Returns the `reverse` flag the zoom handlers should use so that pan/wheel
+ * gestures follow the visual direction of the axis.
+ */
+export declare const getEffectiveZoomReverse: (axisDirection: "x" | "y", scaleType: ScaleName | undefined, reverse: boolean | undefined) => boolean;
 export declare const defaultZoomOptions: {
   minStart: number;
   maxEnd: number;

package/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.js

@@ -4,9 +4,26 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultizeZoom = exports.defaultZoomOptions = void 0;
+exports.getEffectiveZoomReverse = exports.defaultizeZoom = exports.defaultZoomOptions = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _constants = require("../../../constants");
+/**
+ * Ordinal Y axes (band/point) render with `domain[0]` at the top of the chart
+ * (see the `range.reverse()` applied in `selectorChartYScales`), which is the
+ * opposite of the cartesian convention assumed by the zoom/pan math.
+ *
+ * Returns the `reverse` flag the zoom handlers should use so that pan/wheel
+ * gestures follow the visual direction of the axis.
+ */
+const getEffectiveZoomReverse = (axisDirection, scaleType, reverse) => {
+  const resolvedReverse = reverse ?? false;
+  const isOrdinal = scaleType === 'band' || scaleType === 'point';
+  if (axisDirection === 'y' && isOrdinal) {
+    return !resolvedReverse;
+  }
+  return resolvedReverse;
+};
+exports.getEffectiveZoomReverse = getEffectiveZoomReverse;
 const defaultZoomOptions = exports.defaultZoomOptions = {
   minStart: 0,
   maxEnd: 100,

package/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.mjs

@@ -1,5 +1,21 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { DEFAULT_ZOOM_SLIDER_PREVIEW_SIZE, DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP, DEFAULT_ZOOM_SLIDER_SIZE } from "../../../constants.mjs";
+/**
+ * Ordinal Y axes (band/point) render with `domain[0]` at the top of the chart
+ * (see the `range.reverse()` applied in `selectorChartYScales`), which is the
+ * opposite of the cartesian convention assumed by the zoom/pan math.
+ *
+ * Returns the `reverse` flag the zoom handlers should use so that pan/wheel
+ * gestures follow the visual direction of the axis.
+ */
+export const getEffectiveZoomReverse = (axisDirection, scaleType, reverse) => {
+  const resolvedReverse = reverse ?? false;
+  const isOrdinal = scaleType === 'band' || scaleType === 'point';
+  if (axisDirection === 'y' && isOrdinal) {
+    return !resolvedReverse;
+  }
+  return resolvedReverse;
+};
 export const defaultZoomOptions = {
   minStart: 0,
   maxEnd: 100,

package/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisScale.js

@@ -13,14 +13,39 @@ function getRange(drawingArea, axisDirection, axis) {
   const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return axis.reverse ? [range[1], range[0]] : range;
 }
+
+/**
+ * Caches the normalized ordinal scale so it is not rebuilt on every pan/zoom frame. Building a
+ * band/point scale is `O(domain)` — it interns the whole domain — which is prohibitive for large
+ * category axes when zooming. The domain array (the axis `data`) is referentially stable across
+ * zoom, so it is the outer key; a `WeakMap` lets unused domains be collected. The inner key is the
+ * scale variant (type + padding), because the same domain array can back several axes (e.g. a `band`
+ * and a `point` axis sharing one `data` array), which must not share a scale. Continuous scales are
+ * not cached: they are cheap to build and their domain reference changes with zoom anyway, so a
+ * cache would only ever miss.
+ */
+const normalizedScaleCache = new WeakMap();
+function getCachedOrdinalScale(domain, variant, build) {
+  let variants = normalizedScaleCache.get(domain);
+  if (!variants) {
+    variants = new Map();
+    normalizedScaleCache.set(domain, variants);
+  }
+  let scale = variants.get(variant);
+  if (!scale) {
+    scale = build();
+    variants.set(variant, scale);
+  }
+  return scale;
+}
 function getNormalizedAxisScale(axis, domain) {
   const range = [0, 1];
   if ((0, _axis.isBandScaleConfig)(axis)) {
     const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
-    return (0, _scales.scaleBand)(domain, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2);
+    return getCachedOrdinalScale(domain, `band:${categoryGapRatio}`, () => (0, _scales.scaleBand)(domain, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2));
   }
   if ((0, _axis.isPointScaleConfig)(axis)) {
-    return (0, _scales.scalePoint)(domain, range);
+    return getCachedOrdinalScale(domain, 'point', () => (0, _scales.scalePoint)(domain, range));
   }
   const scaleType = axis.scaleType ?? 'linear';
   const scale = (0, _getScale.getScale)(scaleType, domain, range);

package/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisScale.mjs

@@ -6,14 +6,39 @@ export function getRange(drawingArea, axisDirection, axis) {
   const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return axis.reverse ? [range[1], range[0]] : range;
 }
+
+/**
+ * Caches the normalized ordinal scale so it is not rebuilt on every pan/zoom frame. Building a
+ * band/point scale is `O(domain)` — it interns the whole domain — which is prohibitive for large
+ * category axes when zooming. The domain array (the axis `data`) is referentially stable across
+ * zoom, so it is the outer key; a `WeakMap` lets unused domains be collected. The inner key is the
+ * scale variant (type + padding), because the same domain array can back several axes (e.g. a `band`
+ * and a `point` axis sharing one `data` array), which must not share a scale. Continuous scales are
+ * not cached: they are cheap to build and their domain reference changes with zoom anyway, so a
+ * cache would only ever miss.
+ */
+const normalizedScaleCache = new WeakMap();
+function getCachedOrdinalScale(domain, variant, build) {
+  let variants = normalizedScaleCache.get(domain);
+  if (!variants) {
+    variants = new Map();
+    normalizedScaleCache.set(domain, variants);
+  }
+  let scale = variants.get(variant);
+  if (!scale) {
+    scale = build();
+    variants.set(variant, scale);
+  }
+  return scale;
+}
 export function getNormalizedAxisScale(axis, domain) {
   const range = [0, 1];
   if (isBandScaleConfig(axis)) {
     const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
-    return scaleBand(domain, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2);
+    return getCachedOrdinalScale(domain, `band:${categoryGapRatio}`, () => scaleBand(domain, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2));
   }
   if (isPointScaleConfig(axis)) {
-    return scalePoint(domain, range);
+    return getCachedOrdinalScale(domain, 'point', () => scalePoint(domain, range));
   }
   const scaleType = axis.scaleType ?? 'linear';
   const scale = getScale(scaleType, domain, range);

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.js

@@ -14,7 +14,6 @@ var _store = require("@mui/x-internals/store");
 var _useAssertModelConsistency = require("@mui/x-internals/useAssertModelConsistency");
 var _warning = require("@mui/x-internals/warning");
 var _colorPalettes = require("../../../../colorPalettes");
-var _useChartDimensions = require("../../corePlugins/useChartDimensions/useChartDimensions.selectors");
 var _useChartSeries = require("../../corePlugins/useChartSeries/useChartSeries.selectors");
 var _defaultizeAxis = require("./defaultizeAxis");
 var _useChartCartesianAxisRendering = require("./useChartCartesianAxisRendering.selectors");
@@ -47,7 +46,6 @@ const useChartCartesianAxis = ({
       (0, _warning.warnOnce)([`MUI X Charts: The following axis ids are duplicated: ${Array.from(duplicates).join(', ')}.`, `Please make sure that each axis has a unique id.`].join('\n'), 'error');
     }
   }
-  const drawingArea = store.use(_useChartDimensions.selectorChartDrawingArea);
   const processedSeries = store.use(_useChartSeries.selectorChartSeriesProcessed);
   const isInteractionEnabled = store.use(_useChartInteraction.selectorChartsInteractionIsInitialized);
   const {
@@ -96,7 +94,7 @@ const useChartCartesianAxis = ({
       x: (0, _defaultizeAxis.defaultizeXAxis)(xAxis, dataset, axesGap),
       y: (0, _defaultizeAxis.defaultizeYAxis)(yAxis, dataset, axesGap)
     });
-  }, [drawingArea, xAxis, yAxis, dataset, axesGap, store]);
+  }, [xAxis, yAxis, dataset, axesGap, store]);
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
   (0, _store.useStoreEffect)(store, _useChartCartesianInteraction.selectorChartAxisInteraction, (prevAxisInteraction, nextAxisInteraction) => {

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.mjs

@@ -7,7 +7,6 @@ import { useStoreEffect } from '@mui/x-internals/store';
 import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsistency';
 import { warnOnce } from '@mui/x-internals/warning';
 import { rainbowSurgePalette } from "../../../../colorPalettes/index.mjs";
-import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/useChartDimensions.selectors.mjs";
 import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/useChartSeries.selectors.mjs";
 import { defaultizeXAxis, defaultizeYAxis } from "./defaultizeAxis.mjs";
 import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisRendering.selectors.mjs";
@@ -40,7 +39,6 @@ export const useChartCartesianAxis = ({
       warnOnce([`MUI X Charts: The following axis ids are duplicated: ${Array.from(duplicates).join(', ')}.`, `Please make sure that each axis has a unique id.`].join('\n'), 'error');
     }
   }
-  const drawingArea = store.use(selectorChartDrawingArea);
   const processedSeries = store.use(selectorChartSeriesProcessed);
   const isInteractionEnabled = store.use(selectorChartsInteractionIsInitialized);
   const {
@@ -89,7 +87,7 @@ export const useChartCartesianAxis = ({
       x: defaultizeXAxis(xAxis, dataset, axesGap),
       y: defaultizeYAxis(yAxis, dataset, axesGap)
     });
-  }, [drawingArea, xAxis, yAxis, dataset, axesGap, store]);
+  }, [xAxis, yAxis, dataset, axesGap, store]);
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
   useStoreEffect(store, selectorChartAxisInteraction, (prevAxisInteraction, nextAxisInteraction) => {

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.d.mts

@@ -164,6 +164,7 @@ export declare const selectorChartRawAxis: (args_0: import("../../corePlugins/us
     min: NumberValue;
     max: NumberValue;
   });
+  domainSeries?: "all" | "visible";
   ignoreTooltip?: boolean;
 } & Omit<Partial<import("../../../index.mjs").ChartsYAxisProps>, "axisId"> & Partial<Omit<{
   scaleType: "linear";
@@ -223,7 +224,14 @@ export declare const selectorChartDefaultXAxisId: (args_0: import("../../corePlu
 export declare const selectorChartDefaultYAxisId: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.mjs").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
 }) => AxisId;
-export declare const selectorChartSeriesEmptyFlatbushMap: () => Map<string, Flatbush>;
-export declare const selectorChartSeriesFlatbushMap: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<{}> & {
+export type ScatterFlatbushEntry = {
+  flatbush: Flatbush;
+  /** Per-point marker radius, in pixels. */
+  getItemRadius: number | ((dataIndex: number) => number);
+  /** Largest radius across all points in this series, in pixels. */
+  maxItemRadius: number;
+};
+export declare const selectorChartSeriesEmptyFlatbushMap: () => Map<string, ScatterFlatbushEntry>;
+export declare const selectorChartSeriesFlatbushMap: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & import("../useChartZAxis/index.mjs").UseChartZAxisState & Partial<{}> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
-}) => Map<string, Flatbush>;
+}) => Map<string, ScatterFlatbushEntry>;

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.d.ts

@@ -164,6 +164,7 @@ export declare const selectorChartRawAxis: (args_0: import("../../corePlugins/us
     min: NumberValue;
     max: NumberValue;
   });
+  domainSeries?: "all" | "visible";
   ignoreTooltip?: boolean;
 } & Omit<Partial<import("../../../index.js").ChartsYAxisProps>, "axisId"> & Partial<Omit<{
   scaleType: "linear";
@@ -223,7 +224,14 @@ export declare const selectorChartDefaultXAxisId: (args_0: import("../../corePlu
 export declare const selectorChartDefaultYAxisId: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => AxisId;
-export declare const selectorChartSeriesEmptyFlatbushMap: () => Map<string, Flatbush>;
-export declare const selectorChartSeriesFlatbushMap: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
+export type ScatterFlatbushEntry = {
+  flatbush: Flatbush;
+  /** Per-point marker radius, in pixels. */
+  getItemRadius: number | ((dataIndex: number) => number);
+  /** Largest radius across all points in this series, in pixels. */
+  maxItemRadius: number;
+};
+export declare const selectorChartSeriesEmptyFlatbushMap: () => Map<string, ScatterFlatbushEntry>;
+export declare const selectorChartSeriesFlatbushMap: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & import("../useChartZAxis/index.js").UseChartZAxisState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => Map<string, Flatbush>;
+}) => Map<string, ScatterFlatbushEntry>;