@mui/x-charts 8.27.0 → 9.0.0-alpha.0

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

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorChartSeriesConfigState = exports.selectorChartSeriesConfig = void 0;
+var _store = require("@mui/x-internals/store");
+const selectorChartSeriesConfigState = state => state.seriesConfig;
+exports.selectorChartSeriesConfigState = selectorChartSeriesConfigState;
+const selectorChartSeriesConfig = exports.selectorChartSeriesConfig = (0, _store.createSelector)(selectorChartSeriesConfigState, seriesConfigState => seriesConfigState.config);

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

@@ -0,0 +1,48 @@
+import { type ChartPluginSignature } from "../../models/index.js";
+import { type ChartSeriesConfig } from "./types/seriesConfig.types.js";
+import { type ChartSeriesType } from "../../../../models/seriesType/config.js";
+import { type SeriesItemIdentifier } from "../../../../models/seriesType/index.js";
+export interface UseChartSeriesConfigParameters<T extends ChartSeriesType = ChartSeriesType> {
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: ChartSeriesConfig<T>;
+}
+export type UseChartSeriesConfigDefaultizedParameters<T extends ChartSeriesType = ChartSeriesType> = UseChartSeriesConfigParameters<T> & {
+  seriesConfig: ChartSeriesConfig<T>;
+};
+export interface UseChartSeriesConfigState<T extends ChartSeriesType = ChartSeriesType> {
+  seriesConfig: {
+    config: ChartSeriesConfig<T>;
+  };
+}
+export type SerializeIdentifierFunction = <T extends {
+  type: ChartSeriesType;
+}>(identifier: T) => string;
+export type CleanIdentifierFunction = <T extends {
+  type: ChartSeriesType;
+}>(identifier: T) => SeriesItemIdentifier<T['type']>;
+export interface UseChartSeriesConfigInstance {
+  /**
+   * Function to serialize a series item identifier into a unique string.
+   *
+   * @param identifier The identifier to serialize.
+   * @returns A unique string representing the identifier.
+   */
+  serializeIdentifier: SerializeIdentifierFunction;
+  /**
+   * Function to clean a series item identifier, returning only the properties
+   * relevant to the series type.
+   *
+   * @param identifier The partial identifier to clean.
+   * @returns A cleaned identifier with only the relevant properties.
+   */
+  cleanIdentifier: CleanIdentifierFunction;
+}
+export type UseChartSeriesConfigSignature<T extends ChartSeriesType = ChartSeriesType> = ChartPluginSignature<{
+  params: UseChartSeriesConfigParameters<T>;
+  defaultizedParams: UseChartSeriesConfigDefaultizedParameters<T>;
+  state: UseChartSeriesConfigState<T>;
+  instance: UseChartSeriesConfigInstance;
+}>;

package/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/internals/plugins/corePlugins/useChartSeriesConfig/utils/cleanIdentifier.d.ts

@@ -0,0 +1,15 @@
+import type { SeriesItemIdentifier } from "../../../../../models/index.js";
+import type { ChartSeriesType } from "../../../../../models/seriesType/config.js";
+import type { ChartSeriesConfig } from "../types/index.js";
+/**
+ * Cleans a series item identifier by extracting only the relevant properties
+ * using the appropriate cleaner from the provided series configuration.
+ *
+ * @param {ChartSeriesConfig<ChartSeriesType>} seriesConfig - The configuration object for chart series.
+ * @param {object} identifier - The series item identifier to clean.
+ * @returns {object} A cleaned identifier object with only the properties relevant to the series type.
+ * @throws Will throw an error if no cleaner is found for the given series type.
+ */
+export declare const cleanIdentifier: <T extends ChartSeriesType, U extends {
+  type: T;
+}>(seriesConfig: ChartSeriesConfig<T>, identifier: U) => SeriesItemIdentifier<T>;

