@mui/x-charts 9.0.0-alpha.3 → 9.0.0-alpha.4

package/internals/index.js

@@ -23,6 +23,8 @@ var _exportNames = {
   getSeriesColorFn: true,
   checkBarChartScaleErrors: true,
   getBandSize: true,
+  useChartsTooltipUtilityClasses: true,
+  getChartsTooltipUtilityClass: true,
   getAxisExtrema: true
 };
 Object.defineProperty(exports, "checkBarChartScaleErrors", {
@@ -61,6 +63,12 @@ Object.defineProperty(exports, "getCartesianAxisTriggerTooltip", {
     return _getAxisTriggerTooltip.getAxisTriggerTooltip;
   }
 });
+Object.defineProperty(exports, "getChartsTooltipUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _chartsTooltipClasses.getChartsTooltipUtilityClass;
+  }
+});
 Object.defineProperty(exports, "getSeriesColorFn", {
   enumerable: true,
   get: function () {
@@ -85,6 +93,12 @@ Object.defineProperty(exports, "useAreaPlotData", {
     return _useAreaPlotData.useAreaPlotData;
   }
 });
+Object.defineProperty(exports, "useChartsTooltipUtilityClasses", {
+  enumerable: true,
+  get: function () {
+    return _chartsTooltipClasses.useUtilityClasses;
+  }
+});
 Object.defineProperty(exports, "useDrawingArea", {
   enumerable: true,
   get: function () {
@@ -240,18 +254,6 @@ Object.keys(_useChartsContainerProps).forEach(function (key) {
     }
   });
 });
-var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
-Object.keys(_useChartContainerProps).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useChartContainerProps[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useChartContainerProps[key];
-    }
-  });
-});
 var _useChartsDataProviderProps = require("../ChartsDataProvider/useChartsDataProviderProps");
 Object.keys(_useChartsDataProviderProps).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -264,18 +266,6 @@ Object.keys(_useChartsDataProviderProps).forEach(function (key) {
     }
   });
 });
-var _useChartDataProviderProps = require("../ChartDataProvider/useChartDataProviderProps");
-Object.keys(_useChartDataProviderProps).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useChartDataProviderProps[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useChartDataProviderProps[key];
-    }
-  });
-});
 var _seriesSelectorOfType = require("./seriesSelectorOfType");
 Object.keys(_seriesSelectorOfType).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -604,6 +594,18 @@ Object.keys(_getLabel).forEach(function (key) {
     }
   });
 });
+var _legendUtils = require("./legendUtils");
+Object.keys(_legendUtils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _legendUtils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _legendUtils[key];
+    }
+  });
+});
 var _getChartPoint = require("./getChartPoint");
 Object.keys(_getChartPoint).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -800,6 +802,7 @@ Object.keys(_defaultSeriesConfig).forEach(function (key) {
     }
   });
 });
+var _chartsTooltipClasses = require("../ChartsTooltip/chartsTooltipClasses");
 var _getAxisExtrema = require("./plugins/featurePlugins/useChartCartesianAxis/getAxisExtrema");
 var _ChartsProvider = require("../context/ChartsProvider");
 Object.keys(_ChartsProvider).forEach(function (key) {
@@ -813,18 +816,6 @@ Object.keys(_ChartsProvider).forEach(function (key) {
     }
   });
 });
-var _ChartProvider = require("../context/ChartProvider");
-Object.keys(_ChartProvider).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _ChartProvider[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ChartProvider[key];
-    }
-  });
-});
 var _ChartsSlotsContext = require("../context/ChartsSlotsContext");
 Object.keys(_ChartsSlotsContext).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/index.mjs

@@ -19,9 +19,7 @@ export * from "../BarChart/useBarChartProps.mjs";
 export { processBarDataForPlot } from "../BarChart/useBarPlotData.mjs";
 export { useRadarChartProps } from "../RadarChart/useRadarChartProps.mjs";
 export * from "../ChartsContainer/useChartsContainerProps.mjs";
-export * from "../ChartContainer/useChartContainerProps.mjs";
 export * from "../ChartsDataProvider/useChartsDataProviderProps.mjs";
-export * from "../ChartDataProvider/useChartDataProviderProps.mjs";
 export * from "./seriesSelectorOfType.mjs";
 export { useSkipAnimation } from "../hooks/useSkipAnimation.mjs";
 export { useRegisterPointerInteractions } from "./plugins/featurePlugins/shared/useRegisterPointerInteractions.mjs";
