@mui/x-charts 8.19.0 → 8.20.0

package/CHANGELOG.md

@@ -5,6 +5,68 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.20.0
+
+_Nov 26, 2025_
+
+We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔃 Data Grid tree data now supports row reordering. See the [Drag-and-drop tree data reordering](https://mui.com/x/react-data-grid/tree-data/#drag-and-drop-tree-data-reordering) section for more details.
+- 🐞 Bugfixes
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @siriwatknp, @JCQuintas, @MBilalShafi, @prakhargupta1
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.20.0`
+
+- [DataGrid] Fix RTL virtualization to display columns when viewport width is larger than the grid (#20409) @siriwatknp
+- [DataGrid] Fix row range selection (#20442) @arminmeh
+- [DataGrid] Initialize data grid core packages (#20276) @cherniavskii
+- [DataGrid] Improve accessibility of the sort icon (#20430) @arminmeh
+- [DataGrid] Use `viewport` as a boundary for the `BasePopper` flip (#20311) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.20.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.20.0`, plus:
+
+- [DataGridPro] Avoid automatic scroll back to the focused header filter after it leaves the viewport (#20416) @arminmeh
+- [DataGridPro] Tree data row reordering (#19401) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.20.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.20.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.20.0`
+
+- [charts] Fix item tooltip position with node anchor (#20421) @alexfauquette
+- [charts] Fix radar item tooltip closing bug (#20429) @alexfauquette
+- [charts] Move series processing to selector (#20388) @JCQuintas
+- [charts] Prevent pointer out from removing controlled highlight (#20385) @alexfauquette
+
+#### `@mui/x-charts-pro@8.20.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.20.0`, plus:
+
+- [charts-pro] Fix Content-Security-Policy nonce not being correctly set on export (#20395) @bernardobelchior
+- [charts-pro] Improve vertical zoom slider thumb on mobile (#20439) @bernardobelchior
+- [charts-pro] Provide arguments to the `AreaPlotRoot` styled component (#20414) @arminmeh
+- [charts-pro] Remove grid outside the drawing area (#20412) @alexfauquette
+
+#### `@mui/x-charts-premium@8.20.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.20.0`, plus:
+
+- [charts-premium] Add explicit return type to `ChartsRenderer` for better compatibility with React 18 (#20413) @arminmeh
+
+### Docs
+
+- [docs] Add `llms.txt` link to the sidebar (#20312) @siriwatknp
+- [docs] Add a line chart demo for the Overview section (#20239) @prakhargupta1
+
 ## 8.19.0
 
 _Nov 20, 2025_

package/ChartsGrid/ChartsHorizontalGrid.js

@@ -8,11 +8,15 @@ exports.ChartsGridHorizontal = ChartsGridHorizontal;
 var React = _interopRequireWildcard(require("react"));
 var _useTicks = require("../hooks/useTicks");
 var _styledComponents = require("./styledComponents");
+var _ChartProvider = require("../context/ChartProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
  */
 function ChartsGridHorizontal(props) {
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
   const {
     axis,
     start,
@@ -34,7 +38,7 @@ function ChartsGridHorizontal(props) {
     children: yTicks.map(({
       value,
       offset
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.GridLine, {
+    }) => !instance.isYInside(offset) ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.GridLine, {
       y1: offset,
       y2: offset,
       x1: start,

package/ChartsGrid/ChartsVerticalGrid.js

@@ -8,11 +8,15 @@ exports.ChartsGridVertical = ChartsGridVertical;
 var React = _interopRequireWildcard(require("react"));
 var _useTicks = require("../hooks/useTicks");
 var _styledComponents = require("./styledComponents");
+var _ChartProvider = require("../context/ChartProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
  */
 function ChartsGridVertical(props) {
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
   const {
     axis,
     start,
@@ -34,7 +38,7 @@ function ChartsGridVertical(props) {
     children: xTicks.map(({
       value,
       offset
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.GridLine, {
+    }) => !instance.isXInside(offset) ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.GridLine, {
       y1: start,
       y2: end,
       x1: offset,

package/ChartsTooltip/ChartsTooltipContainer.js

@@ -92,7 +92,7 @@ function ChartsTooltipContainer(inProps) {
   const isOpen = (0, _useSelector.useSelector)(store, getIsOpenSelector(trigger, axisSystem, shouldPreventBecauseOfBrush));
   const lastInteraction = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsLastInteraction);
   const computedAnchor = lastInteraction === 'keyboard' ? 'node' : anchor;
-  const itemPosition = (0, _useSelector.useSelector)(store, trigger === 'item' && computedAnchor === 'node' ? _useChartInteraction.selectorChartsTooltipItemPosition : () => null, [position]);
+  const itemPosition = (0, _useSelector.useSelector)(store, trigger === 'item' && computedAnchor === 'node' ? _useChartInteraction.selectorChartsTooltipItemPosition : () => null, position);
   React.useEffect(() => {
     const svgElement = svgRef.current;
     if (svgElement === null) {

package/RadarChart/RadarSeriesPlot/RadarSeriesArea.js

@@ -16,7 +16,7 @@ var _useRadarSeriesData = require("./useRadarSeriesData");
 var _getAreaPath = require("./getAreaPath");
 var _radarSeriesPlotClasses = require("./radarSeriesPlotClasses");
 var _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
-var _useInteractionItemProps = require("../../hooks/useInteractionItemProps");
+var _useInteractionAllItemProps = require("./useInteractionAllItemProps");
 var _useRadarRotationIndex = require("./useRadarRotationIndex");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "onItemClick"];
@@ -54,7 +54,7 @@ function RadarSeriesArea(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesCoordinates = (0, _useRadarSeriesData.useRadarSeriesData)(seriesId);
   const getRotationIndex = (0, _useRadarRotationIndex.useRadarRotationIndex)();
-  const interactionProps = (0, _useInteractionItemProps.useInteractionAllItemProps)(seriesCoordinates);
+  const interactionProps = (0, _useInteractionAllItemProps.useInteractionAllItemProps)(seriesCoordinates);
   const {
     isFaded,
     isHighlighted

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.js

@@ -8,7 +8,7 @@ exports.RadarSeriesPlot = RadarSeriesPlot;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useRadarSeriesData = require("./useRadarSeriesData");
-var _useInteractionItemProps = require("../../hooks/useInteractionItemProps");
+var _useInteractionAllItemProps = require("./useInteractionAllItemProps");
 var _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
 var _radarSeriesPlotClasses = require("./radarSeriesPlotClasses");
 var _RadarSeriesArea = require("./RadarSeriesArea");
@@ -24,7 +24,7 @@ function RadarSeriesPlot(props) {
   } = props;
   const seriesCoordinates = (0, _useRadarSeriesData.useRadarSeriesData)(inSeriesId);
   const getRotationIndex = (0, _useRadarRotationIndex.useRadarRotationIndex)();
-  const interactionProps = (0, _useInteractionItemProps.useInteractionAllItemProps)(seriesCoordinates);
+  const interactionProps = (0, _useInteractionAllItemProps.useInteractionAllItemProps)(seriesCoordinates);
   const {
     isFaded,
     isHighlighted

package/RadarChart/RadarSeriesPlot/useInteractionAllItemProps.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { SeriesItemIdentifierWithData } from "../../models/seriesType/index.js";
+export declare const useInteractionAllItemProps: (data: SeriesItemIdentifierWithData<"radar">[], skip?: boolean) => {
+  onPointerEnter?: () => void;
+  onPointerLeave?: () => void;
+  onPointerDown?: (event: React.PointerEvent) => void;
+}[];

package/RadarChart/RadarSeriesPlot/useInteractionAllItemProps.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInteractionAllItemProps = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useChartContext = require("../../context/ChartProvider/useChartContext");
+var _useInteractionItemProps = require("../../hooks/useInteractionItemProps");
+const useInteractionAllItemProps = (data, skip) => {
+  const {
+    instance
+  } = (0, _useChartContext.useChartContext)();
+  const results = React.useMemo(() => {
+    return data.map(item => {
+      return skip ? {} : (0, _useInteractionItemProps.getInteractionItemProps)(instance, {
+        type: 'radar',
+        seriesId: item.seriesId,
+        dataIndex: item.dataIndex
+      });
+    });
+  }, [data, instance, skip]);
+  return results;
+};
+exports.useInteractionAllItemProps = useInteractionAllItemProps;

package/esm/ChartsGrid/ChartsHorizontalGrid.js

@@ -1,11 +1,15 @@
 import * as React from 'react';
 import { useTicks } from "../hooks/useTicks.js";
 import { GridLine } from "./styledComponents.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
  */
 export function ChartsGridHorizontal(props) {
+  const {
+    instance
+  } = useChartContext();
   const {
     axis,
     start,
@@ -27,7 +31,7 @@ export function ChartsGridHorizontal(props) {
     children: yTicks.map(({
       value,
       offset
-    }) => /*#__PURE__*/_jsx(GridLine, {
+    }) => !instance.isYInside(offset) ? null : /*#__PURE__*/_jsx(GridLine, {
       y1: offset,
       y2: offset,
       x1: start,

package/esm/ChartsGrid/ChartsVerticalGrid.js

@@ -1,11 +1,15 @@
 import * as React from 'react';
 import { useTicks } from "../hooks/useTicks.js";
 import { GridLine } from "./styledComponents.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
  */
 export function ChartsGridVertical(props) {
+  const {
+    instance
+  } = useChartContext();
   const {
     axis,
     start,
@@ -27,7 +31,7 @@ export function ChartsGridVertical(props) {
     children: xTicks.map(({
       value,
       offset
-    }) => /*#__PURE__*/_jsx(GridLine, {
+    }) => !instance.isXInside(offset) ? null : /*#__PURE__*/_jsx(GridLine, {
       y1: start,
       y2: end,
       x1: offset,

package/esm/ChartsTooltip/ChartsTooltipContainer.js

@@ -85,7 +85,7 @@ function ChartsTooltipContainer(inProps) {
   const isOpen = useSelector(store, getIsOpenSelector(trigger, axisSystem, shouldPreventBecauseOfBrush));
   const lastInteraction = useSelector(store, selectorChartsLastInteraction);
   const computedAnchor = lastInteraction === 'keyboard' ? 'node' : anchor;
-  const itemPosition = useSelector(store, trigger === 'item' && computedAnchor === 'node' ? selectorChartsTooltipItemPosition : () => null, [position]);
+  const itemPosition = useSelector(store, trigger === 'item' && computedAnchor === 'node' ? selectorChartsTooltipItemPosition : () => null, position);
   React.useEffect(() => {
     const svgElement = svgRef.current;
     if (svgElement === null) {

package/esm/RadarChart/RadarSeriesPlot/RadarSeriesArea.js

@@ -8,7 +8,7 @@ import { useRadarSeriesData } from "./useRadarSeriesData.js";
 import { getAreaPath } from "./getAreaPath.js";
 import { useUtilityClasses } from "./radarSeriesPlotClasses.js";
 import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.js";
-import { useInteractionAllItemProps } from "../../hooks/useInteractionItemProps.js";
+import { useInteractionAllItemProps } from "./useInteractionAllItemProps.js";
 import { useRadarRotationIndex } from "./useRadarRotationIndex.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getPathProps(params) {

package/esm/RadarChart/RadarSeriesPlot/RadarSeriesPlot.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import PropTypes from 'prop-types';
 import { useRadarSeriesData } from "./useRadarSeriesData.js";
-import { useInteractionAllItemProps } from "../../hooks/useInteractionItemProps.js";
+import { useInteractionAllItemProps } from "./useInteractionAllItemProps.js";
 import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.js";
 import { useUtilityClasses } from "./radarSeriesPlotClasses.js";
 import { getPathProps } from "./RadarSeriesArea.js";

package/esm/RadarChart/RadarSeriesPlot/useInteractionAllItemProps.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { SeriesItemIdentifierWithData } from "../../models/seriesType/index.js";
+export declare const useInteractionAllItemProps: (data: SeriesItemIdentifierWithData<"radar">[], skip?: boolean) => {
+  onPointerEnter?: () => void;
+  onPointerLeave?: () => void;
+  onPointerDown?: (event: React.PointerEvent) => void;
+}[];

package/esm/RadarChart/RadarSeriesPlot/useInteractionAllItemProps.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useChartContext } from "../../context/ChartProvider/useChartContext.js";
+import { getInteractionItemProps } from "../../hooks/useInteractionItemProps.js";
+export const useInteractionAllItemProps = (data, skip) => {
+  const {
+    instance
+  } = useChartContext();
+  const results = React.useMemo(() => {
+    return data.map(item => {
+      return skip ? {} : getInteractionItemProps(instance, {
+        type: 'radar',
+        seriesId: item.seriesId,
+        dataIndex: item.dataIndex
+      });
+    });
+  }, [data, instance, skip]);
+  return results;
+};

package/esm/hooks/useInteractionItemProps.d.ts

@@ -9,11 +9,6 @@ export declare const useInteractionItemProps: (data: SeriesItemIdentifierWithDat
   onPointerLeave?: () => void;
   onPointerDown?: (event: React.PointerEvent) => void;
 };
-export declare const useInteractionAllItemProps: (data: SeriesItemIdentifierWithData[], skip?: boolean) => {
-  onPointerEnter?: () => void;
-  onPointerLeave?: () => void;
-  onPointerDown?: (event: React.PointerEvent) => void;
-}[];
 export declare function getInteractionItemProps(instance: ChartInstance<[UseChartInteractionSignature, UseChartHighlightSignature]>, item: ChartItemIdentifierWithData<ChartSeriesType>): {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;

package/esm/hooks/useInteractionItemProps.js

@@ -39,17 +39,6 @@ export const useInteractionItemProps = (data, skip) => {
     onPointerDown
   }, [skip, onPointerEnter, onPointerLeave]);
 };
-export const useInteractionAllItemProps = (data, skip) => {
-  const {
-    instance
-  } = useChartContext();
-  const results = React.useMemo(() => {
-    return data.map(item => {
-      return skip ? {} : getInteractionItemProps(instance, item);
-    });
-  }, [data, instance, skip]);
-  return results;
-};
 export function getInteractionItemProps(instance, item) {
   function onPointerEnter() {
     if (!item) {

package/esm/hooks/useTicks.js

@@ -10,6 +10,9 @@ const offsetRatio = {
   end: 1,
   middle: 0.5
 };
+function getTickPosition(scale, value, placement) {
+  return scale(value) - (scale.step() - scale.bandwidth()) / 2 + offsetRatio[placement] * scale.step();
+}
 export function getTicks(options) {
   const {
     scale,
@@ -28,7 +31,13 @@ export function getTicks(options) {
     if (scale.bandwidth() > 0) {
       // scale type = 'band'
       const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
-      return [...filteredDomain.map(value => {
+      const isReversed = scale.range()[0] > scale.range()[1];
+      // Indexes are inclusive regarding the entire band.
+      const startIndex = filteredDomain.findIndex(value => {
+        return isInside(getTickPosition(scale, value, isReversed ? 'start' : 'end'));
+      });
+      const endIndex = filteredDomain.findLastIndex(value => isInside(getTickPosition(scale, value, isReversed ? 'end' : 'start')));
+      return [...filteredDomain.slice(startIndex, endIndex + 1).map(value => {
         const defaultTickLabel = `${value}`;
         return {
           value,
@@ -38,10 +47,10 @@ export function getTicks(options) {
             tickNumber,
             defaultTickLabel
           }) ?? defaultTickLabel,
-          offset: scale(value) - (scale.step() - scale.bandwidth()) / 2 + offsetRatio[tickPlacement] * scale.step(),
+          offset: getTickPosition(scale, value, tickPlacement),
           labelOffset: tickLabelPlacement === 'tick' ? 0 : scale.step() * (offsetRatio[tickLabelPlacement] - offsetRatio[tickPlacement])
         };
-      }), ...(tickPlacement === 'extremities' ? [{
+      }), ...(tickPlacement === 'extremities' && endIndex === domain.length - 1 && isInside(scale.range()[1]) ? [{
         formattedValue: undefined,
         offset: scale.range()[1],
         labelOffset: 0

package/esm/index.js

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

package/esm/internals/plugins/corePlugins/useChartSeries/processSeries.d.ts

@@ -1,23 +1,29 @@
 import { AllSeriesType } from "../../../../models/seriesType/index.js";
 import { ChartSeriesType, DatasetType } from "../../../../models/seriesType/config.js";
 import { ChartSeriesConfig } from "../../models/seriesConfig/index.js";
-import { SeriesProcessorResult } from "../../models/seriesConfig/seriesProcessor.types.js";
+import { DefaultizedSeriesGroups, ProcessedSeries } from "./useChartSeries.types.js";
 /**
- * This methods is the interface between what the developer is providing and what components receives
- * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified
- * It also add defaultized values such as the ids, colors
+ * This method groups series by type and adds defaultized values such as the ids and colors.
+ * It does NOT apply the series processors - that happens in a selector.
  * @param series The array of series provided by the developer
  * @param colors The color palette used to defaultize series colors
- * @returns An object structuring all the series by type.
+ * @returns An object structuring all the series by type with default values.
  */
-export declare const preprocessSeries: <TSeriesType extends ChartSeriesType>({
+export declare const defaultizeSeries: <TSeriesType extends ChartSeriesType>({
   series,
   colors,
-  seriesConfig,
-  dataset
+  seriesConfig
 }: {
   series: Readonly<AllSeriesType<TSeriesType>[]>;
   colors: readonly string[];
   seriesConfig: ChartSeriesConfig<TSeriesType>;
-  dataset?: Readonly<DatasetType>;
-}) => { [type in TSeriesType]?: SeriesProcessorResult<TSeriesType> | undefined };
+}) => DefaultizedSeriesGroups<TSeriesType>;
+/**
+ * Applies series processors to the defaultized series groups.
+ * This should be called in a selector to compute processed series on-demand.
+ * @param defaultizedSeries The defaultized series groups
+ * @param seriesConfig The series configuration
+ * @param dataset The optional dataset
+ * @returns Processed series with all transformations applied
+ */
+export declare const applySeriesProcessors: <TSeriesType extends ChartSeriesType>(defaultizedSeries: DefaultizedSeriesGroups<TSeriesType>, seriesConfig: ChartSeriesConfig<TSeriesType>, dataset?: Readonly<DatasetType>) => ProcessedSeries<TSeriesType>;

package/esm/internals/plugins/corePlugins/useChartSeries/processSeries.js

@@ -1,22 +1,17 @@
 /**
- * This methods is the interface between what the developer is providing and what components receives
- * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified
- * It also add defaultized values such as the ids, colors
+ * This method groups series by type and adds defaultized values such as the ids and colors.
+ * It does NOT apply the series processors - that happens in a selector.
  * @param series The array of series provided by the developer
  * @param colors The color palette used to defaultize series colors
- * @returns An object structuring all the series by type.
+ * @returns An object structuring all the series by type with default values.
  */
-export const preprocessSeries = ({
+export const defaultizeSeries = ({
   series,
   colors,
-  seriesConfig,
-  dataset
+  seriesConfig
 }) => {
   // Group series by type
   const seriesGroups = {};
-  // Notice the line about uses `ChartSeriesType` instead of TSeriesType.
-  // That's probably because the series.type is not propagated from the generic but hardcoded in the config.
-
   series.forEach((seriesData, seriesIndex) => {
     const seriesWithDefaultValues = seriesConfig[seriesData.type].getSeriesWithDefaultValues(seriesData, seriesIndex, colors);
     const id = seriesWithDefaultValues.id;
@@ -32,12 +27,25 @@ export const preprocessSeries = ({
     seriesGroups[seriesData.type].series[id] = seriesWithDefaultValues;
     seriesGroups[seriesData.type].seriesOrder.push(id);
   });
+  return seriesGroups;
+};
+
+/**
+ * Applies series processors to the defaultized series groups.
+ * This should be called in a selector to compute processed series on-demand.
+ * @param defaultizedSeries The defaultized series groups
+ * @param seriesConfig The series configuration
+ * @param dataset The optional dataset
+ * @returns Processed series with all transformations applied
+ */
+export const applySeriesProcessors = (defaultizedSeries, seriesConfig, dataset) => {
   const processedSeries = {};
+
   // Apply formatter on a type group
   Object.keys(seriesConfig).forEach(type => {
-    const group = seriesGroups[type];
+    const group = defaultizedSeries[type];
     if (group !== undefined) {
-      processedSeries[type] = seriesConfig[type]?.seriesProcessor?.(group, dataset) ?? seriesGroups[type];
+      processedSeries[type] = seriesConfig[type]?.seriesProcessor?.(group, dataset) ?? group;
     }
   });
   return processedSeries;

package/esm/internals/plugins/corePlugins/useChartSeries/useChartSeries.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { rainbowSurgePalette } from "../../../../colorPalettes/index.js";
-import { preprocessSeries } from "./processSeries.js";
+import { defaultizeSeries } from "./processSeries.js";
 export const useChartSeries = ({
   params,
   store,
@@ -25,11 +25,10 @@ export const useChartSeries = ({
       return;
     }
     store.set('series', _extends({}, store.state.series, {
-      processedSeries: preprocessSeries({
+      defaultizedSeries: defaultizeSeries({
         series,
         colors: typeof colors === 'function' ? colors(theme) : colors,
-        seriesConfig,
-        dataset
+        seriesConfig
       }),
       dataset
     }));
@@ -59,11 +58,10 @@ useChartSeries.getInitialState = ({
   return {
     series: {
       seriesConfig,
-      processedSeries: preprocessSeries({
+      defaultizedSeries: defaultizeSeries({
         series,
         colors: typeof colors === 'function' ? colors(theme) : colors,
-        seriesConfig,
-        dataset
+        seriesConfig
       }),
       dataset
     }

package/esm/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.d.ts

@@ -1,17 +1,24 @@
 import { ChartRootSelector } from "../../utils/selectors.js";
 import { UseChartSeriesSignature } from "./useChartSeries.types.js";
 export declare const selectorChartSeriesState: ChartRootSelector<UseChartSeriesSignature>;
-export declare const selectorChartSeriesProcessed: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartDefaultizedSeries: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => import("./useChartSeries.types.js").ProcessedSeries<keyof import("../../../index.js").ChartsSeriesConfig>;
+}) => import("./useChartSeries.types.js").DefaultizedSeriesGroups<keyof import("../../../index.js").ChartsSeriesConfig>;
 export declare const selectorChartSeriesConfig: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => import("../../models/index.js").ChartSeriesConfig<keyof import("../../../index.js").ChartsSeriesConfig>;
 /**
  * Get the dataset from the series state.
- * @param {ChartState<[UseChartSeriesSignature]>} state The state of the chart.
  * @returns {DatasetType | undefined} The dataset.
  */
 export declare const selectorChartDataset: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => readonly import("../../../index.js").DatasetElementType<unknown>[] | undefined;
+}) => readonly import("../../../index.js").DatasetElementType<unknown>[] | undefined;
+/**
+ * Get the processed series after applying series processors.
+ * This selector computes the processed series on-demand from the defaultized series.
+ * @returns {ProcessedSeries} The processed series.
+ */
+export declare const selectorChartSeriesProcessed: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => import("./useChartSeries.types.js").ProcessedSeries<keyof import("../../../index.js").ChartsSeriesConfig>;

package/esm/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.js

@@ -1,11 +1,20 @@
-import { createSelector } from '@mui/x-internals/store';
+import { createSelectorMemoized, createSelector } from '@mui/x-internals/store';
+import { applySeriesProcessors } from "./processSeries.js";
 export const selectorChartSeriesState = state => state.series;
-export const selectorChartSeriesProcessed = createSelector(selectorChartSeriesState, seriesState => seriesState.processedSeries);
+export const selectorChartDefaultizedSeries = createSelector(selectorChartSeriesState, seriesState => seriesState.defaultizedSeries);
 export const selectorChartSeriesConfig = createSelector(selectorChartSeriesState, seriesState => seriesState.seriesConfig);
 
 /**
  * Get the dataset from the series state.
- * @param {ChartState<[UseChartSeriesSignature]>} state The state of the chart.
  * @returns {DatasetType | undefined} The dataset.
  */
-export const selectorChartDataset = createSelector(selectorChartSeriesState, seriesState => seriesState.dataset);
+export const selectorChartDataset = createSelector(selectorChartSeriesState, seriesState => seriesState.dataset);
+
+/**
+ * Get the processed series after applying series processors.
+ * This selector computes the processed series on-demand from the defaultized series.
+ * @returns {ProcessedSeries} The processed series.
+ */
+export const selectorChartSeriesProcessed = createSelectorMemoized(selectorChartDefaultizedSeries, selectorChartSeriesConfig, selectorChartDataset, function selectorChartSeriesProcessed(defaultizedSeries, seriesConfig, dataset) {
+  return applySeriesProcessors(defaultizedSeries, seriesConfig, dataset);
+});

package/esm/internals/plugins/corePlugins/useChartSeries/useChartSeries.types.d.ts

@@ -2,7 +2,7 @@ import { AllSeriesType } from "../../../../models/seriesType/index.js";
 import { ChartsColorPalette } from "../../../../colorPalettes/index.js";
 import { ChartPluginSignature, ChartSeriesConfig } from "../../models/index.js";
 import { ChartSeriesType, DatasetType } from "../../../../models/seriesType/config.js";
-import { SeriesProcessorResult } from "../../models/seriesConfig/seriesProcessor.types.js";
+import { SeriesProcessorParams, SeriesProcessorResult } from "../../models/seriesConfig/seriesProcessor.types.js";
 export interface UseChartSeriesParameters<T extends ChartSeriesType = ChartSeriesType> {
   /**
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
@@ -36,9 +36,10 @@ export type UseChartSeriesDefaultizedParameters<T extends ChartSeriesType = Char
   theme: 'light' | 'dark';
 };
 export type ProcessedSeries<TSeriesTypes extends ChartSeriesType = ChartSeriesType> = { [type in TSeriesTypes]?: SeriesProcessorResult<type> };
+export type DefaultizedSeriesGroups<TSeriesTypes extends ChartSeriesType = ChartSeriesType> = { [type in TSeriesTypes]?: SeriesProcessorParams<type> };
 export interface UseChartSeriesState<T extends ChartSeriesType = ChartSeriesType> {
   series: {
-    processedSeries: ProcessedSeries<T>;
+    defaultizedSeries: DefaultizedSeriesGroups<T>;
     seriesConfig: ChartSeriesConfig<T>;
     dataset?: Readonly<DatasetType>;
   };