package/internals/plugins/corePlugins/useChartSeriesConfig/utils/cleanIdentifier.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cleanIdentifier = void 0;
+/**
+ * Cleans a series item identifier by extracting only the relevant properties
+ * using the appropriate cleaner from the provided series configuration.
+ *
+ * @param {ChartSeriesConfig<ChartSeriesType>} seriesConfig - The configuration object for chart series.
+ * @param {object} identifier - The series item identifier to clean.
+ * @returns {object} A cleaned identifier object with only the properties relevant to the series type.
+ * @throws Will throw an error if no cleaner is found for the given series type.
+ */
+const cleanIdentifier = (seriesConfig, identifier) => {
+  const cleaner = seriesConfig[identifier.type]?.identifierCleaner;
+  if (!cleaner) {
+    throw new Error(`MUI X Charts: No identifier cleaner found for series type "${identifier.type}".`);
+  }
+  // @ts-expect-error identifierCleaner expects the full object,
+  // but this function accepts a partial one in order to be able to clean all identifiers.
+  return cleaner(identifier);
+};
+exports.cleanIdentifier = cleanIdentifier;

package/internals/plugins/corePlugins/{useChartSeries → useChartSeriesConfig/utils}/serializeIdentifier.d.ts

@@ -1,5 +1,5 @@
-import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
-import type { ChartSeriesConfig } from "../../models/index.js";
+import type { ChartSeriesType } from "../../../../../models/seriesType/config.js";
+import type { ChartSeriesConfig } from "../types/index.js";
 /**
  * Serializes a series item identifier into a unique string using the appropriate serializer
  * from the provided series configuration.

package/internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.d.ts

@@ -1,11 +1,12 @@
 import { type SeriesItemIdentifier } from "../../../../models/seriesType/index.js";
+import { type ChartSeriesType } from "../../../../models/seriesType/config.js";
 import { type UseChartHighlightSignature } from "../useChartHighlight/index.js";
 import { type UseChartCartesianAxisSignature } from "../useChartCartesianAxis/index.js";
 import { type ChartState } from "../../models/index.js";
 /**
  * Hook to get pointer interaction props for chart items.
  */
-export declare function useRegisterPointerInteractions(getItemAtPosition: (state: ChartState<[UseChartCartesianAxisSignature, UseChartHighlightSignature]>, point: {
+export declare function useRegisterPointerInteractions<SeriesType extends ChartSeriesType>(getItemAtPosition: (state: ChartState<[UseChartCartesianAxisSignature, UseChartHighlightSignature]>, point: {
   x: number;
   y: number;
-}) => SeriesItemIdentifier | undefined, onItemEnter?: () => void, onItemLeave?: () => void): void;
+}) => SeriesItemIdentifier<SeriesType> | undefined, onItemEnter?: () => void, onItemLeave?: () => void): void;

package/internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.js

@@ -12,7 +12,7 @@ var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallb
 var _hooks = require("../../../../hooks");
 var _useStore = require("../../../store/useStore");
 var _ChartProvider = require("../../../../context/ChartProvider");
-var _getSVGPoint = require("../../../getSVGPoint");
+var _getChartPoint = require("../../../getChartPoint");
 /**
  * Hook to get pointer interaction props for chart items.
  */
