@mui/x-charts 8.11.3 → 8.13.0

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

@@ -6,17 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.computeAxisValue = computeAxisValue;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _d3Scale = require("@mui/x-charts-vendor/d3-scale");
 var _defaultValueFormatters = require("../../../defaultValueFormatters");
 var _axis = require("../../../../models/axis");
 var _colorScale = require("../../../colorScale");
 var _ticks = require("../../../ticks");
 var _getScale = require("../../../getScale");
 var _dateHelpers = require("../../../dateHelpers");
-var _zoom = require("./zoom");
-var _getAxisExtremum = require("./getAxisExtremum");
+var _getAxisExtrema = require("./getAxisExtrema");
 var _getAxisTriggerTooltip = require("./getAxisTriggerTooltip");
-var _getAxisDomainLimit = require("./getAxisDomainLimit");
+var _getAxisScale = require("./getAxisScale");
+var _scaleGuards = require("../../../scaleGuards");
 function getRange(drawingArea, axisDirection,
 // | 'rotation' | 'radius',
 reverse) {
@@ -26,6 +25,7 @@ reverse) {
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
 function computeAxisValue({
+  scales,
   drawingArea,
   formattedSeries,
   axis: allAxis,
@@ -46,97 +46,91 @@ 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] = (0, _getAxisExtremum.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 ((0, _axis.isBandScaleConfig)(axis)) {
-      const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
-      const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
+    if ((0, _scaleGuards.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 = (0, _zoom.zoomScaleRange)(scaleRange, zoomRange);
-      completeAxis[axis.id] = (0, _extends2.default)({
-        offset: 0,
-        height: 0,
-        categoryGapRatio,
-        barGapRatio,
-        triggerTooltip
-      }, axis, {
-        data,
-        scale: (0, _d3Scale.scaleBand)(axis.data, zoomedRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
-        tickNumber: axis.data.length,
-        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
-          values: axis.data
-        }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
-      });
-      if ((0, _dateHelpers.isDateData)(axis.data)) {
-        const dateFormatter = (0, _dateHelpers.createDateFormatter)(axis.data, scaleRange, axis.tickNumber);
-        completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
+      if ((0, _scaleGuards.isBandScale)(scale) && (0, _axis.isBandScaleConfig)(axis)) {
+        const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
+        const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
+        completeAxis[axis.id] = (0, _extends2.default)({
+          offset: 0,
+          height: 0,
+          categoryGapRatio,
+          barGapRatio,
+          triggerTooltip
+        }, axis, {
+          data,
+          scale,
+          tickNumber: axis.data.length,
+          colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
+            values: axis.data
+          }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
+        });
+      }
+      if ((0, _axis.isPointScaleConfig)(axis)) {
+        completeAxis[axis.id] = (0, _extends2.default)({
+          offset: 0,
+          height: 0,
+          triggerTooltip
+        }, axis, {
+          data,
+          scale,
+          tickNumber: axis.data.length,
+          colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
+            values: axis.data
+          }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
+        });
       }
-    }
-    if ((0, _axis.isPointScaleConfig)(axis)) {
-      const scaleRange = axisDirection === 'y' ? [...range].reverse() : range;
-      const zoomedRange = (0, _zoom.zoomScaleRange)(scaleRange, zoomRange);
-      completeAxis[axis.id] = (0, _extends2.default)({
-        offset: 0,
-        height: 0,
-        triggerTooltip
-      }, axis, {
-        data,
-        scale: (0, _d3Scale.scalePoint)(axis.data, zoomedRange),
-        tickNumber: axis.data.length,
-        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
-          values: axis.data
-        }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
-      });
       if ((0, _dateHelpers.isDateData)(axis.data)) {
         const dateFormatter = (0, _dateHelpers.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 ? (0, _getAxisDomainLimit.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 = (0, _ticks.getTickNumber)((0, _extends2.default)({}, axis, {
-      range,
-      domain: axisExtremums
-    }));
+    const rawTickNumber = scaleDefinition.tickNumber;
+    const continuousAxis = axis;
+    const scaleType = continuousAxis.scaleType ?? 'linear';
     const tickNumber = (0, _ticks.scaleTickNumberByRange)(rawTickNumber, zoomRange);
-    const zoomedRange = (0, _zoom.zoomScaleRange)(range, zoomRange);
-    const scale = (0, _getScale.getScale)(scaleType, axisExtremums, zoomedRange);
-    if ((0, _axis.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] = (0, _getAxisExtrema.getAxisExtrema)(axis, axisDirection, seriesConfig, axisIndex, formattedSeries, filter);
+      scale = scale.copy();
+      scale.domain([minData, maxData]);
+      const domainLimit = (0, _getAxisScale.getDomainLimit)(axis, axisDirection, axisIndex, formattedSeries, preferStrictDomainInLineCharts);
+      const axisExtrema = (0, _getAxisScale.getActualAxisExtrema)(axis, minData, maxData);
+      if (typeof domainLimit === 'function') {
+        const {
+          min,
+          max
+        } = domainLimit(minData, maxData);
+        axisExtrema[0] = min;
+        axisExtrema[1] = max;
+      }
+      scale.domain(axisExtrema);
+      (0, _getAxisScale.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] = (0, _extends2.default)({
       offset: 0,
       height: 0,
       triggerTooltip
-    }, axis, {
+    }, continuousAxis, {
       data,
-      scaleType: scaleType,
-      scale: finalScale.domain(domain),
+      scaleType,
+      scale,
       tickNumber,
-      colorScale: axis.colorMap && (0, _colorScale.getColorScale)(axis.colorMap),
+      colorScale: continuousAxis.colorMap && (0, _colorScale.getSequentialColorScale)(continuousAxis.colorMap),
       valueFormatter: axis.valueFormatter ?? (0, _defaultValueFormatters.createScalarFormatter)(tickNumber, (0, _getScale.getScale)(scaleType, range.map(v => scale.invert(v)), range))
     });
   });

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

@@ -8,30 +8,22 @@ exports.createContinuousScaleGetAxisFilter = createContinuousScaleGetAxisFilter;
 exports.createDiscreteScaleGetAxisFilter = createDiscreteScaleGetAxisFilter;
 exports.createGetAxisFilters = void 0;
 var _isDefined = require("../../../isDefined");
-var _getAxisExtremum = require("./getAxisExtremum");
-var _getScale = require("../../../getScale");
-function createAxisFilterMapper({
-  zoomMap,
-  zoomOptions,
-  seriesConfig,
-  formattedSeries,
-  direction
-}) {
-  return (axis, axisIndex) => {
-    const zoomOption = zoomOptions[axis.id];
+var _scaleGuards = require("../../../scaleGuards");
+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 ((0, _scaleGuards.isOrdinalScale)(scale)) {
+      return createDiscreteScaleGetAxisFilter(axisData, zoom.start, zoom.end, direction);
     }
-    return createContinuousScaleGetAxisFilter(scaleType, (0, _getAxisExtremum.getAxisExtremum)(axis, direction, seriesConfig, axisIndex, formattedSeries), zoom.start, zoom.end, direction, axis.data);
+    return createContinuousScaleGetAxisFilter(scale, zoom.start, zoom.end, direction, axisData);
   };
 }
 function createDiscreteScaleGetAxisFilter(axisData, zoomStart, zoomEnd, direction) {
@@ -47,10 +39,10 @@ function createDiscreteScaleGetAxisFilter(axisData, zoomStart, zoomEnd, directio
     return dataIndex >= minVal && dataIndex < maxVal;
   };
 }
-function createContinuousScaleGetAxisFilter(scaleType, extrema, zoomStart, zoomEnd, direction, axisData) {
+function createContinuousScaleGetAxisFilter(scale, zoomStart, zoomEnd, direction, axisData) {
   let min;
   let max;
-  [min, max] = (0, _getScale.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/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 → 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/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisExtrema.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAxisExtrema = getAxisExtrema;
+var _isCartesian = require("../../../isCartesian");
+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];
+};
+function getAxisExtrema(axis, axisDirection, seriesConfig, axisIndex, formattedSeries, getFilters) {
+  const cartesianChartTypes = Object.keys(seriesConfig).filter(_isCartesian.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/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 {};

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

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.applyDomainLimit = applyDomainLimit;
+exports.getActualAxisExtrema = getActualAxisExtrema;
+exports.getDomainLimit = getDomainLimit;
+exports.getXAxesScales = getXAxesScales;
+exports.getYAxesScales = getYAxesScales;
+var _d3Scale = require("@mui/x-charts-vendor/d3-scale");
+var _axis = require("../../../../models/axis");
+var _zoom = require("./zoom");
+var _getAxisDomainLimit = require("./getAxisDomainLimit");
+var _ticks = require("../../../ticks");
+var _getScale = require("../../../getScale");
+var _getAxisExtrema = require("./getAxisExtrema");
+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;
+}
+function getXAxesScales({
+  drawingArea,
+  formattedSeries,
+  axis: axes = [],
+  seriesConfig,
+  zoomMap,
+  preferStrictDomainInLineCharts,
+  defaultTickNumber
+}) {
+  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, defaultTickNumber);
+  });
+  return scales;
+}
+function getYAxesScales({
+  drawingArea,
+  formattedSeries,
+  axis: axes = [],
+  seriesConfig,
+  zoomMap,
+  preferStrictDomainInLineCharts,
+  defaultTickNumber
+}) {
+  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, defaultTickNumber);
+  });
+  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, defaultTickNumber) {
+  const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
+  const range = getRange(drawingArea, axisDirection, axis);
+  if ((0, _axis.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 = (0, _zoom.zoomScaleRange)(scaleRange, zoomRange);
+    return {
+      scale: (0, _d3Scale.scaleBand)(axis.data, zoomedRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2)
+    };
+  }
+  if ((0, _axis.isPointScaleConfig)(axis)) {
+    const scaleRange = axisDirection === 'y' ? [...range].reverse() : range;
+    const zoomedRange = (0, _zoom.zoomScaleRange)(scaleRange, zoomRange);
+    return {
+      scale: (0, _d3Scale.scalePoint)(axis.data, zoomedRange)
+    };
+  }
+  const scaleType = axis.scaleType ?? 'linear';
+  const domainLimit = getDomainLimit(axis, axisDirection, axisIndex, formattedSeries, preferStrictDomainInLineCharts);
+  const [minData, maxData] = (0, _getAxisExtrema.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 = (0, _ticks.getTickNumber)(axis, axisExtrema, defaultTickNumber);
+  const zoomedRange = (0, _zoom.zoomScaleRange)(range, zoomRange);
+  const scale = (0, _getScale.getScale)(scaleType, axisExtrema, zoomedRange);
+  if ((0, _axis.isSymlogScaleConfig)(axis) && axis.constant != null) {
+    scale.constant(axis.constant);
+  }
+  applyDomainLimit(scale, axis, domainLimit, rawTickNumber);
+  return {
+    scale,
+    tickNumber: rawTickNumber
+  };
+}
+function getDomainLimit(axis, axisDirection, axisIndex, formattedSeries, preferStrictDomainInLineCharts) {
+  return preferStrictDomainInLineCharts ? (0, _getAxisDomainLimit.getAxisDomainLimit)(axis, axisDirection, axisIndex, formattedSeries) : axis.domainLimit ?? 'nice';
+}
+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.
+ */
+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];
+}

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

@@ -23,6 +23,7 @@ var _getSVGPoint = require("../../../getSVGPoint");
 var _useChartInteraction = require("../useChartInteraction");
 var _useChartCartesianInteraction = require("./useChartCartesianInteraction.selectors");
 var _useLazySelectorEffect = require("../../utils/useLazySelectorEffect");
+var _checkHasInteractionPlugin = require("../useChartInteraction/checkHasInteractionPlugin");
 const useChartCartesianAxis = ({
   params,
   store,
@@ -106,26 +107,27 @@ const useChartCartesianAxis = ({
       onHighlightedAxisChange(nextAxisInteraction);
     }
   }, !onHighlightedAxisChange);
+  const hasInteractionPlugin = (0, _checkHasInteractionPlugin.checkHasInteractionPlugin)(instance);
   React.useEffect(() => {
     const element = svgRef.current;
-    if (!isInteractionEnabled || !element || params.disableAxisListener) {
+    if (!isInteractionEnabled || !hasInteractionPlugin || !element || params.disableAxisListener) {
       return () => {};
     }
 
     // Clean the interaction when the mouse leaves the chart.
     const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
       if (!event.detail.activeGestures.pan) {
-        instance.cleanInteraction?.();
+        instance.cleanInteraction();
       }
     });
     const panEndHandler = instance.addInteractionListener('panEnd', event => {
       if (!event.detail.activeGestures.move) {
-        instance.cleanInteraction?.();
+        instance.cleanInteraction();
       }
     });
     const pressEndHandler = instance.addInteractionListener('quickPressEnd', event => {
       if (!event.detail.activeGestures.move && !event.detail.activeGestures.pan) {
-        instance.cleanInteraction?.();
+        instance.cleanInteraction();
       }
     });
     const gestureHandler = event => {
@@ -142,7 +144,7 @@ const useChartCartesianAxis = ({
         instance.cleanInteraction?.();
         return;
       }
-      instance.setPointerCoordinate?.(svgPoint);
+      instance.setPointerCoordinate(svgPoint);
     };
     const moveHandler = instance.addInteractionListener('move', gestureHandler);
     const panHandler = instance.addInteractionListener('pan', gestureHandler);
@@ -155,7 +157,7 @@ const useChartCartesianAxis = ({
       pressHandler.cleanup();
       pressEndHandler.cleanup();
     };
-  }, [svgRef, store, xAxisWithScale, usedXAxis, yAxisWithScale, usedYAxis, instance, params.disableAxisListener, isInteractionEnabled]);
+  }, [svgRef, store, xAxisWithScale, usedXAxis, yAxisWithScale, usedYAxis, instance, params.disableAxisListener, isInteractionEnabled, hasInteractionPlugin]);
   React.useEffect(() => {
     const element = svgRef.current;
     const onAxisClick = params.onAxisClick;

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

@@ -1,3 +1,5 @@
 import { AxisId } from "../../../../models/axis.js";
+export declare const selectorChartPreviewXScales: import("reselect").Selector<any, Record<AxisId, import("./getAxisScale.js").ScaleDefinition>, [axisId: AxisId]>;
 export declare const selectorChartPreviewComputedXAxis: import("reselect").Selector<any, import("./useChartCartesianAxis.types.js").ComputedAxisConfig<import("../../../index.js").ChartsXAxisProps>, [axisId: AxisId]>;
+export declare const selectorChartPreviewYScales: import("reselect").Selector<any, Record<AxisId, import("./getAxisScale.js").ScaleDefinition>, [axisId: AxisId]>;
 export declare const selectorChartPreviewComputedYAxis: import("reselect").Selector<any, import("./useChartCartesianAxis.types.js").ComputedAxisConfig<import("../../../index.js").ChartsYAxisProps>, [axisId: AxisId]>;