[charts] Fix tickLabelInterval not working on YAxis (#12746)

mui · Apr 12, 2024 · ec2df5c · ec2df5c
1 parent d097dc7
commit ec2df5c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx
@@ -61,7 +61,7 @@ function addLabelDimension(
 
   // Filter label to avoid overlap
   let currentTextLimit = 0;
-  let previouseTextLimit = 0;
+  let previousTextLimit = 0;
   const direction = reverse ? -1 : 1;
   return withDimension.map((item, labelIndex) => {
     const { width, offset, labelOffset, height } = item;
@@ -71,12 +71,12 @@ function addLabelDimension(
     const gapRatio = 1.2; // Ratio applied to the minimal distance to add some margin.
 
     currentTextLimit = textPosition - (direction * (gapRatio * distance)) / 2;
-    if (labelIndex > 0 && direction * currentTextLimit < direction * previouseTextLimit) {
+    if (labelIndex > 0 && direction * currentTextLimit < direction * previousTextLimit) {
       // Except for the first label, we skip all label that overlap with the last accepted.
-      // Notice that the early return prevents `previouseTextLimit` from being updated.
+      // Notice that the early return prevents `previousTextLimit` from being updated.
       return { ...item, skipLabel: true };
     }
-    previouseTextLimit = textPosition + (direction * (gapRatio * distance)) / 2;
+    previousTextLimit = textPosition + (direction * (gapRatio * distance)) / 2;
     return item;
   });
 }
@@ -347,7 +347,7 @@ ChartsXAxis.propTypes = {
    */
   tickMinStep: PropTypes.number,
   /**
-   * The number of ticks. This number is not guaranted.
+   * The number of ticks. This number is not guaranteed.
    * Not supported by categorical axis (band, points).
    */
   tickNumber: PropTypes.number,

diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx
@@ -69,6 +69,7 @@ function ChartsYAxis(inProps: ChartsYAxisProps) {
     tickPlacement,
     tickLabelPlacement,
     tickInterval,
+    tickLabelInterval,
   } = defaultizedProps;
 
   const theme = useTheme();
@@ -143,9 +144,11 @@ function ChartsYAxis(inProps: ChartsYAxisProps) {
         />
       )}
 
-      {yTicks.map(({ formattedValue, offset, labelOffset }, index) => {
+      {yTicks.map(({ formattedValue, offset, labelOffset, value }, index) => {
         const xTickLabel = positionSign * (tickSize + 2);
         const yTickLabel = labelOffset;
+        const skipLabel =
+          typeof tickLabelInterval === 'function' && !tickLabelInterval?.(value, index);
         return (
           <g key={index} transform={`translate(0, ${offset})`} className={classes.tickContainer}>
             {!disableTicks && (
@@ -156,7 +159,7 @@ function ChartsYAxis(inProps: ChartsYAxisProps) {
               />
             )}
 
-            {formattedValue !== undefined && (
+            {formattedValue !== undefined && !skipLabel && (
               <TickLabel
                 x={xTickLabel}
                 y={yTickLabel}
@@ -282,7 +285,7 @@ ChartsYAxis.propTypes = {
    */
   tickMinStep: PropTypes.number,
   /**
-   * The number of ticks. This number is not guaranted.
+   * The number of ticks. This number is not guaranteed.
    * Not supported by categorical axis (band, points).
    */
   tickNumber: PropTypes.number,

diff --git a/packages/x-charts/src/hooks/useTicks.ts b/packages/x-charts/src/hooks/useTicks.ts
@@ -16,7 +16,7 @@ export interface TickParams {
    */
   tickMinStep?: number;
   /**
-   * The number of ticks. This number is not guaranted.
+   * The number of ticks. This number is not guaranteed.
    * Not supported by categorical axis (band, points).
    */
   tickNumber?: number;