@mui/x-charts 8.0.0-alpha.0 → 8.0.0-alpha.10

package/node/LineChart/LinePlot.js

@@ -11,20 +11,39 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
-var _CartesianProvider = require("../context/CartesianProvider");
 var _LineElement = require("./LineElement");
 var _useScale = require("../hooks/useScale");
-var _getCurve = _interopRequireDefault(require("../internals/getCurve"));
+var _getCurve = require("../internals/getCurve");
+var _isBandScale = require("../internals/isBandScale");
 var _constants = require("../constants");
-var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
 var _useSeries = require("../hooks/useSeries");
 var _AnimationProvider = require("../context/AnimationProvider");
+var _useChartGradientId = require("../hooks/useChartGradientId");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
+const LinePlotRoot = (0, _styles.styled)('g', {
+  name: 'MuiAreaPlot',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})({
+  [`& .${_LineElement.lineElementClasses.root}`]: {
+    transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
+  }
+});
 const useAggregatedData = () => {
   const seriesData = (0, _useSeries.useLineSeries)();
-  const axisData = (0, _CartesianProvider.useCartesianContext)();
+  const {
+    xAxis,
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _hooks.useYAxes)();
+  const getGradientId = (0, _useChartGradientId.useChartGradientIdBuilder)();
 
   // This memo prevents odd line chart behavior when hydrating.
   const allData = React.useMemo(() => {
@@ -35,12 +54,6 @@ const useAggregatedData = () => {
       series,
       stackingGroups
     } = seriesData;
-    const {
-      xAxis,
-      yAxis,
-      xAxisIds,
-      yAxisIds
-    } = axisData;
     const defaultXAxisId = xAxisIds[0];
     const defaultYAxisId = yAxisIds[0];
     return stackingGroups.flatMap(({
@@ -52,12 +65,15 @@ const useAggregatedData = () => {
           yAxisId = defaultYAxisId,
           stackedData,
           data,
-          connectNulls
+          connectNulls,
+          curve,
+          strictStepCurve
         } = series[seriesId];
-        const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
+        const xScale = xAxis[xAxisId].scale;
+        const xPosition = (0, _useScale.getValueToPositionMapper)(xScale);
         const yScale = yAxis[yAxisId].scale;
         const xData = xAxis[xAxisId].data;
-        const gradientUsed = yAxis[yAxisId].colorScale && [yAxisId, 'y'] || xAxis[xAxisId].colorScale && [xAxisId, 'x'] || undefined;
+        const gradientId = yAxis[yAxisId].colorScale && getGradientId(yAxisId) || xAxis[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
             throw new Error(`MUI X: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
@@ -66,21 +82,51 @@ const useAggregatedData = () => {
             throw new Error(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
           }
         }
-        const linePath = (0, _d3Shape.line)().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));
-        const formattedData = xData?.map((x, index) => ({
-          x,
-          y: stackedData[index]
-        })) ?? [];
-        const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
-        const d = linePath.curve((0, _getCurve.default)(series[seriesId].curve))(d3Data) || '';
+        const shouldExpand = curve?.includes('step') && !strictStepCurve && (0, _isBandScale.isBandScale)(xScale);
+        const formattedData = xData?.flatMap((x, index) => {
+          const nullData = data[index] == null;
+          if (shouldExpand) {
+            const rep = [{
+              x,
+              y: stackedData[index],
+              nullData,
+              isExtension: false
+            }];
+            if (!nullData && (index === 0 || data[index - 1] == null)) {
+              rep.unshift({
+                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
+              rep.push({
+                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            return rep;
+          }
+          return {
+            x,
+            y: stackedData[index],
+            nullData
+          };
+        }) ?? [];
+        const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
+        const linePath = (0, _d3Shape.line)().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y(d => yScale(d.y[1]));
+        const d = linePath.curve((0, _getCurve.getCurveFactory)(curve))(d3Data) || '';
         return (0, _extends2.default)({}, series[seriesId], {
-          gradientUsed,
+          gradientId,
           d,
           seriesId
         });
       });
     });
-  }, [seriesData, axisData]);
+  }, [seriesData, xAxisIds, yAxisIds, xAxis, yAxis, getGradientId]);
   return allData;
 };
 
@@ -103,20 +149,19 @@ function LinePlot(props) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const skipAnimation = (0, _AnimationProvider.useSkipAnimation)(inSkipAnimation);
-  const getGradientId = (0, _ChartsAxesGradients.useChartGradient)();
   const completedData = useAggregatedData();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinePlotRoot, (0, _extends2.default)({}, other, {
     children: completedData.map(({
       d,
       seriesId,
       color,
-      gradientUsed
+      gradientId
     }) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineElement.LineElement, {
         id: seriesId,
         d: d,
         color: color,
-        gradientId: gradientUsed && getGradientId(...gradientUsed),
+        gradientId: gradientId,
         skipAnimation: skipAnimation,
         slots: slots,
         slotProps: slotProps,

package/node/LineChart/MarkElement.js

@@ -15,10 +15,12 @@ var _styles = require("@mui/material/styles");
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _web = require("@react-spring/web");
 var _getSymbol = require("../internals/getSymbol");
-var _InteractionProvider = require("../context/InteractionProvider");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
-var _context = require("../context");
+var _useItemHighlighted = require("../hooks/useItemHighlighted");
 var _markElementClasses = require("./markElementClasses");
+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, {
@@ -60,12 +62,11 @@ function MarkElement(props) {
   const {
     isFaded,
     isHighlighted
-  } = (0, _context.useItemHighlighted)({
+  } = (0, _useItemHighlighted.useItemHighlighted)({
     seriesId: id
   });
-  const {
-    axis
-  } = React.useContext(_InteractionProvider.InteractionContext);
+  const store = (0, _useStore.useStore)();
+  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionXAxis);
   const position = (0, _web.useSpring)({
     to: {
       x,
@@ -76,7 +77,7 @@ function MarkElement(props) {
   const ownerState = {
     id,
     classes: innerClasses,
-    isHighlighted: axis.x?.index === dataIndex || isHighlighted,
+    isHighlighted: xAxisIdentifier?.index === dataIndex || isHighlighted,
     isFaded,
     color
   };
@@ -86,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/MarkPlot.js

@@ -13,17 +13,17 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _constants = require("../constants");
 var _AnimationProvider = require("../context/AnimationProvider");
-var _CartesianProvider = require("../context/CartesianProvider");
 var _useChartId = require("../hooks/useChartId");
-var _useDrawingArea = require("../hooks/useDrawingArea");
 var _useScale = require("../hooks/useScale");
 var _useSeries = require("../hooks/useSeries");
 var _cleanId = require("../internals/cleanId");
 var _CircleMarkElement = require("./CircleMarkElement");
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _MarkElement = require("./MarkElement");
+var _ChartProvider = require("../context/ChartProvider");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick", "experimentalRendering"];
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 /**
  * Demos:
  *
@@ -39,16 +39,23 @@ function MarkPlot(props) {
       slots,
       slotProps,
       skipAnimation: inSkipAnimation,
-      onItemClick,
-      experimentalRendering
+      onItemClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const skipAnimation = (0, _AnimationProvider.useSkipAnimation)(inSkipAnimation);
   const seriesData = (0, _useSeries.useLineSeries)();
-  const axisData = (0, _CartesianProvider.useCartesianContext)();
+  const {
+    xAxis,
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _hooks.useYAxes)();
   const chartId = (0, _useChartId.useChartId)();
-  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
-  const Mark = slots?.mark ?? (experimentalRendering ? _CircleMarkElement.CircleMarkElement : _MarkElement.MarkElement);
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
   if (seriesData === undefined) {
     return null;
   }
@@ -56,12 +63,6 @@ function MarkPlot(props) {
     series,
     stackingGroups
   } = seriesData;
-  const {
-    xAxis,
-    yAxis,
-    xAxisIds,
-    yAxisIds
-  } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
@@ -74,7 +75,8 @@ function MarkPlot(props) {
           yAxisId = defaultYAxisId,
           stackedData,
           data,
-          showMark = true
+          showMark = true,
+          shape = 'circle'
         } = series[seriesId];
         if (showMark === false) {
           return null;
@@ -88,6 +90,7 @@ function MarkPlot(props) {
         const clipId = (0, _cleanId.cleanId)(`${chartId}-${seriesId}-line-clip`); // We assume that if displaying line mark, the line will also be rendered
 
         const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
+        const Mark = slots?.mark ?? (shape === 'circle' ? _CircleMarkElement.CircleMarkElement : _MarkElement.MarkElement);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           clipPath: `url(#${clipId})`,
           children: xData?.map((x, index) => {
@@ -110,7 +113,7 @@ function MarkPlot(props) {
               // Remove missing data point
               return false;
             }
-            if (!drawingArea.isPointInside({
+            if (!instance.isPointInside({
               x,
               y
             })) {
@@ -135,7 +138,7 @@ function MarkPlot(props) {
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(Mark, (0, _extends2.default)({
               id: seriesId,
               dataIndex: index,
-              shape: "circle",
+              shape: shape,
               color: colorGetter(index),
               x: x,
               y: y // Don't know why TS doesn't get from the filter that y can't be null
@@ -158,12 +161,6 @@ process.env.NODE_ENV !== "production" ? MarkPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * If `true` the mark element will only be able to render circle.
-   * Giving fewer customization options, but saving around 40ms per 1.000 marks.
-   * @default false
-   */
-  experimentalRendering: _propTypes.default.bool,
   /**
    * Callback fired when a line mark item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.

package/node/LineChart/formatter.js

@@ -56,7 +56,9 @@ const formatter = (params, dataset) => {
     .order(stackingOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach((id, index) => {
       const dataKey = series[id].dataKey;
-      completedSeries[id] = (0, _extends2.default)({}, series[id], {
+      completedSeries[id] = (0, _extends2.default)({
+        labelMarkType: 'line'
+      }, series[id], {
         data: dataKey ? dataset.map(data => {
           const value = data[dataKey];
           if (typeof value !== 'number') {

package/node/LineChart/legend.js

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

package/node/LineChart/plugin.js

@@ -8,10 +8,13 @@ exports.plugin = void 0;
 var _extremums = require("./extremums");
 var _formatter = _interopRequireDefault(require("./formatter"));
 var _getColor = _interopRequireDefault(require("./getColor"));
+var _legend = _interopRequireDefault(require("./legend"));
+var _tooltip = _interopRequireDefault(require("./tooltip"));
 const plugin = exports.plugin = {
-  seriesType: 'line',
   colorProcessor: _getColor.default,
-  seriesFormatter: _formatter.default,
+  seriesProcessor: _formatter.default,
+  legendGetter: _legend.default,
+  tooltipGetter: _tooltip.default,
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY
 };

package/node/LineChart/tooltip.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _getLabel = require("../internals/getLabel");
+const tooltipGetter = params => {
+  const {
+    series,
+    getColor,
+    identifier
+  } = params;
+  if (!identifier || identifier.dataIndex === undefined) {
+    return null;
+  }
+  const label = (0, _getLabel.getLabel)(series.label, 'tooltip');
+  const value = series.data[identifier.dataIndex];
+  const formattedValue = series.valueFormatter(value, {
+    dataIndex: identifier.dataIndex
+  });
+  return {
+    identifier,
+    color: getColor(identifier.dataIndex),
+    label,
+    value,
+    formattedValue,
+    markType: series.labelMarkType
+  };
+};
+var _default = exports.default = tooltipGetter;

package/node/LineChart/useLineChartProps.js

@@ -10,7 +10,8 @@ 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");
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className", "experimentalMarkRendering"];
+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"];
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.
@@ -29,13 +30,13 @@ const useLineChartProps = props => {
       colors,
       dataset,
       sx,
-      tooltip,
       onAxisClick,
       onAreaClick,
       onLineClick,
       onMarkClick,
       axisHighlight,
       disableLineItemHighlight,
+      hideLegend,
       grid,
       topAxis,
       leftAxis,
@@ -48,8 +49,7 @@ const useLineChartProps = props => {
       loading,
       highlightedItem,
       onHighlightChange,
-      className,
-      experimentalMarkRendering
+      className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const id = (0, _useId.default)();
@@ -61,7 +61,12 @@ const useLineChartProps = props => {
     }, s)),
     width,
     height,
-    margin,
+    margin: (0, _calculateMargins.calculateMargins)({
+      margin,
+      hideLegend,
+      slotProps,
+      series
+    }),
     colors,
     dataset,
     xAxis: xAxis ?? [{
@@ -72,10 +77,9 @@ const useLineChartProps = props => {
       }, (_, index) => index)
     }],
     yAxis,
-    sx,
     highlightedItem,
     onHighlightChange,
-    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
     className,
     skipAnimation
   });
@@ -106,8 +110,7 @@ const useLineChartProps = props => {
     slots,
     slotProps,
     onItemClick: onMarkClick,
-    skipAnimation,
-    experimentalRendering: experimentalMarkRendering
+    skipAnimation
   };
   const overlayProps = {
     slots,
@@ -133,11 +136,13 @@ const useLineChartProps = props => {
     slots,
     slotProps
   };
-  const tooltipProps = (0, _extends2.default)({}, tooltip, {
-    slots,
-    slotProps
-  });
+  const chartsWrapperProps = {
+    sx,
+    legendPosition: props.slotProps?.legend?.position,
+    legendDirection: props.slotProps?.legend?.direction
+  };
   return {
+    chartsWrapperProps,
     chartContainerProps,
     axisClickHandlerProps,
     gridProps,
@@ -151,7 +156,6 @@ const useLineChartProps = props => {
     axisHighlightProps,
     lineHighlightPlotProps,
     legendProps,
-    tooltipProps,
     children
   };
 };

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 {
@@ -84,11 +85,18 @@ 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,
-    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/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

@@ -72,7 +72,7 @@ function PieArcLabelPlot(props) {
     faded,
     data
   });
-  const transition = (0, _web.useTransition)(transformedData, (0, _extends2.default)({}, _transition.defaultLabelTransitionConfig, {
+  const transition = (0, _web.useTransition)(transformedData, (0, _extends2.default)({}, (0, _transition.getDefaultLabelTransitionConfig)(skipAnimation), {
     immediate: skipAnimation
   }));
   if (data.length === 0) {
@@ -137,9 +137,10 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
     color: _propTypes.default.string.isRequired,
     endAngle: _propTypes.default.number.isRequired,
     formattedValue: _propTypes.default.string.isRequired,
-    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     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

@@ -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,
@@ -46,7 +45,7 @@ function PieArcPlot(props) {
     faded,
     data
   });
-  const transition = (0, _web.useTransition)(transformedData, (0, _extends2.default)({}, _transition.defaultTransitionConfig, {
+  const transition = (0, _web.useTransition)(transformedData, (0, _extends2.default)({}, (0, _transition.getDefaultTransitionConfig)(skipAnimation), {
     immediate: skipAnimation
   }));
   if (data.length === 0) {
@@ -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,
@@ -107,9 +103,10 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
     color: _propTypes.default.string.isRequired,
     endAngle: _propTypes.default.number.isRequired,
     formattedValue: _propTypes.default.string.isRequired,
-    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     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