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

package/esm/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.selectors.d.ts

@@ -0,0 +1,6 @@
+import { type ChartRootSelector } from "../../utils/selectors.js";
+import { type UseChartSeriesConfigSignature } from "./useChartSeriesConfig.types.js";
+export declare const selectorChartSeriesConfigState: ChartRootSelector<UseChartSeriesConfigSignature>;
+export declare const selectorChartSeriesConfig: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => import("./types/index.js").ChartSeriesConfig<keyof import("../../../index.js").ChartsSeriesConfig>;

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

@@ -0,0 +1,3 @@
+import { createSelector } from '@mui/x-internals/store';
+export const selectorChartSeriesConfigState = state => state.seriesConfig;
+export const selectorChartSeriesConfig = createSelector(selectorChartSeriesConfigState, seriesConfigState => seriesConfigState.config);

package/esm/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/esm/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js

@@ -0,0 +1 @@
+export {};

package/esm/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/esm/internals/plugins/corePlugins/useChartSeriesConfig/utils/cleanIdentifier.js

@@ -0,0 +1,18 @@
+/**
+ * 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 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);
+};

package/esm/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/esm/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/esm/internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.js

@@ -5,7 +5,7 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import { useSvgRef } from "../../../../hooks/index.js";
 import { useStore } from "../../../store/useStore.js";
 import { useChartContext } from "../../../../context/ChartProvider/index.js";
-import { getSVGPoint } from "../../../getSVGPoint.js";
+import { getChartPoint } from "../../../getChartPoint.js";
 /**
  * Hook to get pointer interaction props for chart items.
  */
