@mui/x-charts 8.7.0 → 8.8.0

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.d.ts

@@ -0,0 +1,21 @@
+import { ChartPluginSignature } from "../../models/index.js";
+export interface ChartExperimentalFeatures {
+  /**
+   * Default domainLimit to strict for line chart x-axis.
+   */
+  preferStrictDomainInLineCharts?: boolean;
+}
+export interface UseChartExperimentalFeaturesParameters {
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures?: ChartExperimentalFeatures;
+}
+export interface UseChartExperimentalFeaturesState {
+  experimentalFeatures?: ChartExperimentalFeatures;
+}
+export type UseChartExperimentalFeaturesSignature = ChartPluginSignature<{
+  params: UseChartExperimentalFeaturesParameters;
+  defaultizedParams: UseChartExperimentalFeaturesParameters;
+  state: UseChartExperimentalFeaturesState;
+}>;

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/internals/plugins/corePlugins/useChartId/useChartId.selectors.d.ts

@@ -3,7 +3,7 @@
  * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
  * @returns {string} The id attribute of the chart.
  */
-export declare const selectorChartId: import("reselect").Selector<import("./useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartId: import("reselect").Selector<import("./useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.d.ts

@@ -1,12 +1,12 @@
 import { ChartRootSelector } from "../../utils/selectors.js";
 import { UseChartSeriesSignature } from "./useChartSeries.types.js";
 export declare const selectorChartSeriesState: ChartRootSelector<UseChartSeriesSignature>;
-export declare const selectorChartSeriesProcessed: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartSeriesProcessed: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, import("./useChartSeries.types.js").ProcessedSeries<keyof import("../../../index.js").ChartsSeriesConfig>, any[]>;
-export declare const selectorChartSeriesConfig: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartSeriesConfig: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

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

@@ -16,6 +16,7 @@ var _dateHelpers = require("../../../dateHelpers");
 var _zoom = require("./zoom");
 var _getAxisExtremum = require("./getAxisExtremum");
 var _getAxisTriggerTooltip = require("./getAxisTriggerTooltip");
+var _getAxisDomainLimit = require("./getAxisDomainLimit");
 function getRange(drawingArea, axisDirection,
 // | 'rotation' | 'radius',
 axis) {
@@ -32,7 +33,8 @@ function computeAxisValue({
   axisDirection,
   zoomMap,
   zoomOptions,
-  getFilters
+  getFilters,
+  preferStrictDomainInLineCharts
 }) {
   if (allAxis === undefined) {
     return {
@@ -102,7 +104,7 @@ function computeAxisValue({
       return;
     }
     const scaleType = axis.scaleType ?? 'linear';
-    const domainLimit = axis.domainLimit ?? 'nice';
+    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 {

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

@@ -17,6 +17,7 @@ const defaultZoomOptions = exports.defaultZoomOptions = {
   filterMode: 'keep',
   slider: {
     enabled: false,
+    preview: false,
     size: _constants.DEFAULT_ZOOM_SLIDER_SIZE,
     showTooltip: _constants.DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP
   }
@@ -35,7 +36,9 @@ const defaultizeZoom = (zoom, axisId, axisDirection) => {
     axisId,
     axisDirection
   }, defaultZoomOptions, zoom, {
-    slider: (0, _extends2.default)({}, defaultZoomOptions.slider, zoom.slider)
+    slider: (0, _extends2.default)({}, defaultZoomOptions.slider, {
+      size: zoom.slider?.preview ?? defaultZoomOptions.slider.preview ? _constants.DEFAULT_ZOOM_SLIDER_PREVIEW_SIZE : _constants.DEFAULT_ZOOM_SLIDER_SIZE
+    }, zoom.slider)
   });
 };
 exports.defaultizeZoom = defaultizeZoom;

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAxisDomainLimit = void 0;
+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';
+};
+exports.getAxisDomainLimit = getAxisDomainLimit;

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

@@ -63,6 +63,30 @@ Object.keys(_useChartCartesianInteraction).forEach(function (key) {
     }
   });
 });
+var _useChartCartesianHighlight = require("./useChartCartesianHighlight.selectors");
+Object.keys(_useChartCartesianHighlight).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartCartesianHighlight[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartCartesianHighlight[key];
+    }
+  });
+});
+var _useChartCartesianAxisPreview = require("./useChartCartesianAxisPreview.selectors");
+Object.keys(_useChartCartesianAxisPreview).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartCartesianAxisPreview[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartCartesianAxisPreview[key];
+    }
+  });
+});
 var _defaultizeAxis = require("./defaultizeAxis");
 var _computeAxisValue = require("./computeAxisValue");
 Object.keys(_computeAxisValue).forEach(function (key) {

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

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useChartCartesianAxis = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useAssertModelConsistency = require("@mui/x-internals/useAssertModelConsistency");
 var _warning = require("@mui/x-internals/warning");
 var _colorPalettes = require("../../../../colorPalettes");
 var _useSelector = require("../../../store/useSelector");
@@ -19,6 +21,8 @@ var _useChartCartesianAxisRendering = require("./useChartCartesianAxisRendering.
 var _getAxisValue = require("./getAxisValue");
 var _getSVGPoint = require("../../../getSVGPoint");
 var _useChartInteraction = require("../useChartInteraction");
+var _useChartCartesianInteraction = require("./useChartCartesianInteraction.selectors");
+var _useLazySelectorEffect = require("../../utils/useLazySelectorEffect");
 const useChartCartesianAxis = ({
   params,
   store,
@@ -29,7 +33,8 @@ 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);
@@ -49,6 +54,25 @@ const useChartCartesianAxis = ({
     axis: yAxisWithScale,
     axisIds: yAxisIds
   } = (0, _useSelector.useSelector)(store, _useChartCartesianAxisRendering.selectorChartYAxis);
+  (0, _useAssertModelConsistency.useAssertModelConsistency)({
+    warningPrefix: 'MUI X Charts',
+    componentName: 'Chart',
+    propName: 'highlightedAxis',
+    controlled: params.highlightedAxis,
+    defaultValue: undefined
+  });
+  (0, _useEnhancedEffect.default)(() => {
+    if (params.highlightedAxis !== undefined) {
+      store.update(prevState => {
+        if (prevState.controlledCartesianAxisHighlight === params.highlightedAxis) {
+          return prevState;
+        }
+        return (0, _extends2.default)({}, 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
@@ -67,6 +91,21 @@ const useChartCartesianAxis = ({
   }, [seriesConfig, drawingArea, xAxis, yAxis, dataset, store]);
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
+  (0, _useLazySelectorEffect.useLazySelectorEffect)(store, _useChartCartesianInteraction.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) {
@@ -167,7 +206,9 @@ useChartCartesianAxis.params = {
   yAxis: true,
   dataset: true,
   onAxisClick: true,
-  disableAxisListener: true
+  disableAxisListener: true,
+  onHighlightedAxisChange: true,
+  highlightedAxis: true
 };
 useChartCartesianAxis.getDefaultizedParams = ({
   params
@@ -179,9 +220,11 @@ useChartCartesianAxis.getDefaultizedParams = ({
     defaultizedYAxis: (0, _defaultizeAxis.defaultizeYAxis)(params.yAxis, params.dataset)
   });
 };
-useChartCartesianAxis.getInitialState = params => ({
+useChartCartesianAxis.getInitialState = params => (0, _extends2.default)({
   cartesianAxis: {
     x: params.defaultizedXAxis,
     y: params.defaultizedYAxis
   }
+}, params.highlightedAxis === undefined ? {} : {
+  controlledCartesianAxisHighlight: params.highlightedAxis
 });

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

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorChartPreviewComputedYAxis = exports.selectorChartPreviewComputedXAxis = void 0;
+var _selectors = require("../../utils/selectors");
+var _useChartCartesianAxisLayout = require("./useChartCartesianAxisLayout.selectors");
+var _useChartSeries = require("../../corePlugins/useChartSeries");
+var _computeAxisValue = require("./computeAxisValue");
+var _useChartCartesianAxisRendering = require("./useChartCartesianAxisRendering.selectors");
+var _useChartDimensions = require("../../corePlugins/useChartDimensions");
+var _constants = require("../../../constants");
+function createPreviewDrawingArea(axisDirection, mainChartDrawingArea) {
+  return axisDirection === 'x' ? {
+    left: 0,
+    top: 0,
+    width: mainChartDrawingArea.width,
+    height: _constants.ZOOM_SLIDER_PREVIEW_SIZE,
+    right: mainChartDrawingArea.width,
+    bottom: _constants.ZOOM_SLIDER_PREVIEW_SIZE
+  } : {
+    left: 0,
+    top: 0,
+    width: _constants.ZOOM_SLIDER_PREVIEW_SIZE,
+    height: mainChartDrawingArea.height,
+    right: _constants.ZOOM_SLIDER_PREVIEW_SIZE,
+    bottom: mainChartDrawingArea.height
+  };
+}
+const selectorChartPreviewComputedXAxis = exports.selectorChartPreviewComputedXAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartZoomAxisFilters, _useChartDimensions.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 = (0, _computeAxisValue.computeAxisValue)({
+    drawingArea,
+    formattedSeries,
+    axis: xAxes,
+    seriesConfig,
+    axisDirection: 'x',
+    zoomMap,
+    zoomOptions,
+    getFilters
+  });
+  if (computedAxes.axis[axisId]) {
+    return {
+      [axisId]: computedAxes.axis[axisId]
+    };
+  }
+  return computedAxes.axis;
+});
+const selectorChartPreviewComputedYAxis = exports.selectorChartPreviewComputedYAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartZoomAxisFilters, _useChartDimensions.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 = (0, _computeAxisValue.computeAxisValue)({
+    drawingArea,
+    formattedSeries,
+    axis: yAxes,
+    seriesConfig,
+    axisDirection: 'y',
+    zoomMap,
+    zoomOptions,
+    getFilters
+  });
+  if (computedAxes.axis[axisId]) {
+    return {
+      [axisId]: computedAxes.axis[axisId]
+    };
+  }
+  return computedAxes.axis;
+});

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartZoomOptionsLookup = exports.selectorChartZoomMap = exports.selectorChartZoomIsInteracting = exports.selectorChartYAxis = exports.selectorChartXAxis = exports.selectorChartRawAxis = exports.selectorChartAxisZoomOptionsLookup = exports.selectorChartAxis = exports.createZoomMap = void 0;
+exports.selectorChartZoomOptionsLookup = exports.selectorChartZoomMap = exports.selectorChartZoomIsInteracting = exports.selectorChartZoomAxisFilters = exports.selectorChartYAxis = exports.selectorChartXAxis = exports.selectorChartRawAxis = exports.selectorChartAxisZoomOptionsLookup = exports.selectorChartAxis = exports.createZoomMap = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useChartDimensions = require("../../corePlugins/useChartDimensions");
 var _useChartSeries = require("../../corePlugins/useChartSeries");
@@ -13,6 +13,7 @@ var _computeAxisValue = require("./computeAxisValue");
 var _createAxisFilterMapper = require("./createAxisFilterMapper");
 var _createZoomLookup = require("./createZoomLookup");
 var _useChartCartesianAxisLayout = require("./useChartCartesianAxisLayout.selectors");
+var _useChartExperimentalFeature = require("../../corePlugins/useChartExperimentalFeature");
 const createZoomMap = zoom => {
   const zoomItemMap = new Map();
   zoom.forEach(zoomItem => {
@@ -45,7 +46,7 @@ const selectorChartYFilter = (0, _selectors.createSelector)([selectorChartZoomMa
   formattedSeries,
   direction: 'y'
 }));
-const selectorChartZoomAxisFilters = (0, _selectors.createSelector)([selectorChartXFilter, selectorChartYFilter, _useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartCartesianAxisLayout.selectorChartRawYAxis], (xMapper, yMapper, xAxis, yAxis) => {
+const selectorChartZoomAxisFilters = exports.selectorChartZoomAxisFilters = (0, _selectors.createSelector)([selectorChartXFilter, selectorChartYFilter, _useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartCartesianAxisLayout.selectorChartRawYAxis], (xMapper, yMapper, xAxis, yAxis) => {
   if (xMapper === undefined || yMapper === undefined) {
     // Early return if there is no zoom.
     return undefined;
@@ -74,7 +75,7 @@ const selectorChartZoomAxisFilters = (0, _selectors.createSelector)([selectorCha
  * The only interesting selectors that merge axis data and zoom if provided.
  */
 
-const selectorChartXAxis = exports.selectorChartXAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters) => (0, _computeAxisValue.computeAxisValue)({
+const selectorChartXAxis = exports.selectorChartXAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts) => (0, _computeAxisValue.computeAxisValue)({
   drawingArea,
   formattedSeries,
   axis,
@@ -82,9 +83,10 @@ const selectorChartXAxis = exports.selectorChartXAxis = (0, _selectors.createSel
   axisDirection: 'x',
   zoomMap,
   zoomOptions,
-  getFilters
+  getFilters,
+  preferStrictDomainInLineCharts
 }));
-const selectorChartYAxis = exports.selectorChartYAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters) => (0, _computeAxisValue.computeAxisValue)({
+const selectorChartYAxis = exports.selectorChartYAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts) => (0, _computeAxisValue.computeAxisValue)({
   drawingArea,
   formattedSeries,
   axis,
@@ -92,7 +94,8 @@ const selectorChartYAxis = exports.selectorChartYAxis = (0, _selectors.createSel
   axisDirection: 'y',
   zoomMap,
   zoomOptions,
-  getFilters
+  getFilters,
+  preferStrictDomainInLineCharts
 }));
 const selectorChartAxis = exports.selectorChartAxis = (0, _selectors.createSelector)([selectorChartXAxis, selectorChartYAxis, (_, axisId) => axisId], (xAxes, yAxes, axisId) => xAxes?.axis[axisId] ?? yAxes?.axis[axisId]);
 const selectorChartRawAxis = exports.selectorChartRawAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartCartesianAxisLayout.selectorChartRawYAxis, (state, axisId) => axisId], (xAxes, yAxes, axisId) => {