@mui/x-charts 8.20.0 → 8.22.0

package/esm/LineChart/MarkPlot.js

@@ -5,20 +5,15 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
-import { useChartId } from "../hooks/useChartId.js";
-import { getValueToPositionMapper } from "../hooks/useScale.js";
-import { useLineSeriesContext } from "../hooks/useLineSeries.js";
-import { cleanId } from "../internals/cleanId.js";
 import { CircleMarkElement } from "./CircleMarkElement.js";
-import getColor from "./seriesConfig/getColor.js";
 import { MarkElement } from "./MarkElement.js";
-import { useChartContext } from "../context/ChartProvider/index.js";
 import { useItemHighlightedGetter, useXAxes, useYAxes } from "../hooks/index.js";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
 import { selectorChartsHighlightXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useSelector } from "../internals/store/useSelector.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
+import { useMarkPlotData } from "./useMarkPlotData.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -40,18 +35,13 @@ function MarkPlot(props) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const isZoomInteracting = useInternalIsZoomInteracting();
   const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
-  const seriesData = useLineSeriesContext();
   const {
-    xAxis,
-    xAxisIds
+    xAxis
   } = useXAxes();
   const {
-    yAxis,
-    yAxisIds
+    yAxis
   } = useYAxes();
-  const chartId = useChartId();
   const {
-    instance,
     store
   } = useChartContext();
   const {
@@ -73,109 +63,49 @@ function MarkPlot(props) {
     }
     return rep;
   }, [xAxisHighlightIndexes]);