@@ -59,6 +57,7 @@ export * from "../PieChart/PieChart.plugins.mjs";
 // utils
 export * from "./configInit.mjs";
 export * from "./getLabel.mjs";
+export * from "./legendUtils.mjs";
 export * from "./getChartPoint.mjs";
 export * from "./isDefined.mjs";
 export * from "./getScale.mjs";
@@ -79,11 +78,11 @@ export { getSeriesColorFn } from "./getSeriesColorFn.mjs";
 export { checkBarChartScaleErrors } from "../BarChart/checkBarChartScaleErrors.mjs";
 export { getBandSize } from "./getBandSize.mjs";
 export * from "./plugins/utils/defaultSeriesConfig.mjs";
+export { useUtilityClasses as useChartsTooltipUtilityClasses, getChartsTooltipUtilityClass } from "../ChartsTooltip/chartsTooltipClasses.mjs";
 
 // contexts
 export { getAxisExtrema } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtrema.mjs";
 export * from "../context/ChartsProvider/index.mjs";
-export * from "../context/ChartProvider/index.mjs";
 export * from "../context/ChartsSlotsContext.mjs";
 
 // series configuration

package/internals/legendUtils.d.mts

@@ -0,0 +1,11 @@
+import type { SeriesLegendItemParams } from "../ChartsLegend/index.mjs";
+import type { ChartSeriesDefaultized, ChartSeriesType } from "../models/seriesType/config.mjs";
+import type { SeriesProcessorResult } from "./plugins/corePlugins/useChartSeriesConfig/types/seriesProcessor.types.mjs";
+type SeriesTypeWithLegendFields = { [T in ChartSeriesType]: ChartSeriesDefaultized<T> extends {
+  label?: unknown;
+  labelMarkType?: unknown;
+  color: string;
+} ? T : never }[ChartSeriesType];
+/** One legend item per series (bar, scatter, rangeBar, radar). */
+export declare function getSeriesLegendItems<T extends SeriesTypeWithLegendFields>(type: T, params: SeriesProcessorResult<T>, defaultMarkType?: SeriesLegendItemParams['markType']): SeriesLegendItemParams[];
+export {};

package/internals/legendUtils.d.ts

@@ -0,0 +1,11 @@
+import type { SeriesLegendItemParams } from "../ChartsLegend/index.js";
+import type { ChartSeriesDefaultized, ChartSeriesType } from "../models/seriesType/config.js";
+import type { SeriesProcessorResult } from "./plugins/corePlugins/useChartSeriesConfig/types/seriesProcessor.types.js";
+type SeriesTypeWithLegendFields = { [T in ChartSeriesType]: ChartSeriesDefaultized<T> extends {
+  label?: unknown;
+  labelMarkType?: unknown;
+  color: string;
+} ? T : never }[ChartSeriesType];
+/** One legend item per series (bar, scatter, rangeBar, radar). */
+export declare function getSeriesLegendItems<T extends SeriesTypeWithLegendFields>(type: T, params: SeriesProcessorResult<T>, defaultMarkType?: SeriesLegendItemParams['markType']): SeriesLegendItemParams[];
+export {};

package/internals/legendUtils.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSeriesLegendItems = getSeriesLegendItems;
+var _getLabel = require("./getLabel");
+/** One legend item per series (bar, scatter, rangeBar, radar). */
+function getSeriesLegendItems(type, params, defaultMarkType) {
+  const {
+    seriesOrder,
+    series
+  } = params;
+  return seriesOrder.reduce((acc, seriesId) => {
+    const formattedLabel = (0, _getLabel.getLabel)(series[seriesId].label, 'legend');
+    if (formattedLabel === undefined) {
+      return acc;
+    }
+    acc.push({
+      type,
+      markType: series[seriesId].labelMarkType ?? defaultMarkType,
+      seriesId,
+      color: series[seriesId].color,
+      label: formattedLabel
+    });
+    return acc;
+  }, []);
+}

package/internals/legendUtils.mjs

