@mui/x-charts 8.12.0 → 8.13.0

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

@@ -1,6 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +8,6 @@ exports.getActualAxisExtrema = getActualAxisExtrema;
 exports.getDomainLimit = getDomainLimit;
 exports.getXAxesScales = getXAxesScales;
 exports.getYAxesScales = getYAxesScales;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _d3Scale = require("@mui/x-charts-vendor/d3-scale");
 var _axis = require("../../../../models/axis");
 var _zoom = require("./zoom");
@@ -28,13 +26,14 @@ function getXAxesScales({
   axis: axes = [],
   seriesConfig,
   zoomMap,
-  preferStrictDomainInLineCharts
+  preferStrictDomainInLineCharts,
+  defaultTickNumber
 }) {
   const scales = {};
   axes.forEach((eachAxis, axisIndex) => {
     const axis = eachAxis;
     const zoom = zoomMap?.get(axis.id);
-    scales[axis.id] = getAxisScale(axis, 'x', zoom, drawingArea, seriesConfig, axisIndex, formattedSeries, preferStrictDomainInLineCharts);
+    scales[axis.id] = getAxisScale(axis, 'x', zoom, drawingArea, seriesConfig, axisIndex, formattedSeries, preferStrictDomainInLineCharts, defaultTickNumber);
   });
   return scales;
 }
@@ -44,13 +43,14 @@ function getYAxesScales({
   axis: axes = [],
   seriesConfig,
   zoomMap,
-  preferStrictDomainInLineCharts
+  preferStrictDomainInLineCharts,
+  defaultTickNumber
 }) {
   const scales = {};
   axes.forEach((eachAxis, axisIndex) => {
     const axis = eachAxis;
     const zoom = zoomMap?.get(axis.id);
-    scales[axis.id] = getAxisScale(axis, 'y', zoom, drawingArea, seriesConfig, axisIndex, formattedSeries, preferStrictDomainInLineCharts);
+    scales[axis.id] = getAxisScale(axis, 'y', zoom, drawingArea, seriesConfig, axisIndex, formattedSeries, preferStrictDomainInLineCharts, defaultTickNumber);
   });
   return scales;
 }
@@ -58,7 +58,7 @@ function getAxisScale(axis, axisDirection, zoom, drawingArea, seriesConfig, axis
 /**
  * @deprecated To remove in v9. This is an experimental feature to avoid breaking change.
  */
-preferStrictDomainInLineCharts) {
+preferStrictDomainInLineCharts, defaultTickNumber) {
   const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
   const range = getRange(drawingArea, axisDirection, axis);
   if ((0, _axis.isBandScaleConfig)(axis)) {
@@ -89,10 +89,7 @@ preferStrictDomainInLineCharts) {
     axisExtrema[0] = min;
     axisExtrema[1] = max;
   }
-  const rawTickNumber = (0, _ticks.getTickNumber)((0, _extends2.default)({}, axis, {
-    range,
-    domain: axisExtrema
-  }));
+  const rawTickNumber = (0, _ticks.getTickNumber)(axis, axisExtrema, defaultTickNumber);
   const zoomedRange = (0, _zoom.zoomScaleRange)(range, zoomRange);
   const scale = (0, _getScale.getScale)(scaleType, axisExtrema, zoomedRange);
   if ((0, _axis.isSymlogScaleConfig)(axis) && axis.constant != null) {

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

@@ -30,7 +30,7 @@ function createPreviewDrawingArea(axisDirection, mainChartDrawingArea) {
     bottom: mainChartDrawingArea.height
   };
 }
-const selectorChartPreviewXScales = exports.selectorChartPreviewXScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, (_, axisId) => axisId], function selectorChartPreviewXScales(xAxes, chartDrawingArea, formattedSeries, seriesConfig, zoomOptions, preferStrictDomainInLineCharts, axisId) {
+const selectorChartPreviewXScales = exports.selectorChartPreviewXScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, _useChartCartesianAxisRendering.selectorDefaultXAxisTickNumber, (_, axisId) => axisId], function selectorChartPreviewXScales(xAxes, chartDrawingArea, formattedSeries, seriesConfig, zoomOptions, preferStrictDomainInLineCharts, defaultTickNumber, axisId) {
   const hasAxis = xAxes?.some(axis => axis.id === axisId);
   const drawingArea = createPreviewDrawingArea(hasAxis ? 'x' : 'y', chartDrawingArea);
   const options = zoomOptions[axisId];
@@ -45,7 +45,8 @@ const selectorChartPreviewXScales = exports.selectorChartPreviewXScales = (0, _s
     axis: xAxes,
     seriesConfig,
     zoomMap,
-    preferStrictDomainInLineCharts
+    preferStrictDomainInLineCharts,
+    defaultTickNumber
   });
 });
 const selectorChartPreviewComputedXAxis = exports.selectorChartPreviewComputedXAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartZoomAxisFilters, _useChartDimensions.selectorChartDrawingArea, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, selectorChartPreviewXScales, (_, axisId) => axisId], (xAxes, formattedSeries, seriesConfig, zoomOptions, getFilters, chartDrawingArea, preferStrictDomainInLineCharts, scales, axisId) => {
@@ -76,7 +77,7 @@ const selectorChartPreviewComputedXAxis = exports.selectorChartPreviewComputedXA
   }
   return computedAxes.axis;
 });