-  if (seriesData === undefined) {
-    return null;
-  }
-  const {
-    series,
-    stackingGroups
-  } = seriesData;
-  const defaultXAxisId = xAxisIds[0];
-  const defaultYAxisId = yAxisIds[0];
+  const completedData = useMarkPlotData(xAxis, yAxis);
   return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    children: stackingGroups.flatMap(({
-      ids: groupIds
+    children: completedData.map(({
+      seriesId,
+      clipId,
+      shape,
+      xAxisId,
+      marks
     }) => {
-      return groupIds.map(seriesId => {
-        const {
-          xAxisId = defaultXAxisId,
-          yAxisId = defaultYAxisId,
-          stackedData,
-          data,
-          showMark = true,
-          shape = 'circle'
-        } = series[seriesId];
-        if (showMark === false) {
-          return null;
-        }
-        const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
-        const yScale = yAxis[yAxisId].scale;
-        const xData = xAxis[xAxisId].data;
-        if (xData === undefined) {
-          throw new Error(`MUI X Charts: ${xAxisId === 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.`);
-        }
-        const clipId = cleanId(`${chartId}-${seriesId}-line-clip`); // We assume that if displaying line mark, the line will also be rendered
-
-        const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
-        const Mark = slots?.mark ?? (shape === 'circle' ? CircleMarkElement : MarkElement);
-        const isSeriesHighlighted = isHighlighted({
-          seriesId
-        });
-        const isSeriesFaded = !isSeriesHighlighted && isFaded({
-          seriesId
-        });
-        return /*#__PURE__*/_jsx("g", {
-          clipPath: `url(#${clipId})`,
-          "data-series": seriesId,
-          children: xData?.map((x, index) => {
-            const value = data[index] == null ? null : stackedData[index][1];
-            return {
-              x: xScale(x),
-              y: value === null ? null : yScale(value),
-              position: x,
-              value,
-              index
-            };
-          }).filter(({
-            x,
-            y,
-            index,
-            position,
-            value
-          }) => {
-            if (value === null || y === null) {
-              // Remove missing data point
-              return false;
-            }
-            if (!instance.isPointInside(x, y)) {
-              // Remove out of range
-              return false;
-            }
-            if (showMark === true) {
-              return true;
-            }
-            return showMark({
-              x,
-              y,
-              index,
-              position,
-              value
-            });
-          }).map(({
-            x,
-            y,
-            index
-          }) => {
-            return /*#__PURE__*/_jsx(Mark, _extends({
-              id: seriesId,
-              dataIndex: index,
-              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
-              ,
-              skipAnimation: skipAnimation,
-              onClick: onItemClick && (event => onItemClick(event, {
-                type: 'line',
-                seriesId,
-                dataIndex: index
-              })),
-              isHighlighted: highlightedItems[xAxisId]?.has(index) || isSeriesHighlighted,
-              isFaded: isSeriesFaded
-            }, slotProps?.mark), `${seriesId}-${index}`);
-          })
-        }, seriesId);
+      const Mark = slots?.mark ?? (shape === 'circle' ? CircleMarkElement : MarkElement);
+      const isSeriesHighlighted = isHighlighted({
+        seriesId
+      });
+      const isSeriesFaded = !isSeriesHighlighted && isFaded({
+        seriesId
       });
+      return /*#__PURE__*/_jsx("g", {
+        clipPath: `url(#${clipId})`,
+        "data-series": seriesId,
+        children: marks.map(({
+          x,
+          y,
+          index,
+          color
+        }) => {
+          return /*#__PURE__*/_jsx(Mark, _extends({
+            id: seriesId,
+            dataIndex: index,
+            shape: shape,
+            color: color,
+            x: x,
+            y: y,
+            skipAnimation: skipAnimation,
+            onClick: onItemClick && (event => onItemClick(event, {
+              type: 'line',
+              seriesId,
+              dataIndex: index
+            })),
+            isHighlighted: highlightedItems[xAxisId]?.has(index) || isSeriesHighlighted,
+            isFaded: isSeriesFaded
+          }, slotProps?.mark), `${seriesId}-${index}`);
+        })
+      }, seriesId);
     })
   }));
 }

package/esm/LineChart/index.d.ts

@@ -8,6 +8,7 @@ export * from "./AnimatedArea.js";
 export * from "./LineElement.js";
 export * from "./AnimatedLine.js";
 export * from "./MarkElement.js";
+export * from "./FocusedLineMark.js";
 export * from "./LineHighlightElement.js";
 export * from "./LineChart.plugins.js";
 export type { MarkElementClasses, MarkElementClassKey } from "./markElementClasses.js";

package/esm/LineChart/index.js

@@ -8,6 +8,7 @@ export * from "./AnimatedArea.js";
 export * from "./LineElement.js";
 export * from "./AnimatedLine.js";
 export * from "./MarkElement.js";
+export * from "./FocusedLineMark.js";
 export * from "./LineHighlightElement.js";
 export * from "./LineChart.plugins.js";
 export { getMarkElementUtilityClass, markElementClasses } from "./markElementClasses.js";

package/esm/LineChart/markElementClasses.d.ts

@@ -1,4 +1,4 @@
-import { SeriesId } from "../models/seriesType/common.js";
+import { type SeriesId } from "../models/seriesType/common.js";
 export interface MarkElementClasses {
   /** Styles applied to the root element. */
   root: string;

package/esm/LineChart/seriesConfig/extremums.d.ts

@@ -1,3 +1,3 @@
-import { CartesianExtremumGetter } from "../../internals/plugins/models/seriesConfig/index.js";
+import { type CartesianExtremumGetter } from "../../internals/plugins/models/seriesConfig/index.js";
 export declare const getExtremumX: CartesianExtremumGetter<'line'>;
 export declare const getExtremumY: CartesianExtremumGetter<'line'>;

package/esm/LineChart/seriesConfig/getColor.d.ts

@@ -1,3 +1,3 @@
-import { ColorProcessor } from "../../internals/plugins/models/index.js";
+import { type ColorProcessor } from "../../internals/plugins/models/index.js";
 declare const getColor: ColorProcessor<'line'>;
 export default getColor;

package/esm/LineChart/seriesConfig/index.d.ts

@@ -1,2 +1,2 @@
-import { ChartSeriesTypeConfig } from "../../internals/plugins/models/seriesConfig/index.js";
+import { type ChartSeriesTypeConfig } from "../../internals/plugins/models/seriesConfig/index.js";
 export declare const lineSeriesConfig: ChartSeriesTypeConfig<'line'>;

package/esm/LineChart/seriesConfig/legend.d.ts

@@ -1,3 +1,3 @@
-import { LegendGetter } from "../../internals/plugins/models/index.js";
+import { type LegendGetter } from "../../internals/plugins/models/index.js";
 declare const legendGetter: LegendGetter<'line'>;
 export default legendGetter;

package/esm/LineChart/seriesConfig/seriesProcessor.d.ts

@@ -1,3 +1,3 @@
-import { SeriesProcessor } from "../../internals/plugins/models/index.js";
+import { type SeriesProcessor } from "../../internals/plugins/models/index.js";
 declare const seriesProcessor: SeriesProcessor<'line'>;
 export default seriesProcessor;

package/esm/LineChart/seriesConfig/seriesProcessor.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
 import { warnOnce } from '@mui/x-internals/warning';
 import { getStackingGroups } from "../../internals/stackSeries.js";
-import { defaultizeValueFormatter } from "../../internals/defaultizeValueFormatter.js";
 const seriesProcessor = (params, dataset) => {
   const {
     seriesOrder,
@@ -69,14 +68,15 @@ const seriesProcessor = (params, dataset) => {
           const value = data[dataKey];
           return typeof value === 'number' ? value : null;
         }) : series[id].data,
-        stackedData: stackedSeries[index].map(([a, b]) => [a, b])
+        stackedData: stackedSeries[index].map(([a, b]) => [a, b]),
+        valueFormatter: series[id]?.valueFormatter ?? (v => v == null ? '' : v.toLocaleString())
       });
     });
   });
   return {
     seriesOrder,
     stackingGroups,
-    series: defaultizeValueFormatter(completedSeries, v => v == null ? '' : v.toLocaleString())
+    series: completedSeries
   };
 };
 export default seriesProcessor;

