@mui/x-charts 8.11.2 → 8.12.0

package/esm/internals/animation/Transition.js

@@ -1,4 +1,4 @@
-import { timer, now, timeout, timerFlush } from '@mui/x-charts-vendor/d3-timer';
+import { timer, now, timeout } from '@mui/x-charts-vendor/d3-timer';
 
 /**
  * A resumable transition class inspired by d3-transition.
@@ -50,7 +50,6 @@ export class Transition {
     /* If we're resuming the transition, then subtract elapsed to continue the easing. */
     const time = now() - this.elapsed;
     this.timer = timer(elapsed => this.timerCallback(elapsed), 0, time);
-    timerFlush();
     return this;
   }
 
@@ -74,7 +73,6 @@ export class Transition {
   finish() {
     this.stop();
     timeout(() => this.timerCallback(this.duration));
-    timerFlush();
     return this;
   }
 }

package/esm/internals/index.d.ts

@@ -25,7 +25,8 @@ export * from "./plugins/featurePlugins/useChartCartesianAxis/index.js";
 export * from "./plugins/featurePlugins/useChartPolarAxis/index.js";
 export * from "./plugins/featurePlugins/useChartInteraction/index.js";
 export * from "./plugins/featurePlugins/useChartHighlight/index.js";
-export * from "./plugins/featurePlugins/useChartVoronoi/index.js";
+export * from "./plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+export * from "./plugins/featurePlugins/useChartClosestPoint/index.js";
 export * from "./plugins/utils/selectors.js";
 export { getAxisTriggerTooltip as getCartesianAxisTriggerTooltip } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisTriggerTooltip.js";
 export { getAxisIndex as getCartesianAxisIndex } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js";
@@ -52,9 +53,9 @@ export * from "./colorScale.js";
 export * from "./ticks.js";
 export * from "./dateHelpers.js";
 export * from "./invertScale.js";
-export * from "./isBandScale.js";
+export * from "./scaleGuards.js";
 export * from "./findMinMax.js";
-export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";
+export { getAxisExtrema } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtrema.js";
 export * from "../context/ChartProvider/index.js";
 export * from "../context/ChartsSlotsContext.js";
 export * from "../models/seriesType/config.js";

package/esm/internals/index.js

@@ -30,7 +30,8 @@ export * from "./plugins/featurePlugins/useChartCartesianAxis/index.js";
 export * from "./plugins/featurePlugins/useChartPolarAxis/index.js";
 export * from "./plugins/featurePlugins/useChartInteraction/index.js";
 export * from "./plugins/featurePlugins/useChartHighlight/index.js";
-export * from "./plugins/featurePlugins/useChartVoronoi/index.js";
+export * from "./plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+export * from "./plugins/featurePlugins/useChartClosestPoint/index.js";
 export * from "./plugins/utils/selectors.js";
 export { getAxisTriggerTooltip as getCartesianAxisTriggerTooltip } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisTriggerTooltip.js";
 export { getAxisIndex as getCartesianAxisIndex } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js";
@@ -62,11 +63,11 @@ export * from "./colorScale.js";
 export * from "./ticks.js";
 export * from "./dateHelpers.js";
 export * from "./invertScale.js";
-export * from "./isBandScale.js";
+export * from "./scaleGuards.js";
 export * from "./findMinMax.js";
 
 // contexts
-export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";
+export { getAxisExtrema } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtrema.js";
 export * from "../context/ChartProvider/index.js";
 export * from "../context/ChartsSlotsContext.js";
 

package/esm/internals/invertScale.js

