@mui/x-charts 8.0.0-alpha.6 → 8.0.0-alpha.7

package/node/ChartsSurface/ChartsSurface.js

@@ -29,7 +29,6 @@ const ChartsSurfaceStyles = (0, _styles.styled)('svg', {
   height: ownerState.height ?? '100%',
   display: 'flex',
   position: 'relative',
-  flexGrow: 1,
   flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',

package/node/LineChart/AnimatedArea.js

@@ -51,6 +51,7 @@ function AnimatedArea(props) {
     skipAnimation: skipAnimation,
     id: `${ownerState.id}-area-clip`,
     children: transitionChange((style, interpolator) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.path, (0, _extends2.default)({
+      // @ts-expect-error
       d: style.value.to(interpolator),
       fill: ownerState.gradientId ? `url(#${ownerState.gradientId})` : ownerState.color,
       filter:

package/node/LineChart/AnimatedLine.js

@@ -51,6 +51,7 @@ function AnimatedLine(props) {
     skipAnimation: skipAnimation,
     id: `${ownerState.id}-line-clip`,
     children: transitionChange((style, interpolator) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.path, (0, _extends2.default)({
+      // @ts-expect-error
       d: style.value.to(interpolator),
       stroke: ownerState.gradientId ? `url(#${ownerState.gradientId})` : ownerState.color,
       strokeWidth: 2,

package/node/LineChart/AppearingMask.js

@@ -35,6 +35,7 @@ function AppearingMask(props) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
       id: clipId,
       children: transitionAppear(style => /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.rect, {
+        // @ts-expect-error
         x: 0,
         y: 0,
         width: style.animatedWidth,

package/node/LineChart/CircleMarkElement.js

@@ -76,6 +76,7 @@ function CircleMarkElement(props) {
   };
   const classes = (0, _markElementClasses.useUtilityClasses)(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.circle, (0, _extends2.default)({}, other, {
+    // @ts-expect-error
     cx: position.x,
     cy: position.y,
     r: 5,

package/node/LineChart/LineChart.js

@@ -13,7 +13,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _AreaPlot = require("./AreaPlot");
 var _LinePlot = require("./LinePlot");
-var _ChartContainer = require("../ChartContainer");
 var _MarkPlot = require("./MarkPlot");
 var _ChartsAxis = require("../ChartsAxis/ChartsAxis");
 var _ChartsTooltip = require("../ChartsTooltip");
@@ -25,6 +24,10 @@ var _ChartsGrid = require("../ChartsGrid");
 var _ChartsOnAxisClickHandler = require("../ChartsOnAxisClickHandler");
 var _ChartsOverlay = require("../ChartsOverlay");
 var _useLineChartProps = require("./useLineChartProps");
+var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
+var _context = require("../context");
+var _ChartsSurface = require("../ChartsSurface");
+var _ChartsWrapper = require("../internals/components/ChartsWrapper");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -42,6 +45,7 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
     name: 'MuiLineChart'
   });
   const {
+    chartsWrapperProps,
     chartContainerProps,
     axisClickHandlerProps,
     gridProps,
@@ -57,16 +61,22 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
     legendProps,
     children
   } = (0, _useLineChartProps.useLineChartProps)(props);
+  const {
+    chartDataProviderProps,
+    chartsSurfaceProps
+  } = (0, _useChartContainerProps.useChartContainerProps)(chartContainerProps, ref);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartContainer.ChartContainer, (0, _extends2.default)({
-    ref: ref
-  }, chartContainerProps, {
-    children: [props.onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, (0, _extends2.default)({}, axisClickHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-      "data-drawing-container": true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, (0, _extends2.default)({}, markPlotProps))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
+      children: [!props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+        children: [props.onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, (0, _extends2.default)({}, axisClickHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+          "data-drawing-container": true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, (0, _extends2.default)({}, markPlotProps))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
+      }))]
+    }))
   }));
 });
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {

package/node/LineChart/MarkElement.js

@@ -87,7 +87,9 @@ function MarkElement(props) {
       transform: (0, _web.to)([position.x, position.y], (pX, pY) => `translate(${pX}px, ${pY}px)`),
       transformOrigin: (0, _web.to)([position.x, position.y], (pX, pY) => `${pX}px ${pY}px`)
     },
-    ownerState: ownerState,
+    ownerState: ownerState
+    // @ts-expect-error
+    ,
     className: classes.root,
     d: (0, _d3Shape.symbol)(_d3Shape.symbolsFill[(0, _getSymbol.getSymbol)(shape)])(),
     onClick: onClick,

package/node/LineChart/legend.js

@@ -16,6 +16,7 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      markType: series[seriesId].labelMarkType ?? 'line',
       id: seriesId,
       seriesId,
       color: series[seriesId].color,

package/node/LineChart/useLineChartProps.js

@@ -10,6 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _constants = require("../constants");
+var _calculateMargins = require("../internals/calculateMargins");
 const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className", "experimentalMarkRendering"];
 /**
  * A helper function that extracts LineChartProps from the input props
@@ -35,6 +36,7 @@ const useLineChartProps = props => {
       onMarkClick,
       axisHighlight,
       disableLineItemHighlight,
+      hideLegend,
       grid,
       topAxis,
       leftAxis,
@@ -60,7 +62,12 @@ const useLineChartProps = props => {
     }, s)),
     width,
     height,
-    margin,
+    margin: (0, _calculateMargins.calculateMargins)({
+      margin,
+      hideLegend,
+      slotProps,
+      series
+    }),
     colors,
     dataset,
     xAxis: xAxis ?? [{
@@ -71,7 +78,6 @@ const useLineChartProps = props => {
       }, (_, index) => index)
     }],
     yAxis,
-    sx,
     highlightedItem,
     onHighlightChange,
     disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
@@ -132,7 +138,13 @@ const useLineChartProps = props => {
     slots,
     slotProps
   };
+  const chartsWrapperProps = {
+    sx,
+    legendPosition: props.slotProps?.legend?.position,
+    legendDirection: props.slotProps?.legend?.direction
+  };
   return {
+    chartsWrapperProps,
     chartContainerProps,
     axisClickHandlerProps,
     gridProps,

package/node/PieChart/PieArc.js

@@ -85,7 +85,9 @@ function PieArc(props) {
       innerRadius: iR,
       outerRadius: oR
     })),
-    visibility: (0, _web.to)([startAngle, endAngle], (sA, eA) => sA === eA ? 'hidden' : 'visible'),
+    visibility: (0, _web.to)([startAngle, endAngle], (sA, eA) => sA === eA ? 'hidden' : 'visible')
+    // @ts-expect-error
+    ,
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,

package/node/PieChart/PieArcLabel.js

@@ -93,15 +93,19 @@ function PieArcLabel(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PieArcLabelRoot, (0, _extends2.default)({
-    className: classes.root
-  }, other, {
-    style: (0, _extends2.default)({
-      x: (0, _web.to)([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'x')),
-      y: (0, _web.to)([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'y'))
-    }, style),
-    children: formattedArcLabel
-  }));
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error
+    (0, _jsxRuntime.jsx)(PieArcLabelRoot, (0, _extends2.default)({
+      className: classes.root
+    }, other, {
+      style: (0, _extends2.default)({
+        x: (0, _web.to)([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'x')),
+        y: (0, _web.to)([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'y'))
+      }, style),
+      children: formattedArcLabel
+    }))
+  );
 }
 process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   // ----------------------------- Warning --------------------------------

package/node/PieChart/PieArcLabelPlot.js

@@ -140,6 +140,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     index: _propTypes.default.number.isRequired,
     label: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+    labelMarkType: _propTypes.default.oneOf(['circle', 'line', 'square']),
     padAngle: _propTypes.default.number.isRequired,
     startAngle: _propTypes.default.number.isRequired,
     value: _propTypes.default.number.isRequired

package/node/PieChart/PieArcPlot.js

@@ -106,6 +106,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     index: _propTypes.default.number.isRequired,
     label: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+    labelMarkType: _propTypes.default.oneOf(['circle', 'line', 'square']),
     padAngle: _propTypes.default.number.isRequired,
     startAngle: _propTypes.default.number.isRequired,
     value: _propTypes.default.number.isRequired

package/node/PieChart/PieChart.js

@@ -11,25 +11,21 @@ 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 _RtlProvider = require("@mui/system/RtlProvider");
 var _styles = require("@mui/material/styles");
-var _ChartContainer = require("../ChartContainer");
 var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsLegend = require("../ChartsLegend");
 var _PiePlot = require("./PiePlot");
 var _ChartsOverlay = require("../ChartsOverlay");
+var _ChartsSurface = require("../ChartsSurface");
+var _context = require("../context");
+var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
+var _ChartsWrapper = require("../internals/components/ChartsWrapper");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "sx", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
 const defaultMargin = {
   top: 5,
   bottom: 5,
   left: 5,
-  right: 100
-};
-const defaultRTLMargin = {
-  top: 5,
-  bottom: 5,
-  left: 100,
   right: 5
 };
 
@@ -67,43 +63,48 @@ const PieChart = exports.PieChart = /*#__PURE__*/React.forwardRef(function PieCh
       className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const isRtl = (0, _RtlProvider.useRtl)();
-  const margin = (0, _extends2.default)({}, isRtl ? defaultRTLMargin : defaultMargin, marginProps);
-  const Tooltip = slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartContainer.ChartContainer, (0, _extends2.default)({}, other, {
-    ref: ref,
+  const margin = (0, _extends2.default)({}, defaultMargin, marginProps);
+  const {
+    chartDataProviderProps,
+    chartsSurfaceProps
+  } = (0, _useChartContainerProps.useChartContainerProps)((0, _extends2.default)({}, other, {
     series: series.map(s => (0, _extends2.default)({
       type: 'pie'
     }, s)),
-    width: width,
-    height: height,
-    margin: margin,
-    colors: colors,
-    sx: sx,
+    width,
+    height,
+    margin,
+    colors,
     disableAxisListener: true,
-    highlightedItem: highlightedItem,
-    onHighlightChange: onHighlightChange,
-    className: className,
-    skipAnimation: skipAnimation,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PiePlot.PiePlot, {
-      slots: slots,
-      slotProps: slotProps,
-      onItemClick: onItemClick
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
-      loading: loading,
-      slots: slots,
-      slotProps: slotProps
-    }), !hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, {
-      direction: "column",
-      position: {
-        vertical: 'middle',
-        horizontal: isRtl ? 'left' : 'right'
-      },
-      slots: slots,
-      slotProps: slotProps
-    }), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({
-      trigger: "item"
-    }, slotProps?.tooltip)), children]
+    highlightedItem,
+    onHighlightChange,
+    className,
+    skipAnimation
+  }), ref);
+  const Tooltip = slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, {
+      legendPosition: props.slotProps?.legend?.position,
+      legendDirection: props?.slotProps?.legend?.direction ?? 'vertical',
+      sx: sx,
+      children: [!hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, {
+        direction: props?.slotProps?.legend?.direction ?? 'vertical',
+        slots: slots,
+        slotProps: slotProps
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PiePlot.PiePlot, {
+          slots: slots,
+          slotProps: slotProps,
+          onItemClick: onItemClick
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
+          loading: loading,
+          slots: slots,
+          slotProps: slotProps
+        }), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({
+          trigger: "item"
+        }, slotProps?.tooltip)), children]
+      }))]
+    })
   }));
 });
 process.env.NODE_ENV !== "production" ? PieChart.propTypes = {

package/node/PieChart/legend.js

@@ -17,6 +17,7 @@ const legendGetter = params => {
         return;
       }
       acc.push({
+        markType: item.labelMarkType ?? series[seriesId].labelMarkType ?? 'circle',
         id: item.id,
         seriesId,
         color: item.color,

package/node/ScatterChart/ScatterChart.js

@@ -12,7 +12,6 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _ScatterPlot = require("./ScatterPlot");
-var _ChartContainer = require("../ChartContainer");
 var _ChartsAxis = require("../ChartsAxis");
 var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsLegend = require("../ChartsLegend");
@@ -22,6 +21,10 @@ var _ChartsVoronoiHandler = require("../ChartsVoronoiHandler/ChartsVoronoiHandle
 var _ChartsGrid = require("../ChartsGrid");
 var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
 var _useScatterChartProps = require("./useScatterChartProps");
+var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
+var _context = require("../context");
+var _ChartsSurface = require("../ChartsSurface");
+var _ChartsWrapper = require("../internals/components/ChartsWrapper");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -39,6 +42,7 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
     name: 'MuiScatterChart'
   });
   const {
+    chartsWrapperProps,
     chartContainerProps,
     zAxisProps,
     voronoiHandlerProps,
@@ -50,17 +54,23 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
     axisHighlightProps,
     children
   } = (0, _useScatterChartProps.useScatterChartProps)(props);
+  const {
+    chartDataProviderProps,
+    chartsSurfaceProps
+  } = (0, _useChartContainerProps.useChartContainerProps)(chartContainerProps, ref);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartContainer.ChartContainer, (0, _extends2.default)({
-    ref: ref
-  }, chartContainerProps, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ZAxisContextProvider.ZAxisContextProvider, (0, _extends2.default)({}, zAxisProps, {
-      children: [!props.disableVoronoi && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVoronoiHandler.ChartsVoronoiHandler, (0, _extends2.default)({}, voronoiHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-        "data-drawing-container": true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterPlot.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({
-        trigger: "item"
-      }, props.slotProps?.tooltip)), children]
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
+      children: [!props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ZAxisContextProvider.ZAxisContextProvider, (0, _extends2.default)({}, zAxisProps, {
+          children: [!props.disableVoronoi && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVoronoiHandler.ChartsVoronoiHandler, (0, _extends2.default)({}, voronoiHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+            "data-drawing-container": true,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterPlot.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps))
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({
+            trigger: "item"
+          }, props.slotProps?.tooltip)), children]
+        }))
+      }))]
     }))
   }));
 });

