@mui/x-charts 8.0.0-alpha.1 → 8.0.0-alpha.3

package/node/Gauge/GaugeContainer.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GaugeContainer = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
@@ -16,49 +16,16 @@ var _ChartsSurface = require("../ChartsSurface");
 var _DrawingAreaProvider = require("../context/DrawingAreaProvider");
 var _GaugeProvider = require("./GaugeProvider");
 var _SizeProvider = require("../context/SizeProvider");
-var _SvgRefProvider = require("../context/SvgRefProvider");
+var _ChartProvider = require("../context/ChartProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["width", "height", "margin", "title", "desc", "value", "valueMin", "valueMax", "startAngle", "endAngle", "outerRadius", "innerRadius", "cornerRadius", "cx", "cy", "children"];
-const ResizableContainerRoot = (0, _styles.styled)('div', {
-  name: 'MuiGauge',
-  slot: 'Container'
-})(({
-  ownerState,
+const GStyled = (0, _styles.styled)('g')(({
   theme
 }) => ({
-  width: ownerState.width ?? '100%',
-  height: ownerState.height ?? '100%',
-  display: 'flex',
-  position: 'relative',
-  flexGrow: 1,
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
-  overflow: 'hidden',
-  '&>svg': {
-    width: '100%',
-    height: '100%'
-  },
   '& text': {
     fill: (theme.vars || theme).palette.text.primary
   }
 }));
-function ResizableContainer(props) {
-  const {
-    inHeight,
-    inWidth,
-    hasIntrinsicSize,
-    containerRef
-  } = (0, _SizeProvider.useSize)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableContainerRoot, (0, _extends2.default)({}, props, {
-    ownerState: {
-      width: inWidth,
-      height: inHeight
-    },
-    ref: containerRef,
-    children: hasIntrinsicSize && props.children
-  }));
-}
 const GaugeContainer = exports.GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(props, ref) {
   const {
       width: inWidth,
@@ -79,10 +46,10 @@ const GaugeContainer = exports.GaugeContainer = /*#__PURE__*/React.forwardRef(fu
       children
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SizeProvider.SizeProvider, {
-    width: inWidth,
-    height: inHeight,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgRefProvider.SvgRefProvider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartProvider.ChartProvider, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SizeProvider.SizeProvider, {
+      width: inWidth,
+      height: inHeight,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingAreaProvider.DrawingAreaProvider, {
         margin: (0, _extends2.default)({
           left: 10,
@@ -101,18 +68,18 @@ const GaugeContainer = exports.GaugeContainer = /*#__PURE__*/React.forwardRef(fu
           cornerRadius: cornerRadius,
           cx: cx,
           cy: cy,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableContainer, (0, _extends2.default)({
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({
+            title: title,
+            desc: desc,
+            disableAxisListener: true,
             role: "meter",
             "aria-valuenow": value === null ? undefined : value,
             "aria-valuemin": valueMin,
             "aria-valuemax": valueMax
           }, other, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, {
-              title: title,
-              desc: desc,
-              disableAxisListener: true,
+            ref: ref,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GStyled, {
               "aria-hidden": "true",
-              ref: ref,
               children: children
             })
           }))

package/node/LineChart/CircleMarkElement.js

@@ -17,9 +17,9 @@ var _web = require("@react-spring/web");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _context = require("../context");
 var _markElementClasses = require("./markElementClasses");
-var _useSelector = require("../internals/useSelector");
-var _InteractionSelectors = require("../context/InteractionSelectors");
-var _useStore = require("../internals/useStore");
+var _useSelector = require("../internals/store/useSelector");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useStore = require("../internals/store/useStore");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "shape"];
 /**
@@ -59,7 +59,7 @@ function CircleMarkElement(props) {
     seriesId: id
   });
   const store = (0, _useStore.useStore)();
-  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _InteractionSelectors.selectorChartsInteractionXAxis);
+  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionXAxis);
   const position = (0, _web.useSpring)({
     to: {
       x,

package/node/LineChart/LineChart.js

@@ -254,7 +254,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -265,7 +264,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
@@ -308,7 +306,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -319,7 +316,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),

package/node/LineChart/LineHighlightPlot.js

@@ -11,8 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _useStore = require("../internals/useStore");
-var _useSelector = require("../internals/useSelector");
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
 var _CartesianProvider = require("../context/CartesianProvider");
 var _LineHighlightElement = require("./LineHighlightElement");
 var _useScale = require("../hooks/useScale");
@@ -20,7 +20,7 @@ var _constants = require("../constants");
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _useSeries = require("../hooks/useSeries");
 var _useDrawingArea = require("../hooks/useDrawingArea");
-var _InteractionSelectors = require("../context/InteractionSelectors");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
 /**
@@ -43,7 +43,7 @@ function LineHighlightPlot(props) {
   const axisData = (0, _CartesianProvider.useCartesianContext)();
   const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const store = (0, _useStore.useStore)();
-  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _InteractionSelectors.selectorChartsInteractionXAxis);
+  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionXAxis);
   const highlightedIndex = xAxisIdentifier?.index;
   if (highlightedIndex === undefined) {
     return null;

package/node/LineChart/MarkElement.js

@@ -18,9 +18,9 @@ var _getSymbol = require("../internals/getSymbol");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _context = require("../context");
 var _markElementClasses = require("./markElementClasses");
-var _InteractionSelectors = require("../context/InteractionSelectors");
-var _useSelector = require("../internals/useSelector");
-var _useStore = require("../internals/useStore");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useSelector = require("../internals/store/useSelector");
+var _useStore = require("../internals/store/useStore");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation"];
 const MarkElementPath = (0, _styles.styled)(_web.animated.path, {
@@ -66,7 +66,7 @@ function MarkElement(props) {
     seriesId: id
   });
   const store = (0, _useStore.useStore)();
-  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _InteractionSelectors.selectorChartsInteractionXAxis);
+  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionXAxis);
   const position = (0, _web.useSpring)({
     to: {
       x,

package/node/PieChart/PieArc.js

@@ -31,10 +31,11 @@ const useUtilityClasses = ownerState => {
     classes,
     id,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    dataIndex
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+    root: ['root', `series-${id}`, `data-index-${dataIndex}`, isHighlighted && 'highlighted', isFaded && 'faded']
   };
   return (0, _composeClasses.default)(slots, getPieArcUtilityClass, classes);
 };
@@ -45,9 +46,9 @@ const PieArcRoot = (0, _styles.styled)(_web.animated.path, {
 })(({
   theme
 }) => ({
+  // Got to move stroke to an element prop instead of style.
   stroke: (theme.vars || theme).palette.background.paper,
-  strokeWidth: 1,
-  strokeLinejoin: 'round'
+  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in, filter 0.2s ease-in'
 }));
 function PieArc(props) {
   const {
@@ -88,7 +89,12 @@ function PieArc(props) {
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,
-    className: classes.root
+    className: classes.root,
+    fill: ownerState.color,
+    opacity: ownerState.isFaded ? 0.3 : 1,
+    filter: ownerState.isHighlighted ? 'brightness(120%)' : 'none',
+    strokeWidth: 1,
+    strokeLinejoin: "round"
   }, other, getInteractionItemProps({
     type: 'pie',
     seriesId: id,

package/node/PieChart/PieArcPlot.js

@@ -16,8 +16,7 @@ var _PieArc = require("./PieArc");
 var _transition = require("./dataTransform/transition");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"],
-  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "arcLabelRadius", "outerRadius", "cornerRadius"];
+const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"];
 function PieArcPlot(props) {
   const {
       slots,
@@ -54,16 +53,14 @@ function PieArcPlot(props) {
   }
   const Arc = slots?.pieArc ?? _PieArc.PieArc;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
-    children: transition((_ref, item, _, index) => {
-      let {
-          startAngle,
-          endAngle,
-          paddingAngle: pA,
-          innerRadius: iR,
-          outerRadius: oR,
-          cornerRadius: cR
-        } = _ref,
-        style = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded2);
+    children: transition(({
+      startAngle,
+      endAngle,
+      paddingAngle: pA,
+      innerRadius: iR,
+      outerRadius: oR,
+      cornerRadius: cR
+    }, item, _, index) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(Arc, (0, _extends2.default)({
         startAngle: startAngle,
         endAngle: endAngle,
@@ -71,7 +68,6 @@ function PieArcPlot(props) {
         innerRadius: iR,
         outerRadius: oR,
         cornerRadius: cR,
-        style: style,
         id: id,
         color: item.color,
         dataIndex: index,

package/node/PieChart/PieChart.js

@@ -228,7 +228,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -239,7 +238,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
@@ -282,7 +280,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -293,7 +290,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),

package/node/ScatterChart/Scatter.js

@@ -12,11 +12,11 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useScale = require("../hooks/useScale");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
-var _useStore = require("../internals/useStore");
-var _useSelector = require("../internals/useSelector");
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
 var _context = require("../context");
 var _useDrawingArea = require("../hooks/useDrawingArea");
-var _InteractionSelectors = require("../context/InteractionSelectors");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -40,7 +40,7 @@ function Scatter(props) {
   } = props;
   const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const store = (0, _useStore.useStore)();
-  const isVoronoiEnabled = (0, _useSelector.useSelector)(store, _InteractionSelectors.selectorChartsInteractionIsVoronoiEnabled);
+  const isVoronoiEnabled = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionIsVoronoiEnabled);
   const skipInteractionHandlers = isVoronoiEnabled || series.disableHover;
   const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(skipInteractionHandlers);
   const {

package/node/ScatterChart/ScatterChart.js

@@ -238,7 +238,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -249,7 +248,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
@@ -292,7 +290,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -303,7 +300,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),

package/node/SparkLineChart/SparkLineChart.js

@@ -267,7 +267,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -278,7 +277,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
@@ -320,7 +318,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -331,7 +328,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),

package/node/context/ChartDataProvider/ChartDataProvider.js

@@ -12,7 +12,6 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _DrawingAreaProvider = require("../DrawingAreaProvider");
 var _SeriesProvider = require("../SeriesProvider");
-var _InteractionProvider = require("../InteractionProvider");
 var _CartesianProvider = require("../CartesianProvider");
 var _PluginProvider = require("../PluginProvider");
 var _useChartDataProviderProps = require("./useChartDataProviderProps");
@@ -20,8 +19,35 @@ var _AnimationProvider = require("../AnimationProvider");
 var _ZAxisContextProvider = require("../ZAxisContextProvider");
 var _HighlightedProvider = require("../HighlightedProvider");
 var _SizeProvider = require("../SizeProvider");
-var _SvgRefProvider = require("../SvgRefProvider");
+var _ChartProvider = require("../ChartProvider");
 var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Orchestrates the data providers for the chart components and hooks.
+ *
+ * Use this component if you have custom HTML components that need to access the chart data.
+ *
+ * Demos:
+ *
+ * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartDataProvider API](https://mui.com/x/api/charts/chart-data-provider/)
+ *
+ * @example
+ * ```jsx
+ * <ChartDataProvider
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *   <ChartsSurface>
+ *      <BarPlot />
+ *      <ChartsXAxis position="bottom" axisId="x-axis" />
+ *   </ChartsSurface>
+ *   {'Custom Legend Component'}
+ * </ChartDataProvider>
+ * ```
+ */
 function ChartDataProvider(props) {
   const {
     children,
@@ -34,27 +60,25 @@ function ChartDataProvider(props) {
     animationProviderProps,
     sizeProviderProps
   } = (0, _useChartDataProviderProps.useChartDataProviderProps)(props);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SizeProvider.SizeProvider, (0, _extends2.default)({}, sizeProviderProps, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingAreaProvider.DrawingAreaProvider, (0, _extends2.default)({}, drawingAreaProviderProps, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PluginProvider.PluginProvider, (0, _extends2.default)({}, pluginProviderProps, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SeriesProvider.SeriesProvider, (0, _extends2.default)({}, seriesProviderProps, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianProvider.CartesianProvider, (0, _extends2.default)({}, cartesianProviderProps, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZAxisContextProvider.ZAxisContextProvider, (0, _extends2.default)({}, zAxisContextProps, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InteractionProvider.InteractionProvider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartProvider.ChartProvider, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SizeProvider.SizeProvider, (0, _extends2.default)({}, sizeProviderProps, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingAreaProvider.DrawingAreaProvider, (0, _extends2.default)({}, drawingAreaProviderProps, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PluginProvider.PluginProvider, (0, _extends2.default)({}, pluginProviderProps, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SeriesProvider.SeriesProvider, (0, _extends2.default)({}, seriesProviderProps, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianProvider.CartesianProvider, (0, _extends2.default)({}, cartesianProviderProps, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZAxisContextProvider.ZAxisContextProvider, (0, _extends2.default)({}, zAxisContextProps, {
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightedProvider.HighlightedProvider, (0, _extends2.default)({}, highlightedProviderProps, {
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnimationProvider.AnimationProvider, (0, _extends2.default)({}, animationProviderProps, {
-                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgRefProvider.SvgRefProvider, {
-                      children: children
-                    })
+                    children: children
                   }))
                 }))
-              })
+              }))
             }))
           }))
         }))
       }))
     }))
-  }));
+  });
 }
 process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -151,7 +175,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -162,7 +185,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