@@ -41,7 +41,7 @@ export function useRegisterPointerInteractions(getItemAtPosition, onItemEnter, o
       reset();
     }
     const onPointerMove = function onPointerMove(event) {
-      const svgPoint = getSVGPoint(svg, event);
+      const svgPoint = getChartPoint(svg, event);
       if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
         reset();
         return;

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

@@ -4,14 +4,16 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import useEventCallback from '@mui/utils/useEventCallback';
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { getSVGPoint } from "../../../getSVGPoint.js";
+import { getChartPoint } from "../../../getChartPoint.js";
 import { selectorIsBrushEnabled } from "./useChartBrush.selectors.js";
 export const useChartBrush = ({
   store,
-  svgRef,
   instance,
   params
 }) => {
+  const {
+    svgRef
+  } = instance;
   const isEnabled = store.use(selectorIsBrushEnabled);
   useEnhancedEffect(() => {
     store.set('brush', _extends({}, store.state.brush, {
@@ -49,14 +51,14 @@ export const useChartBrush = ({
       if (event.detail.target?.closest('[data-charts-zoom-slider]')) {
         return;
       }
-      const point = getSVGPoint(element, {
+      const point = getChartPoint(element, {
         clientX: event.detail.initialCentroid.x,
         clientY: event.detail.initialCentroid.y
       });
       setBrushCoordinates(point);
     };
     const handleBrush = event => {
-      const currentPoint = getSVGPoint(element, {
+      const currentPoint = getChartPoint(element, {
         clientX: event.detail.centroid.x,
         clientY: event.detail.centroid.y
       });

package/esm/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/esm/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/esm/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/esm/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { defaultizeZoom } from "./defaultizeZoom.js";
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY, DEFAULT_AXIS_SIZE_HEIGHT, DEFAULT_AXIS_SIZE_WIDTH, AXIS_LABEL_DEFAULT_HEIGHT } from "../../../../constants/index.js";
-export function defaultizeXAxis(inAxes, dataset) {
+export function defaultizeXAxis(inAxes, dataset, axesGap) {
   const offsets = {
     top: 0,
     bottom: 0,
@@ -30,7 +30,7 @@ export 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;
       }
@@ -51,7 +51,7 @@ export function defaultizeXAxis(inAxes, dataset) {
   });
   return parsedAxes;
 }
-export function defaultizeYAxis(inAxes, dataset) {
+export function defaultizeYAxis(inAxes, dataset, axesGap) {
   const offsets = {
     right: 0,
     left: 0,
@@ -80,7 +80,7 @@ export 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/esm/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/esm/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/esm/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/esm/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/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors.js

@@ -1,16 +1,29 @@
 import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
-import { selectorChartRawXAxis, selectorChartRawYAxis } from "./useChartCartesianAxisLayout.selectors.js";
-export const selectorChartLeftAxisSize = createSelector(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);
+import { selectorChartCartesianAxesGap, selectorChartRawXAxis, selectorChartRawYAxis } from "./useChartCartesianAxisLayout.selectors.js";
+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);
+}
+export const selectorChartLeftAxisSize = createSelector(selectorChartRawYAxis, selectorChartCartesianAxesGap, function selectorChartLeftAxisSize(yAxis, axesGap) {
+  return selectAxisSize(yAxis, axesGap, 'left');
 });
-export const selectorChartRightAxisSize = createSelector(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);
+export const selectorChartRightAxisSize = createSelector(selectorChartRawYAxis, selectorChartCartesianAxesGap, function selectorChartRightAxisSize(yAxis, axesGap) {
+  return selectAxisSize(yAxis, axesGap, 'right');
 });
-export const selectorChartTopAxisSize = createSelector(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);
+export const selectorChartTopAxisSize = createSelector(selectorChartRawXAxis, selectorChartCartesianAxesGap, function selectorChartTopAxisSize(xAxis, axesGap) {
+  return selectAxisSize(xAxis, axesGap, 'top');
 });
-export const selectorChartBottomAxisSize = createSelector(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);
+export const selectorChartBottomAxisSize = createSelector(selectorChartRawXAxis, selectorChartCartesianAxesGap, function selectorChartBottomAxisSize(xAxis, axesGap) {
+  return selectAxisSize(xAxis, axesGap, 'bottom');
 });
 export const selectorChartAxisSizes = createSelectorMemoized(selectorChartLeftAxisSize, selectorChartRightAxisSize, selectorChartTopAxisSize, selectorChartBottomAxisSize, function selectorChartAxisSizes(left, right, top, bottom) {
   return {

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

@@ -12,7 +12,7 @@ import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/u
 import { defaultizeXAxis, defaultizeYAxis } from "./defaultizeAxis.js";
 import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisRendering.selectors.js";
 import { getAxisIndex } from "./getAxisValue.js";
-import { getSVGPoint } from "../../../getSVGPoint.js";
+import { getChartPoint } from "../../../getChartPoint.js";
 import { selectorChartsInteractionIsInitialized } from "../useChartInteraction/index.js";
 import { selectorChartAxisInteraction } from "./useChartCartesianInteraction.selectors.js";
 import { checkHasInteractionPlugin } from "../useChartInteraction/checkHasInteractionPlugin.js";
@@ -20,15 +20,17 @@ const AXIS_CLICK_SERIES_TYPES = new Set(['bar', 'rangeBar', 'line']);
 export 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);
@@ -70,10 +72,11 @@ export const useChartCartesianAxis = ({
       return;
     }
     store.set('cartesianAxis', {
-      x: defaultizeXAxis(xAxis, dataset),
-      y: defaultizeYAxis(yAxis, dataset)
+      axesGap,
+      x: defaultizeXAxis(xAxis, dataset, axesGap),
+      y: defaultizeYAxis(yAxis, dataset, axesGap)
     });
-  }, [seriesConfig, drawingArea, xAxis, yAxis, dataset, store]);
+  }, [drawingArea, xAxis, yAxis, dataset, axesGap, store]);
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
   useStoreEffect(store, selectorChartAxisInteraction, (prevAxisInteraction, nextAxisInteraction) => {
@@ -120,7 +123,7 @@ export const useChartCartesianAxis = ({
     const gestureHandler = event => {
       const srvEvent = event.detail.srcEvent;
       const target = event.detail.target;
-      const svgPoint = getSVGPoint(element, srvEvent);
+      const svgPoint = 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.
@@ -154,7 +157,7 @@ export const useChartCartesianAxis = ({
     const axisClickHandler = instance.addInteractionListener('tap', event => {
       let dataIndex = null;
       let isXAxis = false;
-      const svgPoint = getSVGPoint(element, event.detail.srcEvent);
+      const svgPoint = getChartPoint(element, event.detail.srcEvent);
       const xIndex = getAxisIndex(xAxisWithScale[usedXAxis], svgPoint.x);
       isXAxis = xIndex !== -1;
       dataIndex = isXAxis ? xIndex : getAxisIndex(yAxisWithScale[usedYAxis], svgPoint.y);
@@ -202,20 +205,23 @@ useChartCartesianAxis.params = {
   onAxisClick: true,
   disableAxisListener: true,
   onHighlightedAxisChange: true,
-  highlightedAxis: true
+  highlightedAxis: true,
+  axesGap: true
 };
 useChartCartesianAxis.getDefaultizedParams = ({
   params
 }) => {
   return _extends({}, params, {
+    axesGap: params.axesGap ?? 0,
     colors: params.colors ?? rainbowSurgePalette,
     theme: params.theme ?? 'light',
-    defaultizedXAxis: defaultizeXAxis(params.xAxis, params.dataset),
-    defaultizedYAxis: defaultizeYAxis(params.yAxis, params.dataset)
+    defaultizedXAxis: defaultizeXAxis(params.xAxis, params.dataset, params.axesGap ?? 0),
+    defaultizedYAxis: defaultizeYAxis(params.yAxis, params.dataset, params.axesGap ?? 0)
   });
 };
 useChartCartesianAxis.getInitialState = params => _extends({
   cartesianAxis: {
+    axesGap: params.axesGap,
     x: params.defaultizedXAxis,
     y: params.defaultizedYAxis
   }

package/esm/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[];
   };

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisLayout.selectors.d.ts

@@ -2,10 +2,12 @@ import { type UseChartCartesianAxisSignature } from "./useChartCartesianAxis.typ
 import { type DefaultedXAxis, type DefaultedYAxis } from "../../../../models/axis.js";
 import { type ChartState } from "../../models/chart.js";
 export declare const selectorChartCartesianAxisState: (state: ChartState<[], [UseChartCartesianAxisSignature]>) => {
+  axesGap: number;
   x: DefaultedXAxis[];
   y: DefaultedYAxis[];
 } | undefined;
 export type SelectorChartRawXAxisType = <State extends ChartState<[], [UseChartCartesianAxisSignature]>>(state: State) => DefaultedXAxis[] | undefined;
 export declare const selectorChartRawXAxis: SelectorChartRawXAxisType;
 export type SelectorChartRawYAxisType = <State extends ChartState<[], [UseChartCartesianAxisSignature]>>(state: State) => DefaultedYAxis[] | undefined;
-export declare const selectorChartRawYAxis: SelectorChartRawYAxisType;
+export declare const selectorChartRawYAxis: SelectorChartRawYAxisType;
+export declare const selectorChartCartesianAxesGap: (state: ChartState<[], [UseChartCartesianAxisSignature]>) => number;