@mui/x-charts 9.0.3 → 9.0.4

package/BarChart/FocusedBar.js

@@ -30,6 +30,9 @@ function FocusedBar(props) {
     return null;
   }
   const series = barSeries.series[focusedItem.seriesId];
+  if (!series || series.hidden) {
+    return null;
+  }
   if (series.data[focusedItem.dataIndex] == null) {
     // Handle missing data
     return null;

package/BarChart/FocusedBar.mjs

@@ -23,6 +23,9 @@ export function FocusedBar(props) {
     return null;
   }
   const series = barSeries.series[focusedItem.seriesId];
+  if (!series || series.hidden) {
+    return null;
+  }
   if (series.data[focusedItem.dataIndex] == null) {
     // Handle missing data
     return null;

package/CHANGELOG.md

@@ -1,5 +1,92 @@
 # Changelog
 
+## 9.0.4
+
+_Apr 28, 2026_
+
+We'd like to extend a big thank you to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- Fix Pickers previous (v9.0.3) release ensuring the latest `@mui/x-internals` version usage
+
+The following team members contributed to this release:
+@alexfauquette, @JCQuintas, @LukasTy, @mj12albert
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.0.4`
+
+Internal changes.
+
+#### `@mui/x-data-grid-pro@9.0.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@9.0.4`.
+
+#### `@mui/x-data-grid-premium@9.0.4` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@9.0.4`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.0.4`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@9.0.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@9.0.4`.
+
+### Charts
+
+#### `@mui/x-charts@9.0.4`
+
+- [charts] Exclude hidden series and items from keyboard navigation (alt approach) (#22221) @JCQuintas
+- [charts] Fix line interaction with `area` and `conectNulls` (#22227) @alexfauquette
+- [charts] Implement the continuous case of `getAxisIndex` for rotation axis (#22230) @alexfauquette
+
+#### `@mui/x-charts-pro@9.0.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@9.0.4`.
+
+#### `@mui/x-charts-premium@9.0.4` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@9.0.4` plus:
+
+- [charts-premium] Add `showMark` and `shape` properties to radial line (#22226) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@9.0.4`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@9.0.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@9.0.4`.
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.4`
+
+Internal changes.
+
+#### `@mui/x-scheduler-premium@9.0.4` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-scheduler@9.0.4`.
+
+### Codemod
+
+#### `@mui/x-codemod@9.0.4`
+
+Internal changes.
+
+### Docs
+
+- [docs] Update WCAG links (#22234) @mj12albert
+
+### Core
+
+- [code-infra] Avoid overriding `renovate` `ignoredPaths` (#22228) @LukasTy
+
 ## 9.0.3
 
 _Apr 27, 2026_

package/ChartsTooltip/useAxesTooltip.js

@@ -34,7 +34,15 @@ function defaultAxisTooltipConfig(axis, dataIndex, axisDirection) {
     seriesItems: []
   };
 }
-
+function getSeriesMark(series) {
+  if (!('showMark' in series) || !series.showMark) {
+    return undefined;
+  }
+  if ('shape' in series && series.shape) {
+    return series.shape;
+  }
+  return 'circle';
+}
 /**
  * Returns the axes to display in the tooltip and the series item related to them.
  */
@@ -169,7 +177,7 @@ function useAxesTooltip(params) {
           formattedValue,
           formattedLabel,
           markType: seriesToAdd.labelMarkType,
-          markShape: 'showMark' in seriesToAdd && seriesToAdd.showMark ? seriesToAdd.shape ?? 'circle' : undefined
+          markShape: getSeriesMark(seriesToAdd)
         });
       }
     });
@@ -213,7 +221,7 @@ function useAxesTooltip(params) {
           formattedValue,
           formattedLabel,
           markType: seriesToAdd.labelMarkType,
-          markShape: 'showMark' in seriesToAdd && seriesToAdd.showMark ? 'circle' : undefined
+          markShape: getSeriesMark(seriesToAdd)
         });
       }
     });

package/ChartsTooltip/useAxesTooltip.mjs

@@ -29,7 +29,15 @@ function defaultAxisTooltipConfig(axis, dataIndex, axisDirection) {
     seriesItems: []
   };
 }
