@mui/x-charts 8.14.1 → 8.16.0

package/esm/LineChart/LineChart.js

@@ -90,6 +90,14 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
   }),
+  /**
+   * Configuration for the brush interaction.
+   */
+  brushConfig: PropTypes.shape({
+    enabled: PropTypes.bool,
+    preventHighlight: PropTypes.bool,
+    preventTooltip: PropTypes.bool
+  }),
   children: PropTypes.node,
   className: PropTypes.string,
   /**

package/esm/LineChart/LineChart.plugins.d.ts

@@ -4,5 +4,6 @@ import { UseChartInteractionSignature } from "../internals/plugins/featurePlugin
 import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
-export type LineChartPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'line'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
+import { UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+export type LineChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'line'>, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
 export declare const LINE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<LineChartPluginSignatures>;

package/esm/LineChart/LineChart.plugins.js

@@ -3,4 +3,5 @@ import { useChartCartesianAxis } from "../internals/plugins/featurePlugins/useCh
 import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { useChartKeyboardNavigation } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
-export const LINE_CHART_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation];
+import { useChartBrush } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+export const LINE_CHART_PLUGINS = [useChartZAxis, useChartBrush, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartKeyboardNavigation];

package/esm/LineChart/seriesConfig/getSeriesWithDefaultValues.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
-  return _extends({
+  return _extends({}, seriesData, {
     id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
-    color: colors[seriesIndex % colors.length]
-  }, seriesData);
+    color: seriesData.color ?? colors[seriesIndex % colors.length]
+  });
 };
 export default getSeriesWithDefaultValues;

package/esm/LineChart/seriesConfig/index.js

@@ -4,11 +4,13 @@ import getColor from "./getColor.js";
 import legendGetter from "./legend.js";
 import tooltipGetter, { axisTooltipGetter } from "./tooltip.js";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
+import tooltipItemPositionGetter from "./tooltipPosition.js";
 export const seriesConfig = {
   colorProcessor: getColor,
   seriesProcessor,
   legendGetter,
   tooltipGetter,
+  tooltipItemPositionGetter,
   axisTooltipGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,

package/esm/LineChart/seriesConfig/tooltipPosition.d.ts

@@ -0,0 +1,3 @@
+import type { TooltipItemPositionGetter } from "../../internals/plugins/models/seriesConfig/tooltipItemPositionGetter.types.js";
+declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'line'>;
+export default tooltipItemPositionGetter;

package/esm/LineChart/seriesConfig/tooltipPosition.js

@@ -0,0 +1,27 @@
+const tooltipItemPositionGetter = params => {
+  const {
+    series,
+    identifier,
+    axesConfig
+  } = params;
+  if (!identifier || identifier.dataIndex === undefined) {
+    return null;
+  }
+  const itemSeries = series.line?.series[identifier.seriesId];
+  if (itemSeries == null) {
+    return null;
+  }
+  if (axesConfig.x === undefined || axesConfig.y === undefined) {
+    return null;
+  }
+  const xValue = axesConfig.x.data?.[identifier.dataIndex];
+  const yValue = itemSeries.data[identifier.dataIndex];
+  if (xValue == null || yValue == null) {
+    return null;
+  }
+  return {
+    x: axesConfig.x.scale(xValue),
+    y: axesConfig.y.scale(yValue)
+  };
+};
+export default tooltipItemPositionGetter;

package/esm/LineChart/useLineChartProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar", "brushConfig"];
 import * as React from 'react';
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
@@ -39,7 +39,8 @@ export const useLineChartProps = props => {
       loading,
       highlightedItem,
       onHighlightChange,
-      className
+      className,
+      brushConfig
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
@@ -68,6 +69,7 @@ export const useLineChartProps = props => {
     disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     className,
     skipAnimation,
+    brushConfig,
     plugins: LINE_CHART_PLUGINS
   });
   const gridProps = {

package/esm/PieChart/seriesConfig/getSeriesWithDefaultValues.js

@@ -1,11 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
-  return _extends({
-    id: seriesData.id ?? `auto-generated-id-${seriesIndex}`
-  }, seriesData, {
-    data: seriesData.data.map((d, index) => _extends({
-      color: colors[index % colors.length]
-    }, d))
+  return _extends({}, seriesData, {
+    id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
+    data: seriesData.data.map((d, index) => _extends({}, d, {
+      color: d.color ?? colors[index % colors.length]
+    }))
   });
 };
 export default getSeriesWithDefaultValues;

package/esm/PieChart/seriesConfig/index.js

@@ -3,10 +3,12 @@ import getColor from "./getColor.js";
 import legendGetter from "./legend.js";
 import tooltipGetter from "./tooltip.js";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
+import tooltipItemPositionGetter from "./tooltipPosition.js";
 export const seriesConfig = {
   colorProcessor: getColor,
   seriesProcessor,
   legendGetter,
   tooltipGetter,
+  tooltipItemPositionGetter,
   getSeriesWithDefaultValues
 };

package/esm/PieChart/seriesConfig/seriesProcessor.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { pie as d3Pie } from '@mui/x-charts-vendor/d3-shape';
 import { getLabel } from "../../internals/getLabel.js";
+import { deg2rad } from "../../internals/angleConversion.js";
 const getSortingComparator = (comparator = 'none') => {
   if (typeof comparator === 'function') {
     return comparator;
@@ -23,7 +24,7 @@ const seriesProcessor = params => {
   } = params;
   const defaultizedSeries = {};
   seriesOrder.forEach(seriesId => {
-    const arcs = d3Pie().startAngle(2 * Math.PI * (series[seriesId].startAngle ?? 0) / 360).endAngle(2 * Math.PI * (series[seriesId].endAngle ?? 360) / 360).padAngle(2 * Math.PI * (series[seriesId].paddingAngle ?? 0) / 360).sortValues(getSortingComparator(series[seriesId].sortingValues ?? 'none'))(series[seriesId].data.map(piePoint => piePoint.value));
+    const arcs = d3Pie().startAngle(deg2rad(series[seriesId].startAngle ?? 0)).endAngle(deg2rad(series[seriesId].endAngle ?? 360)).padAngle(deg2rad(series[seriesId].paddingAngle ?? 0)).sortValues(getSortingComparator(series[seriesId].sortingValues ?? 'none'))(series[seriesId].data.map(piePoint => piePoint.value));
     defaultizedSeries[seriesId] = _extends({
       labelMarkType: 'circle',
       valueFormatter: item => item.value.toLocaleString()

package/esm/PieChart/seriesConfig/tooltipPosition.d.ts

@@ -0,0 +1,3 @@
+import type { TooltipItemPositionGetter } from "../../internals/plugins/models/seriesConfig/tooltipItemPositionGetter.types.js";
+declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'pie'>;
+export default tooltipItemPositionGetter;

package/esm/PieChart/seriesConfig/tooltipPosition.js

@@ -0,0 +1,69 @@
+import { findMinMax } from "../../internals/findMinMax.js";
+import { getPercentageValue } from "../../internals/getPercentageValue.js";
+import { getPieCoordinates } from "../getPieCoordinates.js";
+const tooltipItemPositionGetter = params => {
+  const {
+    series,
+    drawingArea,
+    identifier,
+    placement
+  } = params;
+  if (!identifier || identifier.dataIndex === undefined) {
+    return null;
+  }
+  const itemSeries = series.pie?.series[identifier.seriesId];
+  if (itemSeries == null) {
+    return null;
+  }
+  const {
+    cx,
+    cy,
+    availableRadius
+  } = getPieCoordinates({
+    cx: itemSeries.cx,
+    cy: itemSeries.cy
+  }, drawingArea);
+  const {
+    data,
+    innerRadius: baseInnerRadius = 0,
+    outerRadius: baseOuterRadius
+  } = itemSeries;
+  const innerRadius = Math.max(0, getPercentageValue(baseInnerRadius ?? 0, availableRadius));
+  const outerRadius = Math.max(0, getPercentageValue(baseOuterRadius ?? availableRadius, availableRadius));
+  const dataItem = data[identifier.dataIndex];
+  if (!dataItem) {
+    return null;
+  }
+
+  // Compute the 4 corner points of the arc to get the bounding box.
+  const points = [[innerRadius, dataItem.startAngle], [innerRadius, dataItem.endAngle], [outerRadius, dataItem.startAngle], [outerRadius, dataItem.endAngle]].map(([radius, angle]) => ({
+    x: cx + radius * Math.sin(angle),
+    y: cy - radius * Math.cos(angle)
+  }));
+  const [x0, x1] = findMinMax(points.map(p => p.x));
+  const [y0, y1] = findMinMax(points.map(p => p.y));
+  switch (placement) {
+    case 'bottom':
+      return {
+        x: (x1 + x0) / 2,
+        y: y1
+      };
+    case 'left':
+      return {
+        x: x0,
+        y: (y1 + y0) / 2
+      };
+    case 'right':
+      return {
+        x: x1,
+        y: (y1 + y0) / 2
+      };
+    case 'top':
+    default:
+      return {
+        x: (x1 + x0) / 2,
+        y: y0
+      };
+  }
+};
+export default tooltipItemPositionGetter;

package/esm/RadarChart/RadarChart.plugins.d.ts

@@ -1,5 +1,5 @@
 import { UseChartPolarAxisSignature } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
 import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-export declare const RADAR_PLUGINS: readonly [import("../internals/index.js").ChartPlugin<UseChartPolarAxisSignature<any>>, import("../internals/index.js").ChartPlugin<UseChartInteractionSignature>, import("../internals/index.js").ChartPlugin<UseChartHighlightSignature>];
-export type RadarChartPluginSignatures = [UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature];
+export declare const RADAR_PLUGINS: readonly [import("../internals/index.js").ChartPlugin<UseChartInteractionSignature>, import("../internals/index.js").ChartPlugin<UseChartPolarAxisSignature<any>>, import("../internals/index.js").ChartPlugin<UseChartHighlightSignature>];
+export type RadarChartPluginSignatures = [UseChartInteractionSignature, UseChartPolarAxisSignature, UseChartHighlightSignature];

package/esm/RadarChart/RadarChart.plugins.js

@@ -1,4 +1,4 @@
 import { useChartPolarAxis } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
 import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-export const RADAR_PLUGINS = [useChartPolarAxis, useChartInteraction, useChartHighlight];
+export const RADAR_PLUGINS = [useChartInteraction, useChartPolarAxis, useChartHighlight];

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

@@ -17,8 +17,8 @@ export declare function useRadarSeriesData(querySeriesId?: SeriesId): {
   }[];
   type: "radar";
   label?: string | ((location: "tooltip" | "legend") => string) | undefined;
-  highlightScope?: import("../../index.js").HighlightScope | undefined;
   labelMarkType?: import("../../internals/index.js").ChartsLabelMarkType | undefined;
+  highlightScope?: import("../../index.js").HighlightScope | undefined;
   hideMark?: boolean | undefined;
   fillArea?: boolean | undefined;
   data: number[];

package/esm/RadarChart/seriesConfig/getSeriesWithDefaultValues.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
-  return _extends({
+  return _extends({}, seriesData, {
     id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
-    color: colors[seriesIndex % colors.length]
-  }, seriesData);
+    color: seriesData.color ?? colors[seriesIndex % colors.length]
+  });
 };
 export default getSeriesWithDefaultValues;

package/esm/ScatterChart/ScatterChart.js

@@ -80,6 +80,14 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
   }),
+  /**
+   * Configuration for the brush interaction.
+   */
+  brushConfig: PropTypes.shape({
+    enabled: PropTypes.bool,
+    preventHighlight: PropTypes.bool,
+    preventTooltip: PropTypes.bool
+  }),
   children: PropTypes.node,
   className: PropTypes.string,
   /**

package/esm/ScatterChart/ScatterChart.plugins.d.ts

@@ -5,5 +5,6 @@ import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/
 import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
 import { UseChartClosestPointSignature } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
 import { UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
-export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+import { UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
 export declare const SCATTER_CHART_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartPluginSignatures>;

package/esm/ScatterChart/ScatterChart.plugins.js

@@ -4,4 +4,5 @@ import { useChartInteraction } from "../internals/plugins/featurePlugins/useChar
 import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { useChartClosestPoint } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
 import { useChartKeyboardNavigation } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
-export const SCATTER_CHART_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation];
+import { useChartBrush } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+export const SCATTER_CHART_PLUGINS = [useChartZAxis, useChartBrush, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation];

package/esm/ScatterChart/seriesConfig/getSeriesWithDefaultValues.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
-  return _extends({
+  return _extends({}, seriesData, {
     id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
-    color: colors[seriesIndex % colors.length]
-  }, seriesData);
+    color: seriesData.color ?? colors[seriesIndex % colors.length]
+  });
 };
 export default getSeriesWithDefaultValues;

package/esm/ScatterChart/seriesConfig/index.js

@@ -4,11 +4,13 @@ import getColor from "./getColor.js";
 import legendGetter from "./legend.js";
 import tooltipGetter from "./tooltip.js";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
+import tooltipItemPositionGetter from "./tooltipPosition.js";
 export const seriesConfig = {
   seriesProcessor,
   colorProcessor: getColor,
   legendGetter,
   tooltipGetter,
+  tooltipItemPositionGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
   getSeriesWithDefaultValues

package/esm/ScatterChart/seriesConfig/tooltipPosition.d.ts

@@ -0,0 +1,3 @@
+import type { TooltipItemPositionGetter } from "../../internals/plugins/models/seriesConfig/tooltipItemPositionGetter.types.js";
+declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'scatter'>;
+export default tooltipItemPositionGetter;

package/esm/ScatterChart/seriesConfig/tooltipPosition.js

@@ -0,0 +1,27 @@
+const tooltipItemPositionGetter = params => {
+  const {
+    series,
+    identifier,
+    axesConfig
+  } = params;
+  if (!identifier || identifier.dataIndex === undefined) {
+    return null;
+  }
+  const itemSeries = series.scatter?.series[identifier.seriesId];
+  if (itemSeries == null) {
+    return null;
+  }
+  if (axesConfig.x === undefined || axesConfig.y === undefined) {
+    return null;
+  }
+  const xValue = itemSeries.data?.[identifier.dataIndex].x;
+  const yValue = itemSeries.data?.[identifier.dataIndex].y;
+  if (xValue == null || yValue == null) {
+    return null;
+  }
+  return {
+    x: axesConfig.x.scale(xValue),
+    y: axesConfig.y.scale(yValue)
+  };
+};
+export default tooltipItemPositionGetter;

package/esm/ScatterChart/useScatterChartProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar", "renderer"];
+const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar", "renderer", "brushConfig"];
 import * as React from 'react';
 import { SCATTER_CHART_PLUGINS } from "./ScatterChart.plugins.js";
 /**
@@ -35,7 +35,8 @@ export const useScatterChartProps = props => {
       highlightedItem,
       onHighlightChange,
       className,
-      renderer
+      renderer,
+      brushConfig
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesWithDefault = React.useMemo(() => series.map(s => _extends({
@@ -59,7 +60,8 @@ export const useScatterChartProps = props => {
     className,
     plugins: SCATTER_CHART_PLUGINS,
     slots,
-    slotProps
+    slotProps,
+    brushConfig
   });
   const chartsAxisProps = {
     slots,

package/esm/SparkLineChart/SparkLineChart.js

@@ -179,6 +179,14 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default 0
    */
   baseline: PropTypes.oneOfType([PropTypes.oneOf(['max', 'min']), PropTypes.number]),