@@ -1,6 +1,6 @@
-import { isBandScale } from "./isBandScale.js";
+import { isOrdinalScale } from "./scaleGuards.js";
 export function invertScale(scale, data, value) {
-  if (isBandScale(scale)) {
+  if (isOrdinalScale(scale)) {
     const dataIndex = scale.bandwidth() === 0 ? Math.floor((value - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((value - Math.min(...scale.range())) / scale.step());
     return data[dataIndex];
   }

package/esm/internals/plugins/allPlugins.d.ts

@@ -2,9 +2,10 @@ import { ChartSeriesType } from "../../models/seriesType/config.js";
 import { UseChartCartesianAxisSignature } from "./featurePlugins/useChartCartesianAxis/index.js";
 import { UseChartHighlightSignature } from "./featurePlugins/useChartHighlight/index.js";
 import { UseChartInteractionSignature } from "./featurePlugins/useChartInteraction/index.js";
+import { UseChartKeyboardNavigationSignature } from "./featurePlugins/useChartKeyboardNavigation/index.js";
 import { UseChartPolarAxisSignature } from "./featurePlugins/useChartPolarAxis/index.js";
-import { UseChartVoronoiSignature } from "./featurePlugins/useChartVoronoi/index.js";
+import { UseChartClosestPointSignature } from "./featurePlugins/useChartClosestPoint/index.js";
 import { UseChartZAxisSignature } from "./featurePlugins/useChartZAxis/index.js";
-export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature];
-export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature];
-export declare const DEFAULT_PLUGINS: readonly [import("./models/index.js").ChartPlugin<UseChartZAxisSignature>, import("./models/index.js").ChartPlugin<UseChartCartesianAxisSignature<any>>, import("./models/index.js").ChartPlugin<UseChartInteractionSignature>, import("./models/index.js").ChartPlugin<UseChartHighlightSignature>, import("./models/index.js").ChartPlugin<UseChartVoronoiSignature>];
+export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+export declare const DEFAULT_PLUGINS: readonly [import("./models/index.js").ChartPlugin<UseChartZAxisSignature>, import("./models/index.js").ChartPlugin<UseChartCartesianAxisSignature<any>>, import("./models/index.js").ChartPlugin<UseChartInteractionSignature>, import("./models/index.js").ChartPlugin<UseChartHighlightSignature>, import("./models/index.js").ChartPlugin<UseChartClosestPointSignature>, import("./models/index.js").ChartPlugin<UseChartKeyboardNavigationSignature>];

package/esm/internals/plugins/allPlugins.js

@@ -3,6 +3,7 @@
 import { useChartCartesianAxis } from "./featurePlugins/useChartCartesianAxis/index.js";
 import { useChartHighlight } from "./featurePlugins/useChartHighlight/index.js";
 import { useChartInteraction } from "./featurePlugins/useChartInteraction/index.js";
-import { useChartVoronoi } from "./featurePlugins/useChartVoronoi/index.js";
+import { useChartKeyboardNavigation } from "./featurePlugins/useChartKeyboardNavigation/index.js";
+import { useChartClosestPoint } from "./featurePlugins/useChartClosestPoint/index.js";
 import { useChartZAxis } from "./featurePlugins/useChartZAxis/index.js";
-export const DEFAULT_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartVoronoi];
+export const DEFAULT_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation];

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/{internals/plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.d.ts → esm/internals/plugins/featurePlugins/useChartCartesianAxis/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,63 @@
+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;
+};
+export declare function getXAxesScales<T extends ChartSeriesType>({
+  drawingArea,
+  formattedSeries,
+  axis: axes,
+  seriesConfig,
+  zoomMap,
+  preferStrictDomainInLineCharts
+}: GetAxesScalesParams<T> & {
+  axis?: DefaultedAxis[];
+}): Record<AxisId, ScaleDefinition>;
+export declare function getYAxesScales<T extends ChartSeriesType>({
+  drawingArea,
+  formattedSeries,
+  axis: axes,
+  seriesConfig,
+  zoomMap,
+  preferStrictDomainInLineCharts
+}: 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 {};

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

@@ -0,0 +1,123 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { scaleBand, scalePoint } from '@mui/x-charts-vendor/d3-scale';
+import { isBandScaleConfig, isPointScaleConfig, isSymlogScaleConfig } from "../../../../models/axis.js";
+import { zoomScaleRange } from "./zoom.js";
+import { getAxisDomainLimit } from "./getAxisDomainLimit.js";
+import { getTickNumber } from "../../../ticks.js";
+import { getScale } from "../../../getScale.js";
+import { getAxisExtrema } from "./getAxisExtrema.js";
+const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
+function getRange(drawingArea, axisDirection, axis) {
+  const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
+  return axis.reverse ? [range[1], range[0]] : range;
+}
+export function getXAxesScales({
+  drawingArea,
+  formattedSeries,
+  axis: axes = [],
+  seriesConfig,
+  zoomMap,
+  preferStrictDomainInLineCharts
+}) {
+  const scales = {};
+  axes.forEach((eachAxis, axisIndex) => {
+    const axis = eachAxis;
+    const zoom = zoomMap?.get(axis.id);
+    scales[axis.id] = getAxisScale(axis, 'x', zoom, drawingArea, seriesConfig, axisIndex, formattedSeries, preferStrictDomainInLineCharts);
+  });
+  return scales;
+}
+export function getYAxesScales({
+  drawingArea,
+  formattedSeries,
+  axis: axes = [],
+  seriesConfig,
+  zoomMap,
+  preferStrictDomainInLineCharts
+}) {
+  const scales = {};
+  axes.forEach((eachAxis, axisIndex) => {
+    const axis = eachAxis;
+    const zoom = zoomMap?.get(axis.id);
+    scales[axis.id] = getAxisScale(axis, 'y', zoom, drawingArea, seriesConfig, axisIndex, formattedSeries, preferStrictDomainInLineCharts);
+  });
+  return scales;
+}
+function getAxisScale(axis, axisDirection, zoom, drawingArea, seriesConfig, axisIndex, formattedSeries,
+/**
+ * @deprecated To remove in v9. This is an experimental feature to avoid breaking change.
+ */
+preferStrictDomainInLineCharts) {
+  const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
+  const range = getRange(drawingArea, axisDirection, axis);
+  if (isBandScaleConfig(axis)) {
+    const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
+    // 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);
+    return {
+      scale: scaleBand(axis.data, zoomedRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2)
+    };
+  }
+  if (isPointScaleConfig(axis)) {
+    const scaleRange = axisDirection === 'y' ? [...range].reverse() : range;
+    const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
+    return {
+      scale: scalePoint(axis.data, zoomedRange)
+    };
+  }
+  const scaleType = axis.scaleType ?? 'linear';
+  const domainLimit = getDomainLimit(axis, axisDirection, axisIndex, formattedSeries, preferStrictDomainInLineCharts);
+  const [minData, maxData] = getAxisExtrema(axis, axisDirection, seriesConfig, axisIndex, formattedSeries);
+  const axisExtrema = getActualAxisExtrema(axis, minData, maxData);
+  if (typeof domainLimit === 'function') {
+    const {
+      min,
+      max
+    } = domainLimit(minData, maxData);
+    axisExtrema[0] = min;
+    axisExtrema[1] = max;
+  }
+  const rawTickNumber = getTickNumber(_extends({}, axis, {
+    range,
+    domain: axisExtrema
+  }));
+  const zoomedRange = zoomScaleRange(range, zoomRange);
+  const scale = getScale(scaleType, axisExtrema, zoomedRange);
+  if (isSymlogScaleConfig(axis) && axis.constant != null) {
+    scale.constant(axis.constant);
+  }
+  applyDomainLimit(scale, axis, domainLimit, rawTickNumber);
+  return {
+    scale,
+    tickNumber: rawTickNumber
+  };
+}
+export function getDomainLimit(axis, axisDirection, axisIndex, formattedSeries, preferStrictDomainInLineCharts) {
+  return preferStrictDomainInLineCharts ? getAxisDomainLimit(axis, axisDirection, axisIndex, formattedSeries) : axis.domainLimit ?? 'nice';
+}
+export function applyDomainLimit(scale, axis, domainLimit, rawTickNumber) {
+  if (domainLimit === 'nice') {
+    scale.nice(rawTickNumber);
+  }
+  const [minDomain, maxDomain] = scale.domain();
+  scale.domain([axis.min ?? minDomain, axis.max ?? maxDomain]);
+}
+
+/**
+ * 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 function getActualAxisExtrema(axisExtrema, minData, maxData) {
+  let min = minData;
+  let max = maxData;
+  if (axisExtrema.max != null && axisExtrema.max.valueOf() < minData) {
+    min = axisExtrema.max;
+  }
+  if (axisExtrema.min != null && axisExtrema.min.valueOf() > minData) {
+    max = axisExtrema.min;
+  }
+  return [axisExtrema.min ?? min, axisExtrema.max ?? max];
+}