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

package/ChartsLegend/legend.types.d.ts

@@ -1,62 +1,18 @@
-import { ChartsTextBaseline, ChartsTextStyle } from '../internals/getWordsByLines';
-import { AxisId } from '../models/axis';
-export type AnchorX = 'left' | 'right' | 'middle';
-export type AnchorY = 'top' | 'bottom' | 'middle';
-export type AnchorPosition = {
-    horizontal: AnchorX;
-    vertical: AnchorY;
-};
-export type Direction = 'row' | 'column';
-export interface ColorLegendSelector {
-    /**
-     * The axis direction containing the color configuration to represent.
-     * @default 'z'
-     */
-    axisDirection?: 'x' | 'y' | 'z';
+export type LegendPosition = {
     /**
-     * The id of the axis item with the color configuration to represent.
-     * @default The first axis item.
+     * The vertical position of the legend.
      */
-    axisId?: AxisId;
-}
-export interface LegendPlacement {
+    vertical?: 'top' | 'middle' | 'bottom';
     /**
-     * The position of the legend.
+     * The horizontal position of the legend.
      */
-    position?: AnchorPosition;
-    /**
-     * The direction of the legend layout.
-     * The default depends on the chart.
-     */
-    direction?: Direction;
-}
-export type BoundingBox = {
-    width: number;
-    height: number;
+    horizontal?: 'left' | 'middle' | 'right';
 };
-export interface Position {
-    x: number;
-    y: number;
-}
-export interface TextPosition extends Position {
-    dominantBaseline: ChartsTextBaseline;
-    textAnchor: ChartsTextStyle['textAnchor'];
-}
-export type PiecewiseLabelFormatterParams = {
-    /**
-     * The min value of the piece. `null` is infinite.
-     */
-    min: number | Date | null;
-    /**
-     * The max value of the piece. `null` is infinite.
-     */
-    max: number | Date | null;
-    /**
-     * The formatted min value of the piece. `null` is infinite.
-     */
-    formattedMin: string | null;
+export type ChartsLegendPosition = {
     /**
-     * The formatted max value of the piece. `null` is infinite.
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
      */
-    formattedMax: string | null;
+    position?: LegendPosition;
 };

package/ChartsLegend/legendContext.types.d.ts

@@ -0,0 +1,55 @@
+import { ChartsLabelMarkProps } from '../ChartsLabel/ChartsLabelMark';
+import { PieItemId } from '../models';
+import { SeriesId } from '../models/seriesType/common';
+interface LegendItemContextBase {
+    /**
+     * The color used in the legend
+     */
+    color: string;
+    /**
+     * The label displayed in the legend
+     */
+    label: string;
+}
+export interface LegendItemParams extends Partial<Omit<SeriesLegendItemContext, 'type' | keyof LegendItemContextBase>>, Partial<Omit<PiecewiseColorLegendItemContext, 'type' | keyof LegendItemContextBase>>, LegendItemContextBase {
+    /**
+     * The identifier of the legend element.
+     * Used for internal purpose such as `key` props
+     */
+    id: number | string;
+    markType: ChartsLabelMarkProps['type'];
+}
+export interface SeriesLegendItemContext extends LegendItemContextBase {
+    /**
+     * The type of the legend item
+     * - `series` is used for series legend item
+     * - `piecewiseColor` is used for piecewise color legend item
+     */
+    type: 'series';
+    /**
+     * The identifier of the series
+     */
+    seriesId: SeriesId;
+    /**
+     * The identifier of the pie item
+     */
+    itemId?: PieItemId;
+}
+export interface PiecewiseColorLegendItemContext extends LegendItemContextBase {
+    /**
+     * The type of the legend item
+     * - `series` is used for series legend item
+     * - `piecewiseColor` is used for piecewise color legend item
+     */
+    type: 'piecewiseColor';
+    /**
+     * The minimum value of the category
+     */
+    minValue: number | Date | null;
+    /**
+     * The maximum value of the category
+     */
+    maxValue: number | Date | null;
+}
+export type LegendItemContext = SeriesLegendItemContext | PiecewiseColorLegendItemContext;
+export {};

package/ChartsLegend/legendContext.types.js

@@ -0,0 +1 @@
+export {};

package/ChartsLegend/onClickContextBuilder.d.ts

@@ -0,0 +1,2 @@
+import { LegendItemParams, SeriesLegendItemContext } from './legendContext.types';
+export declare const seriesContextBuilder: (context: LegendItemParams) => SeriesLegendItemContext;

package/ChartsLegend/onClickContextBuilder.js

@@ -0,0 +1,7 @@
+export const seriesContextBuilder = context => ({
+  type: 'series',
+  color: context.color,
+  label: context.label,
+  seriesId: context.seriesId,
+  itemId: context.itemId
+});

package/ChartsLegend/piecewiseColorDefaultLabelFormatter.d.ts

@@ -0,0 +1,2 @@
+import { PiecewiseLabelFormatterParams } from './piecewiseColorLegend.types';
+export declare function piecewiseColorDefaultLabelFormatter(params: PiecewiseLabelFormatterParams): string;

package/ChartsLegend/piecewiseColorDefaultLabelFormatter.js

@@ -0,0 +1,9 @@
+export function piecewiseColorDefaultLabelFormatter(params) {
+  if (params.min === null) {
+    return `<${params.formattedMax}`;
+  }
+  if (params.max === null) {
+    return `>${params.formattedMin}`;
+  }
+  return `${params.formattedMin}-${params.formattedMax}`;
+}

package/ChartsLegend/piecewiseColorLegend.types.d.ts

@@ -0,0 +1,26 @@
+export type PiecewiseLabelFormatterParams = {
+    /**
+     * The index of the entry.
+     */
+    index: number;
+    /**
+     * The length of the entries array.
+     */
+    length: number;
+    /**
+     * The min value of the piece. `null` is infinite.
+     */
+    min: number | Date | null;
+    /**
+     * The max value of the piece. `null` is infinite.
+     */
+    max: number | Date | null;
+    /**
+     * The formatted min value of the piece. `null` is infinite.
+     */
+    formattedMin: string | null;
+    /**
+     * The formatted max value of the piece. `null` is infinite.
+     */
+    formattedMax: string | null;
+};

package/ChartsLegend/piecewiseColorLegend.types.js

@@ -0,0 +1 @@
+export {};

package/ChartsLegend/piecewiseColorLegendClasses.d.ts

@@ -0,0 +1,28 @@
+import type { PiecewiseColorLegendProps } from './PiecewiseColorLegend';
+import type { ChartsLegendSlotExtension } from './chartsLegend.types';
+export interface PiecewiseColorLegendClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the list item that renders the `minLabel`. */
+    minLabel: string;
+    /** Styles applied to the list item that renders the `maxLabel`. */
+    maxLabel: string;
+    /** Styles applied to the list items. */
+    item: string;
+    /** Styles applied to the legend in column layout. */
+    vertical: string;
+    /** Styles applied to the legend in row layout. */
+    horizontal: string;
+    /** Styles applied to the legend with the labels before the color marks. */
+    start: string;
+    /** Styles applied to the legend with the labels after the color marks. */
+    end: string;
+    /** Styles applied to the legend with the labels on the extremes of the color marks. */
+    extremes: string;
+    /** Styles applied to the marks. */
+    mark: string;
+    /** Styles applied to the series label. */
+    label: string;
+}
+export declare const useUtilityClasses: (props: PiecewiseColorLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "item" | "minLabel" | "maxLabel", string>;
+export declare const piecewiseColorLegendClasses: PiecewiseColorLegendClasses;

package/ChartsLegend/piecewiseColorLegendClasses.js

@@ -0,0 +1,23 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import composeClasses from '@mui/utils/composeClasses';
+function getLegendUtilityClass(slot) {
+  return generateUtilityClass('MuiPiecewiseColorLegendClasses', slot);
+}
+export const useUtilityClasses = props => {
+  const {
+    classes,
+    direction,
+    labelPosition
+  } = props;
+  const slots = {
+    root: ['root', direction, labelPosition],
+    minLabel: ['minLabel'],
+    maxLabel: ['maxLabel'],
+    item: ['item'],
+    mark: ['mark'],
+    label: ['label']
+  };
+  return composeClasses(slots, getLegendUtilityClass, classes);
+};
+export const piecewiseColorLegendClasses = generateUtilityClasses('MuiPiecewiseColorLegendClasses', ['root', 'minLabel', 'maxLabel', 'item', 'vertical', 'horizontal', 'start', 'end', 'extremes', 'mark', 'label']);

package/ChartsLegend/useAxis.d.ts

@@ -1,6 +1,6 @@
 import { AxisDefaultized } from '../models/axis';
 import { ZAxisDefaultized } from '../models/z-axis';
-import { ColorLegendSelector } from './legend.types';
+import { ColorLegendSelector } from './colorLegend.types';
 /**
  * Helper to select an axis definition according to its direction and id.
  */

package/ChartsLegend/useAxis.js

@@ -2,7 +2,6 @@
 
 import { useCartesianContext } from "../context/CartesianProvider/useCartesianContext.js";
 import { useZAxis } from "../hooks/useZAxis.js";
-
 /**
  * Helper to select an axis definition according to its direction and id.
  */

package/ChartsReferenceLine/ChartsXReferenceLine.d.ts

@@ -8,6 +8,6 @@ export type ChartsXReferenceLineProps<TValue extends string | number | Date = st
      */
     x: TValue;
 };
-export declare function getXReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"label" | "line" | "root", string>;
+export declare function getXReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"root" | "line" | "label", string>;
 declare function ChartsXReferenceLine(props: ChartsXReferenceLineProps): React.JSX.Element | null;
 export { ChartsXReferenceLine };

package/ChartsReferenceLine/ChartsYReferenceLine.d.ts

@@ -8,6 +8,6 @@ export type ChartsYReferenceLineProps<TValue extends string | number | Date = st
      */
     y: TValue;
 };
