Avoid measuring text if tick is outside visible area

Author: bernardobelchior

packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, useTheme, Theme, styled } from '@mui/material/styles';
+import { ChartInstance } from '@mui/x-charts/internals';
 import { useTicks, TickItemType } from '../hooks/useTicks';
 import { AxisDefaultized, ChartsXAxisProps } from '../models/axis';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
@@ -41,8 +42,12 @@ function addLabelDimension(
     tickLabelInterval,
     reverse,
     isMounted,
+    isPointInside,
   }: Pick<ChartsXAxisProps, 'tickLabelInterval' | 'tickLabelStyle'> &
-    Pick<AxisDefaultized, 'reverse'> & { isMounted: boolean },
+    Pick<AxisDefaultized, 'reverse'> & {
+      isMounted: boolean;
+      isPointInside: ChartInstance<unknown>['isPointInside'];
+    },
 ): (TickItemType & LabelExtraData)[] {
   const getTickSize = (tick: TickItemType) => {
     if (!isMounted || tick.formattedValue === undefined) {
@@ -78,6 +83,10 @@ function addLabelDimension(
       return { ...item, width: 0, height: 0, skipLabel: true };
     }
 
+    if (!isPointInside({ x: textPosition, y: -1 }, { direction: 'x' })) {
+      return { ...item, width: 0, height: 0, skipLabel: true };
+    }
+
     const { width, height } = getTickSize(item);
 
     const distance = getMinXTranslation(width, height, style?.angle);
@@ -190,6 +199,12 @@ function ChartsXAxis(inProps: ChartsXAxisProps) {
     tickLabelInterval,
     reverse,
     isMounted,
+    isPointInside: instance.isPointInside,
+  });
+
+  console.log({
+    xTicksWithDimension,
+    measuredTicks: xTicksWithDimension.filter(({ width }) => width > 0),
   });
 
   const labelRefPoint = {