@mui/x-charts 7.6.0 → 7.6.2

package/esm/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -4,11 +4,11 @@ import { Delaunay } from 'd3-delaunay';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { InteractionContext } from '../context/InteractionProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
-import { SeriesContext } from '../context/SeriesContextProvider';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { getSVGPoint } from '../internals/utils';
 import { useDrawingArea, useSvgRef } from '../hooks';
 import { useHighlighted } from '../context';
+import { useScatterSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsVoronoiHandler(props) {
   const {
@@ -34,7 +34,7 @@ function ChartsVoronoiHandler(props) {
   const {
     series,
     seriesOrder
-  } = React.useContext(SeriesContext).scatter ?? {};
+  } = useScatterSeries() ?? {};
   const voronoiRef = React.useRef({});
   const delauneyRef = React.useRef(undefined);
   const {

package/esm/ChartsXAxis/ChartsXAxis.js

@@ -104,27 +104,23 @@ const defaultProps = {
  * - [ChartsXAxis API](https://mui.com/x/api/charts/charts-x-axis/)
  */
 function ChartsXAxis(inProps) {
-  const props = useThemeProps({
-    props: _extends({}, defaultProps, inProps),
-    name: 'MuiChartsXAxis'
-  });
   const {
-    xAxisIds
+    xAxisIds,
+    xAxis
   } = React.useContext(CartesianContext);
-  const _React$useContext = React.useContext(CartesianContext),
-    _ref = props.axisId ?? xAxisIds[0],
+  const _xAxis = xAxis[inProps.axisId ?? xAxisIds[0]],
     {
-      xAxis: {
-        [_ref]: {
-          scale: xScale,
-          tickNumber,
-          reverse
-        }
-      }
-    } = _React$useContext,
-    settings = _objectWithoutPropertiesLoose(_React$useContext.xAxis[_ref], _excluded);
+      scale: xScale,
+      tickNumber,
+      reverse
+    } = _xAxis,
+    settings = _objectWithoutPropertiesLoose(_xAxis, _excluded);
   const isMounted = useMounted();
-  const defaultizedProps = _extends({}, defaultProps, settings, props);
+  const themedProps = useThemeProps({
+    props: _extends({}, settings, inProps),
+    name: 'MuiChartsXAxis'
+  });
+  const defaultizedProps = _extends({}, defaultProps, themedProps);
   const {
     position,
     disableLine,
@@ -314,10 +310,12 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    */
   tickFontSize: PropTypes.number,
   /**
-   * Defines which ticks are displayed. Its value can be:
+   * Defines which ticks are displayed.
+   * Its value can be:
    * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
-   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has a data property.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
    * - an array containing the values where ticks should be displayed.
+   * @see See {@link https://mui.com/x/react-charts/axis/#fixed-tick-positions}
    * @default 'auto'
    */
   tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),

package/esm/ChartsYAxis/ChartsYAxis.js

@@ -1,5 +1,5 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["scale", "tickNumber"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -47,25 +47,21 @@ const defaultProps = {
  * - [ChartsYAxis API](https://mui.com/x/api/charts/charts-y-axis/)
  */
 function ChartsYAxis(inProps) {
-  const props = useThemeProps({
-    props: _extends({}, defaultProps, inProps),
-    name: 'MuiChartsYAxis'
-  });
   const {
-    yAxisIds
+    yAxisIds,
+    yAxis
   } = React.useContext(CartesianContext);
-  const _React$useContext = React.useContext(CartesianContext),
-    _ref = props.axisId ?? yAxisIds[0],
+  const _yAxis = yAxis[inProps.axisId ?? yAxisIds[0]],
     {
-      yAxis: {
-        [_ref]: {
-          scale: yScale,
-          tickNumber
-        }
-      }
-    } = _React$useContext,
-    settings = _objectWithoutPropertiesLoose(_React$useContext.yAxis[_ref], _excluded);
-  const defaultizedProps = _extends({}, defaultProps, settings, props);
+      scale: yScale,
+      tickNumber
+    } = _yAxis,
+    settings = _objectWithoutPropertiesLoose(_yAxis, _excluded);
+  const themedProps = useThemeProps({
+    props: _extends({}, settings, inProps),
+    name: 'MuiChartsYAxis'
+  });
+  const defaultizedProps = _extends({}, defaultProps, themedProps);
   const {
     position,
     disableLine,
@@ -250,10 +246,12 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    */
   tickFontSize: PropTypes.number,
   /**
-   * Defines which ticks are displayed. Its value can be:
+   * Defines which ticks are displayed.
+   * Its value can be:
    * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
-   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has a data property.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
    * - an array containing the values where ticks should be displayed.
+   * @see See {@link https://mui.com/x/react-charts/axis/#fixed-tick-positions}
    * @default 'auto'
    */
   tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),

package/esm/LineChart/AreaPlot.js

@@ -4,16 +4,16 @@ const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { area as d3Area } from 'd3-shape';
-import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { AreaElement } from './AreaElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { useChartGradient } from '../internals/components/ChartsAxesGradients';
+import { useLineSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useAggregatedData = () => {
-  const seriesData = React.useContext(SeriesContext).line;
+  const seriesData = useLineSeries();
   const axisData = React.useContext(CartesianContext);
   if (seriesData === undefined) {
     return [];

package/esm/LineChart/LineChart.js

@@ -348,7 +348,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    position: PropTypes.oneOf(['bottom', 'top']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
@@ -401,7 +401,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    position: PropTypes.oneOf(['left', 'right']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,

package/esm/LineChart/LineHighlightPlot.js

@@ -3,13 +3,13 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { LineHighlightElement } from './LineHighlightElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { InteractionContext } from '../context/InteractionProvider';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import getColor from './getColor';
+import { useLineSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -27,7 +27,7 @@ function LineHighlightPlot(props) {
       slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const seriesData = React.useContext(SeriesContext).line;
+  const seriesData = useLineSeries();
   const axisData = React.useContext(CartesianContext);
   const {
     axis

package/esm/LineChart/LinePlot.js

@@ -4,16 +4,16 @@ const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { line as d3Line } from 'd3-shape';
-import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { LineElement } from './LineElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { useChartGradient } from '../internals/components/ChartsAxesGradients';
+import { useLineSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useAggregatedData = () => {
-  const seriesData = React.useContext(SeriesContext).line;
+  const seriesData = useLineSeries();
   const axisData = React.useContext(CartesianContext);
   if (seriesData === undefined) {
     return [];

package/esm/LineChart/MarkPlot.js

@@ -3,7 +3,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { MarkElement } from './MarkElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
@@ -11,6 +10,7 @@ import { useChartId } from '../hooks/useChartId';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { cleanId } from '../internals/utils';
 import getColor from './getColor';
+import { useLineSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -30,7 +30,7 @@ function MarkPlot(props) {
       onItemClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const seriesData = React.useContext(SeriesContext).line;
+  const seriesData = useLineSeries();
   const axisData = React.useContext(CartesianContext);
   const chartId = useChartId();
   const Mark = slots?.mark ?? MarkElement;

package/esm/LineChart/formatter.js

@@ -1,7 +1,7 @@
 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';
+import { defaultizeValueFormatter } from '../internals/defaultizeValueFormatter';
 let warnedOnce = false;
 
 // For now it's a copy past of bar charts formatter, but maybe will diverge later

package/esm/LineChart/getColor.js

@@ -1,6 +1,6 @@
 export default function getColor(series, xAxis, yAxis) {
-  const yColorScale = yAxis.colorScale;
-  const xColorScale = xAxis.colorScale;
+  const yColorScale = yAxis?.colorScale;
+  const xColorScale = xAxis?.colorScale;
   if (yColorScale) {
     return dataIndex => {
       const value = series.data[dataIndex];

package/esm/LineChart/plugin.js

@@ -0,0 +1,10 @@
+import { getExtremumX, getExtremumY } from './extremums';
+import formatter from './formatter';
+import getColor from './getColor';
+export const plugin = {
+  seriesType: 'line',
+  colorProcessor: getColor,
+  seriesFormatter: formatter,
+  xExtremumGetter: getExtremumX,
+  yExtremumGetter: getExtremumY
+};

package/esm/PieChart/PieChart.js

@@ -307,7 +307,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    position: PropTypes.oneOf(['bottom', 'top']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
@@ -360,7 +360,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    position: PropTypes.oneOf(['left', 'right']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,

package/esm/PieChart/PiePlot.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { SeriesContext } from '../context/SeriesContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
 import { PieArcPlot } from './PieArcPlot';
 import { PieArcLabelPlot } from './PieArcLabelPlot';
 import { getPercentageValue } from '../internals/utils';
 import { getPieCoordinates } from './getPieCoordinates';
+import { usePieSeries } from '../hooks/useSeries';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -24,7 +24,7 @@ function PiePlot(props) {
     slotProps,
     onItemClick
   } = props;
-  const seriesData = React.useContext(SeriesContext).pie;
+  const seriesData = usePieSeries();
   const {
     left,
     top,

package/esm/PieChart/plugin.js

@@ -0,0 +1,7 @@
+import formatter from './formatter';
+import getColor from './getColor';
+export const plugin = {
+  seriesType: 'pie',
+  colorProcessor: getColor,
+  seriesFormatter: formatter
+};

package/esm/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -99,6 +99,11 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: PropTypes.func,
+  /**
+   * An array of plugins defining how to preprocess data.
+   * If not provided, the container supports line, bar, scatter and pie charts.
+   */
+  plugins: PropTypes.arrayOf(PropTypes.object),
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
@@ -152,7 +157,7 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    position: PropTypes.oneOf(['bottom', 'top']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
@@ -205,7 +210,7 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    position: PropTypes.oneOf(['left', 'right']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,

package/esm/ScatterChart/ScatterChart.js

@@ -302,7 +302,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    position: PropTypes.oneOf(['bottom', 'top']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
@@ -355,7 +355,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    position: PropTypes.oneOf(['left', 'right']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,

package/esm/ScatterChart/ScatterPlot.js

@@ -2,10 +2,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Scatter } from './Scatter';
-import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import getColor from './getColor';
 import { ZAxisContext } from '../context/ZAxisContextProvider';
+import { useScatterSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -23,7 +23,7 @@ function ScatterPlot(props) {
     slotProps,
     onItemClick
   } = props;
-  const seriesData = React.useContext(SeriesContext).scatter;
+  const seriesData = useScatterSeries();
   const axisData = React.useContext(CartesianContext);
   const {
     zAxis,

package/esm/ScatterChart/formatter.js

@@ -1,4 +1,4 @@
-import defaultizeValueFormatter from '../internals/defaultizeValueFormatter';
+import { defaultizeValueFormatter } from '../internals/defaultizeValueFormatter';
 const formatter = ({
   series,
   seriesOrder

package/esm/ScatterChart/getColor.js

@@ -1,7 +1,7 @@
 export default function getColor(series, xAxis, yAxis, zAxis) {
   const zColorScale = zAxis?.colorScale;
-  const yColorScale = yAxis.colorScale;
-  const xColorScale = xAxis.colorScale;
+  const yColorScale = yAxis?.colorScale;
+  const xColorScale = xAxis?.colorScale;
   if (zColorScale) {
     return dataIndex => {
       if (zAxis?.data?.[dataIndex] !== undefined) {

package/esm/ScatterChart/plugin.js

@@ -0,0 +1,10 @@
+import { getExtremumX, getExtremumY } from './extremums';
+import formatter from './formatter';
+import getColor from './getColor';
+export const plugin = {
+  seriesType: 'scatter',
+  seriesFormatter: formatter,
+  colorProcessor: getColor,
+  xExtremumGetter: getExtremumX,
+  yExtremumGetter: getExtremumY
+};

package/esm/SparkLineChart/SparkLineChart.js

@@ -265,7 +265,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    position: PropTypes.oneOf(['bottom', 'top']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,

package/esm/context/CartesianContextProvider.js

@@ -6,11 +6,11 @@ import { getExtremumX as getScatterExtremumX, getExtremumY as getScatterExtremum
 import { getExtremumX as getLineExtremumX, getExtremumY as getLineExtremumY } from '../LineChart/extremums';
 import { isBandScaleConfig, isPointScaleConfig } from '../models/axis';
 import { getScale } from '../internals/getScale';
-import { SeriesContext } from './SeriesContextProvider';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import { getTickNumber } from '../hooks/useTicks';
 import { useDrawingArea } from '../hooks/useDrawingArea';
 import { getColorScale, getOrdinalColorScale } from '../internals/colorScale';
+import { useSeries } from '../hooks/useSeries';
 import { jsx as _jsx } from "react/jsx-runtime";
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
@@ -42,7 +42,7 @@ function CartesianContextProvider(props) {
     dataset,
     children
   } = props;
-  const formattedSeries = React.useContext(SeriesContext);
+  const formattedSeries = useSeries();
   const drawingArea = useDrawingArea();
   const xAxis = React.useMemo(() => inXAxis?.map(axisConfig => {
     const dataKey = axisConfig.dataKey;

package/esm/context/DrawingProvider.js

@@ -20,7 +20,10 @@ if (process.env.NODE_ENV !== 'production') {
   DrawingContext.displayName = 'DrawingContext';
 }
 export const SvgContext = /*#__PURE__*/React.createContext({
-  current: null
+  isInitialized: false,
+  data: {
+    current: null
+  }
 });
 if (process.env.NODE_ENV !== 'production') {
   SvgContext.displayName = 'SvgContext';
@@ -38,8 +41,12 @@ export function DrawingProvider(props) {
   const value = React.useMemo(() => _extends({
     chartId: chartId ?? ''
   }, drawingArea), [chartId, drawingArea]);
+  const refValue = React.useMemo(() => ({
+    isInitialized: true,
+    data: svgRef
+  }), [svgRef]);
   return /*#__PURE__*/_jsx(SvgContext.Provider, {
-    value: svgRef,
+    value: refValue,
     children: /*#__PURE__*/_jsx(DrawingContext.Provider, {
       value: value,
       children: children

package/esm/context/HighlightedProvider/HighlightedContext.js

@@ -18,11 +18,14 @@ import * as React from 'react';
  */
 
 export const HighlightedContext = /*#__PURE__*/React.createContext({
-  highlightedItem: null,
-  setHighlighted: () => {},
-  clearHighlighted: () => {},
-  isHighlighted: () => false,
-  isFaded: () => false
+  isInitialized: false,
+  data: {
+    highlightedItem: null,
+    setHighlighted: () => {},
+    clearHighlighted: () => {},
+    isHighlighted: () => false,
+    isFaded: () => false
+  }
 });
 if (process.env.NODE_ENV !== 'production') {
   HighlightedContext.displayName = 'HighlightedContext';

package/esm/context/HighlightedProvider/HighlightedProvider.js

@@ -47,18 +47,21 @@ function HighlightedProvider({
   const highlightScope = highlightedItem && highlightedItem.seriesId ? seriesById.get(highlightedItem.seriesId) ?? undefined : undefined;
   const providerValue = React.useMemo(() => {
     return {
-      highlightScope,
-      highlightedItem,
-      setHighlighted: itemData => {
-        setHighlightedItem(itemData);
-        onHighlightChange?.(itemData);
-      },
-      clearHighlighted: () => {
-        setHighlightedItem(null);
-        onHighlightChange?.(null);
-      },
-      isHighlighted: createIsHighlighted(highlightScope, highlightedItem),
-      isFaded: createIsFaded(highlightScope, highlightedItem)
+      isInitialized: true,
+      data: {
+        highlightScope,
+        highlightedItem,
+        setHighlighted: itemData => {
+          setHighlightedItem(itemData);
+          onHighlightChange?.(itemData);
+        },
+        clearHighlighted: () => {
+          setHighlightedItem(null);
+          onHighlightChange?.(null);
+        },
+        isHighlighted: createIsHighlighted(highlightScope, highlightedItem),
+        isFaded: createIsFaded(highlightScope, highlightedItem)
+      }
     };
   }, [highlightedItem, highlightScope, setHighlightedItem, onHighlightChange]);
   return /*#__PURE__*/_jsx(HighlightedContext.Provider, {

package/esm/context/HighlightedProvider/useHighlighted.js

@@ -9,9 +9,12 @@ import { HighlightedContext } from './HighlightedContext';
  * @returns {HighlightedState} the state of the chart
  */
 export function useHighlighted() {
-  const highlighted = React.useContext(HighlightedContext);
-  if (highlighted === undefined) {
+  const {
+    isInitialized,
+    data
+  } = React.useContext(HighlightedContext);
+  if (!isInitialized) {
     throw new Error(['MUI X: Could not find the highlighted ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
   }
-  return highlighted;
+  return data;
 }

package/esm/context/HighlightedProvider/useItemHighlighted.js

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import { HighlightedContext } from './HighlightedContext';
+import { useHighlighted } from './useHighlighted';
 /**
  * A hook to check the highlighted state of the item.
  * This function already calculates that an item is not faded if it is highlighted.
@@ -10,10 +9,7 @@ import { HighlightedContext } from './HighlightedContext';
  * @returns {ItemHighlightedState} the state of the item
  */
 export function useItemHighlighted(item) {
-  const highlighted = React.useContext(HighlightedContext);
-  if (highlighted === undefined) {
-    throw new Error(['MUI X: Could not find the highlighted ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
-  }
+  const highlighted = useHighlighted();
   if (!item) {
     return {
       isHighlighted: false,