package/esm/LineChart/useAreaPlotData.d.ts

@@ -1,6 +1,6 @@
-import { ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
-import { ChartsXAxisProps, ChartsYAxisProps } from "../models/index.js";
-import { SeriesId } from "../models/seriesType/common.js";
+import { type ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { type ChartsXAxisProps, type ChartsYAxisProps } from "../models/index.js";
+import { type SeriesId } from "../models/seriesType/common.js";
 interface AreaPlotDataPoint {
   d: string;
   seriesId: SeriesId;

package/esm/LineChart/useLineChartProps.d.ts

@@ -1,18 +1,18 @@
 import * as React from 'react';
-import { ChartsAxisProps } from "../ChartsAxis/index.js";
-import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
-import { ChartsClipPathProps } from "../ChartsClipPath/index.js";
-import { ChartsGridProps } from "../ChartsGrid/index.js";
-import { ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
-import { ChartsOverlayProps } from "../ChartsOverlay/index.js";
-import { ChartContainerProps } from "../ChartContainer/index.js";
-import { AreaPlotProps } from "./AreaPlot.js";
+import { type ChartsAxisProps } from "../ChartsAxis/index.js";
+import { type ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
+import { type ChartsClipPathProps } from "../ChartsClipPath/index.js";
+import { type ChartsGridProps } from "../ChartsGrid/index.js";
+import { type ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
+import { type ChartsOverlayProps } from "../ChartsOverlay/index.js";
+import { type ChartContainerProps } from "../ChartContainer/index.js";
+import { type AreaPlotProps } from "./AreaPlot.js";
 import type { LineChartProps } from "./LineChart.js";
-import { LineHighlightPlotProps } from "./LineHighlightPlot.js";
-import { LinePlotProps } from "./LinePlot.js";
-import { MarkPlotProps } from "./MarkPlot.js";
+import { type LineHighlightPlotProps } from "./LineHighlightPlot.js";
+import { type LinePlotProps } from "./LinePlot.js";
+import { type MarkPlotProps } from "./MarkPlot.js";
 import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
-import { LineChartPluginSignatures } from "./LineChart.plugins.js";
+import { type LineChartPluginSignatures } from "./LineChart.plugins.js";
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.

package/esm/LineChart/useLinePlotData.d.ts

@@ -1,6 +1,6 @@
-import { ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
-import { ChartsXAxisProps, ChartsYAxisProps } from "../models/index.js";
-import { SeriesId } from "../models/seriesType/common.js";
+import { type ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { type ChartsXAxisProps, type ChartsYAxisProps } from "../models/index.js";
+import { type SeriesId } from "../models/seriesType/common.js";
 interface LinePlotDataPoint {
   d: string;
   seriesId: SeriesId;

package/esm/LineChart/useMarkPlotData.d.ts

@@ -0,0 +1,18 @@
+import { type SeriesId } from "../models/seriesType/common.js";
+import { type ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { type ChartsXAxisProps, type ChartsYAxisProps } from "../models/index.js";
+import { type AxisId } from "../models/axis.js";
+export interface MarkPlotDataPoint {
+  x: number;
+  y: number;
+  index: number;
+  color: string;
+}
+export interface MarkPlotSeriesData {
+  seriesId: SeriesId;
+  clipId: string;
+  shape: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+  xAxisId: AxisId;
+  marks: MarkPlotDataPoint[];
+}
+export declare function useMarkPlotData(xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): MarkPlotSeriesData[];

package/esm/LineChart/useMarkPlotData.js

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { useChartId } from "../hooks/useChartId.js";
+import { getValueToPositionMapper, useLineSeriesContext, useXAxes, useYAxes } from "../hooks/index.js";
+import { cleanId } from "../internals/cleanId.js";
+import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
+import getColor from "./seriesConfig/getColor.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
+export function useMarkPlotData(xAxes, yAxes) {
+  const seriesData = useLineSeriesContext();
+  const defaultXAxisId = useXAxes().xAxisIds[0];
+  const defaultYAxisId = useYAxes().yAxisIds[0];
+  const chartId = useChartId();
+  const {
+    instance
+  } = useChartContext();
+  const allData = React.useMemo(() => {
+    if (seriesData === undefined) {
+      return [];
+    }
+    const {
+      series,
+      stackingGroups
+    } = seriesData;
+    const markPlotData = [];
+    for (const stackingGroup of stackingGroups) {
+      const groupIds = stackingGroup.ids;
+      for (const seriesId of groupIds) {
+        const {
+          xAxisId = defaultXAxisId,
+          yAxisId = defaultYAxisId,
+          stackedData,
+          data,
+          showMark = true,
+          shape = 'circle'
+        } = series[seriesId];
+        if (showMark === false) {
+          continue;
+        }
+        if (!(xAxisId in xAxes) || !(yAxisId in yAxes)) {
+          continue;
+        }
+        const xScale = getValueToPositionMapper(xAxes[xAxisId].scale);
+        const yScale = yAxes[yAxisId].scale;
+        const xData = xAxes[xAxisId].data;
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error(`MUI X Charts: ${xAxisId === 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.`);
+          }
+        }
+        const clipId = cleanId(`${chartId}-${seriesId}-line-clip`);
+        const colorGetter = getColor(series[seriesId], xAxes[xAxisId], yAxes[yAxisId]);
+        const marks = [];
+        if (xData) {
+          for (let index = 0; index < xData.length; index += 1) {
+            const x = xData[index];
+            const value = data[index] == null ? null : stackedData[index][1];
+            if (value === null) {
+              continue;
+            }
+            const y = yScale(value);
+            const xPos = xScale(x);
+            if (!instance.isPointInside(xPos, y)) {
+              continue;
+            }
+            if (showMark !== true) {
+              const shouldInclude = showMark({
+                x: xPos,
+                y,
+                index,
+                position: x,
+                value
+              });
+              if (!shouldInclude) {
+                continue;
+              }
+            }
+            marks.push({
+              x: xPos,
+              y,
+              index,
+              color: colorGetter(index)
+            });
+          }
+        }
+        markPlotData.push({
+          seriesId,
+          clipId,
+          shape,
+          xAxisId,
+          marks
+        });
+      }
+    }
+    return markPlotData;
+  }, [seriesData, defaultXAxisId, defaultYAxisId, chartId, xAxes, yAxes, instance]);
+  return allData;
+}

package/esm/PieChart/PieArc.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PieItemId } from "../models/index.js";
+import { type PieItemId } from "../models/index.js";
 export interface PieArcClasses {
   /** Styles applied to the root element. */
   root: string;

package/esm/PieChart/PieArcLabel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PieItemId } from "../models/seriesType/pie.js";
+import { type PieItemId } from "../models/seriesType/pie.js";
 export interface PieArcLabelClasses {
   /** Styles applied to the root element. */
   root: string;

package/esm/PieChart/PieArcLabel.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style", "skipAnimation"];
+const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
@@ -42,6 +42,9 @@ const PieArcLabelRoot = styled('text', {
   animationName: 'animate-opacity',
   animationDuration: '0s',
   animationTimingFunction: ANIMATION_TIMING_FUNCTION,
+  transitionDuration: `${ANIMATION_DURATION_MS}ms`,
+  transitionProperty: 'opacity',
+  transitionTimingFunction: ANIMATION_TIMING_FUNCTION,
   [`&.${pieArcLabelClasses.animate}`]: {
     animationDuration: `${ANIMATION_DURATION_MS}ms`
   },

package/esm/PieChart/PieArcLabelPlot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ComputedPieRadius, DefaultizedPieSeriesType } from "../models/seriesType/pie.js";
-import { PieArcLabelProps } from "./PieArcLabel.js";
+import { type ComputedPieRadius, type DefaultizedPieSeriesType } from "../models/seriesType/pie.js";
+import { type PieArcLabelProps } from "./PieArcLabel.js";
 export interface PieArcLabelPlotSlots {
   pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
 }

package/esm/PieChart/PieArcPlot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { PieArcProps } from "./PieArc.js";
-import { ComputedPieRadius, DefaultizedPieSeriesType, DefaultizedPieValueType, PieItemIdentifier } from "../models/seriesType/pie.js";
+import { type PieArcProps } from "./PieArc.js";
+import { type ComputedPieRadius, type DefaultizedPieSeriesType, type DefaultizedPieValueType, type PieItemIdentifier } from "../models/seriesType/pie.js";
 export interface PieArcPlotSlots {
   pieArc?: React.JSXElementConstructor<PieArcProps>;
 }

package/esm/PieChart/PieChart.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { MakeOptional } from '@mui/x-internals/types';
-import { ChartsToolbarSlotProps, ChartsToolbarSlots } from "../Toolbar/index.js";
-import { ChartsSlotProps, ChartsSlots } from "../internals/material/index.js";
-import { ChartContainerProps } from "../ChartContainer/index.js";
-import { PieSeriesType } from "../models/seriesType/index.js";
-import { ChartsTooltipSlots, ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
-import { ChartsLegendSlotProps, ChartsLegendSlots } from "../ChartsLegend/index.js";
-import { PiePlotProps, PiePlotSlotProps, PiePlotSlots } from "./PiePlot.js";
-import { PieValueType } from "../models/seriesType/pie.js";
-import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/index.js";
-import { PieChartPluginSignatures } from "./PieChart.plugins.js";
+import { type MakeOptional } from '@mui/x-internals/types';
+import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from "../Toolbar/index.js";
+import { type ChartsSlotProps, type ChartsSlots } from "../internals/material/index.js";
+import { type ChartContainerProps } from "../ChartContainer/index.js";
+import { type PieSeriesType } from "../models/seriesType/index.js";
+import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
+import { type ChartsLegendSlotProps, type ChartsLegendSlots } from "../ChartsLegend/index.js";
+import { type PiePlotProps, type PiePlotSlotProps, type PiePlotSlots } from "./PiePlot.js";
+import { type PieValueType } from "../models/seriesType/pie.js";
+import { type ChartsOverlayProps, type ChartsOverlaySlotProps, type ChartsOverlaySlots } from "../ChartsOverlay/index.js";
+import { type PieChartPluginSignatures } from "./PieChart.plugins.js";
 export interface PieChartSlots extends PiePlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface PieChartSlotProps extends PiePlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export type PieSeries = MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>;

package/esm/PieChart/PieChart.plugins.d.ts

@@ -1,6 +1,7 @@
-import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
-import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-import { UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
-import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
-export type PieChartPluginSignatures = [UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
+import { type UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { type UseChartTooltipSignature } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
+import { type UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+import { type UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+import { type ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
+export type PieChartPluginSignatures = [UseChartTooltipSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
 export declare const PIE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<PieChartPluginSignatures>;

package/esm/PieChart/PieChart.plugins.js

@@ -1,4 +1,5 @@
 import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useChartTooltip } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
 import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { useChartKeyboardNavigation } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
-export const PIE_CHART_PLUGINS = [useChartInteraction, useChartHighlight, useChartKeyboardNavigation];
+export const PIE_CHART_PLUGINS = [useChartTooltip, useChartInteraction, useChartHighlight, useChartKeyboardNavigation];

package/esm/PieChart/PiePlot.d.ts

@@ -1,5 +1,5 @@
-import { PieArcPlotProps, PieArcPlotSlotProps, PieArcPlotSlots } from "./PieArcPlot.js";
-import { PieArcLabelPlotSlots, PieArcLabelPlotSlotProps } from "./PieArcLabelPlot.js";
+import { type PieArcPlotProps, type PieArcPlotSlotProps, type PieArcPlotSlots } from "./PieArcPlot.js";
+import { type PieArcLabelPlotSlots, type PieArcLabelPlotSlotProps } from "./PieArcLabelPlot.js";
 export interface PiePlotSlots extends PieArcPlotSlots, PieArcLabelPlotSlots {}
 export interface PiePlotSlotProps extends PieArcPlotSlotProps, PieArcLabelPlotSlotProps {}
 export interface PiePlotProps extends Pick<PieArcPlotProps, 'skipAnimation' | 'onItemClick'> {