@mui/x-charts 8.11.3 → 8.12.0

package/esm/hooks/useDrawingArea.d.ts

@@ -1,9 +1,27 @@
 export type ChartDrawingArea = {
-  top: number;
+  /**
+   * The gap between the left border of the SVG and the drawing area.
+   */
   left: number;
-  right: number;
+  /**
+   * The gap between the top border of the SVG and the drawing area.
+   */
+  top: number;
+  /**
+   * The gap between the bottom border of the SVG and the drawing area.
+   */
   bottom: number;
+  /**
+   * The gap between the right border of the SVG and the drawing area.
+   */
+  right: number;
+  /**
+   * The width of the drawing area.
+   */
   width: number;
+  /**
+   * The height of the drawing area.
+   */
   height: number;
 };
 /**

package/esm/hooks/useFocusedItem.d.ts

@@ -0,0 +1,15 @@
+import { ChartSeriesType } from "../models/seriesType/config.js";
+import { SeriesId } from "../models/seriesType/common.js";
+export type FocusedItemData = {
+  seriesType: ChartSeriesType;
+  seriesId: SeriesId;
+  dataIndex: number;
+};
+/**
+ * Get the focused item from keyboard navigation.
+ */
+export declare function useFocusedItem(): {
+  seriesType: keyof import("../internals/index.js").ChartsSeriesConfig;
+  seriesId: SeriesId;
+  dataIndex: number;
+} | null;

package/esm/hooks/useFocusedItem.js

@@ -0,0 +1,20 @@
+'use client';
+
+import * as React from 'react';
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+/**
+ * Get the focused item from keyboard navigation.
+ */
+export function useFocusedItem() {
+  const store = useStore();
+  const focusedSeriesType = useSelector(store, selectorChartsFocusedSeriesType);
+  const focusedSeriesId = useSelector(store, selectorChartsFocusedSeriesId);
+  const focusedDataIndex = useSelector(store, selectorChartsFocusedDataIndex);
+  return React.useMemo(() => focusedSeriesType === undefined || focusedSeriesId === undefined || focusedDataIndex === undefined ? null : {
+    seriesType: focusedSeriesType,
+    seriesId: focusedSeriesId,
+    dataIndex: focusedDataIndex
+  }, [focusedSeriesType, focusedSeriesId, focusedDataIndex]);
+}

package/esm/hooks/useIsItemFocused.d.ts

@@ -0,0 +1,12 @@
+import { FocusedItemData } from "./useFocusedItem.js";
+type UseItemFocusedParams = FocusedItemData;
+/**
+ * A hook to check if an item has the focus.
+ *
+ * If you need to process multiple points, use the `useIsItemFocusedGetter` hook instead.
+ *
+ * @param {FocusedItemData} item is the item to check
+ * @returns {boolean} the focus state
+ */
+export declare function useIsItemFocused(item: UseItemFocusedParams): boolean;
+export {};

package/esm/hooks/useIsItemFocused.js

@@ -0,0 +1,15 @@
+'use client';
+
+import { useFocusedItem } from "./useFocusedItem.js";
+/**
+ * A hook to check if an item has the focus.
+ *
+ * If you need to process multiple points, use the `useIsItemFocusedGetter` hook instead.
+ *
+ * @param {FocusedItemData} item is the item to check
+ * @returns {boolean} the focus state
+ */
+export function useIsItemFocused(item) {
+  const focusedItem = useFocusedItem();
+  return focusedItem !== null && focusedItem.seriesType === item.seriesType && focusedItem.seriesId === item.seriesId && focusedItem.dataIndex === item.dataIndex;
+}

package/esm/hooks/useIsItemFocusedGetter.d.ts

@@ -0,0 +1,8 @@
+import { FocusedItemData } from "./useFocusedItem.js";
+/**
+ * A hook to check focus state of multiple items.
+ * If you're interested by a single one, consider using `useIsItemFocused`.
+ *
+ * @returns {(item: FocusedItemData) => boolean} callback to get the state of the item.
+ */
+export declare function useIsItemFocusedGetter(): (item: FocusedItemData) => boolean;

package/esm/hooks/useIsItemFocusedGetter.js

@@ -0,0 +1,14 @@
+'use client';
+
+import { useFocusedItem } from "./useFocusedItem.js";
+
+/**
+ * A hook to check focus state of multiple items.
+ * If you're interested by a single one, consider using `useIsItemFocused`.
+ *
+ * @returns {(item: FocusedItemData) => boolean} callback to get the state of the item.
+ */
+export function useIsItemFocusedGetter() {
+  const focusedItem = useFocusedItem();
+  return item => focusedItem !== null && focusedItem.seriesType === item.seriesType && focusedItem.seriesId === item.seriesId && focusedItem.dataIndex === item.dataIndex;
+}

package/esm/hooks/useScale.js

@@ -13,6 +13,12 @@ export function getValueToPositionMapper(scale) {
   if (isOrdinalScale(scale)) {
     return value => (scale(value) ?? 0) + scale.bandwidth() / 2;
   }
+  const domain = scale.domain();
+
+  // Fixes https://github.com/mui/mui-x/issues/18999#issuecomment-3173787401
+  if (domain[0] === domain[1]) {
+    return value => value === domain[0] ? scale(value) : NaN;
+  }
   return value => scale(value);
 }
 

package/esm/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./constants/index.js";
 export * from "./context/index.js";
 export * from "./hooks/index.js";
+export * from "./plugins/index.js";
 export * from "./colorPalettes/index.js";
 export * from "./models/index.js";
 export * from "./ChartsClipPath/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.11.3
+ * @mui/x-charts v8.12.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -8,6 +8,7 @@
 export * from "./constants/index.js";
 export * from "./context/index.js";
 export * from "./hooks/index.js";
+export * from "./plugins/index.js";
 export * from "./colorPalettes/index.js";
 export * from "./models/index.js";
 export * from "./ChartsClipPath/index.js";

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";
@@ -54,7 +55,7 @@ export * from "./dateHelpers.js";
 export * from "./invertScale.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";
@@ -66,7 +67,7 @@ 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/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/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;
+}