[charts] improve tick rendering performance

Author: bernardobelchior

packages/x-charts/src/ChartsGrid/ChartsHorizontalGrid.tsx

@@ -19,7 +19,7 @@ export function ChartsGridHorizontal(props: ChartsGridHorizontalProps) {
 
   const { scale, tickNumber, tickInterval } = axis;
 
-  const yTicks = useTicks({ scale, tickNumber, tickInterval });
+  const yTicks = useTicks({ scale, tickNumber, tickInterval, direction: 'x' });
 
   return (
     <React.Fragment>

packages/x-charts/src/ChartsGrid/ChartsVerticalGrid.tsx

@@ -19,7 +19,7 @@ export function ChartsGridVertical(props: ChartsGridVerticalProps) {
 
   const { scale, tickNumber, tickInterval } = axis;
 
-  const xTicks = useTicks({ scale, tickNumber, tickInterval });
+  const xTicks = useTicks({ scale, tickNumber, tickInterval, direction: 'y' });
 
   return (
     <React.Fragment>

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

@@ -284,6 +284,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) {
     tickInterval,
     tickPlacement,
     tickLabelPlacement,
+    direction: 'x',
   });
 
   const visibleLabels = getVisibleLabels(xTicks, {

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

@@ -171,6 +171,7 @@ function ChartsYAxis(inProps: ChartsYAxisProps) {
     tickPlacement,
     tickLabelPlacement,
     tickInterval,
+    direction: 'y',
   });
 
   const positionSign = position === 'right' ? 1 : -1;

packages/x-charts/src/hooks/useTicks.ts

@@ -1,5 +1,6 @@
 'use client';
 import * as React from 'react';
+import { useChartContext } from '@mui/x-charts/context/ChartProvider';
 import { AxisConfig, D3Scale } from '../models/axis';
 import { isBandScale } from '../internals/isBandScale';
 import { isInfinity } from '../internals/isInfinity';
@@ -85,6 +86,7 @@ export function useTicks(
   options: {
     scale: D3Scale;
     valueFormatter?: AxisConfig['valueFormatter'];
+    direction: 'x' | 'y';
   } & Pick<TickParams, 'tickNumber' | 'tickInterval' | 'tickPlacement' | 'tickLabelPlacement'>,
 ): TickItemType[] {
   const {
@@ -94,7 +96,9 @@ export function useTicks(
     tickInterval,
     tickPlacement = 'extremities',
     tickLabelPlacement: tickLabelPlacementProp,
+    direction,
   } = options;
+  const { instance } = useChartContext();
 
   return React.useMemo(() => {
     // band scale
@@ -157,20 +161,41 @@ export function useTicks(
     }
     const tickLabelPlacement = tickLabelPlacementProp;
     const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
-    return ticks.map((value: any, i) => {
-      return {
-        value,
-        formattedValue:
-          valueFormatter?.(value, { location: 'tick', scale }) ??
-          scale.tickFormat(tickNumber)(value),
-        offset: scale(value),
-        // Allowing the label to be placed in the middle of a continuous scale is weird.
-        // But it is useful in some cases, like funnel categories with a linear scale.
-        labelOffset:
-          tickLabelPlacement === 'middle'
-            ? scale(ticks[i - 1] ?? 0) - (scale(value) + scale(ticks[i - 1] ?? 0)) / 2
-            : 0,
-      };
-    });
-  }, [scale, tickInterval, tickNumber, valueFormatter, tickPlacement, tickLabelPlacementProp]);
+
+    // Ticks inside the drawing area
+    const visibleTicks = [];
+
+    for (let i = 0; i < ticks.length; i += 1) {
+      const value = ticks[i];
+      const offset = scale(value);
+      const point = direction === 'x' ? { x: offset, y: 0 } : { x: 0, y: offset };
+
+      if (instance.isPointInside(point, { direction })) {
+        visibleTicks.push({
+          value,
+          formattedValue:
+            valueFormatter?.(value, { location: 'tick', scale }) ??
+            scale.tickFormat(tickNumber)(value),
+          offset,
+          // Allowing the label to be placed in the middle of a continuous scale is weird.
+          // But it is useful in some cases, like funnel categories with a linear scale.
+          labelOffset:
+            tickLabelPlacement === 'middle'
+              ? scale(ticks[i - 1] ?? 0) - (offset + scale(ticks[i - 1] ?? 0)) / 2
+              : 0,
+        });
+      }
+    }
+
+    return visibleTicks;
+  }, [
+    scale,
+    tickLabelPlacementProp,
+    tickInterval,
+    tickNumber,
+    tickPlacement,
+    valueFormatter,
+    direction,
+    instance,
+  ]);
 }