-const selectorChartPreviewYScales = exports.selectorChartPreviewYScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, (_, axisId) => axisId], function selectorChartPreviewYScales(yAxes, chartDrawingArea, formattedSeries, seriesConfig, zoomOptions, preferStrictDomainInLineCharts, axisId) {
+const selectorChartPreviewYScales = exports.selectorChartPreviewYScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, _useChartCartesianAxisRendering.selectorDefaultYAxisTickNumber, (_, axisId) => axisId], function selectorChartPreviewYScales(yAxes, chartDrawingArea, formattedSeries, seriesConfig, zoomOptions, preferStrictDomainInLineCharts, defaultTickNumber, axisId) {
   const hasAxis = yAxes?.some(axis => axis.id === axisId);
   const drawingArea = createPreviewDrawingArea(hasAxis ? 'y' : 'x', chartDrawingArea);
   const options = zoomOptions[axisId];
@@ -91,7 +92,8 @@ const selectorChartPreviewYScales = exports.selectorChartPreviewYScales = (0, _s
     axis: yAxes,
     seriesConfig,
     zoomMap,
-    preferStrictDomainInLineCharts
+    preferStrictDomainInLineCharts,
+    defaultTickNumber
   });
 });
 const selectorChartPreviewComputedYAxis = exports.selectorChartPreviewComputedYAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartZoomAxisFilters, _useChartDimensions.selectorChartDrawingArea, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, selectorChartPreviewYScales, (_, axisId) => axisId], (yAxes, formattedSeries, seriesConfig, zoomOptions, getFilters, chartDrawingArea, preferStrictDomainInLineCharts, scales, axisId) => {

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

@@ -23,6 +23,16 @@ 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 selectorDefaultXAxisTickNumber: 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<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, number, []>;
+export declare const selectorDefaultYAxisTickNumber: 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<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, number, []>;
 export declare const selectorChartXScales: 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<{}> & {

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.selectorChartZoomAxisFilters = exports.selectorChartYScales = exports.selectorChartYAxis = exports.selectorChartXScales = exports.selectorChartXAxis = exports.selectorChartRawAxis = exports.selectorChartAxisZoomOptionsLookup = exports.selectorChartAxis = exports.createZoomMap = void 0;
+exports.selectorDefaultYAxisTickNumber = exports.selectorDefaultXAxisTickNumber = exports.selectorChartZoomOptionsLookup = exports.selectorChartZoomMap = exports.selectorChartZoomIsInteracting = exports.selectorChartZoomAxisFilters = exports.selectorChartYScales = exports.selectorChartYAxis = exports.selectorChartXScales = 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");
@@ -15,6 +15,7 @@ var _createZoomLookup = require("./createZoomLookup");
 var _useChartCartesianAxisLayout = require("./useChartCartesianAxisLayout.selectors");
 var _useChartExperimentalFeature = require("../../corePlugins/useChartExperimentalFeature");
 var _getAxisScale = require("./getAxisScale");
+var _ticks = require("../../../ticks");
 const createZoomMap = zoom => {
   const zoomItemMap = new Map();
   zoom.forEach(zoomItem => {
@@ -35,24 +36,32 @@ const selectorChartZoomOptionsLookup = exports.selectorChartZoomOptionsLookup =
 const selectorChartAxisZoomOptionsLookup = exports.selectorChartAxisZoomOptionsLookup = (0, _selectors.createSelector)([selectorChartZoomOptionsLookup, (_, axisId) => axisId], (axisLookup, axisId) => axisLookup[axisId]);
 const selectorChartXFilter = (0, _selectors.createSelector)([selectorChartZoomMap, selectorChartZoomOptionsLookup], (zoomMap, zoomOptions) => zoomMap && zoomOptions && (0, _createAxisFilterMapper.createAxisFilterMapper)(zoomMap, zoomOptions, 'x'));
 const selectorChartYFilter = (0, _selectors.createSelector)([selectorChartZoomMap, selectorChartZoomOptionsLookup], (zoomMap, zoomOptions) => zoomMap && zoomOptions && (0, _createAxisFilterMapper.createAxisFilterMapper)(zoomMap, zoomOptions, 'y'));
-const selectorChartXScales = exports.selectorChartXScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts], function selectorChartXScales(axis, drawingArea, formattedSeries, seriesConfig, zoomMap, preferStrictDomainInLineCharts) {
+const selectorDefaultXAxisTickNumber = exports.selectorDefaultXAxisTickNumber = (0, _selectors.createSelector)([_useChartDimensions.selectorChartDrawingArea], function selectorDefaultXAxisTickNumber(drawingArea) {
+  return (0, _ticks.getDefaultTickNumber)(drawingArea.width);
+});
+const selectorDefaultYAxisTickNumber = exports.selectorDefaultYAxisTickNumber = (0, _selectors.createSelector)([_useChartDimensions.selectorChartDrawingArea], function selectorDefaultYAxisTickNumber(drawingArea) {
+  return (0, _ticks.getDefaultTickNumber)(drawingArea.height);
+});
+const selectorChartXScales = exports.selectorChartXScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, selectorDefaultXAxisTickNumber], function selectorChartXScales(axis, drawingArea, formattedSeries, seriesConfig, zoomMap, preferStrictDomainInLineCharts, defaultTickNumber) {
   return (0, _getAxisScale.getXAxesScales)({
     drawingArea,
     formattedSeries,
     axis,
     seriesConfig,
     zoomMap,
-    preferStrictDomainInLineCharts
+    preferStrictDomainInLineCharts,
+    defaultTickNumber
   });
 });
-const selectorChartYScales = exports.selectorChartYScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts], function selectorChartYScales(axis, drawingArea, formattedSeries, seriesConfig, zoomMap, preferStrictDomainInLineCharts) {
+const selectorChartYScales = exports.selectorChartYScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, selectorDefaultYAxisTickNumber], function selectorChartYScales(axis, drawingArea, formattedSeries, seriesConfig, zoomMap, preferStrictDomainInLineCharts, defaultTickNumber) {
   return (0, _getAxisScale.getYAxesScales)({
     drawingArea,
     formattedSeries,
     axis,
     seriesConfig,
     zoomMap,
-    preferStrictDomainInLineCharts
+    preferStrictDomainInLineCharts,
+    defaultTickNumber
   });
 });
 const selectorChartZoomAxisFilters = exports.selectorChartZoomAxisFilters = (0, _selectors.createSelector)([selectorChartXFilter, selectorChartYFilter, _useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartCartesianAxisLayout.selectorChartRawYAxis, selectorChartXScales, selectorChartYScales], (xMapper, yMapper, xAxis, yAxis, xScales, yScales) => {

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

@@ -13,7 +13,7 @@ export declare const selectorChartsHighlightXAxisValue: import("reselect").Selec
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}>, {
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}> & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState>, {
   value: any;
   axisId: import("../../../index.js").AxisId;
   dataIndex: number;
@@ -26,7 +26,7 @@ export declare const selectorChartsHighlightYAxisValue: import("reselect").Selec
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}>, {
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}> & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState>, {
   value: any;
   axisId: import("../../../index.js").AxisId;
   dataIndex: number;

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

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _selectors = require("../../utils/selectors");
 var _useChartCartesianAxisRendering = require("./useChartCartesianAxisRendering.selectors");
 var _useChartCartesianInteraction = require("./useChartCartesianInteraction.selectors");
+var _useChartKeyboardNavigation = require("../useChartKeyboardNavigation/useChartKeyboardNavigation.selectors");
+var _useChartInteraction = require("../useChartInteraction/useChartInteraction.selectors");
 const selectorChartControlledCartesianAxisHighlight = state => state.controlledCartesianAxisHighlight;
 const selectAxisHighlight = (computedIndex, axis, axisItems) => {
   if (axisItems !== undefined) {
@@ -21,22 +23,43 @@ const selectAxisHighlight = (computedIndex, axis, axisItems) => {
 };
 const selectorChartsHighlightXAxisIndex = exports.selectorChartsHighlightXAxisIndex = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionXAxisIndex, _useChartCartesianAxisRendering.selectorChartXAxis, selectorChartControlledCartesianAxisHighlight], selectAxisHighlight);
 const selectorChartsHighlightYAxisIndex = exports.selectorChartsHighlightYAxisIndex = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionYAxisIndex, _useChartCartesianAxisRendering.selectorChartYAxis, selectorChartControlledCartesianAxisHighlight], selectAxisHighlight);
-const selectAxisHighlightWithValue = (computedIndex, computedValue, axis, axisItems) => {
-  if (axisItems !== undefined) {
-    return axisItems.map(item => (0, _extends2.default)({}, item, {
+const selectAxisHighlightWithValue = (computedIndex, computedValue, axis, controlledAxisItems, keyboardAxisItem, lastInteractionUpdate) => {
+  if (controlledAxisItems !== undefined) {
+    return controlledAxisItems.map(item => (0, _extends2.default)({}, item, {
       value: axis.axis[item.axisId]?.data?.[item.dataIndex]
     })).filter(({
       value
     }) => value !== undefined);
   }
-  return computedValue === null ? [] : [{
+  const pointerHighlight = computedValue !== null && {
     axisId: axis.axisIds[0],
     dataIndex: computedIndex,
     value: computedValue
-  }];
+  };
+  const keyboardValue = keyboardAxisItem && axis.axis[keyboardAxisItem.axisId]?.data?.[keyboardAxisItem.dataIndex];
+  const keyboardHighlight = keyboardAxisItem && keyboardValue != null && (0, _extends2.default)({}, keyboardAxisItem, {
+    value: keyboardValue
+  });
+  if (lastInteractionUpdate === 'pointer') {
+    if (pointerHighlight) {
+      return [pointerHighlight];
+    }
+    if (keyboardHighlight) {
+      return [keyboardHighlight];
+    }
+  }
+  if (lastInteractionUpdate === 'keyboard') {
+    if (keyboardHighlight) {
+      return [keyboardHighlight];
+    }
+    if (pointerHighlight) {
+      return [pointerHighlight];
+    }
+  }
+  return [];
 };
-const selectorChartsHighlightXAxisValue = exports.selectorChartsHighlightXAxisValue = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionXAxisIndex, _useChartCartesianInteraction.selectorChartsInteractionXAxisValue, _useChartCartesianAxisRendering.selectorChartXAxis, selectorChartControlledCartesianAxisHighlight], selectAxisHighlightWithValue);
-const selectorChartsHighlightYAxisValue = exports.selectorChartsHighlightYAxisValue = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionYAxisIndex, _useChartCartesianInteraction.selectorChartsInteractionYAxisValue, _useChartCartesianAxisRendering.selectorChartYAxis, selectorChartControlledCartesianAxisHighlight], selectAxisHighlightWithValue);
+const selectorChartsHighlightXAxisValue = exports.selectorChartsHighlightXAxisValue = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionXAxisIndex, _useChartCartesianInteraction.selectorChartsInteractionXAxisValue, _useChartCartesianAxisRendering.selectorChartXAxis, selectorChartControlledCartesianAxisHighlight, _useChartKeyboardNavigation.selectorChartsKeyboardXAxisIndex, _useChartInteraction.selectorChartsLastInteraction], selectAxisHighlightWithValue);
+const selectorChartsHighlightYAxisValue = exports.selectorChartsHighlightYAxisValue = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionYAxisIndex, _useChartCartesianInteraction.selectorChartsInteractionYAxisValue, _useChartCartesianAxisRendering.selectorChartYAxis, selectorChartControlledCartesianAxisHighlight, _useChartKeyboardNavigation.selectorChartsKeyboardYAxisIndex, _useChartInteraction.selectorChartsLastInteraction], selectAxisHighlightWithValue);
 
 /**
  * Get the scale of the axis with highlight if controlled. The default axis otherwise.

package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js

@@ -14,10 +14,10 @@ const useChartInteraction = ({
   const cleanInteraction = (0, _useEventCallback.default)(function cleanInteraction() {
     store.update(prev => {
       return (0, _extends2.default)({}, prev, {
-        interaction: {
+        interaction: (0, _extends2.default)({}, prev.interaction, {
           pointer: null,
           item: null
-        }
+        })
       });
     });
   });
@@ -58,7 +58,8 @@ const useChartInteraction = ({
   const setPointerCoordinate = (0, _useEventCallback.default)(function setPointerCoordinate(coordinate) {
     store.update(prev => (0, _extends2.default)({}, prev, {
       interaction: (0, _extends2.default)({}, prev.interaction, {
-        pointer: coordinate
+        pointer: coordinate,
+        lastUpdate: coordinate !== null ? 'pointer' : prev.interaction.lastUpdate
       })
     }));
   });
@@ -75,7 +76,8 @@ exports.useChartInteraction = useChartInteraction;
 useChartInteraction.getInitialState = () => ({
   interaction: {
     item: null,
-    pointer: null
+    pointer: null,
+    lastUpdate: 'pointer'
   }
 });
 useChartInteraction.params = {};

package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.d.ts

@@ -27,4 +27,9 @@ export declare const selectorChartsInteractionItemIsDefined: import("reselect").
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, boolean, any[]>;
+}, boolean, any[]>;
+export declare const selectorChartsLastInteraction: 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.types.js").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, import("./useChartInteraction.types.js").InteractionUpdateSource | undefined, any[]>;

package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartsInteractionPointerY = exports.selectorChartsInteractionPointerX = exports.selectorChartsInteractionPointer = exports.selectorChartsInteractionItemIsDefined = exports.selectorChartsInteractionItem = exports.selectorChartsInteractionIsInitialized = void 0;
+exports.selectorChartsLastInteraction = exports.selectorChartsInteractionPointerY = exports.selectorChartsInteractionPointerX = exports.selectorChartsInteractionPointer = exports.selectorChartsInteractionItemIsDefined = exports.selectorChartsInteractionItem = exports.selectorChartsInteractionIsInitialized = void 0;
 var _selectors = require("../../utils/selectors");
 const selectInteraction = state => state.interaction;
 const selectorChartsInteractionIsInitialized = exports.selectorChartsInteractionIsInitialized = (0, _selectors.createSelector)([selectInteraction], interaction => interaction !== undefined);
@@ -11,4 +11,5 @@ const selectorChartsInteractionItem = exports.selectorChartsInteractionItem = (0
 const selectorChartsInteractionPointer = exports.selectorChartsInteractionPointer = (0, _selectors.createSelector)([selectInteraction], interaction => interaction?.pointer ?? null);
 const selectorChartsInteractionPointerX = exports.selectorChartsInteractionPointerX = (0, _selectors.createSelector)([selectorChartsInteractionPointer], pointer => pointer && pointer.x);
 const selectorChartsInteractionPointerY = exports.selectorChartsInteractionPointerY = (0, _selectors.createSelector)([selectorChartsInteractionPointer], pointer => pointer && pointer.y);
-const selectorChartsInteractionItemIsDefined = exports.selectorChartsInteractionItemIsDefined = (0, _selectors.createSelector)([selectorChartsInteractionItem], item => item !== null);
+const selectorChartsInteractionItemIsDefined = exports.selectorChartsInteractionItemIsDefined = (0, _selectors.createSelector)([selectorChartsInteractionItem], item => item !== null);
+const selectorChartsLastInteraction = exports.selectorChartsLastInteraction = (0, _selectors.createSelector)([selectInteraction], interaction => interaction?.lastUpdate);

package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.d.ts

@@ -4,6 +4,7 @@ export type Coordinate = {
   x: number;
   y: number;
 };
+export type InteractionUpdateSource = 'pointer' | 'keyboard';
 export interface UseChartInteractionInstance {
   /**
    * Remove all interaction.
@@ -35,6 +36,11 @@ export interface UseChartInteractionState {
      * The x/y SVG coordinate of the "main" pointer
      */
     pointer: Coordinate | null;
+    /**
+     * The last interaction highlight update.
+     * Used to decide if highlight should be based on pointer position or keyboard navigation.
+     */
+    lastUpdate: InteractionUpdateSource;
   };
 }
 export type UseChartInteractionSignature = ChartPluginSignature<{