-export declare function getYReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"label" | "line" | "root", string>;
+export declare function getYReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"root" | "line" | "label", string>;
 declare function ChartsYReferenceLine(props: ChartsYReferenceLineProps): React.JSX.Element | null;
 export { ChartsYReferenceLine };

package/ChartsSurface/ChartsSurface.js

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

package/ChartsTooltip/chartsTooltipClasses.d.ts

@@ -23,4 +23,4 @@ export interface ChartsTooltipClasses {
 export type ChartsTooltipClassKey = keyof Omit<ChartsTooltipClasses, 'markCell' | 'labelCell' | 'valueCell'>;
 export declare function getChartsTooltipUtilityClass(slot: string): string;
 export declare const chartsTooltipClasses: ChartsTooltipClasses;
-export declare const useUtilityClasses: (classes?: Partial<ChartsTooltipClasses>) => Record<"cell" | "table" | "row" | "mark" | "root" | "paper" | "markCell" | "labelCell" | "valueCell" | "axisValueCell", string>;
+export declare const useUtilityClasses: (classes?: Partial<ChartsTooltipClasses>) => Record<"root" | "mark" | "table" | "cell" | "row" | "markCell" | "labelCell" | "valueCell" | "paper" | "axisValueCell", string>;

package/LineChart/AnimatedArea.js

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

package/LineChart/AnimatedLine.js

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

package/LineChart/AppearingMask.js

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

package/LineChart/CircleMarkElement.js

@@ -69,6 +69,7 @@ function CircleMarkElement(props) {
   };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(animated.circle, _extends({}, other, {
+    // @ts-expect-error
     cx: position.x,
     cy: position.y,
     r: 5,

package/LineChart/LineChart.js

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
 import { AreaPlot } from "./AreaPlot.js";
 import { LinePlot } from "./LinePlot.js";
-import { ChartContainer } from "../ChartContainer/index.js";
 import { MarkPlot } from "./MarkPlot.js";
 import { ChartsAxis } from "../ChartsAxis/ChartsAxis.js";
 import { ChartsTooltip } from "../ChartsTooltip/index.js";
@@ -18,6 +17,10 @@ import { ChartsGrid } from "../ChartsGrid/index.js";
 import { ChartsOnAxisClickHandler } from "../ChartsOnAxisClickHandler/index.js";
 import { ChartsOverlay } from "../ChartsOverlay/index.js";
 import { useLineChartProps } from "./useLineChartProps.js";
+import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
+import { ChartDataProvider } from "../context/index.js";
+import { ChartsSurface } from "../ChartsSurface/index.js";
+import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -35,6 +38,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(inProps, ref)
     name: 'MuiLineChart'
   });
   const {
+    chartsWrapperProps,
     chartContainerProps,
     axisClickHandlerProps,
     gridProps,
@@ -50,16 +54,22 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(inProps, ref)
     legendProps,
     children
   } = useLineChartProps(props);
+  const {
+    chartDataProviderProps,
+    chartsSurfaceProps
+  } = useChartContainerProps(chartContainerProps, ref);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
-  return /*#__PURE__*/_jsxs(ChartContainer, _extends({
-    ref: ref
-  }, chartContainerProps, {
-    children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
-      children: [/*#__PURE__*/_jsx(AreaPlot, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlot, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {
-      "data-drawing-container": true,
-      children: /*#__PURE__*/_jsx(MarkPlot, _extends({}, markPlotProps))
-    }), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+  return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
+    children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
+      children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+        children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
+          children: [/*#__PURE__*/_jsx(AreaPlot, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlot, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
+        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {
+          "data-drawing-container": true,
+          children: /*#__PURE__*/_jsx(MarkPlot, _extends({}, markPlotProps))
+        }), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+      }))]
+    }))
   }));
 });
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {

package/LineChart/MarkElement.js

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

package/LineChart/legend.js

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

package/LineChart/useLineChartProps.d.ts

@@ -2,7 +2,7 @@ import { ChartsAxisProps } from '../ChartsAxis';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsClipPathProps } from '../ChartsClipPath';
 import { ChartsGridProps } from '../ChartsGrid';