+  /**
+   * Configuration for the brush interaction.
+   */
+  brushConfig: PropTypes.shape({
+    enabled: PropTypes.bool,
+    preventHighlight: PropTypes.bool,
+    preventTooltip: PropTypes.bool
+  }),
   children: PropTypes.node,
   className: PropTypes.string,
   /**

package/esm/context/ChartProvider/ChartProvider.js

@@ -21,7 +21,7 @@ export const defaultSeriesConfig = {
 
 // For consistency with the v7, the cartesian axes are set by default.
 // To remove them, you can provide a `plugins` props.
-const defaultPlugins = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight];
+const defaultPlugins = [useChartZAxis, useChartInteraction, useChartCartesianAxis, useChartHighlight];
 function ChartProvider(props) {
   const {
     children,

package/esm/hooks/index.d.ts

@@ -17,4 +17,5 @@ export * from "./useLegend.js";
 export { useChartGradientId, useChartGradientIdObjectBound } from "./useChartGradientId.js";
 export * from "./animation/index.js";
 export * from "./useChartRootRef.js";
-export * from "./useChartsLocalization.js";
+export * from "./useChartsLocalization.js";
+export * from "./useBrush.js";

package/esm/hooks/index.js

@@ -17,4 +17,5 @@ export * from "./useLegend.js";
 export { useChartGradientId, useChartGradientIdObjectBound } from "./useChartGradientId.js";
 export * from "./animation/index.js";
 export * from "./useChartRootRef.js";
-export * from "./useChartsLocalization.js";
+export * from "./useChartsLocalization.js";
+export * from "./useBrush.js";

package/esm/hooks/useBrush.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Get the current brush state.
+ *
+ * - `start` is the starting point of the brush selection.
+ * - `current` is the current point of the brush selection.
+ *
+ * @returns `{ start, current }` - The brush state.
+ */
+export declare function useBrush(): {
+  start: {
+    x: number;
+    y: number;
+  };
+  current: {
+    x: number;
+    y: number;
+  };
+} | null;