@@ -0,0 +1,22 @@
+import { getLabel } from "./getLabel.mjs";
+/** One legend item per series (bar, scatter, rangeBar, radar). */
+export function getSeriesLegendItems(type, params, defaultMarkType) {
+  const {
+    seriesOrder,
+    series
+  } = params;
+  return seriesOrder.reduce((acc, seriesId) => {
+    const formattedLabel = getLabel(series[seriesId].label, 'legend');
+    if (formattedLabel === undefined) {
+      return acc;
+    }
+    acc.push({
+      type,
+      markType: series[seriesId].labelMarkType ?? defaultMarkType,
+      seriesId,
+      color: series[seriesId].color,
+      label: formattedLabel
+    });
+    return acc;
+  }, []);
+}

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.js

@@ -137,11 +137,11 @@ const useChartDimensions = ({
   }, [computeSize, hasInSize, chartsLayerContainerRef]);
   if (process.env.NODE_ENV !== 'production') {
     if (stateRef.current.displayError && params.width === undefined && innerWidth === 0) {
-      console.error(`MUI X Charts: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
+      console.error(`MUI X Charts: ChartsContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
       stateRef.current.displayError = false;
     }
     if (stateRef.current.displayError && params.height === undefined && innerHeight === 0) {
-      console.error(`MUI X Charts: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
+      console.error(`MUI X Charts: ChartsContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
       stateRef.current.displayError = false;
     }
   }

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.mjs

@@ -130,11 +130,11 @@ export const useChartDimensions = ({
   }, [computeSize, hasInSize, chartsLayerContainerRef]);
   if (process.env.NODE_ENV !== 'production') {
     if (stateRef.current.displayError && params.width === undefined && innerWidth === 0) {
-      console.error(`MUI X Charts: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
+      console.error(`MUI X Charts: ChartsContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
       stateRef.current.displayError = false;
     }
     if (stateRef.current.displayError && params.height === undefined && innerHeight === 0) {
-      console.error(`MUI X Charts: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
+      console.error(`MUI X Charts: ChartsContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
       stateRef.current.displayError = false;
     }
   }

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.selectors.d.mts

@@ -1,6 +1,3 @@
 import { type ChartRootSelector } from "../../utils/selectors.mjs";
 import type { UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature.types.mjs";
-export declare const selectorChartExperimentalFeaturesState: ChartRootSelector<UseChartExperimentalFeaturesSignature>;
-export declare const selectorPreferStrictDomainInLineCharts: (args_0: import("../useChartId/useChartId.types.mjs").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("./useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../useChartInteractionListener/index.mjs").UseChartInteractionListenerState & Partial<{}> & {
-  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
-}) => boolean;
+export declare const selectorChartExperimentalFeaturesState: ChartRootSelector<UseChartExperimentalFeaturesSignature>;

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.selectors.d.ts

@@ -1,6 +1,3 @@
 import { type ChartRootSelector } from "../../utils/selectors.js";
 import type { UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature.types.js";
-export declare const selectorChartExperimentalFeaturesState: ChartRootSelector<UseChartExperimentalFeaturesSignature>;
-export declare const selectorPreferStrictDomainInLineCharts: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("./useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => boolean;
+export declare const selectorChartExperimentalFeaturesState: ChartRootSelector<UseChartExperimentalFeaturesSignature>;

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.selectors.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorPreferStrictDomainInLineCharts = exports.selectorChartExperimentalFeaturesState = void 0;
-var _store = require("@mui/x-internals/store");
+exports.selectorChartExperimentalFeaturesState = void 0;
 const selectorChartExperimentalFeaturesState = state => state.experimentalFeatures;
-exports.selectorChartExperimentalFeaturesState = selectorChartExperimentalFeaturesState;
-const selectorPreferStrictDomainInLineCharts = exports.selectorPreferStrictDomainInLineCharts = (0, _store.createSelector)(selectorChartExperimentalFeaturesState, features => Boolean(features?.preferStrictDomainInLineCharts));
+exports.selectorChartExperimentalFeaturesState = selectorChartExperimentalFeaturesState;

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.selectors.mjs

@@ -1,3 +1 @@
-import { createSelector } from '@mui/x-internals/store';
-export const selectorChartExperimentalFeaturesState = state => state.experimentalFeatures;
-export const selectorPreferStrictDomainInLineCharts = createSelector(selectorChartExperimentalFeaturesState, features => Boolean(features?.preferStrictDomainInLineCharts));
+export const selectorChartExperimentalFeaturesState = state => state.experimentalFeatures;

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.d.mts

@@ -1,10 +1,5 @@
 import { type ChartPluginSignature } from "../../models/index.mjs";
-export interface ChartExperimentalFeatures {
-  /**
-   * Default domainLimit to strict for line chart x-axis.
-   */
-  preferStrictDomainInLineCharts?: boolean;
-}
+export interface ChartExperimentalFeatures {}
 export interface UseChartExperimentalFeaturesParameters {
   /**
    * Options to enable features planned for the next major.

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.d.ts

@@ -1,10 +1,5 @@
 import { type ChartPluginSignature } from "../../models/index.js";
-export interface ChartExperimentalFeatures {
-  /**
-   * Default domainLimit to strict for line chart x-axis.
-   */
-  preferStrictDomainInLineCharts?: boolean;
-}
+export interface ChartExperimentalFeatures {}
 export interface UseChartExperimentalFeaturesParameters {
   /**
    * Options to enable features planned for the next major.

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.d.mts

@@ -1,3 +1,4 @@
+import { type SeriesId } from "../../../../models/index.mjs";
 import { type ChartRootSelector } from "../../utils/selectors.mjs";
 import { type UseChartSeriesSignature } from "./useChartSeries.types.mjs";
 export declare const selectorChartSeriesState: ChartRootSelector<UseChartSeriesSignature>;
@@ -8,7 +9,7 @@ export declare const selectorChartDefaultizedSeries: (args_0: import("../useChar
  * Get the dataset from the series state.
  * @returns {DatasetType | undefined} The dataset.
  */
-export declare const selectorChartDataset: (args_0: import("../useChartId/useChartId.types.mjs").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("./useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../useChartInteractionListener/index.mjs").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartsDataset: (args_0: import("../useChartId/useChartId.types.mjs").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("./useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../useChartInteractionListener/index.mjs").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
 }) => readonly import("../../../index.mjs").DatasetElementType<unknown>[] | undefined;
 /**
@@ -26,4 +27,25 @@ export declare const selectorChartSeriesProcessed: (args_0: import("../useChartI
  */
 export declare const selectorChartSeriesLayout: (args_0: import("../useChartId/useChartId.types.mjs").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("./useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../useChartInteractionListener/index.mjs").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
-}) => import("./useChartSeries.types.mjs").SeriesLayout<keyof import("../../../index.mjs").ChartsSeriesConfig>;
+}) => import("./useChartSeries.types.mjs").SeriesLayout<keyof import("../../../index.mjs").ChartsSeriesConfig>;
+/**
+ * Returns a function that returns the series configuration for a given series id.
+ */
+export declare const selectorChartSeriesConfigGetter: (args_0: import("../useChartId/useChartId.types.mjs").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("./useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../useChartInteractionListener/index.mjs").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => (seriesId: SeriesId) => import("../useChartSeriesConfig/index.mjs").ChartSeriesTypeConfig<"line"> | import("../useChartSeriesConfig/index.mjs").ChartSeriesTypeConfig<"bar"> | import("../useChartSeriesConfig/index.mjs").ChartSeriesTypeConfig<"scatter"> | {
+  seriesProcessor: import("../useChartSeriesConfig/index.mjs").SeriesProcessor<"pie">;
+  seriesLayout?: import("../useChartSeriesConfig/index.mjs").SeriesLayoutGetter<"pie"> | undefined;
+  colorProcessor: import("../useChartSeriesConfig/index.mjs").ColorProcessor<"pie">;
+  legendGetter: import("../useChartSeriesConfig/index.mjs").LegendGetter<"pie">;
+  tooltipGetter: import("../useChartSeriesConfig/index.mjs").TooltipGetter<"pie">;
+  ItemTooltipContent?: import("react").ComponentType<import("../useChartSeriesConfig/index.mjs").ItemTooltipContentProps<"pie">> | undefined;
+  tooltipItemPositionGetter?: import("../useChartSeriesConfig/index.mjs").TooltipItemPositionGetter<"pie"> | undefined;
+  getSeriesWithDefaultValues: import("../useChartSeriesConfig/index.mjs").GetSeriesWithDefaultValues<"pie">;
+  keyboardFocusHandler?: import("../../../index.mjs").KeyboardFocusHandler<"pie"> | undefined;
+  identifierSerializer: import("../useChartSeriesConfig/index.mjs").IdentifierSerializer<"pie">;
+  identifierCleaner: import("../useChartSeriesConfig/index.mjs").IdentifierCleaner<"pie">;
+  getItemAtPosition?: import("../useChartSeriesConfig/index.mjs").GetItemAtPosition<"pie"> | undefined;
+  isHighlightedCreator: import("../../featurePlugins/useChartHighlight/highlightCreator.types.mjs").HighlightCreator<"pie">;
+  isFadedCreator: import("../../featurePlugins/useChartHighlight/highlightCreator.types.mjs").HighlightCreator<"pie">;
+} | import("../useChartSeriesConfig/index.mjs").ChartSeriesTypeConfig<"radar"> | null;

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.d.ts

@@ -1,3 +1,4 @@
+import { type SeriesId } from "../../../../models/index.js";
 import { type ChartRootSelector } from "../../utils/selectors.js";
 import { type UseChartSeriesSignature } from "./useChartSeries.types.js";
 export declare const selectorChartSeriesState: ChartRootSelector<UseChartSeriesSignature>;
@@ -8,7 +9,7 @@ export declare const selectorChartDefaultizedSeries: (args_0: import("../useChar
  * Get the dataset from the series state.
  * @returns {DatasetType | undefined} The dataset.
  */
-export declare const selectorChartDataset: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartsDataset: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => readonly import("../../../index.js").DatasetElementType<unknown>[] | undefined;
 /**
@@ -26,4 +27,25 @@ export declare const selectorChartSeriesProcessed: (args_0: import("../useChartI
  */
 export declare const selectorChartSeriesLayout: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => import("./useChartSeries.types.js").SeriesLayout<keyof import("../../../index.js").ChartsSeriesConfig>;
+}) => import("./useChartSeries.types.js").SeriesLayout<keyof import("../../../index.js").ChartsSeriesConfig>;
+/**
+ * Returns a function that returns the series configuration for a given series id.
+ */
+export declare const selectorChartSeriesConfigGetter: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => (seriesId: SeriesId) => import("../useChartSeriesConfig/index.js").ChartSeriesTypeConfig<"line"> | import("../useChartSeriesConfig/index.js").ChartSeriesTypeConfig<"bar"> | import("../useChartSeriesConfig/index.js").ChartSeriesTypeConfig<"scatter"> | {
+  seriesProcessor: import("../useChartSeriesConfig/index.js").SeriesProcessor<"pie">;
+  seriesLayout?: import("../useChartSeriesConfig/index.js").SeriesLayoutGetter<"pie"> | undefined;
+  colorProcessor: import("../useChartSeriesConfig/index.js").ColorProcessor<"pie">;
+  legendGetter: import("../useChartSeriesConfig/index.js").LegendGetter<"pie">;
+  tooltipGetter: import("../useChartSeriesConfig/index.js").TooltipGetter<"pie">;
+  ItemTooltipContent?: import("react").ComponentType<import("../useChartSeriesConfig/index.js").ItemTooltipContentProps<"pie">> | undefined;
+  tooltipItemPositionGetter?: import("../useChartSeriesConfig/index.js").TooltipItemPositionGetter<"pie"> | undefined;
+  getSeriesWithDefaultValues: import("../useChartSeriesConfig/index.js").GetSeriesWithDefaultValues<"pie">;
+  keyboardFocusHandler?: import("../../../index.js").KeyboardFocusHandler<"pie"> | undefined;
+  identifierSerializer: import("../useChartSeriesConfig/index.js").IdentifierSerializer<"pie">;
+  identifierCleaner: import("../useChartSeriesConfig/index.js").IdentifierCleaner<"pie">;
+  getItemAtPosition?: import("../useChartSeriesConfig/index.js").GetItemAtPosition<"pie"> | undefined;
+  isHighlightedCreator: import("../../featurePlugins/useChartHighlight/highlightCreator.types.js").HighlightCreator<"pie">;
+  isFadedCreator: import("../../featurePlugins/useChartHighlight/highlightCreator.types.js").HighlightCreator<"pie">;
+} | import("../useChartSeriesConfig/index.js").ChartSeriesTypeConfig<"radar"> | null;

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartSeriesState = exports.selectorChartSeriesProcessed = exports.selectorChartSeriesLayout = exports.selectorChartDefaultizedSeries = exports.selectorChartDataset = void 0;
+exports.selectorChartsDataset = exports.selectorChartSeriesState = exports.selectorChartSeriesProcessed = exports.selectorChartSeriesLayout = exports.selectorChartSeriesConfigGetter = exports.selectorChartDefaultizedSeries = void 0;
 var _store = require("@mui/x-internals/store");
 var _processSeries = require("./processSeries");
 var _useChartDimensions = require("../useChartDimensions");
@@ -17,14 +17,14 @@ const selectorChartDefaultizedSeries = exports.selectorChartDefaultizedSeries =
  * Get the dataset from the series state.
  * @returns {DatasetType | undefined} The dataset.
  */
-const selectorChartDataset = exports.selectorChartDataset = (0, _store.createSelector)(selectorChartSeriesState, seriesState => seriesState.dataset);
+const selectorChartsDataset = exports.selectorChartsDataset = (0, _store.createSelector)(selectorChartSeriesState, seriesState => seriesState.dataset);
 
 /**
  * Get the processed series after applying series processors.
  * This selector computes the processed series on-demand from the defaultized series.
  * @returns {ProcessedSeries} The processed series.
  */
-const selectorChartSeriesProcessed = exports.selectorChartSeriesProcessed = (0, _store.createSelectorMemoized)(selectorChartDefaultizedSeries, _useChartSeriesConfig.selectorChartSeriesConfig, selectorChartDataset, _useChartVisibilityManager.selectorIsItemVisibleGetter, function selectorChartSeriesProcessed(defaultizedSeries, seriesConfig, dataset, isItemVisible) {
+const selectorChartSeriesProcessed = exports.selectorChartSeriesProcessed = (0, _store.createSelectorMemoized)(selectorChartDefaultizedSeries, _useChartSeriesConfig.selectorChartSeriesConfig, selectorChartsDataset, _useChartVisibilityManager.selectorIsItemVisibleGetter, function selectorChartSeriesProcessed(defaultizedSeries, seriesConfig, dataset, isItemVisible) {
   return (0, _processSeries.applySeriesProcessors)(defaultizedSeries, seriesConfig, dataset, isItemVisible);
 });
 
@@ -35,4 +35,25 @@ const selectorChartSeriesProcessed = exports.selectorChartSeriesProcessed = (0,
  */
 const selectorChartSeriesLayout = exports.selectorChartSeriesLayout = (0, _store.createSelectorMemoized)(selectorChartSeriesProcessed, _useChartSeriesConfig.selectorChartSeriesConfig, _useChartDimensions.selectorChartDrawingArea, function selectorChartSeriesLayout(processedSeries, seriesConfig, drawingArea) {
   return (0, _processSeries.applySeriesLayout)(processedSeries, seriesConfig, drawingArea);
+});
+
+/**
+ * Returns a function that returns the series configuration for a given series id.
+ */
+const selectorChartSeriesConfigGetter = exports.selectorChartSeriesConfigGetter = (0, _store.createSelectorMemoized)(_useChartSeriesConfig.selectorChartSeriesConfig, selectorChartSeriesProcessed, (seriesConfig, processedSeries) => {
+  return function getSeriesConfigById(seriesId) {
+    for (const type in processedSeries) {
+      if (!Object.hasOwn(processedSeries, type)) {
+        continue;
+      }
+      const seriesGroup = processedSeries[type];
+      if (seriesGroup?.series) {
+        const item = seriesGroup.series[seriesId];
+        if (item) {
+          return seriesConfig[type];
+        }
+      }
+    }
+    return null;
+  };
 });

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.mjs

@@ -10,14 +10,14 @@ export const selectorChartDefaultizedSeries = createSelector(selectorChartSeries
  * Get the dataset from the series state.
  * @returns {DatasetType | undefined} The dataset.
  */
-export const selectorChartDataset = createSelector(selectorChartSeriesState, seriesState => seriesState.dataset);
+export const selectorChartsDataset = createSelector(selectorChartSeriesState, seriesState => seriesState.dataset);
 
 /**
  * Get the processed series after applying series processors.
  * This selector computes the processed series on-demand from the defaultized series.
  * @returns {ProcessedSeries} The processed series.
  */
-export const selectorChartSeriesProcessed = createSelectorMemoized(selectorChartDefaultizedSeries, selectorChartSeriesConfig, selectorChartDataset, selectorIsItemVisibleGetter, function selectorChartSeriesProcessed(defaultizedSeries, seriesConfig, dataset, isItemVisible) {
+export const selectorChartSeriesProcessed = createSelectorMemoized(selectorChartDefaultizedSeries, selectorChartSeriesConfig, selectorChartsDataset, selectorIsItemVisibleGetter, function selectorChartSeriesProcessed(defaultizedSeries, seriesConfig, dataset, isItemVisible) {
   return applySeriesProcessors(defaultizedSeries, seriesConfig, dataset, isItemVisible);
 });
 
@@ -28,4 +28,25 @@ export const selectorChartSeriesProcessed = createSelectorMemoized(selectorChart
  */
 export const selectorChartSeriesLayout = createSelectorMemoized(selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartDrawingArea, function selectorChartSeriesLayout(processedSeries, seriesConfig, drawingArea) {
   return applySeriesLayout(processedSeries, seriesConfig, drawingArea);
+});
+
+/**
+ * Returns a function that returns the series configuration for a given series id.
+ */
+export const selectorChartSeriesConfigGetter = createSelectorMemoized(selectorChartSeriesConfig, selectorChartSeriesProcessed, (seriesConfig, processedSeries) => {
+  return function getSeriesConfigById(seriesId) {
+    for (const type in processedSeries) {
+      if (!Object.hasOwn(processedSeries, type)) {
+        continue;
+      }
+      const seriesGroup = processedSeries[type];
+      if (seriesGroup?.series) {
+        const item = seriesGroup.series[seriesId];
+        if (item) {
+          return seriesConfig[type];
+        }
+      }
+    }
+    return null;
+  };
 });

package/internals/plugins/corePlugins/useChartSeriesConfig/types/TooltipContent.types.d.mts

@@ -0,0 +1,18 @@
+import type { CartesianChartSeriesType } from "../../../../../models/index.mjs";
+import { type ChartsTooltipClasses, type ItemTooltip, type SeriesItem } from "../../../../../ChartsTooltip/index.mjs";
+import type { ChartSeriesType, PolarChartSeriesType } from "../../../../../models/seriesType/config.mjs";
+import { type ItemTooltipWithMultipleValues } from "./tooltipGetter.types.mjs";
+export interface AxisTooltipContentProps<T extends CartesianChartSeriesType | PolarChartSeriesType> {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: Partial<ChartsTooltipClasses> | undefined;
+  item: SeriesItem<T>;
+}
+export interface ItemTooltipContentProps<T extends ChartSeriesType> {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: Partial<ChartsTooltipClasses> | undefined;
+  item: ItemTooltip<T> | ItemTooltipWithMultipleValues;
+}

package/internals/plugins/corePlugins/useChartSeriesConfig/types/TooltipContent.types.d.ts

@@ -0,0 +1,18 @@
+import type { CartesianChartSeriesType } from "../../../../../models/index.js";
+import { type ChartsTooltipClasses, type ItemTooltip, type SeriesItem } from "../../../../../ChartsTooltip/index.js";
+import type { ChartSeriesType, PolarChartSeriesType } from "../../../../../models/seriesType/config.js";
+import { type ItemTooltipWithMultipleValues } from "./tooltipGetter.types.js";
+export interface AxisTooltipContentProps<T extends CartesianChartSeriesType | PolarChartSeriesType> {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: Partial<ChartsTooltipClasses> | undefined;
+  item: SeriesItem<T>;
+}
+export interface ItemTooltipContentProps<T extends ChartSeriesType> {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: Partial<ChartsTooltipClasses> | undefined;
+  item: ItemTooltip<T> | ItemTooltipWithMultipleValues;
+}

package/internals/plugins/corePlugins/useChartSeriesConfig/types/index.d.mts

@@ -10,4 +10,5 @@ export * from "./legendGetter.types.mjs";
 export * from "./getSeriesWithDefaultValues.types.mjs";
 export * from "./identifierSerializer.types.mjs";
 export * from "./identifierCleaner.types.mjs";
-export * from "./getItemAtPosition.types.mjs";
+export * from "./getItemAtPosition.types.mjs";
+export * from "./TooltipContent.types.mjs";

package/internals/plugins/corePlugins/useChartSeriesConfig/types/index.d.ts

@@ -10,4 +10,5 @@ export * from "./legendGetter.types.js";
 export * from "./getSeriesWithDefaultValues.types.js";
 export * from "./identifierSerializer.types.js";
 export * from "./identifierCleaner.types.js";
-export * from "./getItemAtPosition.types.js";
+export * from "./getItemAtPosition.types.js";
+export * from "./TooltipContent.types.js";

package/internals/plugins/corePlugins/useChartSeriesConfig/types/index.js

@@ -145,4 +145,15 @@ Object.keys(_getItemAtPosition).forEach(function (key) {
       return _getItemAtPosition[key];
     }
   });
+});
+var _TooltipContent = require("./TooltipContent.types");
+Object.keys(_TooltipContent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TooltipContent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TooltipContent[key];
+    }
+  });
 });

package/internals/plugins/corePlugins/useChartSeriesConfig/types/index.mjs

@@ -10,4 +10,5 @@ export * from "./legendGetter.types.mjs";
 export * from "./getSeriesWithDefaultValues.types.mjs";
 export * from "./identifierSerializer.types.mjs";
 export * from "./identifierCleaner.types.mjs";
-export * from "./getItemAtPosition.types.mjs";
+export * from "./getItemAtPosition.types.mjs";
+export * from "./TooltipContent.types.mjs";

package/internals/plugins/corePlugins/useChartSeriesConfig/types/seriesConfig.types.d.mts

@@ -1,3 +1,4 @@
+import type * as React from 'react';
 import type { SeriesProcessor } from "./seriesProcessor.types.mjs";
 import type { CartesianChartSeriesType, ChartSeriesType, ChartsSeriesConfig, PolarChartSeriesType } from "../../../../../models/seriesType/config.mjs";
 import type { ColorProcessor } from "./colorProcessor.types.mjs";
@@ -15,6 +16,7 @@ import { type GetItemAtPosition } from "./getItemAtPosition.types.mjs";
 import { type UseChartCartesianAxisSignature } from "../../../featurePlugins/useChartCartesianAxis/index.mjs";
 import { type UseChartPolarAxisSignature } from "../../../featurePlugins/useChartPolarAxis/index.mjs";
 import { type HighlightCreator } from "../../../featurePlugins/useChartHighlight/highlightCreator.types.mjs";
+import { type AxisTooltipContentProps, type ItemTooltipContentProps } from "./TooltipContent.types.mjs";
 export type ChartSeriesTypeRequiredPlugins<SeriesType extends ChartSeriesType> = ChartsSeriesConfig[SeriesType] extends {
   axisType: 'cartesian';
 } ? [UseChartCartesianAxisSignature] : ChartsSeriesConfig[SeriesType] extends {
@@ -29,6 +31,7 @@ export type ChartSeriesTypeConfig<SeriesType extends ChartSeriesType> = {
   colorProcessor: ColorProcessor<SeriesType>;
   legendGetter: LegendGetter<SeriesType>;
   tooltipGetter: TooltipGetter<SeriesType>;
+  ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<SeriesType>>;
   tooltipItemPositionGetter?: TooltipItemPositionGetter<SeriesType>;
   getSeriesWithDefaultValues: GetSeriesWithDefaultValues<SeriesType>;
   keyboardFocusHandler?: KeyboardFocusHandler<SeriesType>;
@@ -52,9 +55,11 @@ export type ChartSeriesTypeConfig<SeriesType extends ChartSeriesType> = {
   xExtremumGetter: CartesianExtremumGetter<SeriesType>;
   yExtremumGetter: CartesianExtremumGetter<SeriesType>;
   axisTooltipGetter?: AxisTooltipGetter<SeriesType, 'x' | 'y'>;
+  AxisTooltipContent?: React.ComponentType<AxisTooltipContentProps<SeriesType>>;
 } : {}) & (SeriesType extends PolarChartSeriesType ? {
   rotationExtremumGetter: PolarExtremumGetter<SeriesType>;
   radiusExtremumGetter: PolarExtremumGetter<SeriesType>;
   axisTooltipGetter?: AxisTooltipGetter<SeriesType, 'rotation' | 'radius'>;
+  AxisTooltipContent?: React.ComponentType<AxisTooltipContentProps<SeriesType>>;
 } : {});
 export type ChartSeriesConfig<SeriesType extends ChartSeriesType> = { [Key in SeriesType]: ChartSeriesTypeConfig<Key> };