diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx index 967e95415b9a..eeb1383e940b 100644 --- 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 index e74ad4ab9cca..21d2f0b8f10d 100644 --- 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 ( {!disableTicks && ( @@ -156,7 +159,7 @@ function ChartsYAxis(inProps: ChartsYAxisProps) { /> )} - {formattedValue !== undefined && ( + {formattedValue !== undefined && !skipLabel && (