@mui/x-charts 7.0.0-alpha.8 → 7.0.0-alpha.9

package/BarChart/formatter.js

@@ -72,7 +72,7 @@ const formatter = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v?.toLocaleString())
+    series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v === null ? '' : v.toLocaleString())
   };
 };
 var _default = exports.default = formatter;

package/CHANGELOG.md

@@ -3,6 +3,344 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.0.0-alpha.9
+
+_Jan 19, 2024_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 The Data Grid headers have been refactored to bring immense improvements to scrolling, state management, and overall performance of the grid.
+- ⚙️ The Data Grid disabled column-specific features like filtering, sorting, grouping, etc. could now be accessed programmatically. See the related [docs](https://next.mui.com/x/react-data-grid/api-object/#access-the-disabled-column-features) section.
+- 🚀 Uplift the `SimpleTreeView` customization examples (#11424) @noraleonte
+- 🌍 Add Croatian (hr-HR), Portuguese (pt-PT), and Chinese (Hong Kong) (zh-HK) locales (#11668) on the Data Grid @BCaspari
+- 🐞 Bugfixes
+- 💔 Bump `@mui/material` peer dependency for all packages (#11692) @LukasTy
+  The minimum required version of `@mui/material` is now `5.15.0`.
+
+### Data Grid
+
+#### Breaking changes
+
+- The `ariaV7` experimental flag has been removed and the Data Grid now uses the improved accessibility implementation by default.
+  If you were using the `ariaV7` flag, you can remove it from the `experimentalFeatures` prop:
+
+  ```diff
+  -<DataGrid experimentalFeatures={{ ariaV7: true }} />
+  +<DataGrid />
+  ```
+
+  The most notable changes that might affect your application or tests are:
+
+  - The `role="grid"` attribute along with related ARIA attributes are now applied to the inner `div` element instead of the root `div` element:
+
+    ```diff
+    -<div class="MuiDataGrid-root" role="grid" aria-colcount="5" aria-rowcount="101" aria-multiselectable="false">
+    +<div class="MuiDataGrid-root">
+       <div class="MuiDataGrid-toolbarContainer"></div>
+    -    <div class="MuiDataGrid-main"></div>
+    +    <div class="MuiDataGrid-main" role="grid" aria-colcount="5" aria-rowcount="101" aria-multiselectable="false"></div>
+       <div class="MuiDataGrid-footerContainer"></div>
+     </div>
+    ```
+
+  - When the [Tree data](https://next.mui.com/x/react-data-grid/tree-data/) feature is used, the grid role is now `role="treegrid"` instead of `role="grid"`.
+  - The Data Grid cells now have `role="gridcell"` instead of `role="cell"`.
+
+  - The buttons in toolbar composable components `GridToolbarColumnsButton`, `GridToolbarFilterButton`, `GridToolbarDensity`, and `GridToolbarExport` are now wrapped with a tooltip component and have a consistent interface. To override some props corresponding to the toolbar buttons or their corresponding tooltips, you can use the `slotProps` prop. Following is an example diff. See [Toolbar section](https://next.mui.com/x/react-data-grid/components/#toolbar) for more details.
+
+    ```diff
+      function CustomToolbar() {
+        return (
+          <GridToolbarContainer>
+          <GridToolbarColumnsButton />
+          <GridToolbarFilterButton
+      -     title="Custom filter" // 🛑 This was previously forwarded to the tooltip component
+      +     slotProps={{ tooltip: { title: 'Custom filter' } }} // ✅ This is the correct way now
+          />
+          <GridToolbarDensitySelector
+      -     variant="outlined"    // 🛑 This was previously forwarded to the button component
+      +     slotProps={{ button: { variant: 'outlined' } }} // ✅ This is the correct way now
+          />
+          </GridToolbarContainer>
+        );
+      }
+    ```
+
+- Column grouping is now enabled by default. The flag `columnGrouping` is no longer needed to be passed to the `experimentalFeatures` prop to enable it.
+
+  ```diff
+  -<DataGrid experimentalFeatures={{ columnGrouping: true }} />
+  +<DataGrid />
+  ```
+
+- The column grouping API methods `getColumnGroupPath` and `getAllGroupDetails` are no longer prefixed with `unstable_`.
+
+- The column grouping selectors `gridFocusColumnGroupHeaderSelector` and `gridTabIndexColumnGroupHeaderSelector` are no longer prefixed with `unstable_`.
+
+- The disabled column specific features like `hiding`, `sorting`, `filtering`, `pinning`, `row grouping`, etc could now be controlled programmatically using `initialState`, respective controlled models, or the [API object](https://next.mui.com/x/react-data-grid/api-object/). See the related [docs](https://next.mui.com/x/react-data-grid/api-object/#access-the-disabled-column-features) section.
+
+#### `@mui/x-data-grid@7.0.0-alpha.9`
+
+- [DataGrid] Allow to filter non-filterable columns programmatically (#11538) @MBilalShafi
+- [DataGrid] Allow to programmatically sort unsortable columns (#11512) @MBilalShafi
+- [DataGrid] Fix incorrect default value for `filterModel.logicOperator` (#11673) @MBilalShafi
+- [DataGrid] Make `column grouping` feature stable (#11698) @MBilalShafi
+- [DataGrid] Remove the `ariaV7` experimental flag (#11428) @cherniavskii
+- [DataGrid] Start the FAQ page (#11686) @MBilalShafi
+- [DataGrid] Sticky headers (#10059) @romgrk
+- [DataGrid] Wrap toolbar buttons with tooltip (#11357) @MBilalShafi
+- [l10n] Add Croatian (hr-HR), Portuguese (pt-PT), and Chinese (Hong Kong) (zh-HK) locales (#11668) @BCaspari
+
+#### `@mui/x-data-grid-pro@7.0.0-alpha.9` [![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@7.0.0-alpha.9`, plus:
+
+- [DataGridPro] Allow non-pinnable columns to be pinned programmatically (#11680) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@7.0.0-alpha.9` [![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@7.0.0-alpha.9`, plus:
+
+- [DataGridPremium] Allow aggregation to be applied for non-aggregable columns (#11574) @MBilalShafi
+- [DataGridPremium] Allow programmatically grouping non-groupable columns (#11539) @MBilalShafi
+
+### Date Pickers
+
+#### Breaking changes
+
+- The `locales` export has been removed from the root of the packages.
+  If you were importing locales from the root, be sure to update it:
+
+  ```diff
+  -import { frFR } from '@mui/x-date-pickers';
+  +import { frFR } from '@mui/x-date-pickers/locales';
+  ```
+
+#### `@mui/x-date-pickers@7.0.0-alpha.9`
+
+- [fields] Make `PickersTextField` and its dependencies public (#11581) @flaviendelangle
+- [fields] Support farsi digits (#11639) @flaviendelangle
+- [pickers] Fix AdapterLuxon `getWeekNumber` behavior (#11697) @LukasTy
+- [pickers] Stop root exporting `locales` (#11612) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.0.0-alpha.9` [![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@7.0.0-alpha.9`.
+
+### Charts / `@mui/x-charts@7.0.0-alpha.9`
+
+- [charts] Do not propagate `innerRadius` and `outerRadius` to the DOM (#11689) @alexfauquette
+- [charts] Fix default `stackOffset` for `LineChart` (#11647) @alexfauquette
+- [charts] Remove a TS ignore (#11688) @alexfauquette
+
+### Tree View
+
+#### Breaking changes
+
+- The `expandIcon` / `defaultExpandIcon` props, used to expand the children of a node (rendered when it is collapsed),
+is now defined as a slot both on the Tree View and the Tree Item components.
+
+  If you were using the `ChevronRight` icon from `@mui/icons-material`,
+  you can stop passing it to your component because it is now the default value:
+
+  ```diff
+  -import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+  
+   <SimpleTreeView
+  -  defaultExpandIcon={<ChevronRightIcon />}
+   >
+     {items}
+   </SimpleTreeView>
+  ```
+
+  If you were passing another icon to your Tree View component,
+  you need to use the new `expandIcon` slot on this component:
+
+  ```diff
+   <SimpleTreeView
+  -  defaultExpandIcon={<MyCustomExpandIcon />}
+  +  slots={{ expandIcon: MyCustomExpandIcon }}
+   >
+     {items}
+   </SimpleTreeView>
+  ```
+
+  If you were passing another icon to your Tree Item component,
+  you need to use the new `expandIcon` slot on this component:
+
+  ```diff
+    <SimpleTreeView>
+      <TreeItem
+        nodeId="1"
+        label="Node 1"
+  -     expandIcon={<MyCustomExpandIcon />}
+  +     slots={{ expandIcon: MyCustomExpandIcon }}
+      />
+    </SimpleTreeView>
+  ```
+
+- The `collapseIcon` / `defaultCollapseIcon` props, used to collapse the children of a node (rendered when it is expanded),
+is now defined as a slot both on the Tree View and the Tree Item components.
+
+  If you were using the `ExpandMore` icon from `@mui/icons-material`,
+  you can stop passing it to your component because it is now the default value:
+
+  ```diff
+  - import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+  
+    <SimpleTreeView
+  -   defaultCollapseIcon={<ExpandMoreIcon />}
+    >
+      {items}
+    </SimpleTreeView>
+  ```
+
+  If you were passing another icon to your Tree View component,
+  you need to use the new `collapseIcon` slot on this component:
+
+  ```diff
+    <SimpleTreeView
+  -   defaultCollapseIcon={<MyCustomCollapseIcon />}
+  +   slots={{ collapseIcon: MyCustomCollapseIcon }}
+    >
+      {items}
+    </SimpleTreeView>
+  ```
+
+  If you were passing another icon to your Tree Item component,
+  you need to use the new `collapseIcon` slot on this component:
+
+  ```diff
+    <SimpleTreeView>
+      <TreeItem
+        nodeId="1"
+        label="Node 1"
+  -     collapseIcon={<MyCustomCollapseIcon />}
+  +     slots={{ collapseIcon: MyCustomCollapseIcon }}
+      />
+    </SimpleTreeView>
+  ```
+
+- The `useTreeItem` hook has been renamed `useTreeItemState`.
+  This will help create a new headless version of the `TreeItem` component based on a future `useTreeItem` hook.
+
+  ```diff
+  -import { TreeItem, useTreeItem } from '@mui/x-tree-view/TreeItem';
+  +import { TreeItem, useTreeItemState } from '@mui/x-tree-view/TreeItem';
+  
+   const CustomContent = React.forwardRef((props, ref) => {
+  -  const { disabled } = useTreeItem(props.nodeId);
+  +  const { disabled } = useTreeItemState(props.nodeId);
+  
+     // Render some UI
+   });
+  
+   function App() {
+     return (
+       <SimpleTreeView>
+         <TreeItem ContentComponent={CustomContent} />
+       </SimpleTreeView>
+     )
+   }
+  ```
+
+- The `parentIcon` prop has been removed from the Tree View components.
+
+  If you were passing an icon to your Tree View component,
+  you can achieve the same behavior
+  by passing the same icon to both the `collapseIcon` and the `expandIcon` slots on this component:
+
+  ```diff
+    <SimpleTreeView
+  -   defaultParentIcon={<MyCustomParentIcon />}
+  +   slots={{ collapseIcon: MyCustomParentIcon, expandIcon: MyCustomParentIcon }}
+    >
+      {items}
+    </SimpleTreeView>
+  ```
+
+- The `endIcon` / `defaultEndIcon` props, rendered next to an item without children,
+  is now defined as a slot both on the Tree View and the Tree Item components.
+
+  If you were passing an icon to your Tree View component,
+  you need to use the new `endIcon` slot on this component:
+
+  ```diff
+    <SimpleTreeView
+  -   defaultEndIcon={<MyCustomEndIcon />}
+  +   slots={{ endIcon: MyCustomEndIcon }}
+    >
+      {items}
+    </SimpleTreeView>
+  ```
+
+  If you were passing an icon to your Tree Item component,
+  you need to use the new `endIcon` slot on this component:
+
+  ```diff
+    <SimpleTreeView>
+      <TreeItem
+        nodeId="1"
+        label="Node 1"
+  -     endIcon={<MyCustomEndIcon />}
+  +     slots={{ endIcon: MyCustomEndIcon }}
+      />
+    </SimpleTreeView>
+  ```
+
+- The `icon` prop, rendered next to an item without children,
+  is now defined as a slot on the Tree Item component.
+
+  If you were passing an icon to your Tree Item component,
+  you need to use the new `icon` slot on this component:
+
+  ```diff
+    <SimpleTreeView>
+      <TreeItem
+        nodeId="1"
+        label="Node 1"
+  -     icon={<MyCustomIcon />}
+  +     slots={{ icon: MyCustomIcon }}
+      />
+    </SimpleTreeView>
+  ```
+
+#### `@mui/x-tree-view@7.0.0-alpha.9`
+
+- [TreeView] Adjust expansion and selection docs (#11723) @noraleonte
+- [TreeView] Improve plugin signature definition (#11665) @flaviendelangle
+- [TreeView] Make each plugin responsible for its context value (#11623) @flaviendelangle
+- [TreeView] Migrate remaining icon props to slots (#11713) @flaviendelangle
+- [TreeView] Pass through `Theme` generic to variants (#11480) @dhulme
+- [TreeView] Rename `useTreeItem` to `useTreeItemState` (#11712) @flaviendelangle
+- [TreeView] Add `slots` and `slotProps` on the Tree View components (#11664) @flaviendelangle
+- [TreeView] Explore a better plugin model API (#11567) @flaviendelangle
+
+### Docs
+
+- [docs] Clean the pickers migration guide (#11694) @flaviendelangle
+- [docs] Cleanup and fix Pickers Playground styling (#11700) @LukasTy
+- [docs] First draft of the Tree View custom plugin doc (#11564) @flaviendelangle
+- [docs] Fix Pickers migration syntax and diffs (#11695) @LukasTy
+- [docs] Fix generated tree view API docs (#11737) @LukasTy
+- [docs] Generate docs for Tree View slots (#11730) @flaviendelangle
+- [docs] Improve codemod for v7 (#11650) @oliviertassinari
+- [docs] Improve data grid `pageSizeOptions` prop documentation (#11682) @oliviertassinari
+- [docs] Parse markdown on API docs demo titles (#11728) @LukasTy
+- [docs] Remove the description from the `className` prop (#11693) @oliviertassinari
+- [docs] Uplift `SimpleTreeView` customization examples (#11424) @noraleonte
+- [docs] Uplift the Date Pickers playground (#11555) @danilo-leal
+
+### Core
+
+- [core] Bump `@mui/material` peer dependency for all packages (#11692) @LukasTy
+- [core] Make `karma` run in parallel (#11571) @romgrk
+- [core] make `karma-parallel` run under a new command (#11716) @romgrk
+- [code-infra] Migrate all prettier APIs to the async version (#11732) @Janpot
+- [code-infra] Update the Babel macro path (#11479) @michaldudak
+- [docs-infra] Enforce brand name rules (#11651) @oliviertassinari
+- [test] Fix flaky Data Grid test (#11725) @cherniavskii
+
 ## 7.0.0-alpha.8
 
 _Jan 11, 2024_
@@ -103,8 +441,8 @@ We'd like to offer a big thanks to the 7 contributors who made this release poss
       id: 'node-1',
       label: 'Node 1',
       children: [
-        { id: 'node-1-1', label: Node 1.1' },
-        { id: 'node-1-2', label: Node 1.2' },
+        { id: 'node-1-1', label: 'Node 1.1' },
+        { id: 'node-1-2', label: 'Node 1.2' },
       ],
     },
     {
@@ -1119,10 +1457,20 @@ And if you need the exact same output you can apply the following transformation
 - The `adapter.toISO` method have been removed, you can directly use your date library:
 
   ```diff
+   // For Day.js
   -const isoString = adapter.toISO(value);
   +const isoString = value.toISOString();
+  
+   // For Luxon
+  -const isoString = adapter.toISO(value);
   +const isoString = value.toUTC().toISO({ format: 'extended' });
+  
+   // For DateFns
+  -const isoString = adapter.toISO(value);
   +const isoString = dateFns.formatISO(value, { format: 'extended' });
+  
+   // For Moment
+  -const isoString = adapter.toISO(value);
   +const isoString = value.toISOString();
   ```
 
@@ -1424,6 +1772,35 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
+## 6.19.1
+
+_Jan 19, 2024_
+
+We'd like to offer a big thanks to the 1 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Croatian (hr-HR), Portuguese (pt-PT), and Chinese (Hong Kong) (zh-HK) locales (#11717) @BCaspari
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.19.1`
+
+- [l10n] Add Croatian (hr-HR), Portuguese (pt-PT), and Chinese (Hong Kong) (zh-HK) locales (#11717) @BCaspari
+
+#### `@mui/x-data-grid-pro@6.19.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@6.19.1`.
+
+#### `@mui/x-data-grid-premium@6.19.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@6.19.1`.
+
+### Charts / `@mui/x-charts@6.19.1`
+
+- [charts] Add `arcLabelRadius` property (#11563) @alexfauquette
+- [charts] Do not propagate `innerRadius` and `outerRadius` to the DOM (#11719) @alexfauquette
+- [charts] Fix default `stackOffset` for `LineChart` (#11703) @alexfauquette
+
 ## 6.19.0
 
 _Jan 11, 2024_

package/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -32,10 +32,8 @@ function DefaultChartsItemTooltipContent(props) {
     color: series.color,
     displayedLabel: series.label
   };
-
-  // TODO: Manage to let TS understand series.data and series.valueFormatter are coherent
-  // @ts-ignore
-  const formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);
+  const value = series.data[itemData.dataIndex];
+  const formattedValue = series.valueFormatter?.(value);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipPaper, {
     sx: sx,
     className: classes.root,

package/LineChart/formatter.js

@@ -17,7 +17,11 @@ const formatter = (params, dataset) => {
     seriesOrder,
     series
   } = params;
-  const stackingGroups = (0, _stackSeries.getStackingGroups)(params);
+  const stackingGroups = (0, _stackSeries.getStackingGroups)((0, _extends2.default)({}, params, {
+    defaultStrategy: {
+      stackOffset: 'none'
+    }
+  }));
 
   // Create a data set with format adapted to d3
   const d3Dataset = dataset ?? [];
@@ -72,7 +76,7 @@ const formatter = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v?.toLocaleString())
+    series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v === null ? '' : v.toLocaleString())
   };
 };
 var _default = exports.default = formatter;

package/PieChart/PieArcLabel.js

@@ -18,7 +18,7 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 var _styles = require("@mui/material/styles");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
+const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function getPieArcLabelUtilityClass(slot) {

package/README.md

@@ -15,7 +15,7 @@ This component has the following peer dependencies that you will need to install
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.4.1",
+  "@mui/material": "^5.15.0",
   "react": "^17.0.0 || ^18.0.0",
   "react-dom": "^17.0.0 || ^18.0.0"
 },

package/SparkLineChart/SparkLineChart.d.ts

@@ -36,9 +36,9 @@ export interface SparkLineChartProps extends Omit<ResponsiveChartContainerProps,
      * Formatter used by the tooltip.
      * @param {number} value The value to format.
      * @returns {string} the formatted value.
-     * @default (v: number) => v.toString()
+     * @default (v: number | null) => (v === null ? '' : v.toString())
      */
-    valueFormatter?: (value: number) => string;
+    valueFormatter?: (value: number | null) => string;
     /**
      * Set to `true` to enable the tooltip in the sparkline.
      * @default false

package/SparkLineChart/SparkLineChart.js

@@ -50,7 +50,7 @@ const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(fu
     slotProps,
     data,
     plotType = 'line',
-    valueFormatter = v => v.toString(),
+    valueFormatter = v => v === null ? '' : v.toString(),
     area,
     curve = 'linear'
   } = props;
@@ -213,7 +213,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * Formatter used by the tooltip.
    * @param {number} value The value to format.
    * @returns {string} the formatted value.
-   * @default (v: number) => v.toString()
+   * @default (v: number | null) => (v === null ? '' : v.toString())
    */
   valueFormatter: _propTypes.default.func,
   viewBox: _propTypes.default.shape({

package/esm/BarChart/formatter.js

@@ -69,7 +69,7 @@ const formatter = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: defaultizeValueFormatter(completedSeries, v => v == null ? void 0 : v.toLocaleString())
+    series: defaultizeValueFormatter(completedSeries, v => v === null ? '' : v.toLocaleString())
   };
 };
 export default formatter;

package/esm/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -5,6 +5,7 @@ import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltip
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function DefaultChartsItemTooltipContent(props) {
+  var _series$valueFormatte;
   const {
     series,
     itemData,
@@ -24,10 +25,8 @@ function DefaultChartsItemTooltipContent(props) {
     color: series.color,
     displayedLabel: series.label
   };
-
-  // TODO: Manage to let TS understand series.data and series.valueFormatter are coherent
-  // @ts-ignore
-  const formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);
+  const value = series.data[itemData.dataIndex];
+  const formattedValue = (_series$valueFormatte = series.valueFormatter) == null ? void 0 : _series$valueFormatte.call(series, value);
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
     className: classes.root,

package/esm/LineChart/formatter.js

@@ -11,7 +11,11 @@ const formatter = (params, dataset) => {
     seriesOrder,
     series
   } = params;
-  const stackingGroups = getStackingGroups(params);
+  const stackingGroups = getStackingGroups(_extends({}, params, {
+    defaultStrategy: {
+      stackOffset: 'none'
+    }
+  }));
 
   // Create a data set with format adapted to d3
   const d3Dataset = (_ref = dataset) != null ? _ref : [];
@@ -69,7 +73,7 @@ const formatter = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: defaultizeValueFormatter(completedSeries, v => v == null ? void 0 : v.toLocaleString())
+    series: defaultizeValueFormatter(completedSeries, v => v === null ? '' : v.toLocaleString())
   };
 };
 export default formatter;

package/esm/PieChart/PieArcLabel.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
+const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { animated, to } from '@react-spring/web';

package/esm/SparkLineChart/SparkLineChart.js

@@ -42,7 +42,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     slotProps,
     data,
     plotType = 'line',
-    valueFormatter = v => v.toString(),
+    valueFormatter = v => v === null ? '' : v.toString(),
     area,
     curve = 'linear'
   } = props;
@@ -205,7 +205,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * Formatter used by the tooltip.
    * @param {number} value The value to format.
    * @returns {string} the formatted value.
-   * @default (v: number) => v.toString()
+   * @default (v: number | null) => (v === null ? '' : v.toString())
    */
   valueFormatter: PropTypes.func,
   viewBox: PropTypes.shape({

package/esm/hooks/useAxisEvents.js

@@ -61,9 +61,7 @@ export const useAxisEvents = disableAxisListener => {
             }
           }
           if (v <= valueAsNumber) {
-            if (index === axisData.length - 1 ||
-            // @ts-ignore
-            Math.abs(value - v) < Math.abs(value - getAsANumber(axisData[index + 1]))) {
+            if (index === axisData.length - 1 || Math.abs(getAsANumber(value) - v) < Math.abs(getAsANumber(value) - getAsANumber(axisData[index + 1]))) {
               return true;
             }
           }

package/esm/internals/stackSeries.js

@@ -56,7 +56,8 @@ export const StackOffset = {
 export const getStackingGroups = params => {
   const {
     series,
-    seriesOrder
+    seriesOrder,
+    defaultStrategy
   } = params;
   const stackingGroups = [];
   const stackIndex = {};
@@ -73,11 +74,12 @@ export const getStackingGroups = params => {
         stackingOffset: StackOffset.none
       });
     } else if (stackIndex[stack] === undefined) {
+      var _ref, _ref2;
       stackIndex[stack] = stackingGroups.length;
       stackingGroups.push({
         ids: [id],
-        stackingOrder: StackOrder[stackOrder != null ? stackOrder : 'none'],
-        stackingOffset: StackOffset[stackOffset != null ? stackOffset : 'diverging']
+        stackingOrder: StackOrder[(_ref = stackOrder != null ? stackOrder : defaultStrategy == null ? void 0 : defaultStrategy.stackOrder) != null ? _ref : 'none'],
+        stackingOffset: StackOffset[(_ref2 = stackOffset != null ? stackOffset : defaultStrategy == null ? void 0 : defaultStrategy.stackOffset) != null ? _ref2 : 'diverging']
       });
     } else {
       stackingGroups[stackIndex[stack]].ids.push(id);

package/esm/models/index.js

@@ -1,3 +1,4 @@
 export * from './seriesType';
 export * from './layout';
+export * from './stacking';
 export {};

package/esm/models/stacking.js

@@ -0,0 +1 @@
+export {};

package/hooks/useAxisEvents.js

@@ -69,9 +69,7 @@ const useAxisEvents = disableAxisListener => {
             }
           }
           if (v <= valueAsNumber) {
-            if (index === axisData.length - 1 ||
-            // @ts-ignore
-            Math.abs(value - v) < Math.abs(value - getAsANumber(axisData[index + 1]))) {
+            if (index === axisData.length - 1 || Math.abs(getAsANumber(value) - v) < Math.abs(getAsANumber(value) - getAsANumber(axisData[index + 1]))) {
               return true;
             }
           }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.0.0-alpha.8
+ * @mui/x-charts v7.0.0-alpha.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/defaultizeColor.d.ts

@@ -39,23 +39,23 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     } | undefined;
     id?: string | undefined;
     color?: string | undefined;
-    valueFormatter?: ((value: import("../models/helpers").MakeOptional<import("../models/seriesType").PieValueType, "id">) => string) | undefined;
+    valueFormatter?: (<V extends import("../models/helpers").MakeOptional<import("../models/seriesType").PieValueType, "id">>(value: V) => string) | undefined;
     highlightScope?: Partial<import("..").HighlightScope> | undefined;
 } | {
     type: "bar";
-    data?: number[] | undefined;
+    data?: (number | null)[] | undefined;
     dataKey?: string | undefined;
     label?: string | undefined;
     layout?: "horizontal" | "vertical" | undefined;
+    stackOffset?: import("..").StackOffsetType | undefined;
     id?: string | undefined;
     color: string;
-    valueFormatter?: ((value: number) => string) | undefined;
+    valueFormatter?: (<V_1 extends number | null>(value: V_1) => string) | undefined;
     highlightScope?: Partial<import("..").HighlightScope> | undefined;
     xAxisKey?: string | undefined;
     yAxisKey?: string | undefined;
     stack?: string | undefined;
-    stackOffset?: "none" | "expand" | "diverging" | "silhouette" | "wiggle" | undefined;
-    stackOrder?: "reverse" | "none" | "appearance" | "ascending" | "descending" | "insideOut" | undefined;
+    stackOrder?: import("..").StackOrderType | undefined;
 } | {
     type: "line";
     data?: (number | null)[] | undefined;
@@ -67,14 +67,14 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     showMark?: boolean | ((params: import("../models/seriesType").ShowMarkParams<number | Date>) => boolean) | undefined;
     disableHighlight?: boolean | undefined;
     connectNulls?: boolean | undefined;
+    stackOffset?: import("..").StackOffsetType | undefined;
     id?: string | undefined;
     color: string;
-    valueFormatter?: ((value: number) => string) | undefined;
+    valueFormatter?: (<V_1 extends number | null>(value: V_1) => string) | undefined;
     highlightScope?: Partial<import("..").HighlightScope> | undefined;
     xAxisKey?: string | undefined;
     yAxisKey?: string | undefined;
-    stackOffset?: "none" | "expand" | "diverging" | "silhouette" | "wiggle" | undefined;
-    stackOrder?: "reverse" | "none" | "appearance" | "ascending" | "descending" | "insideOut" | undefined;
+    stackOrder?: import("..").StackOrderType | undefined;
 } | {
     type: "scatter";
     data: import("../models/seriesType").ScatterValueType[];
@@ -83,7 +83,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     disableHover?: boolean | undefined;
     id?: string | undefined;
     color: string;
-    valueFormatter?: ((value: import("../models/seriesType").ScatterValueType) => string) | undefined;
+    valueFormatter?: (<V_2 extends import("../models/seriesType").ScatterValueType>(value: V_2) => string) | undefined;
     highlightScope?: Partial<import("..").HighlightScope> | undefined;
     xAxisKey?: string | undefined;
     yAxisKey?: string | undefined;

package/internals/stackSeries.d.ts

@@ -1,5 +1,6 @@
 import { Series } from 'd3-shape';
-import { BarSeriesType, LineSeriesType } from '../models/seriesType';
+import type { BarSeriesType, LineSeriesType } from '../models/seriesType';
+import type { StackOffsetType, StackOrderType } from '../models/stacking';
 type StackableSeries = {
     [id: string]: BarSeriesType;
 } | {
@@ -8,6 +9,10 @@ type StackableSeries = {
 type FormatterParams = {
     series: StackableSeries;
     seriesOrder: string[];
+    defaultStrategy?: {
+        stackOrder?: StackOrderType;
+        stackOffset?: StackOffsetType;
+    };
 };
 export type StackingGroupsType = {
     ids: string[];
@@ -15,10 +20,10 @@ export type StackingGroupsType = {
     stackingOffset: (series: Series<any, any>, order: Iterable<number>) => void;
 }[];
 export declare const StackOrder: {
-    [key in 'appearance' | 'ascending' | 'descending' | 'insideOut' | 'none' | 'reverse']: (series: Series<any, any>) => number[];
+    [key in StackOrderType]: (series: Series<any, any>) => number[];
 };
 export declare const StackOffset: {
-    [key in 'expand' | 'diverging' | 'none' | 'silhouette' | 'wiggle']: (series: Series<any, any>, order: Iterable<number>) => void;
+    [key in StackOffsetType]: (series: Series<any, any>, order: Iterable<number>) => void;
 };
 /**
  * Takes a set of series and groups their ids

package/internals/stackSeries.js

@@ -62,7 +62,8 @@ const StackOffset = exports.StackOffset = {
 const getStackingGroups = params => {
   const {
     series,
-    seriesOrder
+    seriesOrder,
+    defaultStrategy
   } = params;
   const stackingGroups = [];
   const stackIndex = {};
@@ -82,8 +83,8 @@ const getStackingGroups = params => {
       stackIndex[stack] = stackingGroups.length;
       stackingGroups.push({
         ids: [id],
-        stackingOrder: StackOrder[stackOrder ?? 'none'],
-        stackingOffset: StackOffset[stackOffset ?? 'diverging']
+        stackingOrder: StackOrder[stackOrder ?? defaultStrategy?.stackOrder ?? 'none'],
+        stackingOffset: StackOffset[stackOffset ?? defaultStrategy?.stackOffset ?? 'diverging']
       });
     } else {
       stackingGroups[stackIndex[stack]].ids.push(id);

package/legacy/BarChart/formatter.js

@@ -71,7 +71,7 @@ var formatter = function formatter(params, dataset) {
     seriesOrder: seriesOrder,
     stackingGroups: stackingGroups,
     series: defaultizeValueFormatter(completedSeries, function (v) {
-      return v == null ? void 0 : v.toLocaleString();
+      return v === null ? '' : v.toLocaleString();
     })
   };
 };

package/legacy/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -5,6 +5,7 @@ import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltip
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function DefaultChartsItemTooltipContent(props) {
+  var _series$valueFormatte;
   var series = props.series,
     itemData = props.itemData,
     sx = props.sx,
@@ -21,10 +22,8 @@ function DefaultChartsItemTooltipContent(props) {
     },
     displayedLabel = _ref.displayedLabel,
     color = _ref.color;
-
-  // TODO: Manage to let TS understand series.data and series.valueFormatter are coherent
-  // @ts-ignore
-  var formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);
+  var value = series.data[itemData.dataIndex];
+  var formattedValue = (_series$valueFormatte = series.valueFormatter) == null ? void 0 : _series$valueFormatte.call(series, value);
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
     className: classes.root,

package/legacy/LineChart/formatter.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { stack as d3Stack } from 'd3-shape';
 import { getStackingGroups } from '../internals/stackSeries';
 import defaultizeValueFormatter from '../internals/defaultizeValueFormatter';
@@ -11,7 +11,11 @@ var formatter = function formatter(params, dataset) {
   var _ref;
   var seriesOrder = params.seriesOrder,
     series = params.series;
-  var stackingGroups = getStackingGroups(params);
+  var stackingGroups = getStackingGroups(_extends({}, params, {
+    defaultStrategy: {
+      stackOffset: 'none'
+    }
+  }));
 
   // Create a data set with format adapted to d3
   var d3Dataset = (_ref = dataset) != null ? _ref : [];
@@ -71,7 +75,7 @@ var formatter = function formatter(params, dataset) {
     seriesOrder: seriesOrder,
     stackingGroups: stackingGroups,
     series: defaultizeValueFormatter(completedSeries, function (v) {
-      return v == null ? void 0 : v.toLocaleString();
+      return v === null ? '' : v.toLocaleString();
     })
   };
 };

package/legacy/PieChart/PieArcLabel.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
+var _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { animated, to } from '@react-spring/web';
@@ -72,6 +72,8 @@ function PieArcLabel(props) {
     endAngle = props.endAngle,
     paddingAngle = props.paddingAngle,
     arcLabelRadius = props.arcLabelRadius,
+    innerRadius = props.innerRadius,
+    outerRadius = props.outerRadius,
     cornerRadius = props.cornerRadius,
     formattedArcLabel = props.formattedArcLabel,
     isHighlighted = props.isHighlighted,

package/legacy/SparkLineChart/SparkLineChart.js

@@ -45,7 +45,7 @@ var SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props
     plotType = _props$plotType === void 0 ? 'line' : _props$plotType,
     _props$valueFormatter = props.valueFormatter,
     valueFormatter = _props$valueFormatter === void 0 ? function (v) {
-      return v.toString();
+      return v === null ? '' : v.toString();
     } : _props$valueFormatter,
     area = props.area,
     _props$curve = props.curve,
@@ -211,7 +211,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * Formatter used by the tooltip.
    * @param {number} value The value to format.
    * @returns {string} the formatted value.
-   * @default (v: number) => v.toString()
+   * @default (v: number | null) => (v === null ? '' : v.toString())
    */
   valueFormatter: PropTypes.func,
   viewBox: PropTypes.shape({

package/legacy/hooks/useAxisEvents.js

@@ -57,9 +57,7 @@ export var useAxisEvents = function useAxisEvents(disableAxisListener) {
             }
           }
           if (v <= valueAsNumber) {
-            if (index === axisData.length - 1 ||
-            // @ts-ignore
-            Math.abs(value - v) < Math.abs(value - getAsANumber(axisData[index + 1]))) {
+            if (index === axisData.length - 1 || Math.abs(getAsANumber(value) - v) < Math.abs(getAsANumber(value) - getAsANumber(axisData[index + 1]))) {
               return true;
             }
           }

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.0.0-alpha.8
+ * @mui/x-charts v7.0.0-alpha.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/internals/stackSeries.js

@@ -55,7 +55,8 @@ export var StackOffset = {
  */
 export var getStackingGroups = function getStackingGroups(params) {
   var series = params.series,
-    seriesOrder = params.seriesOrder;
+    seriesOrder = params.seriesOrder,
+    defaultStrategy = params.defaultStrategy;
   var stackingGroups = [];
   var stackIndex = {};
   seriesOrder.forEach(function (id) {
@@ -70,11 +71,12 @@ export var getStackingGroups = function getStackingGroups(params) {
         stackingOffset: StackOffset.none
       });
     } else if (stackIndex[stack] === undefined) {
+      var _ref, _ref2;
       stackIndex[stack] = stackingGroups.length;
       stackingGroups.push({
         ids: [id],
-        stackingOrder: StackOrder[stackOrder != null ? stackOrder : 'none'],
-        stackingOffset: StackOffset[stackOffset != null ? stackOffset : 'diverging']
+        stackingOrder: StackOrder[(_ref = stackOrder != null ? stackOrder : defaultStrategy == null ? void 0 : defaultStrategy.stackOrder) != null ? _ref : 'none'],
+        stackingOffset: StackOffset[(_ref2 = stackOffset != null ? stackOffset : defaultStrategy == null ? void 0 : defaultStrategy.stackOffset) != null ? _ref2 : 'diverging']
       });
     } else {
       stackingGroups[stackIndex[stack]].ids.push(id);

package/legacy/models/index.js

@@ -1,3 +1,4 @@
 export * from './seriesType';
 export * from './layout';
+export * from './stacking';
 export {};

package/legacy/models/stacking.js

@@ -0,0 +1 @@
+export {};

package/models/index.d.ts

@@ -1,3 +1,4 @@
 export * from './seriesType';
 export * from './layout';
+export * from './stacking';
 export type { AxisConfig, ChartsYAxisProps, ChartsXAxisProps, ScaleName, ContinuouseScaleName, } from './axis';

package/models/index.js

@@ -24,4 +24,15 @@ Object.keys(_layout).forEach(function (key) {
       return _layout[key];
     }
   });
+});
+var _stacking = require("./stacking");
+Object.keys(_stacking).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _stacking[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _stacking[key];
+    }
+  });
 });

package/models/seriesType/bar.d.ts

@@ -1,11 +1,12 @@
 import { DefaultizedProps } from '../helpers';
+import type { StackOffsetType } from '../stacking';
 import { CartesianSeriesType, CommonSeriesType, CommonDefaultizedProps, StackableSeriesType } from './common';
-export interface BarSeriesType extends CommonSeriesType<number>, CartesianSeriesType, StackableSeriesType {
+export interface BarSeriesType extends CommonSeriesType<number | null>, CartesianSeriesType, StackableSeriesType {
     type: 'bar';
     /**
      * Data associated to each bar.
      */
-    data?: number[];
+    data?: (number | null)[];
     /**
      * The key used to retrive data from the dataset.
      */
@@ -16,6 +17,11 @@ export interface BarSeriesType extends CommonSeriesType<number>, CartesianSeries
      * @default 'vertical'
      */
     layout?: 'horizontal' | 'vertical';
+    /**
+     * Defines how stacked series handle negative values.
+     * @default 'diverging'
+     */
+    stackOffset?: StackOffsetType;
 }
 /**
  * An object that allows to identify a single bar.

package/models/seriesType/common.d.ts

@@ -1,5 +1,5 @@
 import type { HighlightScope } from '../../context/HighlightProvider';
-import type { StackOffset, StackOrder } from '../../internals/stackSeries';
+import type { StackOffsetType, StackOrderType } from '../stacking';
 export type CommonSeriesType<TValue> = {
     id?: string;
     color?: string;
@@ -8,7 +8,7 @@ export type CommonSeriesType<TValue> = {
      * @param {TValue} value The series' value to render.
      * @returns {string} The string to dispaly.
      */
-    valueFormatter?: (value: TValue) => string;
+    valueFormatter?: <V extends TValue>(value: V) => string;
     highlightScope?: Partial<HighlightScope>;
 };
 export type CommonDefaultizedProps = 'id' | 'valueFormatter' | 'data';
@@ -34,9 +34,8 @@ export type StackableSeriesType = {
     stackOffset?: StackOffsetType;
     /**
      * The order in which series' of the same group are stacked together.
+     * @default 'none'
      */
     stackOrder?: StackOrderType;
 };
-export type StackOrderType = keyof typeof StackOrder;
-export type StackOffsetType = keyof typeof StackOffset;
 export type DefaultizedCartesianSeriesType = Required<CartesianSeriesType>;

package/models/seriesType/index.d.ts

@@ -13,5 +13,4 @@ export * from './line';
 export * from './bar';
 export * from './scatter';
 export * from './pie';
-export type { StackOrderType, StackOffsetType } from './common';
 export type { AllSeriesType, CartesianSeriesType, DefaultizedSeriesType, DefaultizedCartesianSeriesType, StackableSeriesType, };

package/models/seriesType/line.d.ts

@@ -1,4 +1,5 @@
 import { DefaultizedProps } from '../helpers';
+import type { StackOffsetType } from '../stacking';
 import { CartesianSeriesType, CommonDefaultizedProps, CommonSeriesType, StackableSeriesType } from './common';
 export type CurveType = 'catmullRom' | 'linear' | 'monotoneX' | 'monotoneY' | 'natural' | 'step' | 'stepBefore' | 'stepAfter';
 export interface ShowMarkParams<AxisValue = number | Date> {
@@ -23,7 +24,7 @@ export interface ShowMarkParams<AxisValue = number | Date> {
      */
     value: number;
 }
-export interface LineSeriesType extends CommonSeriesType<number>, CartesianSeriesType, StackableSeriesType {
+export interface LineSeriesType extends CommonSeriesType<number | null>, CartesianSeriesType, StackableSeriesType {
     type: 'line';
     /**
      * Data associated to the line.
@@ -53,6 +54,11 @@ export interface LineSeriesType extends CommonSeriesType<number>, CartesianSerie
      * @default false
      */
     connectNulls?: boolean;
+    /**
+     * Defines how stacked series handle negative values.
+     * @default 'none'
+     */
+    stackOffset?: StackOffsetType;
 }
 /**
  * An object that allows to identify a single line.

package/models/stacking.d.ts

@@ -0,0 +1,2 @@
+export type StackOrderType = 'appearance' | 'ascending' | 'descending' | 'insideOut' | 'none' | 'reverse';
+export type StackOffsetType = 'expand' | 'diverging' | 'none' | 'silhouette' | 'wiggle';

package/models/stacking.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/modern/BarChart/formatter.js

@@ -65,7 +65,7 @@ const formatter = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: defaultizeValueFormatter(completedSeries, v => v?.toLocaleString())
+    series: defaultizeValueFormatter(completedSeries, v => v === null ? '' : v.toLocaleString())
   };
 };
 export default formatter;

package/modern/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -24,10 +24,8 @@ function DefaultChartsItemTooltipContent(props) {
     color: series.color,
     displayedLabel: series.label
   };
-
-  // TODO: Manage to let TS understand series.data and series.valueFormatter are coherent
-  // @ts-ignore
-  const formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);
+  const value = series.data[itemData.dataIndex];
+  const formattedValue = series.valueFormatter?.(value);
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
     className: classes.root,

package/modern/LineChart/formatter.js

@@ -10,7 +10,11 @@ const formatter = (params, dataset) => {
     seriesOrder,
     series
   } = params;
-  const stackingGroups = getStackingGroups(params);
+  const stackingGroups = getStackingGroups(_extends({}, params, {
+    defaultStrategy: {
+      stackOffset: 'none'
+    }
+  }));
 
   // Create a data set with format adapted to d3
   const d3Dataset = dataset ?? [];
@@ -65,7 +69,7 @@ const formatter = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: defaultizeValueFormatter(completedSeries, v => v?.toLocaleString())
+    series: defaultizeValueFormatter(completedSeries, v => v === null ? '' : v.toLocaleString())
   };
 };
 export default formatter;

package/modern/PieChart/PieArcLabel.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
+const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { animated, to } from '@react-spring/web';

package/modern/SparkLineChart/SparkLineChart.js

@@ -42,7 +42,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     slotProps,
     data,
     plotType = 'line',
-    valueFormatter = v => v.toString(),
+    valueFormatter = v => v === null ? '' : v.toString(),
     area,
     curve = 'linear'
   } = props;
@@ -205,7 +205,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * Formatter used by the tooltip.
    * @param {number} value The value to format.
    * @returns {string} the formatted value.
-   * @default (v: number) => v.toString()
+   * @default (v: number | null) => (v === null ? '' : v.toString())
    */
   valueFormatter: PropTypes.func,
   viewBox: PropTypes.shape({

package/modern/hooks/useAxisEvents.js

@@ -61,9 +61,7 @@ export const useAxisEvents = disableAxisListener => {
             }
           }
           if (v <= valueAsNumber) {
-            if (index === axisData.length - 1 ||
-            // @ts-ignore
-            Math.abs(value - v) < Math.abs(value - getAsANumber(axisData[index + 1]))) {
+            if (index === axisData.length - 1 || Math.abs(getAsANumber(value) - v) < Math.abs(getAsANumber(value) - getAsANumber(axisData[index + 1]))) {
               return true;
             }
           }

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.0.0-alpha.8
+ * @mui/x-charts v7.0.0-alpha.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/stackSeries.js

@@ -56,7 +56,8 @@ export const StackOffset = {
 export const getStackingGroups = params => {
   const {
     series,
-    seriesOrder
+    seriesOrder,
+    defaultStrategy
   } = params;
   const stackingGroups = [];
   const stackIndex = {};
@@ -76,8 +77,8 @@ export const getStackingGroups = params => {
       stackIndex[stack] = stackingGroups.length;
       stackingGroups.push({
         ids: [id],
-        stackingOrder: StackOrder[stackOrder ?? 'none'],
-        stackingOffset: StackOffset[stackOffset ?? 'diverging']
+        stackingOrder: StackOrder[stackOrder ?? defaultStrategy?.stackOrder ?? 'none'],
+        stackingOffset: StackOffset[stackOffset ?? defaultStrategy?.stackOffset ?? 'diverging']
       });
     } else {
       stackingGroups[stackIndex[stack]].ids.push(id);

package/modern/models/index.js

@@ -1,3 +1,4 @@
 export * from './seriesType';
 export * from './layout';
+export * from './stacking';
 export {};

package/modern/models/stacking.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "7.0.0-alpha.8",
+  "version": "7.0.0-alpha.9",
   "description": "The community edition of the charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -28,13 +28,13 @@
     "directory": "packages/x-charts"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.7",
-    "@mui/base": "^5.0.0-beta.29",
-    "@mui/system": "^5.15.2",
-    "@mui/utils": "^5.15.2",
+    "@babel/runtime": "^7.23.8",
+    "@mui/base": "^5.0.0-beta.32",
+    "@mui/system": "^5.15.5",
+    "@mui/utils": "^5.15.5",
     "@react-spring/rafz": "^9.7.3",
     "@react-spring/web": "^9.7.3",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.0",
     "d3-color": "^3.1.0",
     "d3-delaunay": "^6.0.4",
     "d3-scale": "^4.0.2",
@@ -44,7 +44,7 @@
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.4.1",
+    "@mui/material": "^5.15.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },