@mui/x-charts 8.11.3 → 8.13.0

package/esm/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.js

@@ -1,48 +1,67 @@
 'use client';
 
 import * as React from 'react';
-import { GestureManager, MoveGesture, PanGesture, PinchGesture, PressGesture, TapGesture, TurnWheelGesture } from '@mui/x-internal-gestures/core';
+import { GestureManager, MoveGesture, PanGesture, PinchGesture, PressGesture, TapAndDragGesture, TapGesture, TurnWheelGesture } from '@mui/x-internal-gestures/core';
 const preventDefault = event => event.preventDefault();
 export const useChartInteractionListener = ({
   svgRef
 }) => {
+  const gestureManagerRef = React.useRef(null);
   React.useEffect(() => {
     const svg = svgRef.current;
-    if (!svg) {
+    if (!gestureManagerRef.current) {
+      gestureManagerRef.current = new GestureManager({
+        gestures: [
+        // We separate the zoom gestures from the gestures that are not zoom related
+        // This allows us to configure the zoom gestures based on the zoom configuration.
+        new PanGesture({
+          name: 'pan',
+          threshold: 0,
+          maxPointers: 1
+        }), new PanGesture({
+          name: 'zoomPan',
+          threshold: 0,
+          maxPointers: 1,
+          preventIf: ['zoomTapAndDrag']
+        }), new MoveGesture({
+          name: 'move',
+          preventIf: ['pan', 'zoomPinch', 'zoomPan'] // Prevent move gesture when pan is active
+        }), new PinchGesture({
+          name: 'zoomPinch',
+          threshold: 5,
+          preventIf: ['pan', 'zoomPan']
+        }), new TurnWheelGesture({
+          name: 'zoomTurnWheel',
+          sensitivity: 0.01,
+          initialDelta: 1
+        }), new TapGesture({
+          name: 'tap',
+          maxDistance: 10,
+          preventIf: ['pan', 'zoomPan', 'zoomPinch']
+        }), new PressGesture({
+          name: 'quickPress',
+          duration: 50,
+          maxDistance: 10
+        }), new TapAndDragGesture({
+          name: 'zoomTapAndDrag',
+          tapMaxDistance: 10,
+          dragThreshold: 10,
+          dragTimeout: 1000
+        })]
+      });
+    }
+
+    // Assign gesture manager after initialization
+    const gestureManager = gestureManagerRef.current;
+    if (!svg || !gestureManager) {
       return undefined;
     }
-    const gestureManager = new GestureManager({
-      gestures: [new PanGesture({
-        name: 'pan',
-        threshold: 0,
-        maxPointers: 1
-      }), new MoveGesture({
-        name: 'move',
-        preventIf: ['pan', 'pinch'] // Prevent move gesture when pan is active
-      }), new PinchGesture({
-        name: 'pinch',
-        threshold: 5,
-        preventIf: ['pan']
-      }), new TurnWheelGesture({
-        name: 'turnWheel',
-        sensitivity: 0.01,
-        initialDelta: 1
-      }), new TapGesture({
-        name: 'tap',
-        maxDistance: 10,
-        preventIf: ['pan', 'pinch']
-      }), new PressGesture({
-        name: 'quickPress',
-        duration: 50,
-        maxDistance: 10
-      })]
-    });
-    gestureManager.registerElement(['pan', 'move', 'pinch', 'turnWheel', 'tap', 'quickPress'], svg);
+    gestureManager.registerElement(['pan', 'move', 'zoomPinch', 'zoomPan', 'zoomTurnWheel', 'tap', 'quickPress', 'zoomTapAndDrag'], svg);
     return () => {
       // Cleanup gesture manager
-      gestureManager.destroy();
+      gestureManager.unregisterAllGestures(svg);
     };
-  }, [svgRef]);
+  }, [svgRef, gestureManagerRef]);
   const addInteractionListener = React.useCallback((interaction, callback, options) => {
     // Forcefully cast the svgRef to any, it is annoying to fix the types.
     const svg = svgRef.current;
@@ -51,6 +70,14 @@ export const useChartInteractionListener = ({
       cleanup: () => svg?.removeEventListener(interaction, callback)
     };
   }, [svgRef]);
+  const updateZoomInteractionListeners = React.useCallback((interaction, options) => {
+    const svg = svgRef.current;
+    const gestureManager = gestureManagerRef.current;
+    if (!gestureManager || !svg) {
+      return;
+    }
+    gestureManager.setGestureOptions(interaction, svg, options ?? {});
+  }, [svgRef, gestureManagerRef]);
   React.useEffect(() => {
     const svg = svgRef.current;
 
@@ -67,7 +94,8 @@ export const useChartInteractionListener = ({
   }, [svgRef]);
   return {
     instance: {
-      addInteractionListener
+      addInteractionListener,
+      updateZoomInteractionListeners
     }
   };
 };

package/esm/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.types.d.ts

@@ -1,16 +1,23 @@
-import { MoveEvent, PanEvent, PinchEvent, PressEvent, TapEvent, TurnWheelEvent } from '@mui/x-internal-gestures/core';
+import { MoveEvent, PanEvent, PanGestureOptions, PinchEvent, PinchGestureOptions, PressEvent, TapEvent, TurnWheelEvent, type TapAndDragEvent, type TapAndDragGestureOptions, type TurnWheelGestureOptions } from '@mui/x-internal-gestures/core';
 import { ChartPluginSignature } from "../../models/index.js";
-export type ChartInteraction = 'pan' | 'panStart' | 'panEnd' | 'pinch' | 'pinchStart' | 'pinchEnd' | 'move' | 'moveStart' | 'moveEnd' | 'quickPress' | 'quickPressEnd' | 'turnWheel' | 'tap';
+export type ChartInteraction = 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd' | 'zoomPinch' | 'zoomPinchStart' | 'zoomPinchEnd' | 'move' | 'moveStart' | 'moveEnd' | 'quickPress' | 'quickPressEnd' | 'zoomTurnWheel' | 'tap';
 export type InteractionListenerResult = {
   cleanup: () => void;
 };
 export type AddInteractionListener = {
-  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'pan' | 'panStart' | 'panEnd', callback: (event: PanEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
-  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'pinch' | 'pinchStart' | 'pinchEnd', callback: (event: PinchEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
-  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'turnWheel', callback: (event: TurnWheelEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd', callback: (event: PanEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'zoomPinch' | 'zoomPinchStart' | 'zoomPinchEnd', callback: (event: PinchEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'zoomTurnWheel', callback: (event: TurnWheelEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'move' | 'moveStart' | 'moveEnd', callback: (event: MoveEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'tap', callback: (event: TapEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'quickPress' | 'quickPressEnd', callback: (event: PressEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'zoomTapAndDrag' | 'zoomTapAndDragStart' | 'zoomTapAndDragEnd', callback: (event: TapAndDragEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+};
+export type UpdateZoomInteractionListeners = {
+  (interaction: 'zoomPan', options?: Omit<PanGestureOptions<'zoomPan'>, 'name'>): void;
+  (interaction: 'zoomPinch', options?: Omit<PinchGestureOptions<'zoomPinch'>, 'name'>): void;
+  (interaction: 'zoomTurnWheel', options?: Omit<TurnWheelGestureOptions<'zoomTurnWheel'>, 'name'>): void;
+  (interaction: 'zoomTapAndDrag', options?: Omit<TapAndDragGestureOptions<'zoomTapAndDrag'>, 'name'>): void;
 };
 export interface UseChartInteractionListenerParameters {}
 export interface UseChartInteractionListenerState {}
@@ -22,6 +29,13 @@ export interface UseChartInteractionListenerInstance {
    * @param callback The callback to call when the interaction occurs.
    */
   addInteractionListener: AddInteractionListener;
+  /**
+   * Updates the zoom interaction listeners with the provided options.
+   *
+   * @param interaction The interaction to update.
+   * @param options The options to apply to the interaction.
+   */
+  updateZoomInteractionListeners: UpdateZoomInteractionListeners;
 }
 export type UseChartInteractionListenerSignature = ChartPluginSignature<{
   params: UseChartInteractionListenerParameters;

package/esm/internals/plugins/corePlugins/useChartSeries/processSeries.d.ts

@@ -17,7 +17,7 @@ export declare const preprocessSeries: <TSeriesType extends ChartSeriesType>({
   dataset
 }: {
   series: Readonly<AllSeriesType<TSeriesType>[]>;
-  colors: string[];
+  colors: readonly string[];
   seriesConfig: ChartSeriesConfig<TSeriesType>;
   dataset?: Readonly<DatasetType>;
 }) => { [type in TSeriesType]?: SeriesProcessorResult<TSeriesType> | undefined };

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

@@ -5,11 +5,13 @@ import { ChartSeriesConfig } from "../../models/seriesConfig/index.js";
 import { ComputedAxisConfig, DefaultizedZoomOptions } from "./useChartCartesianAxis.types.js";
 import { ProcessedSeries } from "../../corePlugins/useChartSeries/useChartSeries.types.js";
 import { GetZoomAxisFilters, ZoomData } from "./zoom.types.js";
+import { ScaleDefinition } from "./getAxisScale.js";
 export type ComputeResult<T extends ChartsAxisProps> = {
   axis: ComputedAxisConfig<T>;
   axisIds: AxisId[];
 };
 type ComputeCommonParams<T extends ChartSeriesType = ChartSeriesType> = {
+  scales: Record<AxisId, ScaleDefinition>;
   drawingArea: ChartDrawingArea;
   formattedSeries: ProcessedSeries<T>;
   seriesConfig: ChartSeriesConfig<T>;

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

@@ -1,15 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { scaleBand, scalePoint } from '@mui/x-charts-vendor/d3-scale';
 import { createScalarFormatter } from "../../../defaultValueFormatters.js";
-import { isBandScaleConfig, isPointScaleConfig, isSymlogScaleConfig } from "../../../../models/axis.js";
-import { getColorScale, getOrdinalColorScale } from "../../../colorScale.js";
-import { getTickNumber, scaleTickNumberByRange } from "../../../ticks.js";
+import { isBandScaleConfig, isPointScaleConfig } from "../../../../models/axis.js";
+import { getColorScale, getOrdinalColorScale, getSequentialColorScale } from "../../../colorScale.js";
+import { scaleTickNumberByRange } from "../../../ticks.js";
 import { getScale } from "../../../getScale.js";
 import { isDateData, createDateFormatter } from "../../../dateHelpers.js";
-import { zoomScaleRange } from "./zoom.js";
-import { getAxisExtremum } from "./getAxisExtremum.js";
+import { getAxisExtrema } from "./getAxisExtrema.js";
 import { getAxisTriggerTooltip } from "./getAxisTriggerTooltip.js";
-import { getAxisDomainLimit } from "./getAxisDomainLimit.js";
+import { applyDomainLimit, getActualAxisExtrema, getDomainLimit } from "./getAxisScale.js";
+import { isBandScale, isOrdinalScale } from "../../../scaleGuards.js";
 function getRange(drawingArea, axisDirection,
 // | 'rotation' | 'radius',
 reverse) {
@@ -19,6 +18,7 @@ reverse) {
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
 export function computeAxisValue({
+  scales,
   drawingArea,
   formattedSeries,
   axis: allAxis,
@@ -39,97 +39,91 @@ export function computeAxisValue({
   const completeAxis = {};
   allAxis.forEach((eachAxis, axisIndex) => {
     const axis = eachAxis;
+    const scaleDefinition = scales[axis.id];
+    let scale = scaleDefinition.scale;
     const zoomOption = zoomOptions?.[axis.id];
     const zoom = zoomMap?.get(axis.id);
     const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
     const range = getRange(drawingArea, axisDirection, axis.reverse ?? false);
-    const [minData, maxData] = getAxisExtremum(axis, axisDirection, seriesConfig, axisIndex, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
-    );
     const triggerTooltip = !axis.ignoreTooltip && axisIdsTriggeringTooltip.has(axis.id);
     const data = axis.data ?? [];
-    if (isBandScaleConfig(axis)) {
-      const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
-      const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
+    if (isOrdinalScale(scale)) {
       // Reverse range because ordinal scales are presented from top to bottom on y-axis
       const scaleRange = axisDirection === 'y' ? [range[1], range[0]] : range;
-      const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
-      completeAxis[axis.id] = _extends({
-        offset: 0,
-        height: 0,
-        categoryGapRatio,
-        barGapRatio,
-        triggerTooltip
-      }, axis, {
-        data,
-        scale: scaleBand(axis.data, zoomedRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
-        tickNumber: axis.data.length,
-        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
-          values: axis.data
-        }, axis.colorMap)) : getColorScale(axis.colorMap))
-      });
-      if (isDateData(axis.data)) {
-        const dateFormatter = createDateFormatter(axis.data, scaleRange, axis.tickNumber);
-        completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
+      if (isBandScale(scale) && isBandScaleConfig(axis)) {
+        const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
+        const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
+        completeAxis[axis.id] = _extends({
+          offset: 0,
+          height: 0,
+          categoryGapRatio,
+          barGapRatio,
+          triggerTooltip
+        }, axis, {
+          data,
+          scale,
+          tickNumber: axis.data.length,
+          colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
+            values: axis.data
+          }, axis.colorMap)) : getColorScale(axis.colorMap))
+        });
+      }
+      if (isPointScaleConfig(axis)) {
+        completeAxis[axis.id] = _extends({
+          offset: 0,
+          height: 0,
+          triggerTooltip
+        }, axis, {
+          data,
+          scale,
+          tickNumber: axis.data.length,
+          colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
+            values: axis.data
+          }, axis.colorMap)) : getColorScale(axis.colorMap))
+        });
       }
-    }
-    if (isPointScaleConfig(axis)) {
-      const scaleRange = axisDirection === 'y' ? [...range].reverse() : range;
-      const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
-      completeAxis[axis.id] = _extends({
-        offset: 0,
-        height: 0,
-        triggerTooltip
-      }, axis, {
-        data,
-        scale: scalePoint(axis.data, zoomedRange),
-        tickNumber: axis.data.length,
-        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
-          values: axis.data
-        }, axis.colorMap)) : getColorScale(axis.colorMap))
-      });
       if (isDateData(axis.data)) {
         const dateFormatter = createDateFormatter(axis.data, scaleRange, axis.tickNumber);
         completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
       }
+      return;
     }
     if (axis.scaleType === 'band' || axis.scaleType === 'point') {
       // Could be merged with the two previous "if conditions" but then TS does not get that `axis.scaleType` can't be `band` or `point`.
       return;
     }
-    const scaleType = axis.scaleType ?? 'linear';
-    const domainLimit = preferStrictDomainInLineCharts ? getAxisDomainLimit(axis, axisDirection, axisIndex, formattedSeries) : axis.domainLimit ?? 'nice';
-    const axisExtremums = [axis.min ?? minData, axis.max ?? maxData];
-    if (typeof domainLimit === 'function') {
-      const {
-        min,
-        max
-      } = domainLimit(minData, maxData);
-      axisExtremums[0] = min;
-      axisExtremums[1] = max;
-    }
-    const rawTickNumber = getTickNumber(_extends({}, axis, {
-      range,
-      domain: axisExtremums
-    }));
+    const rawTickNumber = scaleDefinition.tickNumber;
+    const continuousAxis = axis;
+    const scaleType = continuousAxis.scaleType ?? 'linear';
     const tickNumber = scaleTickNumberByRange(rawTickNumber, zoomRange);
-    const zoomedRange = zoomScaleRange(range, zoomRange);
-    const scale = getScale(scaleType, axisExtremums, zoomedRange);
-    if (isSymlogScaleConfig(axis) && axis.constant != null) {
-      scale.constant(axis.constant);
+    const filter = zoom === undefined && !zoomOption ? getFilters : undefined; // Do not apply filtering if zoom is already defined.
+    if (filter) {
+      const [minData, maxData] = getAxisExtrema(axis, axisDirection, seriesConfig, axisIndex, formattedSeries, filter);
+      scale = scale.copy();
+      scale.domain([minData, maxData]);
+      const domainLimit = getDomainLimit(axis, axisDirection, axisIndex, formattedSeries, preferStrictDomainInLineCharts);
+      const axisExtrema = getActualAxisExtrema(axis, minData, maxData);
+      if (typeof domainLimit === 'function') {
+        const {
+          min,
+          max
+        } = domainLimit(minData, maxData);
+        axisExtrema[0] = min;
+        axisExtrema[1] = max;
+      }
+      scale.domain(axisExtrema);
+      applyDomainLimit(scale, axis, domainLimit, rawTickNumber);
     }
-    const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;
-    const [minDomain, maxDomain] = finalScale.domain();
-    const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
     completeAxis[axis.id] = _extends({
       offset: 0,
       height: 0,
       triggerTooltip
-    }, axis, {
+    }, continuousAxis, {
       data,
-      scaleType: scaleType,
-      scale: finalScale.domain(domain),
+      scaleType,
+      scale,
       tickNumber,
-      colorScale: axis.colorMap && getColorScale(axis.colorMap),
+      colorScale: continuousAxis.colorMap && getSequentialColorScale(continuousAxis.colorMap),
       valueFormatter: axis.valueFormatter ?? createScalarFormatter(tickNumber, getScale(scaleType, range.map(v => scale.invert(v)), range))
     });
   });

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/createAxisFilterMapper.d.ts

@@ -1,24 +1,8 @@
-import { AxisId, ChartsXAxisProps, ChartsYAxisProps, ContinuousScaleName, ScaleName } from "../../../../models/axis.js";
-import { CartesianChartSeriesType } from "../../../../models/seriesType/config.js";
-import { ProcessedSeries } from "../../corePlugins/useChartSeries/index.js";
+import { AxisId, D3ContinuousScale, D3Scale } from "../../../../models/axis.js";
 import { AxisConfig } from "../../../../models/index.js";
-import { ChartSeriesConfig } from "../../models/seriesConfig/index.js";
 import { DefaultizedZoomOptions, ExtremumFilter } from "./useChartCartesianAxis.types.js";
 import { GetZoomAxisFilters, ZoomAxisFilters, ZoomData } from "./zoom.types.js";
-export declare function createAxisFilterMapper(params: {
-  zoomMap: Map<AxisId, ZoomData>;
-  zoomOptions: Record<AxisId, DefaultizedZoomOptions>;
-  seriesConfig: ChartSeriesConfig<CartesianChartSeriesType>;
-  formattedSeries: ProcessedSeries;
-  direction: 'x';
-}): (axis: AxisConfig<ScaleName, any, ChartsXAxisProps>, axisIndex: number) => ExtremumFilter | null;
-export declare function createAxisFilterMapper(params: {
-  zoomMap: Map<AxisId, ZoomData>;
-  zoomOptions: Record<AxisId, DefaultizedZoomOptions>;
-  seriesConfig: ChartSeriesConfig<CartesianChartSeriesType>;
-  formattedSeries: ProcessedSeries;
-  direction: 'y';
-}): (axis: AxisConfig<ScaleName, any, ChartsYAxisProps>, axisIndex: number) => ExtremumFilter | null;
+export declare function createAxisFilterMapper(zoomMap: Map<AxisId, ZoomData>, zoomOptions: Record<AxisId, DefaultizedZoomOptions>, direction: 'x' | 'y'): (axisId: AxisId, axisData: AxisConfig['data'], scale: D3Scale) => ExtremumFilter | null;
 export declare function createDiscreteScaleGetAxisFilter(axisData: AxisConfig['data'], zoomStart: number, zoomEnd: number, direction: 'x' | 'y'): ExtremumFilter;
-export declare function createContinuousScaleGetAxisFilter(scaleType: ContinuousScaleName | undefined, extrema: readonly [number, number], zoomStart: number, zoomEnd: number, direction: 'x' | 'y', axisData: AxisConfig['data']): ExtremumFilter;
+export declare function createContinuousScaleGetAxisFilter(scale: D3ContinuousScale, zoomStart: number, zoomEnd: number, direction: 'x' | 'y', axisData: AxisConfig['data']): ExtremumFilter;
 export declare const createGetAxisFilters: (filters: ZoomAxisFilters) => GetZoomAxisFilters;

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

@@ -1,28 +1,20 @@
 import { isDefined } from "../../../isDefined.js";
-import { getAxisExtremum } from "./getAxisExtremum.js";
-import { getScale } from "../../../getScale.js";
-export function createAxisFilterMapper({
-  zoomMap,
-  zoomOptions,
-  seriesConfig,
-  formattedSeries,
-  direction
-}) {
-  return (axis, axisIndex) => {
-    const zoomOption = zoomOptions[axis.id];
+import { isOrdinalScale } from "../../../scaleGuards.js";
+export function createAxisFilterMapper(zoomMap, zoomOptions, direction) {
+  return (axisId, axisData, scale) => {
+    const zoomOption = zoomOptions[axisId];
     if (!zoomOption || zoomOption.filterMode !== 'discard') {
       return null;
     }
-    const zoom = zoomMap?.get(axis.id);
+    const zoom = zoomMap?.get(axisId);
     if (zoom === undefined || zoom.start <= 0 && zoom.end >= 100) {
       // No zoom, or zoom with all data visible
       return null;
     }
-    const scaleType = axis.scaleType;
-    if (scaleType === 'point' || scaleType === 'band') {
-      return createDiscreteScaleGetAxisFilter(axis.data, zoom.start, zoom.end, direction);
+    if (isOrdinalScale(scale)) {
+      return createDiscreteScaleGetAxisFilter(axisData, zoom.start, zoom.end, direction);
     }
-    return createContinuousScaleGetAxisFilter(scaleType, getAxisExtremum(axis, direction, seriesConfig, axisIndex, formattedSeries), zoom.start, zoom.end, direction, axis.data);
+    return createContinuousScaleGetAxisFilter(scale, zoom.start, zoom.end, direction, axisData);
   };
 }
 export function createDiscreteScaleGetAxisFilter(axisData, zoomStart, zoomEnd, direction) {
@@ -38,10 +30,10 @@ export function createDiscreteScaleGetAxisFilter(axisData, zoomStart, zoomEnd, d
     return dataIndex >= minVal && dataIndex < maxVal;
   };
 }
-export function createContinuousScaleGetAxisFilter(scaleType, extrema, zoomStart, zoomEnd, direction, axisData) {
+export function createContinuousScaleGetAxisFilter(scale, zoomStart, zoomEnd, direction, axisData) {
   let min;
   let max;
-  [min, max] = getScale(scaleType ?? 'linear', extrema, [0, 100]).nice().domain();
+  [min, max] = scale.domain();
   min = min instanceof Date ? min.getTime() : min;
   max = max instanceof Date ? max.getTime() : max;
   const minVal = min + zoomStart * (max - min) / 100;

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

@@ -1,7 +1,7 @@
 import { AxisConfig } from "../../../../models/axis.js";
 import { CartesianChartSeriesType } from "../../../../models/seriesType/config.js";
 import { ProcessedSeries } from "../../corePlugins/useChartSeries/index.js";
-export declare const getAxisDomainLimit: <T extends CartesianChartSeriesType>(axis: AxisConfig, axisDirection: "x" | "y", axisIndex: number, formattedSeries: ProcessedSeries<T | "line">) => "nice" | "strict" | ((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: number, max: number) => {
   min: number;
   max: number;
 });

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/{getAxisExtremum.d.ts → getAxisExtrema.d.ts}

@@ -3,4 +3,4 @@ import { CartesianChartSeriesType } from "../../../../models/seriesType/config.j
 import { ChartSeriesConfig } from "../../models/seriesConfig/index.js";
 import { ProcessedSeries } from "../../corePlugins/useChartSeries/useChartSeries.types.js";
 import { GetZoomAxisFilters } from "./zoom.types.js";
-export declare const getAxisExtremum: <T extends CartesianChartSeriesType>(axis: AxisConfig, axisDirection: "x" | "y", seriesConfig: ChartSeriesConfig<T>, axisIndex: number, formattedSeries: ProcessedSeries<T>, getFilters?: GetZoomAxisFilters) => [number, number];
+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/getAxisExtrema.js

@@ -0,0 +1,24 @@
+import { isCartesianSeriesType } from "../../../isCartesian.js";
+const axisExtremumCallback = (chartType, axis, axisDirection, seriesConfig, axisIndex, formattedSeries, getFilters) => {
+  const getter = axisDirection === 'x' ? seriesConfig[chartType].xExtremumGetter : seriesConfig[chartType].yExtremumGetter;
+  const series = formattedSeries[chartType]?.series ?? {};
+  return getter?.({
+    series,
+    axis,
+    axisIndex,
+    isDefaultAxis: axisIndex === 0,
+    getFilters
+  }) ?? [Infinity, -Infinity];
+};
+export function getAxisExtrema(axis, axisDirection, seriesConfig, axisIndex, formattedSeries, getFilters) {
+  const cartesianChartTypes = Object.keys(seriesConfig).filter(isCartesianSeriesType);
+  let extrema = [Infinity, -Infinity];
+  for (const chartType of cartesianChartTypes) {
+    const [min, max] = axisExtremumCallback(chartType, axis, axisDirection, seriesConfig, axisIndex, formattedSeries, getFilters);
+    extrema = [Math.min(extrema[0], min), Math.max(extrema[1], max)];
+  }
+  if (Number.isNaN(extrema[0]) || Number.isNaN(extrema[1])) {
+    return [Infinity, -Infinity];
+  }
+  return extrema;
+}

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisScale.d.ts

@@ -0,0 +1,66 @@
+import { AxisConfig, AxisId, D3ContinuousScale, D3OrdinalScale, DefaultedAxis } from "../../../../models/axis.js";
+import { ChartSeriesType } from "../../../../models/seriesType/config.js";
+import { ProcessedSeries } from "../../corePlugins/useChartSeries/index.js";
+import { ChartSeriesConfig } from "../../models/index.js";
+import { ZoomData } from "./zoom.types.js";
+import { ChartDrawingArea } from "../../../../hooks/useDrawingArea.js";
+type GetAxesScalesParams<T extends ChartSeriesType = ChartSeriesType> = {
+  drawingArea: ChartDrawingArea;
+  formattedSeries: ProcessedSeries<T>;
+  seriesConfig: ChartSeriesConfig<T>;
+  zoomMap?: Map<AxisId, ZoomData>;
+  /**
+   * @deprecated To remove in v9. This is an experimental feature to avoid breaking change.
+   */
+  preferStrictDomainInLineCharts?: boolean;
+  defaultTickNumber: number;
+};
+export declare function getXAxesScales<T extends ChartSeriesType>({
+  drawingArea,
+  formattedSeries,
+  axis: axes,
+  seriesConfig,
+  zoomMap,
+  preferStrictDomainInLineCharts,
+  defaultTickNumber
+}: GetAxesScalesParams<T> & {
+  axis?: DefaultedAxis[];
+}): Record<AxisId, ScaleDefinition>;
+export declare function getYAxesScales<T extends ChartSeriesType>({
+  drawingArea,
+  formattedSeries,
+  axis: axes,
+  seriesConfig,
+  zoomMap,
+  preferStrictDomainInLineCharts,
+  defaultTickNumber
+}: GetAxesScalesParams<T> & {
+  axis?: DefaultedAxis[];
+}): Record<AxisId, ScaleDefinition>;
+export type ScaleDefinition = {
+  scale: D3ContinuousScale;
+  tickNumber: number;
+} | {
+  scale: D3OrdinalScale;
+  tickNumber?: never;
+};
+type DomainLimit = 'nice' | 'strict' | ((min: number, max: number) => {
+  min: number;
+  max: number;
+});
+export declare function getDomainLimit(axis: Pick<DefaultedAxis, 'id' | 'domainLimit'>, axisDirection: 'x' | 'y', axisIndex: number, formattedSeries: ProcessedSeries, preferStrictDomainInLineCharts: boolean | undefined): "nice" | "strict" | ((min: number, max: number) => {
+  min: number;
+  max: number;
+});
+export declare function applyDomainLimit(scale: D3ContinuousScale, axis: {
+  min?: number | Date;
+  max?: number | Date;
+}, domainLimit: DomainLimit, rawTickNumber: number): void;
+/**
+ * Get the actual axis extrema considering the user defined min and max values.
+ * @param axisExtrema User defined axis extrema.
+ * @param minData Minimum value from the data.
+ * @param maxData Maximum value from the data.
+ */
+export declare function getActualAxisExtrema(axisExtrema: Pick<AxisConfig, 'min' | 'max'>, minData: number, maxData: number): [number | Date, number | Date];
+export {};