@mui/x-charts 8.7.0 → 8.9.0

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

@@ -7,7 +7,7 @@ import { ProcessedSeries } from "../../corePlugins/useChartSeries/useChartSeries
 import { GetZoomAxisFilters, ZoomData } from "./zoom.types.js";
 export type ComputeResult<T extends ChartsAxisProps> = {
   axis: ComputedAxisConfig<T>;
-  axisIds: string[];
+  axisIds: AxisId[];
 };
 type ComputeCommonParams<T extends ChartSeriesType = ChartSeriesType> = {
   drawingArea: ChartDrawingArea;
@@ -16,6 +16,10 @@ type ComputeCommonParams<T extends ChartSeriesType = ChartSeriesType> = {
   zoomMap?: Map<AxisId, ZoomData>;
   zoomOptions?: Record<AxisId, DefaultizedZoomOptions>;
   getFilters?: GetZoomAxisFilters;
+  /**
+   * @deprecated To remove in v9. This is an experimental feature to avoid breaking change.
+   */
+  preferStrictDomainInLineCharts?: boolean;
 };
 export declare function computeAxisValue<T extends ChartSeriesType>(options: ComputeCommonParams<T> & {
   axis?: DefaultedYAxis[];

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

@@ -9,6 +9,7 @@ import { isDateData, createDateFormatter } from "../../../dateHelpers.js";
 import { zoomScaleRange } from "./zoom.js";
 import { getAxisExtremum } from "./getAxisExtremum.js";
 import { getAxisTriggerTooltip } from "./getAxisTriggerTooltip.js";
+import { getAxisDomainLimit } from "./getAxisDomainLimit.js";
 function getRange(drawingArea, axisDirection,
 // | 'rotation' | 'radius',
 axis) {
@@ -25,7 +26,8 @@ export function computeAxisValue({
   axisDirection,
   zoomMap,
   zoomOptions,
-  getFilters
+  getFilters,
+  preferStrictDomainInLineCharts
 }) {
   if (allAxis === undefined) {
     return {
@@ -95,7 +97,7 @@ export function computeAxisValue({
       return;
     }
     const scaleType = axis.scaleType ?? 'linear';
-    const domainLimit = axis.domainLimit ?? 'nice';
+    const domainLimit = preferStrictDomainInLineCharts ? getAxisDomainLimit(axis, axisDirection, axisIndex, formattedSeries) : axis.domainLimit ?? 'nice';
     const axisExtremums = [axis.min ?? minData, axis.max ?? maxData];
     if (typeof domainLimit === 'function') {
       const {

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

@@ -11,6 +11,7 @@ export declare const defaultZoomOptions: {
   filterMode: "keep";
   slider: {
     enabled: false;
+    preview: false;
     size: number;
     showTooltip: import("./zoom.types.js").ZoomSliderShowTooltip;
   };

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP, DEFAULT_ZOOM_SLIDER_SIZE } from "../../../constants.js";
+import { DEFAULT_ZOOM_SLIDER_PREVIEW_SIZE, DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP, DEFAULT_ZOOM_SLIDER_SIZE } from "../../../constants.js";
 export const defaultZoomOptions = {
   minStart: 0,
   maxEnd: 100,
@@ -10,6 +10,7 @@ export const defaultZoomOptions = {
   filterMode: 'keep',
   slider: {
     enabled: false,
+    preview: false,
     size: DEFAULT_ZOOM_SLIDER_SIZE,
     showTooltip: DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP
   }
@@ -28,6 +29,8 @@ export const defaultizeZoom = (zoom, axisId, axisDirection) => {
     axisId,
     axisDirection
   }, defaultZoomOptions, zoom, {
-    slider: _extends({}, defaultZoomOptions.slider, zoom.slider)
+    slider: _extends({}, defaultZoomOptions.slider, {
+      size: zoom.slider?.preview ?? defaultZoomOptions.slider.preview ? DEFAULT_ZOOM_SLIDER_PREVIEW_SIZE : DEFAULT_ZOOM_SLIDER_SIZE
+    }, zoom.slider)
   });
 };

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

@@ -0,0 +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) => {
+  min: number;
+  max: number;
+});

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

@@ -0,0 +1,14 @@
+export const getAxisDomainLimit = (axis, axisDirection, axisIndex, formattedSeries) => {
+  if (axis.domainLimit !== undefined) {
+    return axis.domainLimit;
+  }
+  if (axisDirection === 'x') {
+    for (const seriesId of formattedSeries.line?.seriesOrder ?? []) {
+      const series = formattedSeries.line.series[seriesId];
+      if (series.xAxisId === axis.id || series.xAxisId === undefined && axisIndex === 0) {
+        return 'strict';
+      }
+    }
+  }
+  return 'nice';
+};

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

@@ -3,6 +3,8 @@ export type * from "./useChartCartesianAxis.types.js";
 export * from "./useChartCartesianAxisRendering.selectors.js";
 export * from "./useChartCartesianAxisLayout.selectors.js";
 export * from "./useChartCartesianInteraction.selectors.js";
+export * from "./useChartCartesianHighlight.selectors.js";
+export * from "./useChartCartesianAxisPreview.selectors.js";
 export { defaultizeXAxis, defaultizeYAxis } from "./defaultizeAxis.js";
 export * from "./computeAxisValue.js";
 export * from "./createZoomLookup.js";

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

@@ -2,6 +2,8 @@ export { useChartCartesianAxis } from "./useChartCartesianAxis.js";
 export * from "./useChartCartesianAxisRendering.selectors.js";
 export * from "./useChartCartesianAxisLayout.selectors.js";
 export * from "./useChartCartesianInteraction.selectors.js";
+export * from "./useChartCartesianHighlight.selectors.js";
+export * from "./useChartCartesianAxisPreview.selectors.js";
 export { defaultizeXAxis, defaultizeYAxis } from "./defaultizeAxis.js";
 export * from "./computeAxisValue.js";
 export * from "./createZoomLookup.js";

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

@@ -1,19 +1,19 @@
-export declare const selectorChartLeftAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartLeftAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, number, []>;
-export declare const selectorChartRightAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartRightAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, number, []>;
-export declare const selectorChartTopAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartTopAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, number, []>;
-export declare const selectorChartBottomAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartBottomAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

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

@@ -2,6 +2,8 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsistency';
 import { warnOnce } from '@mui/x-internals/warning';
 import { rainbowSurgePalette } from "../../../../colorPalettes/index.js";
 import { useSelector } from "../../../store/useSelector.js";
@@ -12,6 +14,8 @@ import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisR
 import { getAxisIndex } from "./getAxisValue.js";
 import { getSVGPoint } from "../../../getSVGPoint.js";
 import { selectorChartsInteractionIsInitialized } from "../useChartInteraction/index.js";
+import { selectorChartAxisInteraction } from "./useChartCartesianInteraction.selectors.js";
+import { useLazySelectorEffect } from "../../utils/useLazySelectorEffect.js";
 export const useChartCartesianAxis = ({
   params,
   store,
@@ -22,7 +26,8 @@ export const useChartCartesianAxis = ({
   const {
     xAxis,
     yAxis,
-    dataset
+    dataset,
+    onHighlightedAxisChange
   } = params;
   if (process.env.NODE_ENV !== 'production') {
     const ids = [...(xAxis ?? []), ...(yAxis ?? [])].filter(axis => axis.id).map(axis => axis.id);
@@ -42,6 +47,25 @@ export const useChartCartesianAxis = ({
     axis: yAxisWithScale,
     axisIds: yAxisIds
   } = useSelector(store, selectorChartYAxis);
+  useAssertModelConsistency({
+    warningPrefix: 'MUI X Charts',
+    componentName: 'Chart',
+    propName: 'highlightedAxis',
+    controlled: params.highlightedAxis,
+    defaultValue: undefined
+  });
+  useEnhancedEffect(() => {
+    if (params.highlightedAxis !== undefined) {
+      store.update(prevState => {
+        if (prevState.controlledCartesianAxisHighlight === params.highlightedAxis) {
+          return prevState;
+        }
+        return _extends({}, prevState, {
+          controlledCartesianAxisHighlight: params.highlightedAxis
+        });
+      });
+    }
+  }, [store, params.highlightedAxis]);
 
   // The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartCartesianAxis`
   // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
@@ -60,6 +84,21 @@ export const useChartCartesianAxis = ({
   }, [seriesConfig, drawingArea, xAxis, yAxis, dataset, store]);
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
+  useLazySelectorEffect(store, selectorChartAxisInteraction, (prevAxisInteraction, nextAxisInteraction) => {
+    if (Object.is(prevAxisInteraction, nextAxisInteraction)) {
+      return;
+    }
+    if (prevAxisInteraction.length !== nextAxisInteraction.length) {
+      onHighlightedAxisChange(nextAxisInteraction);
+      return;
+    }
+    if (prevAxisInteraction?.some(({
+      axisId,
+      dataIndex
+    }, itemIndex) => nextAxisInteraction[itemIndex].axisId !== axisId || nextAxisInteraction[itemIndex].dataIndex !== dataIndex)) {
+      onHighlightedAxisChange(nextAxisInteraction);
+    }
+  }, !onHighlightedAxisChange);
   React.useEffect(() => {
     const element = svgRef.current;
     if (!isInteractionEnabled || !element || params.disableAxisListener) {
@@ -159,7 +198,9 @@ useChartCartesianAxis.params = {
   yAxis: true,
   dataset: true,
   onAxisClick: true,
-  disableAxisListener: true
+  disableAxisListener: true,
+  onHighlightedAxisChange: true,
+  highlightedAxis: true
 };
 useChartCartesianAxis.getDefaultizedParams = ({
   params
@@ -171,9 +212,11 @@ useChartCartesianAxis.getDefaultizedParams = ({
     defaultizedYAxis: defaultizeYAxis(params.yAxis, params.dataset)
   });
 };
-useChartCartesianAxis.getInitialState = params => ({
+useChartCartesianAxis.getInitialState = params => _extends({
   cartesianAxis: {
     x: params.defaultizedXAxis,
     y: params.defaultizedYAxis
   }
+}, params.highlightedAxis === undefined ? {} : {
+  controlledCartesianAxisHighlight: params.highlightedAxis
 });

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

@@ -1,6 +1,6 @@
 import type { ChartPluginSignature } from "../../models/index.js";
 import type { ChartSeriesType, DatasetType } from "../../../../models/seriesType/config.js";
-import type { ComputedAxis, ScaleName, AxisId, ChartsAxisData, YAxis, XAxis, DefaultedXAxis, DefaultedYAxis } from "../../../../models/axis.js";
+import type { ComputedAxis, ScaleName, AxisId, ChartsAxisData, YAxis, XAxis, DefaultedXAxis, DefaultedYAxis, AxisItemIdentifier } from "../../../../models/axis.js";
 import type { UseChartSeriesSignature } from "../../corePlugins/useChartSeries/index.js";
 import type { ZoomData, ZoomOptions, ZoomSliderShowTooltip } from "./zoom.types.js";
 import type { UseChartInteractionSignature } from "../useChartInteraction/index.js";
@@ -36,6 +36,19 @@ export interface UseChartCartesianAxisParameters<S extends ScaleName = ScaleName
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick?: (event: MouseEvent, data: null | ChartsAxisData) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
   /**
    * If `true`, the charts will not listen to the mouse move event.
    * It might break interactive features, but will improve performance.
@@ -67,6 +80,10 @@ export interface UseChartCartesianAxisState {
     x: DefaultedXAxis[];
     y: DefaultedYAxis[];
   };
+  /**
+   * The controlled axis item highlighted.
+   */
+  controlledCartesianAxisHighlight?: AxisItemIdentifier[];
 }
 export type ExtremumFilter = (value: {
   x: number | Date | string | null;

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

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

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

@@ -0,0 +1,76 @@
+import { createSelector } from "../../utils/selectors.js";
+import { selectorChartRawXAxis, selectorChartRawYAxis } from "./useChartCartesianAxisLayout.selectors.js";
+import { selectorChartSeriesConfig, selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.js";
+import { computeAxisValue } from "./computeAxisValue.js";
+import { selectorChartZoomAxisFilters, selectorChartZoomOptionsLookup } from "./useChartCartesianAxisRendering.selectors.js";
+import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/index.js";
+import { ZOOM_SLIDER_PREVIEW_SIZE } from "../../../constants.js";
+function createPreviewDrawingArea(axisDirection, mainChartDrawingArea) {
+  return axisDirection === 'x' ? {
+    left: 0,
+    top: 0,
+    width: mainChartDrawingArea.width,
+    height: ZOOM_SLIDER_PREVIEW_SIZE,
+    right: mainChartDrawingArea.width,
+    bottom: ZOOM_SLIDER_PREVIEW_SIZE
+  } : {
+    left: 0,
+    top: 0,
+    width: ZOOM_SLIDER_PREVIEW_SIZE,
+    height: mainChartDrawingArea.height,
+    right: ZOOM_SLIDER_PREVIEW_SIZE,
+    bottom: mainChartDrawingArea.height
+  };
+}
+export const selectorChartPreviewComputedXAxis = createSelector([selectorChartRawXAxis, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, selectorChartDrawingArea, (_, axisId) => axisId], (xAxes, formattedSeries, seriesConfig, zoomOptions, getFilters, chartDrawingArea, axisId) => {
+  const hasAxis = xAxes?.some(axis => axis.id === axisId);
+  const drawingArea = createPreviewDrawingArea(hasAxis ? 'x' : 'y', chartDrawingArea);
+  const options = zoomOptions[axisId];
+  const zoomMap = new Map([[axisId, {
+    axisId,
+    start: options.minStart,
+    end: options.maxEnd
+  }]]);
+  const computedAxes = computeAxisValue({
+    drawingArea,
+    formattedSeries,
+    axis: xAxes,
+    seriesConfig,
+    axisDirection: 'x',
+    zoomMap,
+    zoomOptions,
+    getFilters
+  });
+  if (computedAxes.axis[axisId]) {
+    return {
+      [axisId]: computedAxes.axis[axisId]
+    };
+  }
+  return computedAxes.axis;
+});
+export const selectorChartPreviewComputedYAxis = createSelector([selectorChartRawYAxis, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, selectorChartDrawingArea, (_, axisId) => axisId], (yAxes, formattedSeries, seriesConfig, zoomOptions, getFilters, chartDrawingArea, axisId) => {
+  const hasAxis = yAxes?.some(axis => axis.id === axisId);
+  const drawingArea = createPreviewDrawingArea(hasAxis ? 'y' : 'x', chartDrawingArea);
+  const options = zoomOptions[axisId];
+  const zoomMap = new Map([[axisId, {
+    axisId,
+    start: options.minStart,
+    end: options.maxEnd
+  }]]);
+  const computedAxes = computeAxisValue({
+    drawingArea,
+    formattedSeries,
+    axis: yAxes,
+    seriesConfig,
+    axisDirection: 'y',
+    zoomMap,
+    zoomOptions,
+    getFilters
+  });
+  if (computedAxes.axis[axisId]) {
+    return {
+      [axisId]: computedAxes.axis[axisId]
+    };
+  }
+  return computedAxes.axis;
+});

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

@@ -4,17 +4,17 @@ export declare const createZoomMap: (zoom: readonly ZoomData[]) => Map<AxisId, Z
 /**
  * Following selectors are not exported because they exist in the MIT chart only to ba able to reuse the Zoom state from the pro.
  */
-export declare const selectorChartZoomIsInteracting: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartZoomIsInteracting: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, boolean | undefined, []>;
-export declare const selectorChartZoomMap: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartZoomMap: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, Map<AxisId, ZoomData> | undefined, []>;
-export declare const selectorChartZoomOptionsLookup: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartZoomOptionsLookup: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
@@ -23,15 +23,20 @@ export declare const selectorChartZoomOptionsLookup: import("reselect").Selector
   [x: number]: import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions;
 }, []>;
 export declare const selectorChartAxisZoomOptionsLookup: import("reselect").Selector<any, import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions, [axisId: AxisId]>;
+export declare const selectorChartZoomAxisFilters: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<{}>, import("./zoom.types.js").GetZoomAxisFilters | undefined, []>;
 /**
  * The only interesting selectors that merge axis data and zoom if provided.
  */
-export declare const selectorChartXAxis: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartXAxis: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, import("./computeAxisValue.js").ComputeResult<import("../../../index.js").ChartsXAxisProps>, []>;
-export declare const selectorChartYAxis: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartYAxis: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

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

@@ -6,6 +6,7 @@ import { computeAxisValue } from "./computeAxisValue.js";
 import { createAxisFilterMapper, createGetAxisFilters } from "./createAxisFilterMapper.js";
 import { createZoomLookup } from "./createZoomLookup.js";
 import { selectorChartRawXAxis, selectorChartRawYAxis } from "./useChartCartesianAxisLayout.selectors.js";
+import { selectorPreferStrictDomainInLineCharts } from "../../corePlugins/useChartExperimentalFeature/index.js";
 export const createZoomMap = zoom => {
   const zoomItemMap = new Map();
   zoom.forEach(zoomItem => {
@@ -37,7 +38,7 @@ const selectorChartYFilter = createSelector([selectorChartZoomMap, selectorChart
   formattedSeries,
   direction: 'y'
 }));
-const selectorChartZoomAxisFilters = createSelector([selectorChartXFilter, selectorChartYFilter, selectorChartRawXAxis, selectorChartRawYAxis], (xMapper, yMapper, xAxis, yAxis) => {
+export const selectorChartZoomAxisFilters = createSelector([selectorChartXFilter, selectorChartYFilter, selectorChartRawXAxis, selectorChartRawYAxis], (xMapper, yMapper, xAxis, yAxis) => {
   if (xMapper === undefined || yMapper === undefined) {
     // Early return if there is no zoom.
     return undefined;
@@ -66,7 +67,7 @@ const selectorChartZoomAxisFilters = createSelector([selectorChartXFilter, selec
  * The only interesting selectors that merge axis data and zoom if provided.
  */
 
-export const selectorChartXAxis = createSelector([selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters) => computeAxisValue({
+export const selectorChartXAxis = createSelector([selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, selectorPreferStrictDomainInLineCharts], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts) => computeAxisValue({
   drawingArea,
   formattedSeries,
   axis,
@@ -74,9 +75,10 @@ export const selectorChartXAxis = createSelector([selectorChartRawXAxis, selecto
   axisDirection: 'x',
   zoomMap,
   zoomOptions,
-  getFilters
+  getFilters,
+  preferStrictDomainInLineCharts
 }));
-export const selectorChartYAxis = createSelector([selectorChartRawYAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters) => computeAxisValue({
+export const selectorChartYAxis = createSelector([selectorChartRawYAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, selectorPreferStrictDomainInLineCharts], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts) => computeAxisValue({
   drawingArea,
   formattedSeries,
   axis,
@@ -84,7 +86,8 @@ export const selectorChartYAxis = createSelector([selectorChartRawYAxis, selecto
   axisDirection: 'y',
   zoomMap,
   zoomOptions,
-  getFilters
+  getFilters,
+  preferStrictDomainInLineCharts
 }));
 export const selectorChartAxis = createSelector([selectorChartXAxis, selectorChartYAxis, (_, axisId) => axisId], (xAxes, yAxes, axisId) => xAxes?.axis[axisId] ?? yAxes?.axis[axisId]);
 export const selectorChartRawAxis = createSelector([selectorChartRawXAxis, selectorChartRawYAxis, (state, axisId) => axisId], (xAxes, yAxes, axisId) => {

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

@@ -0,0 +1,47 @@
+import { AxisItemIdentifier, ChartsAxisProps } from "../../../../models/axis.js";
+export declare const selectorChartsHighlightXAxisIndex: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}>, AxisItemIdentifier[], [id?: import("../../../index.js").AxisId | undefined]>;
+export declare const selectorChartsHighlightYAxisIndex: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}>, AxisItemIdentifier[], [id?: import("../../../index.js").AxisId | undefined]>;
+export declare const selectorChartsHighlightXAxisValue: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}>, {
+  value: any;
+  axisId: import("../../../index.js").AxisId;
+  dataIndex: number;
+}[] | {
+  axisId: import("../../../index.js").AxisId;
+  dataIndex: number | null;
+  value: number | Date;
+}[], [id?: import("../../../index.js").AxisId | undefined]>;
+export declare const selectorChartsHighlightYAxisValue: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}>, {
+  value: any;
+  axisId: import("../../../index.js").AxisId;
+  dataIndex: number;
+}[] | {
+  axisId: import("../../../index.js").AxisId;
+  dataIndex: number | null;
+  value: number | Date;
+}[], [id?: import("../../../index.js").AxisId | undefined]>;
+export declare const selectorChartsHighlightXAxis: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, import("../../../index.js").ComputedAxis<keyof import("../../../index.js").AxisScaleConfig, any, ChartsAxisProps>[], []>;
+export declare const selectorChartsHighlightYAxis: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, import("../../../index.js").ComputedAxis<keyof import("../../../index.js").AxisScaleConfig, any, ChartsAxisProps>[], []>;

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

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createSelector } from "../../utils/selectors.js";
+import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisRendering.selectors.js";
+import { selectorChartsInteractionXAxisIndex, selectorChartsInteractionXAxisValue, selectorChartsInteractionYAxisIndex, selectorChartsInteractionYAxisValue } from "./useChartCartesianInteraction.selectors.js";
+const selectorChartControlledCartesianAxisHighlight = state => state.controlledCartesianAxisHighlight;
+const selectAxisHighlight = (computedIndex, axis, axisItems) => {
+  if (axisItems !== undefined) {
+    return axisItems.filter(item => axis.axis[item.axisId] !== undefined).map(item => item);
+  }
+  return computedIndex === null ? [] : [{
+    axisId: axis.axisIds[0],
+    dataIndex: computedIndex
+  }];
+};
+export const selectorChartsHighlightXAxisIndex = createSelector([selectorChartsInteractionXAxisIndex, selectorChartXAxis, selectorChartControlledCartesianAxisHighlight], selectAxisHighlight);
+export const selectorChartsHighlightYAxisIndex = createSelector([selectorChartsInteractionYAxisIndex, selectorChartYAxis, selectorChartControlledCartesianAxisHighlight], selectAxisHighlight);
+const selectAxisHighlightWithValue = (computedIndex, computedValue, axis, axisItems) => {
+  if (axisItems !== undefined) {
+    return axisItems.map(item => _extends({}, item, {
+      value: axis.axis[item.axisId]?.data?.[item.dataIndex]
+    })).filter(({
+      value
+    }) => value !== undefined);
+  }
+  return computedValue === null ? [] : [{
+    axisId: axis.axisIds[0],
+    dataIndex: computedIndex,
+    value: computedValue
+  }];
+};
+export const selectorChartsHighlightXAxisValue = createSelector([selectorChartsInteractionXAxisIndex, selectorChartsInteractionXAxisValue, selectorChartXAxis, selectorChartControlledCartesianAxisHighlight], selectAxisHighlightWithValue);
+export const selectorChartsHighlightYAxisValue = createSelector([selectorChartsInteractionYAxisIndex, selectorChartsInteractionYAxisValue, selectorChartYAxis, selectorChartControlledCartesianAxisHighlight], selectAxisHighlightWithValue);
+
+/**
+ * Get the scale of the axis with highlight if controlled. The default axis otherwise.
+ * @param controlledItem The controlled value of highlightedAxis
+ * @param axis The axis state after all the processing
+ * @returns axis state
+ */
+const selectAxis = (axisItems, axis) => {
+  if (axisItems === undefined) {
+    return [axis.axis[axis.axisIds[0]]];
+  }
+  const filteredAxes = axisItems.map(item => axis.axis[item.axisId] ?? null).filter(item => item !== null);
+  return filteredAxes;
+};
+export const selectorChartsHighlightXAxis = createSelector([selectorChartControlledCartesianAxisHighlight, selectorChartXAxis], selectAxis);
+export const selectorChartsHighlightYAxis = createSelector([selectorChartControlledCartesianAxisHighlight, selectorChartYAxis], selectAxis);