package/esm/hooks/useBrush.js

@@ -0,0 +1,16 @@
+import { selectorBrushState } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+
+/**
+ * Get the current brush state.
+ *
+ * - `start` is the starting point of the brush selection.
+ * - `current` is the current point of the brush selection.
+ *
+ * @returns `{ start, current }` - The brush state.
+ */
+export function useBrush() {
+  const store = useStore();
+  return useSelector(store, selectorBrushState);
+}

package/esm/hooks/useFocusedItem.d.ts

@@ -9,7 +9,7 @@ export type FocusedItemData = {
  * Get the focused item from keyboard navigation.
  */
 export declare function useFocusedItem(): {
-  seriesType: keyof import("../internals/index.js").ChartsSeriesConfig;
+  seriesType: "line" | "bar" | "scatter" | "pie";
   seriesId: SeriesId;
   dataIndex: number;
 } | null;

package/esm/hooks/useInteractionItemProps.js

@@ -15,7 +15,9 @@ export const useInteractionItemProps = (data, skip) => {
   const interactionActive = React.useRef(false);
   const onPointerEnter = useEventCallback(() => {
     interactionActive.current = true;
-    instance.setItemInteraction(data);
+    instance.setItemInteraction(data, {
+      interaction: 'pointer'
+    });
     instance.setHighlight(data);
   });
   const onPointerLeave = useEventCallback(() => {
@@ -56,7 +58,9 @@ export function getInteractionItemProps(instance, item) {
     if (!item) {
       return;
     }
-    instance.setItemInteraction(item);
+    instance.setItemInteraction(item, {
+      interaction: 'pointer'
+    });
     instance.setHighlight(item);
   }
   function onPointerLeave() {

package/esm/index.d.ts

@@ -28,4 +28,5 @@ export { ChartContainer } from "./ChartContainer/index.js";
 export type { ChartContainerProps } from "./ChartContainer/index.js";
 export * from "./ChartDataProvider/index.js";
 export * from "./Toolbar/index.js";
-export * from "./ChartsWrapper/index.js";
+export * from "./ChartsWrapper/index.js";
+export * from "./ChartsBrushOverlay/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.14.1
+ * @mui/x-charts v8.16.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -35,6 +35,7 @@ export { ChartContainer } from "./ChartContainer/index.js";
 export * from "./ChartDataProvider/index.js";
 export * from "./Toolbar/index.js";
 export * from "./ChartsWrapper/index.js";
+export * from "./ChartsBrushOverlay/index.js";
 
 // Locales should be imported from `@mui/x-charts/locales`
 // export * from './locales';

package/esm/internals/configInit.d.ts

@@ -3,7 +3,7 @@ declare class CartesianSeriesTypes {
   types: Set<CartesianChartSeriesType>;
   constructor();
   addType(value: CartesianChartSeriesType): void;
-  getTypes(): Set<"line" | "scatter" | "bar">;
+  getTypes(): Set<"line" | "bar" | "scatter">;
 }
 declare class PolarSeriesTypes {
   types: Set<PolarChartSeriesType>;

package/esm/internals/domUtils.d.ts

@@ -1,10 +1,11 @@
-export declare const MEASUREMENT_SPAN_ID = "mui_measurement_span";
+import * as React from 'react';
+export declare function clearStringMeasurementCache(): void;
 /**
- *
+ * Converts a style object into a string to be used as a cache key
  * @param style React style object
  * @returns CSS styling string
  */
-export declare const getStyleString: (style: React.CSSProperties) => string;
+export declare function getStyleString(style: React.CSSProperties): string;
 /**
  *
  * @param text The string to estimate
@@ -14,4 +15,8 @@ export declare const getStyleString: (style: React.CSSProperties) => string;
 export declare const getStringSize: (text: string | number, style?: React.CSSProperties) => {
   width: number;
   height: number;
-};
+};
+export declare function batchMeasureStrings(texts: Iterable<string | number>, style?: React.CSSProperties): Map<string | number, {
+  width: number;
+  height: number;
+}>;