@mui/x-charts 8.6.0 → 8.8.0

package/BarChart/BarChart.d.ts

@@ -15,7 +15,7 @@ import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "
 import { BarChartPluginsSignatures } from "./BarChart.plugins.js";
 export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
-export interface BarChartProps extends Omit<ChartContainerProps<'bar', BarChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+export interface BarChartProps extends Omit<ChartContainerProps<'bar', BarChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis' | 'experimentalFeatures'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the bar chart.
    * An array of [[BarSeriesType]] objects.

package/BarChart/BarChart.js

@@ -134,6 +134,14 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * If `true`, the legend is not rendered.
    */
   hideLegend: _propTypes.default.bool,
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    dataIndex: _propTypes.default.number.isRequired
+  })),
   /**
    * The highlighted item.
    * Used when the highlight is controlled.
@@ -186,6 +194,14 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: _propTypes.default.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onHighlightedAxisChange: _propTypes.default.func,
   /**
    * Callback fired when a bar item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/BarChart/BarPlot.js

@@ -14,160 +14,15 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _barElementClasses = require("./barElementClasses");
 var _BarElement = require("./BarElement");
-var _getColor = _interopRequireDefault(require("./seriesConfig/getColor"));
 var _hooks = require("../hooks");
 var _BarClipPath = require("./BarClipPath");
 var _BarLabelPlot = require("./BarLabel/BarLabelPlot");
-var _checkScaleErrors = require("./checkScaleErrors");
-var _useBarSeries = require("../hooks/useBarSeries");
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
+var _useBarPlotData = require("./useBarPlotData");
 var _barClasses = require("./barClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
-/**
- * Solution of the equations
- * W = barWidth * N + offset * (N-1)
- * offset / (offset + barWidth) = r
- * @param bandWidth The width available to place bars.
- * @param numberOfGroups The number of bars to place in that space.
- * @param gapRatio The ratio of the gap between bars over the bar width.
- * @returns The bar width and the offset between bars.
- */
-function getBandSize({
-  bandWidth: W,
-  numberOfGroups: N,
-  gapRatio: r
-}) {
-  if (r === 0) {
-    return {
-      barWidth: W / N,
-      offset: 0
-    };
-  }
-  const barWidth = W / (N + (N - 1) * r);
-  const offset = r * barWidth;
-  return {
-    barWidth,
-    offset
-  };
-}
-const useAggregatedData = () => {
-  const seriesData = (0, _useBarSeries.useBarSeriesContext)() ?? {
-    series: {},
-    stackingGroups: [],
-    seriesOrder: []
-  };
-  const drawingArea = (0, _hooks.useDrawingArea)();
-  const chartId = (0, _hooks.useChartId)();
-  const {
-    series,
-    stackingGroups
-  } = seriesData;
-  const {
-    xAxis,
-    xAxisIds
-  } = (0, _hooks.useXAxes)();
-  const {
-    yAxis,
-    yAxisIds
-  } = (0, _hooks.useYAxes)();
-  const defaultXAxisId = xAxisIds[0];
-  const defaultYAxisId = yAxisIds[0];
-  const masks = {};
-  const data = stackingGroups.flatMap(({
-    ids: seriesIds
-  }, groupIndex) => {
-    const xMin = drawingArea.left;
-    const xMax = drawingArea.left + drawingArea.width;
-    const yMin = drawingArea.top;
-    const yMax = drawingArea.top + drawingArea.height;
-    return seriesIds.map(seriesId => {
-      const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
-      const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
-      const xAxisConfig = xAxis[xAxisId];
-      const yAxisConfig = yAxis[yAxisId];
-      const verticalLayout = series[seriesId].layout === 'vertical';
-      (0, _checkScaleErrors.checkScaleErrors)(verticalLayout, seriesId, series[seriesId], xAxisId, xAxis, yAxisId, yAxis);
-      const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
-      const xScale = xAxisConfig.scale;
-      const yScale = yAxisConfig.scale;
-      const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
-      const bandWidth = baseScaleConfig.scale.bandwidth();
-      const {
-        barWidth,
-        offset
-      } = getBandSize({
-        bandWidth,
-        numberOfGroups: stackingGroups.length,
-        gapRatio: baseScaleConfig.barGapRatio
-      });
-      const barOffset = groupIndex * (barWidth + offset);
-      const {
-        stackedData,
-        data: currentSeriesData,
-        layout
-      } = series[seriesId];
-      const seriesDataPoints = baseScaleConfig.data.map((baseValue, dataIndex) => {
-        if (currentSeriesData[dataIndex] == null) {
-          return null;
-        }
-        const values = stackedData[dataIndex];
-        const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
-        const minValueCoord = Math.round(Math.min(...valueCoordinates));
-        const maxValueCoord = Math.round(Math.max(...valueCoordinates));
-        const stackId = series[seriesId].stack;
-        const result = {
-          seriesId,
-          dataIndex,
-          layout,
-          x: verticalLayout ? xScale(baseValue) + barOffset : minValueCoord,
-          y: verticalLayout ? minValueCoord : yScale(baseValue) + barOffset,
-          xOrigin: xScale(0) ?? 0,
-          yOrigin: yScale(0) ?? 0,
-          height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
-          width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
-          color: colorGetter(dataIndex),
-          value: currentSeriesData[dataIndex],
-          maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
-        };
-        if (result.x > xMax || result.x + result.width < xMin || result.y > yMax || result.y + result.height < yMin) {
-          return null;
-        }
-        if (!masks[result.maskId]) {
-          masks[result.maskId] = {
-            id: result.maskId,
-            width: 0,
-            height: 0,
-            hasNegative: false,
-            hasPositive: false,
-            layout: result.layout,
-            xOrigin: xScale(0),
-            yOrigin: yScale(0),
-            x: 0,
-            y: 0
-          };
-        }
-        const mask = masks[result.maskId];
-        mask.width = result.layout === 'vertical' ? result.width : mask.width + result.width;
-        mask.height = result.layout === 'vertical' ? mask.height + result.height : result.height;
-        mask.x = Math.min(mask.x === 0 ? Infinity : mask.x, result.x);
-        mask.y = Math.min(mask.y === 0 ? Infinity : mask.y, result.y);
-        mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
-        mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
-        return result;
-      }).filter(rectangle => rectangle !== null);
-      return {
-        seriesId,
-        data: seriesDataPoints
-      };
-    });
-  });
-  return {
-    completedData: data,
-    masksData: Object.values(masks)
-  };
-};
 const BarPlotRoot = (0, _styles.styled)('g', {
   name: 'MuiBarPlot',
   slot: 'Root'
@@ -189,10 +44,6 @@ const BarPlotRoot = (0, _styles.styled)('g', {
  * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
  */
 function BarPlot(props) {
-  const {
-    completedData,
-    masksData
-  } = useAggregatedData();
   const {
       skipAnimation: inSkipAnimation,
       onItemClick,
@@ -202,6 +53,16 @@ function BarPlot(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const isZoomInteracting = (0, _useInternalIsZoomInteracting.useInternalIsZoomInteracting)();
   const skipAnimation = (0, _useSkipAnimation.useSkipAnimation)(isZoomInteracting || inSkipAnimation);
+  const {
+    xAxis: xAxes
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis: yAxes
+  } = (0, _hooks.useYAxes)();
+  const {
+    completedData,
+    masksData
+  } = (0, _useBarPlotData.useBarPlotData)((0, _hooks.useDrawingArea)(), xAxes, yAxes);
   const withoutBorderRadius = !borderRadius || borderRadius <= 0;
   const classes = (0, _barClasses.useUtilityClasses)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BarPlotRoot, {

package/BarChart/useBarPlotData.d.ts

@@ -0,0 +1,8 @@
+import { ChartsXAxisProps, ChartsYAxisProps } from "../models/axis.js";
+import { ChartDrawingArea } from "../hooks/index.js";
+import { MaskData, ProcessedBarSeriesData } from "./types.js";
+import { ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.js";
+export declare function useBarPlotData(drawingArea: ChartDrawingArea, xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): {
+  completedData: ProcessedBarSeriesData[];
+  masksData: MaskData[];
+};

package/BarChart/useBarPlotData.js

@@ -0,0 +1,146 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBarPlotData = useBarPlotData;
+var _getColor = _interopRequireDefault(require("./seriesConfig/getColor"));
+var _hooks = require("../hooks");
+var _checkScaleErrors = require("./checkScaleErrors");
+var _useBarSeries = require("../hooks/useBarSeries");
+function useBarPlotData(drawingArea, xAxes, yAxes) {
+  const seriesData = (0, _useBarSeries.useBarSeriesContext)() ?? {
+    series: {},
+    stackingGroups: [],
+    seriesOrder: []
+  };
+  const defaultXAxisId = (0, _hooks.useXAxes)().xAxisIds[0];
+  const defaultYAxisId = (0, _hooks.useYAxes)().yAxisIds[0];
+  const chartId = (0, _hooks.useChartId)();
+  const {
+    series,
+    stackingGroups
+  } = seriesData;
+  const masks = {};
+  const data = stackingGroups.flatMap(({
+    ids: seriesIds
+  }, groupIndex) => {
+    const xMin = drawingArea.left;
+    const xMax = drawingArea.left + drawingArea.width;
+    const yMin = drawingArea.top;
+    const yMax = drawingArea.top + drawingArea.height;
+    return seriesIds.map(seriesId => {
+      const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
+      const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
+      const xAxisConfig = xAxes[xAxisId];
+      const yAxisConfig = yAxes[yAxisId];
+      const verticalLayout = series[seriesId].layout === 'vertical';
+      (0, _checkScaleErrors.checkScaleErrors)(verticalLayout, seriesId, series[seriesId], xAxisId, xAxes, yAxisId, yAxes);
+      const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
+      const xScale = xAxisConfig.scale;
+      const yScale = yAxisConfig.scale;
+      const colorGetter = (0, _getColor.default)(series[seriesId], xAxes[xAxisId], yAxes[yAxisId]);
+      const bandWidth = baseScaleConfig.scale.bandwidth();
+      const {
+        barWidth,
+        offset
+      } = getBandSize({
+        bandWidth,
+        numberOfGroups: stackingGroups.length,
+        gapRatio: baseScaleConfig.barGapRatio
+      });
+      const barOffset = groupIndex * (barWidth + offset);
+      const {
+        stackedData,
+        data: currentSeriesData,
+        layout
+      } = series[seriesId];
+      const seriesDataPoints = baseScaleConfig.data.map((baseValue, dataIndex) => {
+        if (currentSeriesData[dataIndex] == null) {
+          return null;
+        }
+        const values = stackedData[dataIndex];
+        const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
+        const minValueCoord = Math.round(Math.min(...valueCoordinates));
+        const maxValueCoord = Math.round(Math.max(...valueCoordinates));
+        const stackId = series[seriesId].stack;
+        const result = {
+          seriesId,
+          dataIndex,
+          layout,
+          x: verticalLayout ? xScale(baseValue) + barOffset : minValueCoord,
+          y: verticalLayout ? minValueCoord : yScale(baseValue) + barOffset,
+          xOrigin: xScale(0) ?? 0,
+          yOrigin: yScale(0) ?? 0,
+          height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
+          width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
+          color: colorGetter(dataIndex),
+          value: currentSeriesData[dataIndex],
+          maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
+        };
+        if (result.x > xMax || result.x + result.width < xMin || result.y > yMax || result.y + result.height < yMin) {
+          return null;
+        }
+        if (!masks[result.maskId]) {
+          masks[result.maskId] = {
+            id: result.maskId,
+            width: 0,
+            height: 0,
+            hasNegative: false,
+            hasPositive: false,
+            layout: result.layout,
+            xOrigin: xScale(0),
+            yOrigin: yScale(0),
+            x: 0,
+            y: 0
+          };
+        }
+        const mask = masks[result.maskId];
+        mask.width = result.layout === 'vertical' ? result.width : mask.width + result.width;
+        mask.height = result.layout === 'vertical' ? mask.height + result.height : result.height;
+        mask.x = Math.min(mask.x === 0 ? Infinity : mask.x, result.x);
+        mask.y = Math.min(mask.y === 0 ? Infinity : mask.y, result.y);
+        mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
+        mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
+        return result;
+      }).filter(rectangle => rectangle !== null);
+      return {
+        seriesId,
+        data: seriesDataPoints
+      };
+    });
+  });
+  return {
+    completedData: data,
+    masksData: Object.values(masks)
+  };
+}
+
+/**
+ * Solution of the equations
+ * W = barWidth * N + offset * (N-1)
+ * offset / (offset + barWidth) = r
+ * @param bandWidth The width available to place bars.
+ * @param numberOfGroups The number of bars to place in that space.
+ * @param gapRatio The ratio of the gap between bars over the bar width.
+ * @returns The bar width and the offset between bars.
+ */
+function getBandSize({
+  bandWidth: W,
+  numberOfGroups: N,
+  gapRatio: r
+}) {
+  if (r === 0) {
+    return {
+      barWidth: W / N,
+      offset: 0
+    };
+  }
+  const barWidth = W / (N + (N - 1) * r);
+  const offset = r * barWidth;
+  return {
+    barWidth,
+    offset
+  };
+}

package/CHANGELOG.md

@@ -5,6 +5,207 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.8.0
+
+_Jul 11, 2025_
+
+We'd like to extend a big thank you to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Chart zoom preview can be enabled
+
+  <img width="758" alt="chart with x-axis preview" src="https://github.com/user-attachments/assets/50ce6f61-16dc-4e9b-a727-ca65d80927d7" />
+
+- 🌎 Add Indonesian (id-ID) locale on the Data Grid
+
+Special thanks go out to the community members for their valuable contributions:
+@kennarddh
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @noraleonte, @prakhargupta1, @rita-codes, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.8.0`
+
+- [DataGrid] Fix `useGridSelector` missing subscription in `React.StrictMode` (#18676) @cherniavskii
+- [DataGrid] Fix scrollbar filler `z-index` (#18688) @KenanYusuf
+- [DataGrid] Set correct data source cache chunk size when pagination is disabled (#18636) @arminmeh
+- [l10n] Add Indonesian (id-ID) locale (#18710) @kennarddh
+
+#### `@mui/x-data-grid-pro@8.8.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.8.0`, plus:
+
+- [DataGridPro] Fix row ordering not auto-scrolling when moving beyond viewport (#18557) @MBilalShafi
+- [DataGridPro] Set correct parent paths when tree is refreshed with data source tree data and row grouping (#18715) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.8.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.8.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.8.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.8.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.8.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.8.0`
+
+- [charts] Add control to the axis highlight (#17900) @alexfauquette
+- [charts] Avoid processing area plot data if area isn't used in series (#18712) @bernardobelchior
+- [charts] Make smarter default domain limit (#18506) @alexfauquette
+
+#### `@mui/x-charts-pro@8.8.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.8.0`, plus:
+
+- [charts-pro] Add `funnelDirection` to control pyramid direction (#18568) @JCQuintas
+- [charts-pro] Add `onBeforeExport` callback (#18722) @bernardobelchior
+- [charts-pro] Add chart zoom preview (#18267) @bernardobelchior
+- [charts-pro] Allow customizing scatter preview marker size (#18726) @bernardobelchior
+- [charts-pro] Allow disabling the copy of styles in charts export (#18753) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.8.0`
+
+- [tree view] Fix state update that caused scrolling bug when lazy loading and `checkboxSelection` are enabled (#18749) @rita-codes
+
+#### `@mui/x-tree-view-pro@8.8.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.8.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.8.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add standalone Pyramid chart page to improve SEO (#18527) @prakhargupta1
+- [docs] Add example to customise line interaction (#18539) @alexfauquette
+- [docs] Fix `size` column filtering in files tree demo (#17952) @cherniavskii
+- [docs] Generate `llms.txt` for X and their products (#18595) @siriwatknp
+- [docs] Improve bar chart demos on mobile (#18721) @alexfauquette
+- [docs] Refine charts overview page (#17447) @noraleonte
+
+### Miscellaneous
+
+- [code-infra] Ensure all `@mui/*` packages are picked by `Material UI` renovate group (#18711) @LukasTy
+- [code-infra] Fix broken CI (#18716) @LukasTy
+- [code-infra] Refactor `prettier` config resolving (#18720) @LukasTy
+- [test] Increase data points in chart benchmarks (#18714) @bernardobelchior
+
+## 8.7.0
+
+_Jul 4, 2025_
+
+We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Add `useChartProApiRef` for easier access to the API
+- 📆 Support different start and end `referenceDate` props on range components
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+- 🌎 Improve Greek (el-GR) translations on the Charts
+- 🌎 Improve Danish (da-DK) locale on the Data Grid
+
+Special thanks go out to the community members for their valuable contributions:
+@ShahrazH, @vadimkuragkovskiy, @whythecode
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @brijeshb42, @mapache-salvaje, @arminmeh, @bernardobelchior, @bharatkashyap, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @michelengelen, @rita-codes
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.7.0`
+
+- [DataGrid] Fix column state restore with controlled column visibility model (#18567) @arminmeh
+- [DataGrid] Fix styling virtualized column headers (#18603) @KenanYusuf
+- [l10n] Improve Danish (da-DK) locale (#18537) @ShahrazH
+
+#### `@mui/x-data-grid-pro@8.7.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.7.0`.
+
+#### `@mui/x-data-grid-premium@8.7.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.7.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.7.0`
+
+- [pickers] Support different `start` and `end` `referenceDate` props on range components (#18549) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.7.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.7.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.7.0`
+
+- [charts] Export `ChartsReferenceLineProps` (#18598) @bernardobelchior
+- [charts] Extract bar and line plot logic into reusable hooks (#18541) @bernardobelchior
+- [charts] Extract plot logic into separate files for reuse (#18522) @bernardobelchior
+- [charts] Profile charts benchmarks using chromium (#18528) @bernardobelchior
+- [l10n] Add Greek (el-GR) locale to charts (#18548) @whythecode
+
+#### `@mui/x-charts-pro@8.7.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.7.0`, plus:
+
+- [charts-pro] Add `useChartProApiRef` for easier refs (#18013) @JCQuintas
+- [charts-pro] Add tests and classes to zoom slider (#18660) @JCQuintas
+- [charts-pro] Fix geometry not handling gestures in specific scenarios (#18651) @JCQuintas
+- [charts-pro] Rename `useChartApiContext` to `useChartProApiContext` (#18565) @JCQuintas
+- [charts-pro] Zoom pointer improvements (#17480) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.7.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.7.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.7.0`, plus:
+
+- [tree view pro] Add missing `dataSource` JSDoc (#18650) @LukasTy
+
+### Docs
+
+- [docs] Add MCP stub (#18204) @bharatkashyap
+- [docs] Fix AI Assistant proxy rewrite prefix (#18661) @arminmeh
+- [docs] Improve test README.MD (#18634) @LukasTy
+- [docs] Provide workaround for pie chart composition (#18600) @alexfauquette
+- [docs][charts] Add donut chart as a special case of a pie chart (#18652) @bernardobelchior
+- [docs][charts] Centralize country and continent data (#18604) @bernardobelchior
+- [docs][data grid] Audit and revise the Pro row docs (#17926) @mapache-salvaje
+- [docs][pickers] Add mention of theme augmentation in relevant migration section (#18608) @LukasTy
+
+### Core
+
+- [core] Avoid stringifying `document` object (#18657) @vadimkuragkovskiy
+
+### Miscellaneous
+
+- [code-infra] Bump code-infra version and fix breaking changes (#18653) @brijeshb42
+- [code-infra] Ensure `material-ui/disallow-react-api-in-server-components` ESLint rule is applied (#18570) @LukasTy
+- [code-infra] Migrate to flat eslint config (#18562) @brijeshb42
+- [code-infra] Refactor eslint config (#18643) @LukasTy
+- [infra] Add renovatebot rule for latest infra packages (#18609) @Janpot
+- [infra] Move pushArgos script to code-infra (#18667) @Janpot
+- [infra] Updates release script to fetch latest major version from upstream (#18552) @michelengelen
+- [release] Add missing contributor to changelog (#18561) @bernardobelchior
+
 ## 8.6.0
 
 _Jun 27, 2025_
@@ -19,7 +220,7 @@ We'd like to extend a big thank you to the 12 contributors who made this release
 - 🌎 Improve German (de-DE) locale
 
 Special thanks go out to the community members for their valuable contributions:
-@ShahrazH, @vadimka123
+@omalyutin, @ShahrazH, @vadimka123
 
 The following are all team members who have contributed to this release:
 @arminmeh, @bernardobelchior, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @noraleonte, @rita-codes, @sai6855

package/ChartContainer/ChartContainer.d.ts

@@ -1,30 +1,10 @@
 import * as React from 'react';
-import { PieChartPluginSignatures } from "../PieChart/PieChart.plugins.js";
-import { BarChartPluginsSignatures } from "../BarChart/BarChart.plugins.js";
-import { ScatterChartPluginsSignatures } from "../ScatterChart/ScatterChart.plugins.js";
-import { LineChartPluginsSignatures } from "../LineChart/LineChart.plugins.js";
 import { ChartSeriesType } from "../models/seriesType/config.js";
 import { ChartDataProviderProps } from "../ChartDataProvider/index.js";
 import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
-import { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 import { ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
-import { ChartPublicAPI } from "../internals/plugins/models/index.js";
 export type ChartContainerProps<SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>> = Omit<ChartDataProviderProps<SeriesType, TSignatures>, 'children'> & ChartsSurfaceProps;
-type PluginsPerSeriesType = {
-  line: LineChartPluginsSignatures;
-  scatter: ScatterChartPluginsSignatures;
-  bar: BarChartPluginsSignatures;
-  pie: PieChartPluginSignatures;
-  composition: DefaultPluginSignatures;
-};
-/**
- * The API of the chart `apiRef` object.
- * The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
- * @example ChartApi<'bar'>
- * If the chart is being created using composition, the `composition` value can be used.
- * @example ChartApi<'composition'>
- */
-export type ChartApi<TSeries extends keyof PluginsPerSeriesType | undefined = undefined, TSignatures extends readonly ChartAnyPluginSignature[] = (TSeries extends keyof PluginsPerSeriesType ? PluginsPerSeriesType[TSeries] : AllPluginSignatures)> = ChartPublicAPI<TSignatures>;
 /**
  * It sets up the data providers as well as the `<svg>` for the chart.
  *