@mui/x-charts-pro 8.20.0 → 8.21.0

package/BarChartPro/BarChartPro.js

@@ -348,6 +348,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -415,6 +416,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -474,6 +476,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -534,6 +537,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -593,6 +597,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -652,6 +657,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -715,6 +721,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -778,6 +785,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -837,6 +845,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -910,6 +919,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -976,6 +986,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -1034,6 +1045,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -1093,6 +1105,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -1151,6 +1164,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -1209,6 +1223,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -1271,6 +1286,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -1333,6 +1349,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -1391,6 +1408,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({

package/CHANGELOG.md

@@ -5,6 +5,118 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.21.0
+
+_Dec 3, 2025_
+
+We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Add [tick spacing property](https://mui.com/x/react-charts/axis/#tick-spacing) to charts axis to control the distance between ticks.
+
+The following team members contributed to this release:
+@alexfauquette, @bernardobelchior, @ElliottMiller, @Janpot, @JCQuintas, @romgrk, @sai6855, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.21.0`
+
+- [DataGrid] Fix autosizing header width calculation (#20323) @siriwatknp
+- [DataGrid] Virtualizer refactor (#19465) @romgrk
+
+#### `@mui/x-data-grid-pro@8.21.0` [![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.21.0`.
+
+#### `@mui/x-data-grid-premium@8.21.0` [![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.21.0`, plus:
+
+- [DataGridPremium] Prevent pasting to non-editable cells (#20333) @ElliottMiller
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.21.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.21.0` [![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.21.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.21.0`
+
+- [charts] Fix string measuring types (#20454) @bernardobelchior
+- [charts] Fix typo in performance note for CustomLineMarks demo (#20529) @sai6855
+- [charts] Introduce the notion of series with positions (#20461) @alexfauquette
+- [charts] Migrate from sinon to Vitest mocking utilities for x-charts\* packages (#20444) @Copilot
+- [charts] Move series-level values to series computed data in bar plot (#20467) @bernardobelchior
+- [charts] Refactor bar chart components in preparation for range bar chart (#20521) @bernardobelchior
+- [charts] Remove unnecessary `any` types (#20527) @sai6855
+- [charts] Remove unused `drawingArea` from `findClosestPoints` (#20471) @bernardobelchior
+- [charts] Revert `useIsHydrated` to default=false (#20511) @JCQuintas
+- [charts] Support tooltip anchor position for radar (#20422) @alexfauquette
+- [charts] Add tick spacing property (#20282) @bernardobelchior
+- [charts] Fix Vitest lint error (#20550) @bernardobelchior
+- [charts] Fix infinite loop when highlighting pie slices or scatter points (#20549) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.21.0` [![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.21.0`, plus:
+
+- [charts-pro] Add support for `anchor="node"` on Sankey tooltip (#20462) @alexfauquette
+
+#### `@mui/x-charts-premium@8.21.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.21.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.21.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.21.0` [![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.21.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.21.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Migrate to `next/font` for fonts loading (#20407) @Copilot
+
+### Core
+
+- [code-infra] Enable vitest eslint plugin (#20530) @Janpot
+- [code-infra] Fix missing font loading for local fonts (#20480) @Janpot
+- [internal] Performance: use raw `useSyncExternalStore` (#20447) @romgrk
+- [code-infra] Enable `vitest/expect-expect` and `vitest/no-standalone-expect` rules for x-charts packages (#20535) @Copilot
+
+### Miscellaneous
+
+- Bump @types/d3-sankey to ^0.12.5 (#20489) @renovate[bot]
+- Bump @types/react to 19.2.7 (#20490) @renovate[bot]
+- Bump @types/yargs to ^17.0.35 (#20491) @renovate[bot]
+- Bump Vite & Vitest to ^4.0.14 (#20500) @renovate[bot]
+- Bump csstype to ^3.2.3 (#20493) @renovate[bot]
+- Bump es-toolkit to ^1.42.0 (#20494) @renovate[bot]
+- Bump eslint to ^8.48.0 (#20495) @renovate[bot]
+- Bump lerna to ^9.0.3 (#20496) @renovate[bot]
+- Bump lucide-react to ^0.555.0 (#20502) @renovate[bot]
+- Bump playwright monorepo (#20503) @renovate[bot]
+- Bump pnpm to 10.24.0 (#20504) @renovate[bot]
+- Bump react monorepo (#20340) @renovate[bot]
+- Bump react-hook-form to ^7.66.1 (#20497) @renovate[bot]
+- Bump rimraf to ^6.1.2 (#20498) @renovate[bot]
+- Bump webpack-bundle-analyzer to ^5.0.1 (#20508) @renovate[bot]
+- Bump next to ^15.5.6 [SECURITY] (#20555) @renovate[bot]
+
 ## 8.20.0
 
 _Nov 26, 2025_

package/ChartDataProviderPro/ChartDataProviderPro.js

@@ -16,7 +16,7 @@ var _material = require("../internals/material");
 var _allPlugins = require("../internals/plugins/allPlugins");
 var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const releaseInfo = "MTc2NDExNTIwMDAwMA==";
+const releaseInfo = "MTc2NDgwNjQwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/ChartZoomSlider/internals/previews/BarPreviewPlot.js

@@ -22,16 +22,16 @@ function BarPreviewPlot(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
     children: completedData.map(({
       seriesId,
+      layout,
+      xOrigin,
+      yOrigin,
       data
     }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
       children: data.map(({
         dataIndex,
         color,
-        layout,
         x,
-        xOrigin,
         y,
-        yOrigin,
         width,
         height
       }) => {

package/Heatmap/Heatmap.js

@@ -340,6 +340,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   })).isRequired,
   /**
@@ -398,6 +399,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number
   })).isRequired,

package/LineChartPro/LineChartPro.js

@@ -350,6 +350,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -417,6 +418,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -476,6 +478,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -536,6 +539,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -595,6 +599,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -654,6 +659,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -717,6 +723,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -780,6 +787,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -839,6 +847,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -912,6 +921,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -978,6 +988,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -1036,6 +1047,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -1095,6 +1107,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -1153,6 +1166,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -1211,6 +1225,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -1273,6 +1288,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -1335,6 +1351,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -1393,6 +1410,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({

package/SankeyChart/SankeyPlot.js

@@ -10,8 +10,6 @@ exports.SankeyPlot = SankeyPlot;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
-var _hooks = require("@mui/x-charts/hooks");
-var _calculateSankeyLayout = require("./calculateSankeyLayout");
 var _SankeyNodeElement = require("./SankeyNodeElement");
 var _SankeyLinkElement = require("./SankeyLinkElement");
 var _SankeyLinkLabel = require("./SankeyLinkLabel");
@@ -39,25 +37,23 @@ function SankeyPlot(props) {
     onLinkClick,
     onNodeClick
   } = props;
-  const seriesContext = (0, _useSankeySeries.useSankeySeriesContext)();
-  if (!seriesContext) {
-    throw new Error(`MUI X Charts: Sankey series context is missing. Ensure the SankeyPlot is used inside a properly configured ChartDataProviderPro.`);
-  }
-  const series = seriesContext.series[seriesContext.seriesOrder?.[0]];
   const classes = (0, _sankeyClasses.useUtilityClasses)({
     classes: inputClasses
   });
-  const drawingArea = (0, _hooks.useDrawingArea)();
+  const sankeyContext = (0, _useSankeySeries.useSankeySeriesContext)();
+  const sankeySeries = sankeyContext?.series[sankeyContext?.seriesOrder[0]];
+  const layout = (0, _useSankeySeries.useSankeyLayout)();
+  if (!sankeySeries) {
+    throw new Error(`MUI X Charts: Sankey series context is missing. Ensure the SankeyPlot is used inside a properly configured ChartDataProviderPro.`);
+  }
+  if (!layout) {
+    return null;
+  }
   const {
     data,
     linkOptions,
     nodeOptions
-  } = series;
-  const theme = (0, _styles.useTheme)();
-
-  // Calculate layout based on data and dimensions
-  const layout = React.useMemo(() => (0, _calculateSankeyLayout.calculateSankeyLayout)(data, drawingArea, theme, series), [drawingArea, data, series, theme]);
-
+  } = sankeySeries;
   // Early return if no data or dimensions
   if (!data || !data.links) {
     return null;
@@ -67,7 +63,7 @@ function SankeyPlot(props) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
       className: classes.links,
       children: layout.links.map(link => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SankeyLinkElement.SankeyLinkElement, {
-        seriesId: series.id,
+        seriesId: sankeySeries.id,
         link: link,
         opacity: linkOptions?.opacity,
         onClick: onLinkClick
@@ -75,7 +71,7 @@ function SankeyPlot(props) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
       className: classes.nodes,
       children: layout.nodes.map(node => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SankeyNodeElement.SankeyNodeElement, {
-        seriesId: series.id,
+        seriesId: sankeySeries.id,
         node: node,
         showLabel: nodeOptions?.showLabels,
         onClick: onNodeClick

package/SankeyChart/calculateSankeyLayout.d.ts

@@ -1,6 +1,5 @@
 import type { ChartDrawingArea } from '@mui/x-charts/hooks';
-import type { Theme } from '@mui/material/styles';
-import type { SankeySeriesType, SankeyLayout, SankeyLayoutLink, DefaultizedSankeySeriesType } from "./sankey.types.js";
+import type { SankeyLayout, SankeyLayoutLink, DefaultizedSankeySeriesType } from "./sankey.types.js";
 /**
  * Calculates the layout for a Sankey diagram using d3-sankey
  *
@@ -9,5 +8,5 @@ import type { SankeySeriesType, SankeyLayout, SankeyLayoutLink, DefaultizedSanke
  * @param options Layout configuration options
  * @returns The calculated layout
  */
-export declare function calculateSankeyLayout(data: DefaultizedSankeySeriesType['data'], drawingArea: ChartDrawingArea, theme: Theme, series?: Pick<SankeySeriesType, 'nodeOptions' | 'linkOptions' | 'iterations'>): SankeyLayout;
+export declare function calculateSankeyLayout(series: DefaultizedSankeySeriesType, drawingArea: ChartDrawingArea): SankeyLayout;
 export declare function improvedNaiveSankeyLinkPathHorizontal(link: SankeyLayoutLink, curveCorrection?: number): string;

package/SankeyChart/calculateSankeyLayout.js

@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.calculateSankeyLayout = calculateSankeyLayout;
 exports.improvedNaiveSankeyLinkPathHorizontal = improvedNaiveSankeyLinkPathHorizontal;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _d3Sankey = require("@mui/x-charts-vendor/d3-sankey");
 var _d3Path = require("@mui/x-charts-vendor/d3-path");
+var _d3Sankey = require("./d3Sankey");
 var _utils = require("./utils");
 /**
  * Calculates the layout for a Sankey diagram using d3-sankey
@@ -20,8 +20,9 @@ var _utils = require("./utils");
  * @returns The calculated layout
  */
 
-function calculateSankeyLayout(data, drawingArea, theme, series = {}) {
+function calculateSankeyLayout(series, drawingArea) {
   const {
+    data,
     iterations = 6,
     nodeOptions,
     linkOptions

package/SankeyChart/d3Sankey/align.d.ts

@@ -0,0 +1,33 @@
+import type { SankeyNode } from "./sankey.types.js";
+/**
+ * Compute the horizontal node position of a node in a Sankey layout with left alignment.
+ * Returns (node.depth) to indicate the desired horizontal position of the node in the generated Sankey diagram.
+ *
+ * @param node Sankey node for which to calculate the horizontal node position.
+ */
+export declare function sankeyLeft(node: SankeyNode<{}, {}>): number;
+/**
+ * Compute the horizontal node position of a node in a Sankey layout with right alignment.
+ * Returns (n - 1 - node.height) to indicate the desired horizontal position of the node in the generated Sankey diagram.
+ *
+ * @param node Sankey node for which to calculate the horizontal node position.
+ * @param n Total depth n of the graph  (one plus the maximum node.depth)
+ */
+export declare function sankeyRight(node: SankeyNode<{}, {}>, n: number): number;
+/**
+ * Compute the horizontal node position of a node in a Sankey layout with justified alignment.
+ * Like d3.sankeyLeft, except that nodes without any outgoing links are moved to the far right.
+ * Returns an integer between 0 and n - 1 that indicates the desired horizontal position of the node in the generated Sankey diagram.
+ *
+ * @param node Sankey node for which to calculate the horizontal node position.
+ * @param n Total depth n of the graph  (one plus the maximum node.depth)
+ */
+export declare function sankeyJustify(node: SankeyNode<{}, {}>, n: number): number;
+/**
+ * Compute the horizontal node position of a node in a Sankey layout with center alignment.
+ * Like d3.sankeyLeft, except that nodes without any incoming links are moved as right as possible.
+ * Returns an integer between 0 and n - 1 that indicates the desired horizontal position of the node in the generated Sankey diagram.
+ *
+ * @param node Sankey node for which to calculate the horizontal node position.
+ */
+export declare function sankeyCenter(node: SankeyNode<{}, {}>): number;

package/SankeyChart/d3Sankey/align.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sankeyCenter = sankeyCenter;
+exports.sankeyJustify = sankeyJustify;
+exports.sankeyLeft = sankeyLeft;
+exports.sankeyRight = sankeyRight;
+var _d3Array = require("@mui/x-charts-vendor/d3-array");
+function targetDepth(d) {
+  return d.target.depth ?? 0;
+}
+
+/**
+ * Compute the horizontal node position of a node in a Sankey layout with left alignment.
+ * Returns (node.depth) to indicate the desired horizontal position of the node in the generated Sankey diagram.
+ *
+ * @param node Sankey node for which to calculate the horizontal node position.
+ */
+function sankeyLeft(node) {
+  return node.depth ?? 0;
+}
+
+/**
+ * Compute the horizontal node position of a node in a Sankey layout with right alignment.
+ * Returns (n - 1 - node.height) to indicate the desired horizontal position of the node in the generated Sankey diagram.
+ *
+ * @param node Sankey node for which to calculate the horizontal node position.
+ * @param n Total depth n of the graph  (one plus the maximum node.depth)
+ */
+function sankeyRight(node, n) {
+  return n - 1 - (node.height ?? 0);
+}
+
+/**
+ * Compute the horizontal node position of a node in a Sankey layout with justified alignment.
+ * Like d3.sankeyLeft, except that nodes without any outgoing links are moved to the far right.
+ * Returns an integer between 0 and n - 1 that indicates the desired horizontal position of the node in the generated Sankey diagram.
+ *
+ * @param node Sankey node for which to calculate the horizontal node position.
+ * @param n Total depth n of the graph  (one plus the maximum node.depth)
+ */
+function sankeyJustify(node, n) {
+  return node.sourceLinks?.length ? node.depth ?? 0 : n - 1;
+}
+
+/**
+ * Compute the horizontal node position of a node in a Sankey layout with center alignment.
+ * Like d3.sankeyLeft, except that nodes without any incoming links are moved as right as possible.
+ * Returns an integer between 0 and n - 1 that indicates the desired horizontal position of the node in the generated Sankey diagram.
+ *
+ * @param node Sankey node for which to calculate the horizontal node position.
+ */
+function sankeyCenter(node) {
+  if (node.targetLinks?.length) {
+    return node.depth ?? 0;
+  }
+  if (node.sourceLinks?.length) {
+    return ((0, _d3Array.min)(node.sourceLinks, targetDepth) ?? 0) - 1;
+  }
+  return 0;
+}

package/SankeyChart/d3Sankey/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./sankey.js";
+export * from "./align.js";
+export * from "./sankeyLinkHorizontal.js";
+export * from "./sankey.types.js";