@@ -205,7 +227,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -216,7 +237,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),

package/node/context/ChartProvider/ChartContext.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+/**
+ * @ignore - internal component.
+ */
+const ChartContext = exports.ChartContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== 'production') {
+  ChartContext.displayName = 'ChartContext';
+}

package/node/context/ChartProvider/ChartProvider.js

@@ -0,0 +1,24 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartProvider = ChartProvider;
+var React = _interopRequireWildcard(require("react"));
+var _useCharts = require("../../internals/store/useCharts");
+var _ChartContext = require("./ChartContext");
+var _jsxRuntime = require("react/jsx-runtime");
+function ChartProvider(props) {
+  const {
+    children
+  } = props;
+  const {
+    contextValue
+  } = (0, _useCharts.useCharts)([], {});
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartContext.ChartContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}

package/node/context/ChartProvider/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartProvider = require("./ChartProvider");
+Object.keys(_ChartProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartProvider[key];
+    }
+  });
+});
+var _ChartProvider2 = require("./ChartProvider.types");
+Object.keys(_ChartProvider2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartProvider2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartProvider2[key];
+    }
+  });
+});
+var _useChartContext = require("./useChartContext");
+Object.keys(_useChartContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useChartContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartContext[key];
+    }
+  });
+});

package/node/context/ChartProvider/useChartContext.js

@@ -0,0 +1,18 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _ChartContext = require("./ChartContext");
+const useChartContext = () => {
+  const context = React.useContext(_ChartContext.ChartContext);
+  if (context == null) {
+    throw new Error(['MUI X: Could not find the Chart context.', 'It looks like you rendered your component outside of a ChartDataProvider.', 'This can also happen if you are bundling multiple versions of the library.'].join('\n'));
+  }
+  return context;
+};
+exports.useChartContext = useChartContext;

package/node/context/DrawingAreaProvider/DrawingAreaContext.js

@@ -14,7 +14,6 @@ const DrawingAreaContext = exports.DrawingAreaContext = /*#__PURE__*/React.creat
   right: 0,
   height: 300,
   width: 400,
-  chartId: '',
   isPointInside: () => false
 });
 if (process.env.NODE_ENV !== 'production') {