-
+function getSeriesMark(series) {
+  if (!('showMark' in series) || !series.showMark) {
+    return undefined;
+  }
+  if ('shape' in series && series.shape) {
+    return series.shape;
+  }
+  return 'circle';
+}
 /**
  * Returns the axes to display in the tooltip and the series item related to them.
  */
@@ -164,7 +172,7 @@ export function useAxesTooltip(params) {
           formattedValue,
           formattedLabel,
           markType: seriesToAdd.labelMarkType,
-          markShape: 'showMark' in seriesToAdd && seriesToAdd.showMark ? seriesToAdd.shape ?? 'circle' : undefined
+          markShape: getSeriesMark(seriesToAdd)
         });
       }
     });
@@ -208,7 +216,7 @@ export function useAxesTooltip(params) {
           formattedValue,
           formattedLabel,
           markType: seriesToAdd.labelMarkType,
-          markShape: 'showMark' in seriesToAdd && seriesToAdd.showMark ? 'circle' : undefined
+          markShape: getSeriesMark(seriesToAdd)
         });
       }
     });

package/LineChart/FocusedLineMark.js

@@ -26,6 +26,9 @@ function FocusedLineMark() {
     return null;
   }
   const series = lineSeries.series[focusedItem.seriesId];
+  if (!series || series.hidden) {
+    return null;
+  }
   if (series.data[focusedItem.dataIndex] == null) {
     // Handle missing data
     return null;

package/LineChart/FocusedLineMark.mjs

@@ -21,6 +21,9 @@ export function FocusedLineMark() {
     return null;
   }
   const series = lineSeries.series[focusedItem.seriesId];
+  if (!series || series.hidden) {
+    return null;
+  }
   if (series.data[focusedItem.dataIndex] == null) {
     // Handle missing data
     return null;

package/LineChart/seriesConfig/getItemAtPosition.js

@@ -8,6 +8,7 @@ var _useChartCartesianAxisRendering = require("../../internals/plugins/featurePl
 var _seriesSelectorOfType = require("../../internals/seriesSelectorOfType");
 var _getAxisValue = require("../../internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue");
 var _scaleGuards = require("../../internals/scaleGuards");
+var _getAsNumber = require("../../internals/getAsNumber");
 var _getValueToPositionMapper = require("../../hooks/getValueToPositionMapper");
 var _curveEvaluation = require("./curveEvaluation");
 /**
@@ -43,13 +44,12 @@ function getBracketIndices(xAxis, pointX) {
 
   // For continuous axes, find the two adjacent data points surrounding pointX.
   const xValue = scale.invert(pointX);
-  const xAsNumber = xValue instanceof Date ? xValue.getTime() : xValue;
-  const getAsNumber = v => v instanceof Date ? v.getTime() : v;
+  const xAsNumber = (0, _getAsNumber.getAsNumber)(xValue);
 
   // Find the rightmost index where data[i] <= xValue.
   let leftIndex = -1;
   for (let i = 0; i < axisData.length; i += 1) {
-    if (getAsNumber(axisData[i]) <= xAsNumber) {
+    if ((0, _getAsNumber.getAsNumber)(axisData[i]) <= xAsNumber) {
       leftIndex = i;
     } else {
       break;
@@ -60,7 +60,7 @@ function getBracketIndices(xAxis, pointX) {
     return null;
   }
   if (leftIndex === axisData.length - 1) {
-    if (getAsNumber(axisData[leftIndex]) < xAsNumber) {
+    if ((0, _getAsNumber.getAsNumber)(axisData[leftIndex]) < xAsNumber) {
       // Pointer is strictly past the last data point — out of range.
       return null;
     }
@@ -90,6 +90,7 @@ function getBaselinePixelY(baseline, yScale, stackedY0) {
   if (baseline === 'min') {
     return yScale.range()[0];
   }
+
   // Default: use the stacked baseline value.
   const value = yScale(stackedY0);
   if (Number.isNaN(value)) {
@@ -192,6 +193,9 @@ function getItemAtPosition(state, point) {
       connectNulls,
       curve
     } = seriesItem;
+    if (!connectNulls && (data[left] == null || data[right] == null)) {
+      continue;
+    }
     const dataIndex = (0, _getAxisValue.getAxisIndex)(xAxis, point.x);
     if (dataIndex === -1) {
       continue;
@@ -249,7 +253,7 @@ function getItemAtPosition(state, point) {
   }
 
   // Step 2: If the closest line is within the proximity threshold, pick it.
-  if (closestItem && closestDistance <= LINE_PROXIMITY_THRESHOLD) {
+  if (closestItem && closestDistance <= LINE_PROXIMITY_THRESHOLD && !series.series[closestItem.seriesId].area) {
     return closestItem;
   }
 
@@ -261,8 +265,8 @@ function getItemAtPosition(state, point) {
   for (let g = stackingGroups.length - 1; g >= 0; g -= 1) {
     const groupIds = stackingGroups[g].ids;
 
-    // Iterate in reverse so the topmost stacked area is checked first.
-    for (let i = groupIds.length - 1; i >= 0; i -= 1) {
+    // Iterate in direct order cause the `useAreaPlotData` is already doing a reverse order.
+    for (let i = 0; i < groupIds.length; i += 1) {
       const seriesId = groupIds[i];
       const seriesItem = series.series[seriesId];
       if (seriesItem.hidden || !seriesItem.area) {
@@ -292,12 +296,7 @@ function getItemAtPosition(state, point) {
       } = seriesItem;
 
       // Check for null gaps at bracket points.
-      const leftIsNull = data[left] == null;
-      const rightIsNull = data[right] == null;
-      if (leftIsNull && rightIsNull) {
-        continue;
-      }
-      if ((leftIsNull || rightIsNull) && !connectNulls) {
+      if ((data[left] == null || data[right] == null) && !connectNulls) {
         continue;
       }
       const xScale = xAxis.scale;
@@ -308,28 +307,6 @@ function getItemAtPosition(state, point) {
         continue;
       }
       const getPixelX = idx => xPosition(xData[idx]);
-      if (left === right) {
-        // Ordinal axis or pointer exactly on a data point.
-        const stacked = visibleStackedData[left];
-        if (!stacked) {
-          continue;
-        }
-        const yBottom = getBaselinePixelY(baseline, yScale, stacked[0]);
-        const yTop = yScale(stacked[1]);
-        if ([yBottom, yTop].some(v => v == null || Number.isNaN(v))) {
-          continue;
-        }
-        const yMin = Math.min(yBottom, yTop);
-        const yMax = Math.max(yBottom, yTop);
-        if (point.y >= yMin && point.y <= yMax) {
-          return {
-            type: 'line',
-            seriesId,
-            dataIndex: left
-          };
-        }
-        continue;
-      }
 
       // Build pixel-coordinate points for the top and bottom curves,
       // then evaluate them at the pointer's x using the actual d3 curve.

package/LineChart/seriesConfig/getItemAtPosition.mjs

@@ -2,6 +2,7 @@ import { selectorChartXAxis, selectorChartYAxis } from "../../internals/plugins/
 import { selectorAllSeriesOfType } from "../../internals/seriesSelectorOfType.mjs";
 import { getAxisIndex } from "../../internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.mjs";
 import { isOrdinalScale } from "../../internals/scaleGuards.mjs";
+import { getAsNumber } from "../../internals/getAsNumber.mjs";
 import { getValueToPositionMapper } from "../../hooks/getValueToPositionMapper.mjs";
 import { evaluateCurveY } from "./curveEvaluation.mjs";
 
@@ -38,8 +39,7 @@ function getBracketIndices(xAxis, pointX) {
 
   // For continuous axes, find the two adjacent data points surrounding pointX.
   const xValue = scale.invert(pointX);
-  const xAsNumber = xValue instanceof Date ? xValue.getTime() : xValue;
-  const getAsNumber = v => v instanceof Date ? v.getTime() : v;
+  const xAsNumber = getAsNumber(xValue);
 
   // Find the rightmost index where data[i] <= xValue.
   let leftIndex = -1;
@@ -85,6 +85,7 @@ function getBaselinePixelY(baseline, yScale, stackedY0) {
   if (baseline === 'min') {
     return yScale.range()[0];
   }
+
   // Default: use the stacked baseline value.
   const value = yScale(stackedY0);
   if (Number.isNaN(value)) {
@@ -187,6 +188,9 @@ export default function getItemAtPosition(state, point) {
       connectNulls,
       curve
     } = seriesItem;
+    if (!connectNulls && (data[left] == null || data[right] == null)) {
+      continue;
+    }
     const dataIndex = getAxisIndex(xAxis, point.x);
     if (dataIndex === -1) {
       continue;
@@ -244,7 +248,7 @@ export default function getItemAtPosition(state, point) {
   }
 
   // Step 2: If the closest line is within the proximity threshold, pick it.
-  if (closestItem && closestDistance <= LINE_PROXIMITY_THRESHOLD) {
+  if (closestItem && closestDistance <= LINE_PROXIMITY_THRESHOLD && !series.series[closestItem.seriesId].area) {
     return closestItem;
   }
 
@@ -256,8 +260,8 @@ export default function getItemAtPosition(state, point) {
   for (let g = stackingGroups.length - 1; g >= 0; g -= 1) {
     const groupIds = stackingGroups[g].ids;
 
-    // Iterate in reverse so the topmost stacked area is checked first.
-    for (let i = groupIds.length - 1; i >= 0; i -= 1) {
+    // Iterate in direct order cause the `useAreaPlotData` is already doing a reverse order.
+    for (let i = 0; i < groupIds.length; i += 1) {
       const seriesId = groupIds[i];
       const seriesItem = series.series[seriesId];
       if (seriesItem.hidden || !seriesItem.area) {
@@ -287,12 +291,7 @@ export default function getItemAtPosition(state, point) {
       } = seriesItem;
 
       // Check for null gaps at bracket points.
-      const leftIsNull = data[left] == null;
-      const rightIsNull = data[right] == null;
-      if (leftIsNull && rightIsNull) {
-        continue;
-      }
-      if ((leftIsNull || rightIsNull) && !connectNulls) {
+      if ((data[left] == null || data[right] == null) && !connectNulls) {
         continue;
       }
       const xScale = xAxis.scale;
@@ -303,28 +302,6 @@ export default function getItemAtPosition(state, point) {
         continue;
       }
       const getPixelX = idx => xPosition(xData[idx]);
-      if (left === right) {
-        // Ordinal axis or pointer exactly on a data point.
-        const stacked = visibleStackedData[left];
-        if (!stacked) {
-          continue;
-        }
-        const yBottom = getBaselinePixelY(baseline, yScale, stacked[0]);
-        const yTop = yScale(stacked[1]);
-        if ([yBottom, yTop].some(v => v == null || Number.isNaN(v))) {
-          continue;
-        }
-        const yMin = Math.min(yBottom, yTop);
-        const yMax = Math.max(yBottom, yTop);
-        if (point.y >= yMin && point.y <= yMax) {
-          return {
-            type: 'line',
-            seriesId,
-            dataIndex: left
-          };
-        }
-        continue;
-      }
 
       // Build pixel-coordinate points for the top and bottom curves,
       // then evaluate them at the pointer's x using the actual d3 curve.

package/PieChart/FocusedPieArc.js

@@ -38,6 +38,9 @@ function FocusedPieArc(props) {
     return null;
   }
   const item = series.data[focusedItem.dataIndex];
+  if (!item || item.hidden) {
+    return null;
+  }
   const _getModifiedArcProper = (0, _getModifiedArcProperties.getModifiedArcProperties)(series, pieSeriesLayout[focusedItem.seriesId], isHighlighted, isFaded),
     arcSizes = (0, _objectWithoutPropertiesLoose2.default)(_getModifiedArcProper, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieArc.PieArc, (0, _extends2.default)({

package/PieChart/FocusedPieArc.mjs

@@ -32,6 +32,9 @@ export function FocusedPieArc(props) {
     return null;
   }
   const item = series.data[focusedItem.dataIndex];
+  if (!item || item.hidden) {
+    return null;
+  }
   const _getModifiedArcProper = getModifiedArcProperties(series, pieSeriesLayout[focusedItem.seriesId], isHighlighted, isFaded),
     arcSizes = _objectWithoutPropertiesLoose(_getModifiedArcProper, _excluded);
   return /*#__PURE__*/_jsx(PieArc, _extends({

package/RadarChart/FocusedRadarMark.js

@@ -20,6 +20,9 @@ function FocusedRadarMark(props) {
   if (!focusedItem || focusedItem.type !== 'radar' || seriesCoordinates.length === 0) {
     return null;
   }
+  if (seriesCoordinates[0].hidden) {
+    return null;
+  }
   const point = seriesCoordinates[0].points[focusedItem.dataIndex];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({
     fill: "none",

package/RadarChart/FocusedRadarMark.mjs

@@ -13,6 +13,9 @@ export function FocusedRadarMark(props) {
   if (!focusedItem || focusedItem.type !== 'radar' || seriesCoordinates.length === 0) {
     return null;
   }
+  if (seriesCoordinates[0].hidden) {
+    return null;
+  }
   const point = seriesCoordinates[0].points[focusedItem.dataIndex];
   return /*#__PURE__*/_jsx("rect", _extends({
     fill: "none",

package/ScatterChart/FocusedScatterMark.js

@@ -38,6 +38,9 @@ function FocusedScatterMark(_ref) {
     return null;
   }
   const series = scatterSeries?.series[focusedItem.seriesId];
+  if (!series || series.hidden) {
+    return null;
+  }
   const xAxisId = series.xAxisId ?? xAxisIds[0];
   const yAxisId = series.yAxisId ?? yAxisIds[0];
   const getXPosition = (0, _hooks.getValueToPositionMapper)(xAxis[xAxisId].scale);

package/ScatterChart/FocusedScatterMark.mjs

@@ -31,6 +31,9 @@ export function FocusedScatterMark(_ref) {
     return null;
   }
   const series = scatterSeries?.series[focusedItem.seriesId];
+  if (!series || series.hidden) {
+    return null;
+  }
   const xAxisId = series.xAxisId ?? xAxisIds[0];
   const yAxisId = series.yAxisId ?? yAxisIds[0];
   const getXPosition = getValueToPositionMapper(xAxis[xAxisId].scale);

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.0.3
+ * @mui/x-charts v9.0.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.0.3
+ * @mui/x-charts v9.0.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/commonNextFocusItem.js

@@ -10,8 +10,13 @@ exports.createGetPreviousSeriesFocusedItem = createGetPreviousSeriesFocusedItem;
 var _getPreviousNonEmptySeries = require("./plugins/featurePlugins/useChartKeyboardNavigation/utils/getPreviousNonEmptySeries");
 var _getMaxSeriesLength = require("./plugins/featurePlugins/useChartKeyboardNavigation/utils/getMaxSeriesLength");
 var _getNextNonEmptySeries = require("./plugins/featurePlugins/useChartKeyboardNavigation/utils/getNextNonEmptySeries");
+var _findVisibleDataIndex = require("./plugins/featurePlugins/useChartKeyboardNavigation/utils/findVisibleDataIndex");
 var _seriesHasData = require("./seriesHasData");
 var _useChartSeries = require("./plugins/corePlugins/useChartSeries/useChartSeries.selectors");
+function isSeriesHidden(processedSeries, type, seriesId) {
+  const seriesItem = processedSeries[type]?.series[seriesId];
+  return Boolean(seriesItem && 'hidden' in seriesItem && seriesItem.hidden);
+}
 function createGetNextIndexFocusedItem(
 /**
  * The set of series types compatible with this navigation action.
@@ -25,7 +30,7 @@ allowCycles = false) {
     const processedSeries = (0, _useChartSeries.selectorChartSeriesProcessed)(state);
     let seriesId = currentItem?.seriesId;
     let type = currentItem?.type;
-    if (!type || seriesId == null || !(0, _seriesHasData.seriesHasData)(processedSeries, type, seriesId)) {
+    if (!type || seriesId == null || !(0, _seriesHasData.seriesHasData)(processedSeries, type, seriesId) || isSeriesHidden(processedSeries, type, seriesId)) {
       const nextSeries = (0, _getNextNonEmptySeries.getNextNonEmptySeries)(processedSeries, compatibleSeriesTypes, type, seriesId);
       if (nextSeries === null) {
         return null;
@@ -40,10 +45,22 @@ allowCycles = false) {
     } else {
       dataIndex = Math.min(maxLength - 1, dataIndex);
     }
+    const visibleDataIndex = (0, _findVisibleDataIndex.findVisibleDataIndex)({
+      processedSeries,
+      type,
+      seriesId,
+      startIndex: dataIndex,
+      dataLength: maxLength,
+      direction: 1,
+      allowCycles
+    });
+    if (visibleDataIndex === null) {
+      return null;
+    }
     return {
       type: type,
       seriesId,
-      dataIndex
+      dataIndex: visibleDataIndex
     };
   };
 }
@@ -60,7 +77,7 @@ allowCycles = false) {
     const processedSeries = (0, _useChartSeries.selectorChartSeriesProcessed)(state);
     let seriesId = currentItem?.seriesId;
     let type = currentItem?.type;
-    if (!type || seriesId == null || !(0, _seriesHasData.seriesHasData)(processedSeries, type, seriesId)) {
+    if (!type || seriesId == null || !(0, _seriesHasData.seriesHasData)(processedSeries, type, seriesId) || isSeriesHidden(processedSeries, type, seriesId)) {
       const previousSeries = (0, _getPreviousNonEmptySeries.getPreviousNonEmptySeries)(processedSeries, compatibleSeriesTypes, type, seriesId);
       if (previousSeries === null) {
         return null;
@@ -75,10 +92,22 @@ allowCycles = false) {
     } else {
       dataIndex = Math.max(0, dataIndex);
     }
+    const visibleDataIndex = (0, _findVisibleDataIndex.findVisibleDataIndex)({
+      processedSeries,
+      type,
+      seriesId,
+      startIndex: dataIndex,
+      dataLength: maxLength,
+      direction: -1,
+      allowCycles
+    });
+    if (visibleDataIndex === null) {
+      return null;
+    }
     return {
       type: type,
       seriesId,
-      dataIndex
+      dataIndex: visibleDataIndex
     };
   };
 }
@@ -97,11 +126,24 @@ compatibleSeriesTypes) {
     }
     type = nextSeries.type;
     seriesId = nextSeries.seriesId;
-    const dataIndex = currentItem?.dataIndex == null ? 0 : currentItem.dataIndex;
+    const data = processedSeries[type].series[seriesId].data;
+    const startIndex = currentItem?.dataIndex == null ? 0 : Math.min(currentItem.dataIndex, data.length - 1);
+    const visibleDataIndex = (0, _findVisibleDataIndex.findVisibleDataIndex)({
+      processedSeries,
+      type,
+      seriesId,
+      startIndex,
+      dataLength: data.length,
+      direction: 1,
+      allowCycles: true
+    });
+    if (visibleDataIndex === null) {
+      return null;
+    }
     return {
       type: type,
       seriesId,
-      dataIndex
+      dataIndex: visibleDataIndex
     };
   };
 }
@@ -121,11 +163,23 @@ compatibleSeriesTypes) {
     type = previousSeries.type;
     seriesId = previousSeries.seriesId;
     const data = processedSeries[type].series[seriesId].data;
-    const dataIndex = currentItem?.dataIndex == null ? data.length - 1 : currentItem.dataIndex;
+    const startIndex = currentItem?.dataIndex == null ? data.length - 1 : Math.min(currentItem.dataIndex, data.length - 1);
+    const visibleDataIndex = (0, _findVisibleDataIndex.findVisibleDataIndex)({
+      processedSeries,
+      type,
+      seriesId,
+      startIndex,
+      dataLength: data.length,
+      direction: -1,
+      allowCycles: true
+    });
+    if (visibleDataIndex === null) {
+      return null;
+    }
     return {
       type: type,
       seriesId,
-      dataIndex
+      dataIndex: visibleDataIndex
     };
   };
 }