@@ -48,7 +48,7 @@ function useRegisterPointerInteractions(getItemAtPosition, onItemEnter, onItemLe
       reset();
     }
     const onPointerMove = function onPointerMove(event) {
-      const svgPoint = (0, _getSVGPoint.getSVGPoint)(svg, event);
+      const svgPoint = (0, _getChartPoint.getChartPoint)(svg, event);
       if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
         reset();
         return;

package/internals/plugins/featurePlugins/useChartBrush/useChartBrush.js

@@ -11,14 +11,16 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
-var _getSVGPoint = require("../../../getSVGPoint");
+var _getChartPoint = require("../../../getChartPoint");
 var _useChartBrush = require("./useChartBrush.selectors");
 const useChartBrush = ({
   store,
-  svgRef,
   instance,
   params
 }) => {
+  const {
+    svgRef
+  } = instance;
   const isEnabled = store.use(_useChartBrush.selectorIsBrushEnabled);
   (0, _useEnhancedEffect.default)(() => {
     store.set('brush', (0, _extends2.default)({}, store.state.brush, {
@@ -56,14 +58,14 @@ const useChartBrush = ({
       if (event.detail.target?.closest('[data-charts-zoom-slider]')) {
         return;
       }
-      const point = (0, _getSVGPoint.getSVGPoint)(element, {
+      const point = (0, _getChartPoint.getChartPoint)(element, {
         clientX: event.detail.initialCentroid.x,
         clientY: event.detail.initialCentroid.y
       });
       setBrushCoordinates(point);
     };
     const handleBrush = event => {
-      const currentPoint = (0, _getSVGPoint.getSVGPoint)(element, {
+      const currentPoint = (0, _getChartPoint.getChartPoint)(element, {
         clientX: event.detail.centroid.x,
         clientY: event.detail.centroid.y
       });

package/internals/plugins/featurePlugins/useChartBrush/useChartBrush.selectors.d.ts

@@ -1,25 +1,25 @@
 import type { ChartOptionalRootSelector } from "../../utils/selectors.js";
 import type { UseChartBrushSignature } from "./useChartBrush.types.js";
 export declare const selectorBrush: ChartOptionalRootSelector<UseChartBrushSignature>;
-export declare const selectorBrushStart: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("./useChartBrush.types.js").UseChartBrushState> & {
+export declare const selectorBrushStart: (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("./useChartBrush.types.js").UseChartBrushState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => import("./useChartBrush.types.js").Point | null | undefined;
-export declare const selectorBrushCurrent: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("./useChartBrush.types.js").UseChartBrushState> & {
+export declare const selectorBrushCurrent: (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("./useChartBrush.types.js").UseChartBrushState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => import("./useChartBrush.types.js").Point | null | undefined;
-export declare const selectorBrushStartX: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("./useChartBrush.types.js").UseChartBrushState> & {
+export declare const selectorBrushStartX: (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("./useChartBrush.types.js").UseChartBrushState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => number | null;
-export declare const selectorBrushStartY: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("./useChartBrush.types.js").UseChartBrushState> & {
+export declare const selectorBrushStartY: (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("./useChartBrush.types.js").UseChartBrushState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => number | null;
-export declare const selectorBrushCurrentX: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("./useChartBrush.types.js").UseChartBrushState> & {
+export declare const selectorBrushCurrentX: (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("./useChartBrush.types.js").UseChartBrushState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => number | null;
-export declare const selectorBrushCurrentY: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("./useChartBrush.types.js").UseChartBrushState> & {
+export declare const selectorBrushCurrentY: (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("./useChartBrush.types.js").UseChartBrushState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => number | null;
-export declare const selectorBrushState: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("./useChartBrush.types.js").UseChartBrushState> & {
+export declare const selectorBrushState: (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("./useChartBrush.types.js").UseChartBrushState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => {
   start: {
@@ -31,24 +31,24 @@ export declare const selectorBrushState: (args_0: import("../../corePlugins/useC
     y: number;
   };
 } | null;
-export declare const selectorBrushConfigNoZoom: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 declare const selectorBrushConfigNoZoom: (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<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => "x" | "y" | "xy";
-export declare const selectorBrushConfigZoom: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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/index.js").UseChartCartesianAxisState> & {
+export declare const selectorBrushConfigZoom: (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/index.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => "x" | "y" | "xy" | null;
-export declare const selectorBrushConfig: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 declare const selectorBrushConfig: (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<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => "x" | "y" | "xy";
-export declare const selectorIsBrushEnabled: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("./useChartBrush.types.js").UseChartBrushState> & {
+export declare const selectorIsBrushEnabled: (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("./useChartBrush.types.js").UseChartBrushState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => boolean | undefined;
-export declare const selectorIsBrushSelectionActive: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("./useChartBrush.types.js").UseChartBrushState> & {
+export declare const selectorIsBrushSelectionActive: (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("./useChartBrush.types.js").UseChartBrushState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => boolean | undefined;
-export declare const selectorBrushShouldPreventAxisHighlight: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("./useChartBrush.types.js").UseChartBrushState> & {
+export declare const selectorBrushShouldPreventAxisHighlight: (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("./useChartBrush.types.js").UseChartBrushState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => boolean | undefined;
-export declare const selectorBrushShouldPreventTooltip: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("./useChartBrush.types.js").UseChartBrushState> & {
+export declare const selectorBrushShouldPreventTooltip: (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("./useChartBrush.types.js").UseChartBrushState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => boolean | undefined;

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

@@ -2,7 +2,7 @@ import { type NumberValue } from '@mui/x-charts-vendor/d3-scale';
 import { type ChartsXAxisProps, type ChartsAxisProps, type ChartsYAxisProps, type AxisId, type DefaultedXAxis, type DefaultedYAxis, type D3Scale } from "../../../../models/axis.js";
 import { type ChartSeriesType } from "../../../../models/seriesType/config.js";
 import type { ChartDrawingArea } from "../../../../hooks/index.js";
-import { type ChartSeriesConfig } from "../../models/seriesConfig/index.js";
+import { type ChartSeriesConfig } from "../../corePlugins/useChartSeriesConfig/index.js";
 import { type ComputedAxisConfig } from "./useChartCartesianAxis.types.js";
 import { type ProcessedSeries } from "../../corePlugins/useChartSeries/useChartSeries.types.js";
 import { type ZoomData } from "./zoom.types.js";

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

@@ -5,9 +5,9 @@ import { type DatasetType } from "../../../../models/seriesType/config.js";
 type InXAxis = XAxis & {
   zoom?: boolean | ZoomOptions;
 };
-export declare function defaultizeXAxis(inAxes: readonly InXAxis[] | undefined, dataset: Readonly<DatasetType> | undefined): DefaultedXAxis[];
+export declare function defaultizeXAxis(inAxes: readonly InXAxis[] | undefined, dataset: Readonly<DatasetType> | undefined, axesGap: number): DefaultedXAxis[];
 type InYAxis = YAxis & {
   zoom?: boolean | ZoomOptions;
 };
-export declare function defaultizeYAxis(inAxes: readonly InYAxis[] | undefined, dataset: Readonly<DatasetType> | undefined): DefaultedYAxis[];
+export declare function defaultizeYAxis(inAxes: readonly InYAxis[] | undefined, dataset: Readonly<DatasetType> | undefined, axesGap: number): DefaultedYAxis[];
 export {};

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

@@ -9,7 +9,7 @@ exports.defaultizeYAxis = defaultizeYAxis;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defaultizeZoom = require("./defaultizeZoom");
 var _constants = require("../../../../constants");
-function defaultizeXAxis(inAxes, dataset) {
+function defaultizeXAxis(inAxes, dataset, axesGap) {
   const offsets = {
     top: 0,
     bottom: 0,
@@ -38,7 +38,7 @@ function defaultizeXAxis(inAxes, dataset) {
 
     // Increment the offset for the next axis
     if (position !== 'none') {
-      offsets[position] += sharedConfig.height;
+      offsets[position] += sharedConfig.height + axesGap;
       if (sharedConfig.zoom?.slider.enabled) {
         offsets[position] += sharedConfig.zoom.slider.size;
       }
@@ -59,7 +59,7 @@ function defaultizeXAxis(inAxes, dataset) {
   });
   return parsedAxes;
 }
-function defaultizeYAxis(inAxes, dataset) {
+function defaultizeYAxis(inAxes, dataset, axesGap) {
   const offsets = {
     right: 0,
     left: 0,
@@ -88,7 +88,7 @@ function defaultizeYAxis(inAxes, dataset) {
 
     // Increment the offset for the next axis
     if (position !== 'none') {
-      offsets[position] += sharedConfig.width;
+      offsets[position] += sharedConfig.width + axesGap;
       if (sharedConfig.zoom?.slider.enabled) {
         offsets[position] += sharedConfig.zoom.slider.size;
       }

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

@@ -1,7 +1,8 @@
+import { type NumberValue } from '@mui/x-charts-vendor/d3-scale';
 import { type AxisConfig } from "../../../../models/axis.js";
 import { type CartesianChartSeriesType } from "../../../../models/seriesType/config.js";
 import { type ProcessedSeries } from "../../corePlugins/useChartSeries/index.js";
-export declare const getAxisDomainLimit: <T extends CartesianChartSeriesType>(axis: Pick<AxisConfig, "id" | "domainLimit">, axisDirection: "x" | "y", axisIndex: number, formattedSeries: ProcessedSeries<T | "line">) => "nice" | "strict" | ((min: number, max: number) => {
-  min: number;
-  max: number;
+export declare const getAxisDomainLimit: <T extends CartesianChartSeriesType>(axis: Pick<AxisConfig, "id" | "domainLimit">, axisDirection: "x" | "y", axisIndex: number, formattedSeries: ProcessedSeries<T | "line">) => "nice" | "strict" | ((min: NumberValue, max: NumberValue) => {
+  min: NumberValue;
+  max: NumberValue;
 });

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

@@ -1,6 +1,6 @@
 import { type AxisConfig } from "../../../../models/index.js";
 import { type CartesianChartSeriesType } from "../../../../models/seriesType/config.js";
-import { type ChartSeriesConfig } from "../../models/seriesConfig/index.js";
+import { type ChartSeriesConfig } from "../../corePlugins/useChartSeriesConfig/index.js";
 import { type ProcessedSeries } from "../../corePlugins/useChartSeries/useChartSeries.types.js";
 import { type GetZoomAxisFilters } from "./zoom.types.js";
 export declare function getAxisExtrema<T extends CartesianChartSeriesType>(axis: AxisConfig, axisDirection: 'x' | 'y', seriesConfig: ChartSeriesConfig<T>, axisIndex: number, formattedSeries: ProcessedSeries<T>, getFilters?: GetZoomAxisFilters): [number, number];

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

@@ -1,5 +1,5 @@
 import { type CartesianChartSeriesType } from "../../../../models/seriesType/config.js";
-import { type ChartSeriesConfig } from "../../models/seriesConfig/index.js";
+import { type ChartSeriesConfig } from "../../corePlugins/useChartSeriesConfig/index.js";
 import { type ProcessedSeries } from "../../corePlugins/useChartSeries/useChartSeries.types.js";
 import { type AxisId } from "../../../../models/axis.js";
 export declare const getAxisTriggerTooltip: <TSeriesType extends CartesianChartSeriesType>(axisDirection: "x" | "y", seriesConfig: ChartSeriesConfig<TSeriesType>, formattedSeries: ProcessedSeries<TSeriesType>, defaultAxisId: AxisId) => Set<AxisId>;

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

@@ -1,16 +1,16 @@
-export declare const selectorChartLeftAxisSize: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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> & {
+export declare const selectorChartLeftAxisSize: (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;
 }) => number;
-export declare const selectorChartRightAxisSize: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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> & {
+export declare const selectorChartRightAxisSize: (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;
 }) => number;
-export declare const selectorChartTopAxisSize: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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> & {
+export declare const selectorChartTopAxisSize: (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;
 }) => number;
-export declare const selectorChartBottomAxisSize: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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> & {
+export declare const selectorChartBottomAxisSize: (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;
 }) => number;
-export declare const selectorChartAxisSizes: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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> & {
+export declare const selectorChartAxisSizes: (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;
 }) => {
   left: number;

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

@@ -6,17 +6,30 @@ Object.defineProperty(exports, "__esModule", {
 exports.selectorChartTopAxisSize = exports.selectorChartRightAxisSize = exports.selectorChartLeftAxisSize = exports.selectorChartBottomAxisSize = exports.selectorChartAxisSizes = void 0;
 var _store = require("@mui/x-internals/store");
 var _useChartCartesianAxisLayout = require("./useChartCartesianAxisLayout.selectors");
-const selectorChartLeftAxisSize = exports.selectorChartLeftAxisSize = (0, _store.createSelector)(_useChartCartesianAxisLayout.selectorChartRawYAxis, function selectorChartLeftAxisSize(yAxis) {
-  return (yAxis ?? []).reduce((acc, axis) => axis.position === 'left' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0);
+function selectAxisSize(axes, axesGap, position) {
+  let axesSize = 0;
+  let nbOfAxes = 0;
+  for (const axis of axes ?? []) {
+    if (axis.position !== position) {
+      continue;
+    }
+    const axisSize = position === 'top' || position === 'bottom' ? axis.height : axis.width;
+    axesSize += (axisSize || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0);
+    nbOfAxes += 1;
+  }
+  return axesSize + axesGap * Math.max(0, nbOfAxes - 1);
+}
+const selectorChartLeftAxisSize = exports.selectorChartLeftAxisSize = (0, _store.createSelector)(_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartCartesianAxisLayout.selectorChartCartesianAxesGap, function selectorChartLeftAxisSize(yAxis, axesGap) {
+  return selectAxisSize(yAxis, axesGap, 'left');
 });
-const selectorChartRightAxisSize = exports.selectorChartRightAxisSize = (0, _store.createSelector)(_useChartCartesianAxisLayout.selectorChartRawYAxis, function selectorChartRightAxisSize(yAxis) {
-  return (yAxis ?? []).reduce((acc, axis) => axis.position === 'right' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0);
+const selectorChartRightAxisSize = exports.selectorChartRightAxisSize = (0, _store.createSelector)(_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartCartesianAxisLayout.selectorChartCartesianAxesGap, function selectorChartRightAxisSize(yAxis, axesGap) {
+  return selectAxisSize(yAxis, axesGap, 'right');
 });
-const selectorChartTopAxisSize = exports.selectorChartTopAxisSize = (0, _store.createSelector)(_useChartCartesianAxisLayout.selectorChartRawXAxis, function selectorChartTopAxisSize(xAxis) {
-  return (xAxis ?? []).reduce((acc, axis) => axis.position === 'top' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0);
+const selectorChartTopAxisSize = exports.selectorChartTopAxisSize = (0, _store.createSelector)(_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartCartesianAxisLayout.selectorChartCartesianAxesGap, function selectorChartTopAxisSize(xAxis, axesGap) {
+  return selectAxisSize(xAxis, axesGap, 'top');
 });
-const selectorChartBottomAxisSize = exports.selectorChartBottomAxisSize = (0, _store.createSelector)(_useChartCartesianAxisLayout.selectorChartRawXAxis, function selectorChartBottomAxisSize(xAxis) {
-  return (xAxis ?? []).reduce((acc, axis) => axis.position === 'bottom' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0);
+const selectorChartBottomAxisSize = exports.selectorChartBottomAxisSize = (0, _store.createSelector)(_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartCartesianAxisLayout.selectorChartCartesianAxesGap, function selectorChartBottomAxisSize(xAxis, axesGap) {
+  return selectAxisSize(xAxis, axesGap, 'bottom');
 });
 const selectorChartAxisSizes = exports.selectorChartAxisSizes = (0, _store.createSelectorMemoized)(selectorChartLeftAxisSize, selectorChartRightAxisSize, selectorChartTopAxisSize, selectorChartBottomAxisSize, function selectorChartAxisSizes(left, right, top, bottom) {
   return {

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

@@ -19,7 +19,7 @@ var _useChartSeries = require("../../corePlugins/useChartSeries/useChartSeries.s
 var _defaultizeAxis = require("./defaultizeAxis");
 var _useChartCartesianAxisRendering = require("./useChartCartesianAxisRendering.selectors");
 var _getAxisValue = require("./getAxisValue");
-var _getSVGPoint = require("../../../getSVGPoint");
+var _getChartPoint = require("../../../getChartPoint");
 var _useChartInteraction = require("../useChartInteraction");
 var _useChartCartesianInteraction = require("./useChartCartesianInteraction.selectors");
 var _checkHasInteractionPlugin = require("../useChartInteraction/checkHasInteractionPlugin");
@@ -27,15 +27,17 @@ const AXIS_CLICK_SERIES_TYPES = new Set(['bar', 'rangeBar', 'line']);
 const useChartCartesianAxis = ({
   params,
   store,
-  seriesConfig,
-  svgRef,
   instance
 }) => {
+  const {
+    svgRef
+  } = instance;
   const {
     xAxis,
     yAxis,
     dataset,
-    onHighlightedAxisChange
+    onHighlightedAxisChange,
+    axesGap
   } = params;
   if (process.env.NODE_ENV !== 'production') {
     const ids = [...(xAxis ?? []), ...(yAxis ?? [])].filter(axis => axis.id).map(axis => axis.id);
@@ -77,10 +79,11 @@ const useChartCartesianAxis = ({
       return;
     }
     store.set('cartesianAxis', {
-      x: (0, _defaultizeAxis.defaultizeXAxis)(xAxis, dataset),
-      y: (0, _defaultizeAxis.defaultizeYAxis)(yAxis, dataset)
+      axesGap,
+      x: (0, _defaultizeAxis.defaultizeXAxis)(xAxis, dataset, axesGap),
+      y: (0, _defaultizeAxis.defaultizeYAxis)(yAxis, dataset, axesGap)
     });
-  }, [seriesConfig, drawingArea, xAxis, yAxis, dataset, store]);
+  }, [drawingArea, xAxis, yAxis, dataset, axesGap, store]);
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
   (0, _store.useStoreEffect)(store, _useChartCartesianInteraction.selectorChartAxisInteraction, (prevAxisInteraction, nextAxisInteraction) => {
@@ -127,7 +130,7 @@ const useChartCartesianAxis = ({
     const gestureHandler = event => {
       const srvEvent = event.detail.srcEvent;
       const target = event.detail.target;
-      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, srvEvent);
+      const svgPoint = (0, _getChartPoint.getChartPoint)(element, srvEvent);
 
       // Release the pointer capture if we are panning, as this would cause the tooltip to
       // be locked to the first "section" it touches.
@@ -161,7 +164,7 @@ const useChartCartesianAxis = ({
     const axisClickHandler = instance.addInteractionListener('tap', event => {
       let dataIndex = null;
       let isXAxis = false;
-      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event.detail.srcEvent);
+      const svgPoint = (0, _getChartPoint.getChartPoint)(element, event.detail.srcEvent);
       const xIndex = (0, _getAxisValue.getAxisIndex)(xAxisWithScale[usedXAxis], svgPoint.x);
       isXAxis = xIndex !== -1;
       dataIndex = isXAxis ? xIndex : (0, _getAxisValue.getAxisIndex)(yAxisWithScale[usedYAxis], svgPoint.y);
@@ -210,20 +213,23 @@ useChartCartesianAxis.params = {
   onAxisClick: true,
   disableAxisListener: true,
   onHighlightedAxisChange: true,
-  highlightedAxis: true
+  highlightedAxis: true,
+  axesGap: true
 };
 useChartCartesianAxis.getDefaultizedParams = ({
   params
 }) => {
   return (0, _extends2.default)({}, params, {
+    axesGap: params.axesGap ?? 0,
     colors: params.colors ?? _colorPalettes.rainbowSurgePalette,
     theme: params.theme ?? 'light',
-    defaultizedXAxis: (0, _defaultizeAxis.defaultizeXAxis)(params.xAxis, params.dataset),
-    defaultizedYAxis: (0, _defaultizeAxis.defaultizeYAxis)(params.yAxis, params.dataset)
+    defaultizedXAxis: (0, _defaultizeAxis.defaultizeXAxis)(params.xAxis, params.dataset, params.axesGap ?? 0),
+    defaultizedYAxis: (0, _defaultizeAxis.defaultizeYAxis)(params.yAxis, params.dataset, params.axesGap ?? 0)
   });
 };
 useChartCartesianAxis.getInitialState = params => (0, _extends2.default)({
   cartesianAxis: {
+    axesGap: params.axesGap,
     x: params.defaultizedXAxis,
     y: params.defaultizedYAxis
   }

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

@@ -56,8 +56,13 @@ export interface UseChartCartesianAxisParameters<S extends ScaleName = ScaleName
    * @default false
    */
   disableAxisListener?: boolean;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
 }
-export type UseChartCartesianAxisDefaultizedParameters<S extends ScaleName = ScaleName> = UseChartCartesianAxisParameters<S> & {
+export type UseChartCartesianAxisDefaultizedParameters<S extends ScaleName = ScaleName> = UseChartCartesianAxisParameters<S> & Required<Pick<UseChartCartesianAxisParameters<S>, 'axesGap'>> & {
   defaultizedXAxis: DefaultedXAxis<S>[];
   defaultizedYAxis: DefaultedYAxis<S>[];
 };
@@ -79,6 +84,7 @@ export interface UseChartCartesianAxisState {
     zoomData: readonly ZoomData[];
   };
   cartesianAxis: {
+    axesGap: number;
     x: DefaultedXAxis[];
     y: DefaultedYAxis[];
   };