package/node/ScatterChart/legend.js

@@ -16,6 +16,7 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      markType: series[seriesId].labelMarkType ?? 'circle',
       id: seriesId,
       seriesId,
       color: series[seriesId].color,

package/node/ScatterChart/useScatterChartProps.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useScatterChartProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _calculateMargins = require("../internals/calculateMargins");
 const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];
 /**
  * A helper function that extracts ScatterChartProps from the input props
@@ -25,6 +26,7 @@ const useScatterChartProps = props => {
       axisHighlight,
       voronoiMaxRadius,
       disableVoronoi,
+      hideLegend,
       width,
       height,
       margin,
@@ -51,11 +53,15 @@ const useScatterChartProps = props => {
     }, s)),
     width,
     height,
-    margin,
+    margin: (0, _calculateMargins.calculateMargins)({
+      margin,
+      hideLegend,
+      slotProps,
+      series
+    }),
     colors,
     xAxis,
     yAxis,
-    sx,
     highlightedItem,
     onHighlightChange,
     className
@@ -97,7 +103,13 @@ const useScatterChartProps = props => {
     y: 'none',
     x: 'none'
   }, axisHighlight);
+  const chartsWrapperProps = {
+    sx,
+    legendPosition: props.slotProps?.legend?.position,
+    legendDirection: props.slotProps?.legend?.direction
+  };
   return {
+    chartsWrapperProps,
     chartContainerProps,
     zAxisProps,
     voronoiHandlerProps,

package/node/SparkLineChart/SparkLineChart.js

@@ -97,10 +97,7 @@ const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(fu
     children: [plotType === 'bar' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, {
       skipAnimation: true,
       slots: slots,
-      slotProps: slotProps,
-      sx: {
-        shapeRendering: 'auto'
-      }
+      slotProps: slotProps
     }), plotType === 'line' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.AreaPlot, {
         skipAnimation: true,

package/node/constants/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DEFAULT_Y_AXIS_KEY = exports.DEFAULT_X_AXIS_KEY = exports.DEFAULT_MARGINS = void 0;
+exports.DEFAULT_Y_AXIS_KEY = exports.DEFAULT_X_AXIS_KEY = exports.DEFAULT_MARGINS = exports.DEFAULT_LEGEND_FACING_MARGIN = void 0;
 const DEFAULT_X_AXIS_KEY = exports.DEFAULT_X_AXIS_KEY = 'DEFAULT_X_AXIS_KEY';
 const DEFAULT_Y_AXIS_KEY = exports.DEFAULT_Y_AXIS_KEY = 'DEFAULT_Y_AXIS_KEY';
 const DEFAULT_MARGINS = exports.DEFAULT_MARGINS = {
@@ -11,4 +11,5 @@ const DEFAULT_MARGINS = exports.DEFAULT_MARGINS = {
   bottom: 50,
   left: 50,
   right: 50
-};
+};
+const DEFAULT_LEGEND_FACING_MARGIN = exports.DEFAULT_LEGEND_FACING_MARGIN = 20;

package/node/hooks/index.js

@@ -112,4 +112,16 @@ Object.keys(_useSvgRef).forEach(function (key) {
     }
   });
 });
-var _useSeries = require("./useSeries");
+var _useSeries = require("./useSeries");
+var _useLegend = require("./useLegend");
+Object.keys(_useLegend).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useLegend[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useLegend[key];
+    }
+  });
+});

package/node/{ChartsLegend/utils.js → hooks/useLegend.js}

@@ -1,14 +1,16 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSeriesToDisplay = getSeriesToDisplay;
+exports.useLegend = useLegend;
 var _legend = _interopRequireDefault(require("../BarChart/legend"));
 var _legend2 = _interopRequireDefault(require("../ScatterChart/legend"));
 var _legend3 = _interopRequireDefault(require("../LineChart/legend"));
 var _legend4 = _interopRequireDefault(require("../PieChart/legend"));
+var _useSeries = require("./useSeries");
 const legendGetter = {
   bar: _legend.default,
   scatter: _legend2.default,
@@ -20,4 +22,20 @@ function getSeriesToDisplay(series) {
     const getter = legendGetter[seriesType];
     return getter === undefined ? [] : getter(series[seriesType]);
   });
+}
+
+/**
+ * Get the legend items to display.
+ *
+ * This hook is used by the `ChartsLegend` component. And will return the legend items formatted for display.
+ *
+ * An alternative is to use the `useSeries` hook and format the legend items yourself.
+ *
+ * @returns legend data
+ */
+function useLegend() {
+  const series = (0, _useSeries.useSeries)();
+  return {
+    items: getSeriesToDisplay(series)
+  };
 }

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0-alpha.6
+ * @mui/x-charts v8.0.0-alpha.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -153,6 +153,17 @@ Object.keys(_ChartsTooltip).forEach(function (key) {
     }
   });
 });