-import { ChartsLegendProps } from '../ChartsLegend';
+import { ChartsLegendSlotExtension } from '../ChartsLegend';
 import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
 import { ChartsOverlayProps } from '../ChartsOverlay';
 import { ChartContainerProps } from '../ChartContainer';
@@ -11,6 +11,7 @@ import type { LineChartProps } from './LineChart';
 import { LineHighlightPlotProps } from './LineHighlightPlot';
 import { LinePlotProps } from './LinePlot';
 import { MarkPlotProps } from './MarkPlot';
+import type { ChartsWrapperProps } from '../internals/components/ChartsWrapper';
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.
@@ -19,6 +20,7 @@ import { MarkPlotProps } from './MarkPlot';
  * @returns An object with props for the children components of LineChart
  */
 export declare const useLineChartProps: (props: LineChartProps) => {
+    chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
     chartContainerProps: ChartContainerProps;
     axisClickHandlerProps: ChartsOnAxisClickHandlerProps;
     gridProps: ChartsGridProps;
@@ -33,6 +35,6 @@ export declare const useLineChartProps: (props: LineChartProps) => {
     chartsAxisProps: ChartsAxisProps;
     axisHighlightProps: ChartsAxisHighlightProps;
     lineHighlightPlotProps: LineHighlightPlotProps;
-    legendProps: ChartsLegendProps;
+    legendProps: ChartsLegendSlotExtension;
     children: import("react").ReactNode;
 };

package/LineChart/useLineChartProps.js

@@ -5,6 +5,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 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"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
+import { calculateMargins } from "../internals/calculateMargins.js";
+
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.
@@ -29,6 +31,7 @@ export const useLineChartProps = props => {
       onMarkClick,
       axisHighlight,
       disableLineItemHighlight,
+      hideLegend,
       grid,
       topAxis,
       leftAxis,
@@ -54,7 +57,12 @@ export const useLineChartProps = props => {
     }, s)),
     width,
     height,
-    margin,
+    margin: calculateMargins({
+      margin,
+      hideLegend,
+      slotProps,
+      series
+    }),
     colors,
     dataset,
     xAxis: xAxis ?? [{
@@ -65,7 +73,6 @@ export const useLineChartProps = props => {
       }, (_, index) => index)
     }],
     yAxis,
-    sx,
     highlightedItem,
     onHighlightChange,
     disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
@@ -126,7 +133,13 @@ export const useLineChartProps = props => {
     slots,
     slotProps
   };
+  const chartsWrapperProps = {
+    sx,
+    legendPosition: props.slotProps?.legend?.position,
+    legendDirection: props.slotProps?.legend?.direction
+  };
   return {
+    chartsWrapperProps,
     chartContainerProps,
     axisClickHandlerProps,
     gridProps,

package/PieChart/PieArc.js

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

package/PieChart/PieArcLabel.js

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

package/PieChart/PieArcLabelPlot.js

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

package/PieChart/PieArcPlot.js

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