@mui/x-charts 8.3.0 → 8.3.1

package/CHANGELOG.md

@@ -5,6 +5,96 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.3.1
+
+_May 14, 2025_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Norwegian Bokmål (nb-NO) locale on the Data Grid
+- 🌍 Improve Korean (ko-KR) locale on the Data Grid and Pickers
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@100pearlcent, @htollefsen, @JanPretzel, @sai6855.
+Following are all team members who have contributed to this release:
+@bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @MBilalShafi, @oliviertassinari, @prakhargupta1.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.3.1`
+
+- [DataGrid] Add `reason` param for `onRowSelectionModelChange` callback (#17545) @sai6855
+- [DataGrid] Fix `renderContext` calculation loop (#17779) @cherniavskii
+- [DataGrid] Fix column spanning jump on scroll (#17759) @cherniavskii
+- [DataGrid] Fix material augmentation not working (#17761) @cherniavskii
+- [DataGrid] Use arguments selector for checkbox props (#17683) @MBilalShafi
+- [l10n] Improve Norwegian Bokmål (nb-NO) locale (#17766) @htollefsen
+- [l10n] Improve Korean (ko-KR) locale (#17484) @100pearlcent
+
+#### `@mui/x-data-grid-pro@8.3.1` [![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@8.3.1`.
+
+#### `@mui/x-data-grid-premium@8.3.1` [![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@8.3.1`, plus:
+
+- [DataGridPremium] Fix aggregation label not being used in pivot panel (#17760) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.3.1`
+
+- [fields] Add notch to the field outlined when the label is manually shrank (#17620) @flaviendelangle
+- [l10n] Improve Korean (ko-KR) locale (#17484) @100pearlcent
+
+#### `@mui/x-date-pickers-pro@8.3.1` [![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@8.3.1`.
+
+### Charts
+
+#### `@mui/x-charts@8.3.1`
+
+- [charts] Fix infinite tick number when zoom range is zero (#17750) @bernardobelchior
+- [charts] Improve tick rendering performance (#17755) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.3.1` [![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@8.3.1`, plus:
+
+- [charts-pro] Fix ESM build issue with Vite (#17774) @bernardobelchior
+- [charts-pro] Add benchmark for zoomed in scatter chart (#17756) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.3.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.3.1` [![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@8.3.1`.
+
+### Docs
+
+- [docs] Fix 301 to Next.js docs for license @oliviertassinari
+- [docs] Fix AI assistant API URL (#17745) @oliviertassinari
+- [docs] Fix heading structure in README @oliviertassinari
+- [docs] Fix translation keys documentation (#17811) @JanPretzel
+- [docs] Improve CHANGELOG format @oliviertassinari
+
+### Core
+
+- [core] Apply YAML convention, blank line only at top level @oliviertassinari
+- [code-infra] Fix dynamic import missing extensions (#17767) @Janpot
+- [code-infra] Replace `mocha` with `vitest` for browser & jsdom tests (#14508) @JCQuintas
+- [scheduler] Create the package and setup a private doc page (#17239) @flaviendelangle
+
 ## 8.3.0
 
 _May 8, 2025_
@@ -15,10 +105,8 @@ We'd like to offer a big thanks to the 11 contributors who made this release pos
 - 📚 Documentation improvements
 - 🐞 Bugfixes
 
-Special thanks go out to this community member for a valuable contribution:
-@ptuukkan.
-Team members who have contributed to this release:
-@alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @Janpot, @JCQuintas, @LukasTy, @MBilalShafi, @rita-codes, @romgrk.
+Special thanks go out to this community member for a valuable contribution: @ptuukkan.
+Team members who have contributed to this release: @alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @Janpot, @JCQuintas, @LukasTy, @MBilalShafi, @rita-codes, @romgrk.
 
 ### Data Grid
 
@@ -531,8 +619,7 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
 - 📚 Documentation improvements
 - 🐞 Bugfixes
 
-Team members who have contributed to this release:
-@bernardobelchior, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @oliviertassinari, @noraleonte, @romgrk, @alexfauquette.
+Team members who have contributed to this release: @bernardobelchior, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @oliviertassinari, @noraleonte, @romgrk, @alexfauquette.
 
 <!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
 
@@ -845,7 +932,7 @@ We'd like to offer a big thanks to the 21 contributors who made this release pos
 - 🌍 Improve Chinese (zh-CN), (zh-HK), (zh-TW), Czech (cs-CZ), Korean (ko-KR) and Slovak (sk-Sk) locales on the Data Grid
 - 🌍 Improve Chinese (zh-CN), (zh-HK) and (zh-TW) locales on the Pickers
 
-## Breaking changes
+### Breaking changes
 
 - ℹ️ The peer dependency on `@mui/material` has been updated to accept only v7.
   This has been done to increase the adoption rate of ESM.
@@ -858,7 +945,7 @@ Following are all team members who have contributed to this release:
 
 <!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
 
-## Alpha release highlights
+### Alpha release highlights
 
 Below are the highlights of the alpha releases leading up to this beta release:
 
@@ -3152,8 +3239,7 @@ We'd like to offer a big thanks to the 4 contributors who made this release poss
 
 - 🐞 Bugfixes
 
-Team members who have contributed to this release:
-@arminmeh, @cherniavskii, @LukasTy, @michelengelen.
+Team members who have contributed to this release: @arminmeh, @cherniavskii, @LukasTy, @michelengelen.
 
 <!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
 

package/ChartsGrid/ChartsHorizontalGrid.js

@@ -27,7 +27,8 @@ function ChartsGridHorizontal(props) {
   const yTicks = (0, _useTicks.useTicks)({
     scale,
     tickNumber,
-    tickInterval
+    tickInterval,
+    direction: 'y'
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: yTicks.map(({

package/ChartsGrid/ChartsVerticalGrid.js

@@ -27,7 +27,8 @@ function ChartsGridVertical(props) {
   const xTicks = (0, _useTicks.useTicks)({
     scale,
     tickNumber,
-    tickInterval
+    tickInterval,
+    direction: 'x'
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: xTicks.map(({

package/ChartsXAxis/ChartsXAxis.js

@@ -257,7 +257,8 @@ function ChartsXAxis(inProps) {
     valueFormatter,
     tickInterval,
     tickPlacement,
-    tickLabelPlacement
+    tickLabelPlacement,
+    direction: 'x'
   });
   const visibleLabels = getVisibleLabels(xTicks, {
     tickLabelStyle: axisTickLabelProps.style,

package/ChartsYAxis/ChartsYAxis.js

@@ -163,7 +163,8 @@ function ChartsYAxis(inProps) {
     valueFormatter,
     tickPlacement,
     tickLabelPlacement,
-    tickInterval
+    tickInterval,
+    direction: 'y'
   });
   const positionSign = position === 'right' ? 1 : -1;
   const tickFontSize = typeof tickLabelStyle?.fontSize === 'number' ? tickLabelStyle.fontSize : 12;

package/esm/ChartsGrid/ChartsHorizontalGrid.js

@@ -20,7 +20,8 @@ export function ChartsGridHorizontal(props) {
   const yTicks = useTicks({
     scale,
     tickNumber,
-    tickInterval
+    tickInterval,
+    direction: 'y'
   });
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: yTicks.map(({

package/esm/ChartsGrid/ChartsVerticalGrid.js

@@ -20,7 +20,8 @@ export function ChartsGridVertical(props) {
   const xTicks = useTicks({
     scale,
     tickNumber,
-    tickInterval
+    tickInterval,
+    direction: 'x'
   });
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: xTicks.map(({

package/esm/ChartsXAxis/ChartsXAxis.js

@@ -250,7 +250,8 @@ function ChartsXAxis(inProps) {
     valueFormatter,
     tickInterval,
     tickPlacement,
-    tickLabelPlacement
+    tickLabelPlacement,
+    direction: 'x'
   });
   const visibleLabels = getVisibleLabels(xTicks, {
     tickLabelStyle: axisTickLabelProps.style,

package/esm/ChartsYAxis/ChartsYAxis.js

@@ -156,7 +156,8 @@ function ChartsYAxis(inProps) {
     valueFormatter,
     tickPlacement,
     tickLabelPlacement,
-    tickInterval
+    tickInterval,
+    direction: 'y'
   });
   const positionSign = position === 'right' ? 1 : -1;
   const tickFontSize = typeof tickLabelStyle?.fontSize === 'number' ? tickLabelStyle.fontSize : 12;

package/esm/hooks/useTicks.d.ts

@@ -40,10 +40,6 @@ export interface TickParams {
    */
   tickLabelPlacement?: 'middle' | 'tick';
 }
-export declare function getTickNumber(params: TickParams & {
-  range: number[];
-  domain: any[];
-}): number;
 export type TickItemType = {
   /**
    * This property is undefined only if it's the tick closing the last band
@@ -56,4 +52,5 @@ export type TickItemType = {
 export declare function useTicks(options: {
   scale: D3Scale;
   valueFormatter?: AxisConfig['valueFormatter'];
+  direction: 'x' | 'y';
 } & Pick<TickParams, 'tickNumber' | 'tickInterval' | 'tickPlacement' | 'tickLabelPlacement'>): TickItemType[];

package/esm/hooks/useTicks.js

@@ -1,21 +1,9 @@
 'use client';
 
 import * as React from 'react';
+import { useChartContext } from "../context/ChartProvider/index.js";
 import { isBandScale } from "../internals/isBandScale.js";
 import { isInfinity } from "../internals/isInfinity.js";
-export function getTickNumber(params) {
-  const {
-    tickMaxStep,
-    tickMinStep,
-    tickNumber,
-    range,
-    domain
-  } = params;
-  const maxTicks = tickMinStep === undefined ? 999 : Math.floor(Math.abs(domain[1] - domain[0]) / tickMinStep);
-  const minTicks = tickMaxStep === undefined ? 2 : Math.ceil(Math.abs(domain[1] - domain[0]) / tickMaxStep);
-  const defaultizedTickNumber = tickNumber ?? Math.floor(Math.abs(range[1] - range[0]) / 50);
-  return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
-}
 const offsetRatio = {
   start: 0,
   extremities: 0,
@@ -29,8 +17,12 @@ export function useTicks(options) {
     valueFormatter,
     tickInterval,
     tickPlacement = 'extremities',
-    tickLabelPlacement: tickLabelPlacementProp
+    tickLabelPlacement: tickLabelPlacementProp,
+    direction
   } = options;
+  const {
+    instance
+  } = useChartContext();
   return React.useMemo(() => {
     // band scale
     if (isBandScale(scale)) {
@@ -74,18 +66,31 @@ export function useTicks(options) {
     }
     const tickLabelPlacement = tickLabelPlacementProp;
     const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
-    return ticks.map((value, 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);
+      if (instance.isPointInside({
+        x: offset,
+        y: offset
+      }, {
+        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]);
 }

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.3.0
+ * @mui/x-charts v8.3.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale';
 import { isBandScaleConfig, isPointScaleConfig } from "../../../../models/axis.js";
 import { getColorScale, getOrdinalColorScale } from "../../../colorScale.js";
-import { getTickNumber } from "../../../../hooks/useTicks.js";
+import { getTickNumber, scaleTickNumberByRange } from "../../../ticks.js";
 import { getScale } from "../../../getScale.js";
 import { zoomScaleRange } from "./zoom.js";
 import { getAxisExtremum } from "./getAxisExtremum.js";
@@ -114,7 +114,7 @@ export function computeAxisValue({
       range,
       domain: axisExtremums
     }));
-    const tickNumber = rawTickNumber / ((zoomRange[1] - zoomRange[0]) / 100);
+    const tickNumber = scaleTickNumberByRange(rawTickNumber, zoomRange);
     const zoomedRange = zoomScaleRange(range, zoomRange);
     const scale = getScale(scaleType, axisExtremums, zoomedRange);
     const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;

package/esm/internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale';
 import { isBandScaleConfig, isPointScaleConfig } from "../../../../models/axis.js";
 import { getColorScale, getOrdinalColorScale } from "../../../colorScale.js";
-import { getTickNumber } from "../../../../hooks/useTicks.js";
+import { getTickNumber, scaleTickNumberByRange } from "../../../ticks.js";
 import { getScale } from "../../../getScale.js";
 import { getAxisExtremum } from "./getAxisExtremum.js";
 import { deg2rad } from "../../../angleConversion.js";
@@ -109,7 +109,7 @@ export function computeAxisValue({
       range,
       domain: axisExtremums
     }));
-    const tickNumber = rawTickNumber / ((range[1] - range[0]) / 100);
+    const tickNumber = scaleTickNumberByRange(rawTickNumber, range);
     const scale = getScale(scaleType, axisExtremums, range);
     const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;
     const [minDomain, maxDomain] = finalScale.domain();

package/esm/internals/ticks.d.ts

@@ -0,0 +1,6 @@
+import type { TickParams } from "../hooks/useTicks.js";
+export declare function getTickNumber(params: TickParams & {
+  range: number[];
+  domain: any[];
+}): number;
+export declare function scaleTickNumberByRange(tickNumber: number, range: number[]): number;

package/esm/internals/ticks.js

@@ -0,0 +1,22 @@
+export function getTickNumber(params) {
+  const {
+    tickMaxStep,
+    tickMinStep,
+    tickNumber,
+    range,
+    domain
+  } = params;
+  const maxTicks = tickMinStep === undefined ? 999 : Math.floor(Math.abs(domain[1] - domain[0]) / tickMinStep);
+  const minTicks = tickMaxStep === undefined ? 2 : Math.ceil(Math.abs(domain[1] - domain[0]) / tickMaxStep);
+  const defaultizedTickNumber = tickNumber ?? Math.floor(Math.abs(range[1] - range[0]) / 50);
+  return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
+}
+export function scaleTickNumberByRange(tickNumber, range) {
+  const rangeGap = range[1] - range[0];
+
+  /* If the range start and end are the same, `tickNumber` will become infinity, so we default to 1. */
+  if (rangeGap === 0) {
+    return 1;
+  }
+  return tickNumber / ((range[1] - range[0]) / 100);
+}

package/hooks/useTicks.d.ts

@@ -40,10 +40,6 @@ export interface TickParams {
    */
   tickLabelPlacement?: 'middle' | 'tick';
 }
-export declare function getTickNumber(params: TickParams & {
-  range: number[];
-  domain: any[];
-}): number;
 export type TickItemType = {
   /**
    * This property is undefined only if it's the tick closing the last band
@@ -56,4 +52,5 @@ export type TickItemType = {
 export declare function useTicks(options: {
   scale: D3Scale;
   valueFormatter?: AxisConfig['valueFormatter'];
+  direction: 'x' | 'y';
 } & Pick<TickParams, 'tickNumber' | 'tickInterval' | 'tickPlacement' | 'tickLabelPlacement'>): TickItemType[];

package/hooks/useTicks.js

@@ -5,24 +5,11 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTickNumber = getTickNumber;
 exports.useTicks = useTicks;
 var React = _interopRequireWildcard(require("react"));
+var _ChartProvider = require("../context/ChartProvider");
 var _isBandScale = require("../internals/isBandScale");
 var _isInfinity = require("../internals/isInfinity");
-function getTickNumber(params) {
-  const {
-    tickMaxStep,
-    tickMinStep,
-    tickNumber,
-    range,
-    domain
-  } = params;
-  const maxTicks = tickMinStep === undefined ? 999 : Math.floor(Math.abs(domain[1] - domain[0]) / tickMinStep);
-  const minTicks = tickMaxStep === undefined ? 2 : Math.ceil(Math.abs(domain[1] - domain[0]) / tickMaxStep);
-  const defaultizedTickNumber = tickNumber ?? Math.floor(Math.abs(range[1] - range[0]) / 50);
-  return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
-}
 const offsetRatio = {
   start: 0,
   extremities: 0,
@@ -36,8 +23,12 @@ function useTicks(options) {
     valueFormatter,
     tickInterval,
     tickPlacement = 'extremities',
-    tickLabelPlacement: tickLabelPlacementProp
+    tickLabelPlacement: tickLabelPlacementProp,
+    direction
   } = options;
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
   return React.useMemo(() => {
     // band scale
     if ((0, _isBandScale.isBandScale)(scale)) {
@@ -81,18 +72,31 @@ function useTicks(options) {
     }
     const tickLabelPlacement = tickLabelPlacementProp;
     const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
-    return ticks.map((value, 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);
+      if (instance.isPointInside({
+        x: offset,
+        y: offset
+      }, {
+        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]);
 }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.3.0
+ * @mui/x-charts v8.3.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _d3Scale = require("@mui/x-charts-vendor/d3-scale");
 var _axis = require("../../../../models/axis");
 var _colorScale = require("../../../colorScale");
-var _useTicks = require("../../../../hooks/useTicks");
+var _ticks = require("../../../ticks");
 var _getScale = require("../../../getScale");
 var _zoom = require("./zoom");
 var _getAxisExtremum = require("./getAxisExtremum");
@@ -117,11 +117,11 @@ function computeAxisValue({
       axisExtremums[0] = min;
       axisExtremums[1] = max;
     }
-    const rawTickNumber = (0, _useTicks.getTickNumber)((0, _extends2.default)({}, axis, {
+    const rawTickNumber = (0, _ticks.getTickNumber)((0, _extends2.default)({}, axis, {
       range,
       domain: axisExtremums
     }));
-    const tickNumber = rawTickNumber / ((zoomRange[1] - zoomRange[0]) / 100);
+    const tickNumber = (0, _ticks.scaleTickNumberByRange)(rawTickNumber, zoomRange);
     const zoomedRange = (0, _zoom.zoomScaleRange)(range, zoomRange);
     const scale = (0, _getScale.getScale)(scaleType, axisExtremums, zoomedRange);
     const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;

package/internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _d3Scale = require("@mui/x-charts-vendor/d3-scale");
 var _axis = require("../../../../models/axis");
 var _colorScale = require("../../../colorScale");
-var _useTicks = require("../../../../hooks/useTicks");
+var _ticks = require("../../../ticks");
 var _getScale = require("../../../getScale");
 var _getAxisExtremum = require("./getAxisExtremum");
 var _angleConversion = require("../../../angleConversion");
@@ -112,11 +112,11 @@ function computeAxisValue({
       axisExtremums[0] = min;
       axisExtremums[1] = max;
     }
-    const rawTickNumber = (0, _useTicks.getTickNumber)((0, _extends2.default)({}, axis, {
+    const rawTickNumber = (0, _ticks.getTickNumber)((0, _extends2.default)({}, axis, {
       range,
       domain: axisExtremums
     }));
-    const tickNumber = rawTickNumber / ((range[1] - range[0]) / 100);
+    const tickNumber = (0, _ticks.scaleTickNumberByRange)(rawTickNumber, range);
     const scale = (0, _getScale.getScale)(scaleType, axisExtremums, range);
     const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;
     const [minDomain, maxDomain] = finalScale.domain();

package/internals/ticks.d.ts

@@ -0,0 +1,6 @@
+import type { TickParams } from "../hooks/useTicks.js";
+export declare function getTickNumber(params: TickParams & {
+  range: number[];
+  domain: any[];
+}): number;
+export declare function scaleTickNumberByRange(tickNumber: number, range: number[]): number;

package/internals/ticks.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTickNumber = getTickNumber;
+exports.scaleTickNumberByRange = scaleTickNumberByRange;
+function getTickNumber(params) {
+  const {
+    tickMaxStep,
+    tickMinStep,
+    tickNumber,
+    range,
+    domain
+  } = params;
+  const maxTicks = tickMinStep === undefined ? 999 : Math.floor(Math.abs(domain[1] - domain[0]) / tickMinStep);
+  const minTicks = tickMaxStep === undefined ? 2 : Math.ceil(Math.abs(domain[1] - domain[0]) / tickMaxStep);
+  const defaultizedTickNumber = tickNumber ?? Math.floor(Math.abs(range[1] - range[0]) / 50);
+  return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
+}
+function scaleTickNumberByRange(tickNumber, range) {
+  const rangeGap = range[1] - range[0];
+
+  /* If the range start and end are the same, `tickNumber` will become infinity, so we default to 1. */
+  if (rangeGap === 0) {
+    return 1;
+  }
+  return tickNumber / ((range[1] - range[0]) / 100);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.3.0",
+  "version": "8.3.1",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
   "main": "./index.js",
@@ -36,8 +36,8 @@
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.5.0",
-    "@mui/x-charts-vendor": "8.3.0",
-    "@mui/x-internals": "8.3.0"
+    "@mui/x-internals": "8.3.1",
+    "@mui/x-charts-vendor": "8.3.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",