+var _ChartsLabel = require("./ChartsLabel");
+Object.keys(_ChartsLabel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsLabel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsLabel[key];
+    }
+  });
+});
 var _ChartsLegend = require("./ChartsLegend");
 Object.keys(_ChartsLegend).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/node/internals/calculateMargins.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculateMargins = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _constants = require("../constants");
+const calculateMargins = props => {
+  if (props.hideLegend || !props.series?.some(s => s.label)) {
+    return (0, _extends2.default)({}, _constants.DEFAULT_MARGINS, props.margin);
+  }
+  if (props.slotProps?.legend?.direction === 'vertical') {
+    if (props.slotProps?.legend?.position?.horizontal === 'left') {
+      return (0, _extends2.default)({}, _constants.DEFAULT_MARGINS, {
+        left: _constants.DEFAULT_LEGEND_FACING_MARGIN
+      }, props.margin);
+    }
+    return (0, _extends2.default)({}, _constants.DEFAULT_MARGINS, {
+      right: _constants.DEFAULT_LEGEND_FACING_MARGIN
+    }, props.margin);
+  }
+  if (props.slotProps?.legend?.position?.vertical === 'bottom') {
+    return (0, _extends2.default)({}, _constants.DEFAULT_MARGINS, {
+      bottom: _constants.DEFAULT_LEGEND_FACING_MARGIN
+    }, props.margin);
+  }
+  return (0, _extends2.default)({}, _constants.DEFAULT_MARGINS, {
+    top: _constants.DEFAULT_LEGEND_FACING_MARGIN
+  }, props.margin);
+};
+exports.calculateMargins = calculateMargins;