@mui/x-charts 8.20.0 → 8.21.0

package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.js

@@ -15,7 +15,6 @@ var _getSVGPoint = require("../../../getSVGPoint");
 var _useSelector = require("../../../store/useSelector");
 var _useChartCartesianAxis = require("../useChartCartesianAxis");
 var _useChartSeries = require("../../corePlugins/useChartSeries/useChartSeries.selectors");
-var _useChartDimensions = require("../../corePlugins/useChartDimensions");
 var _findClosestPoints = require("./findClosestPoints");
 const useChartClosestPoint = ({
   svgRef,
@@ -28,7 +27,6 @@ const useChartClosestPoint = ({
     voronoiMaxRadius,
     onItemClick
   } = params;
-  const drawingArea = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartDrawingArea);
   const {
     axis: xAxis,
     axisIds: xAxisIds
@@ -79,7 +77,7 @@ const useChartClosestPoint = ({
         const yZoomEnd = (yAxisZoom?.end ?? 100) / 100;
         const xScale = xAxis[xAxisId].scale;
         const yScale = yAxis[yAxisId].scale;
-        const closestPointIndex = (0, _findClosestPoints.findClosestPoints)(flatbush, drawingArea, aSeries.data, xScale, yScale, xZoomStart, xZoomEnd, yZoomStart, yZoomEnd, svgPoint.x, svgPoint.y, maxRadius)[0];
+        const closestPointIndex = (0, _findClosestPoints.findClosestPoints)(flatbush, aSeries.data, xScale, yScale, xZoomStart, xZoomEnd, yZoomStart, yZoomEnd, svgPoint.x, svgPoint.y, maxRadius)[0];
         if (closestPointIndex === undefined) {
           continue;
         }
@@ -177,7 +175,7 @@ const useChartClosestPoint = ({
       pressHandler.cleanup();
       pressEndHandler.cleanup();
     };
-  }, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, disableVoronoi, drawingArea, instance, seriesOrder, series, flatbushMap, defaultXAxisId, defaultYAxisId, store]);
+  }, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, disableVoronoi, instance, seriesOrder, series, flatbushMap, defaultXAxisId, defaultYAxisId, store]);
 
   // Instance implementation
   const enableVoronoiCallback = (0, _useEventCallback.default)(() => {

package/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.js

@@ -35,8 +35,8 @@ const selectorChartsHighlightScope = exports.selectorChartsHighlightScope = (0,
   }
   return highlightScope;
 });
-const selectorChartsIsHighlightedCallback = exports.selectorChartsIsHighlightedCallback = (0, _store.createSelector)(selectorChartsHighlightScope, selectorChartsHighlightedItem, _createIsHighlighted.createIsHighlighted);
-const selectorChartsIsFadedCallback = exports.selectorChartsIsFadedCallback = (0, _store.createSelector)(selectorChartsHighlightScope, selectorChartsHighlightedItem, _createIsFaded.createIsFaded);
+const selectorChartsIsHighlightedCallback = exports.selectorChartsIsHighlightedCallback = (0, _store.createSelectorMemoized)(selectorChartsHighlightScope, selectorChartsHighlightedItem, _createIsHighlighted.createIsHighlighted);
+const selectorChartsIsFadedCallback = exports.selectorChartsIsFadedCallback = (0, _store.createSelectorMemoized)(selectorChartsHighlightScope, selectorChartsHighlightedItem, _createIsFaded.createIsFaded);
 const selectorChartsIsHighlighted = exports.selectorChartsIsHighlighted = (0, _store.createSelector)(selectorChartsHighlightScope, selectorChartsHighlightedItem, function selectorChartsIsHighlighted(highlightScope, highlightedItem, item) {
   return (0, _createIsHighlighted.createIsHighlighted)(highlightScope, highlightedItem)(item);
 });

package/internals/plugins/featurePlugins/useChartInteraction/useChartTooltip.selectors.js

@@ -11,36 +11,51 @@ var _useChartKeyboardNavigation = require("../useChartKeyboardNavigation");
 var _useChartInteraction = require("./useChartInteraction.selectors");
 var _useChartDimensions = require("../../corePlugins/useChartDimensions/useChartDimensions.selectors");
 var _isCartesian = require("../../../isCartesian");
+var _useChartPolarAxis = require("../useChartPolarAxis/useChartPolarAxis.selectors");
 const selectorChartsTooltipItem = exports.selectorChartsTooltipItem = (0, _store.createSelector)(_useChartInteraction.selectorChartsLastInteraction, _useChartInteraction.selectorChartsInteractionItem, _useChartKeyboardNavigation.selectorChartsKeyboardItem, (lastInteraction, interactionItem, keyboardItem) => lastInteraction === 'keyboard' ? keyboardItem : interactionItem ?? null);
 const selectorChartsTooltipItemIsDefined = exports.selectorChartsTooltipItemIsDefined = (0, _store.createSelector)(_useChartInteraction.selectorChartsLastInteraction, _useChartInteraction.selectorChartsInteractionItemIsDefined, _useChartKeyboardNavigation.selectorChartsKeyboardItemIsDefined, (lastInteraction, interactionItemIsDefined, keyboardItemIsDefined) => lastInteraction === 'keyboard' ? keyboardItemIsDefined : interactionItemIsDefined);
-const selectorChartsTooltipItemPosition = exports.selectorChartsTooltipItemPosition = (0, _store.createSelector)(selectorChartsTooltipItem, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartXAxis, _useChartCartesianAxisRendering.selectorChartYAxis, _useChartSeries.selectorChartSeriesProcessed, function selectorChartsTooltipItemPosition(identifier, drawingArea, seriesConfig, {
+const selectorChartsTooltipAxisConfig = (0, _store.createSelectorMemoized)(selectorChartsTooltipItem, _useChartCartesianAxisRendering.selectorChartXAxis, _useChartCartesianAxisRendering.selectorChartYAxis, _useChartPolarAxis.selectorChartRotationAxis, _useChartPolarAxis.selectorChartRadiusAxis, _useChartSeries.selectorChartSeriesProcessed, function selectorChartsTooltipAxisConfig(identifier, {
   axis: xAxis,
   axisIds: xAxisIds
 }, {
   axis: yAxis,
   axisIds: yAxisIds
-}, series, placement = 'top') {
+}, rotationAxes, radiusAxes, series) {
+  if (!identifier) {
+    return {};
+  }
+  const itemSeries = series[identifier.type]?.series[identifier.seriesId];
+  if (!itemSeries) {
+    return {};
+  }
+  const axesConfig = {
+    rotationAxes,
+    radiusAxes
+  };
+  const xAxisId = (0, _isCartesian.isCartesianSeries)(itemSeries) ? itemSeries.xAxisId ?? xAxisIds[0] : undefined;
+  const yAxisId = (0, _isCartesian.isCartesianSeries)(itemSeries) ? itemSeries.yAxisId ?? yAxisIds[0] : undefined;
+  if (xAxisId !== undefined) {
+    axesConfig.x = xAxis[xAxisId];
+  }
+  if (yAxisId !== undefined) {
+    axesConfig.y = yAxis[yAxisId];
+  }
+  return axesConfig;
+});
+const selectorChartsTooltipItemPosition = exports.selectorChartsTooltipItemPosition = (0, _store.createSelectorMemoized)(selectorChartsTooltipItem, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesConfig, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesLayout, selectorChartsTooltipAxisConfig, function selectorChartsTooltipItemPosition(identifier, drawingArea, seriesConfig, series, seriesLayout, axesConfig, placement = 'top') {
   if (!identifier) {
     return null;
   }
   const itemSeries = series[identifier.type]?.series[identifier.seriesId];
-  if (itemSeries) {
-    const axesConfig = {};
-    const xAxisId = (0, _isCartesian.isCartesianSeries)(itemSeries) ? itemSeries.xAxisId ?? xAxisIds[0] : undefined;
-    const yAxisId = (0, _isCartesian.isCartesianSeries)(itemSeries) ? itemSeries.yAxisId ?? yAxisIds[0] : undefined;
-    if (xAxisId !== undefined) {
-      axesConfig.x = xAxis[xAxisId];
-    }
-    if (yAxisId !== undefined) {
-      axesConfig.y = yAxis[yAxisId];
-    }
-    return seriesConfig[itemSeries.type].tooltipItemPositionGetter?.({
-      series,
-      drawingArea,
-      axesConfig,
-      identifier,
-      placement
-    }) ?? null;
+  if (!itemSeries) {
+    return null;
   }
-  return null;
+  return seriesConfig[itemSeries.type].tooltipItemPositionGetter?.({
+    series,
+    seriesLayout,
+    drawingArea,
+    axesConfig,
+    identifier,
+    placement
+  }) ?? null;
 });

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.selectors.d.ts

@@ -1,5 +1,6 @@
 import { UseChartPolarAxisSignature } from "./useChartPolarAxis.types.js";
 import { ChartState } from "../../models/chart.js";
+import type { ChartDrawingArea } from "../../../../hooks/useDrawingArea.js";
 export declare const selectorChartPolarAxisState: (state: ChartState<[], [UseChartPolarAxisSignature]>) => {
   rotation: import("../../../index.js").AxisConfig<import("../../../index.js").ScaleName, any, import("../../../index.js").ChartsRotationAxisProps>[];
   radius: import("../../../index.js").AxisConfig<"linear", any, import("../../../index.js").ChartsRadiusAxisProps>[];
@@ -19,6 +20,10 @@ export declare const selectorChartRotationAxis: (args_0: import("../../corePlugi
 export declare const selectorChartRadiusAxis: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartPolarAxis.types.js").UseChartPolarAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => import("./computeAxisValue.js").ComputeResult<import("../../../index.js").ChartsRadiusAxisProps>;
+export declare function getDrawingAreaCenter(drawingArea: ChartDrawingArea): {
+  cx: number;
+  cy: number;
+};
 export declare const selectorChartPolarCenter: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => {

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.selectors.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getDrawingAreaCenter = getDrawingAreaCenter;
 exports.selectorChartRotationAxis = exports.selectorChartRawRotationAxis = exports.selectorChartRawRadiusAxis = exports.selectorChartRadiusAxis = exports.selectorChartPolarCenter = exports.selectorChartPolarAxisState = void 0;
 var _store = require("@mui/x-internals/store");
 var _useChartDimensions = require("../../corePlugins/useChartDimensions");
@@ -17,21 +18,24 @@ const selectorChartRawRadiusAxis = exports.selectorChartRawRadiusAxis = (0, _sto
  * The only interesting selectors that merge axis data and zoom if provided.
  */
 
-const selectorChartRotationAxis = exports.selectorChartRotationAxis = (0, _store.createSelector)(selectorChartRawRotationAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, (axis, drawingArea, formattedSeries, seriesConfig) => (0, _computeAxisValue.computeAxisValue)({
+const selectorChartRotationAxis = exports.selectorChartRotationAxis = (0, _store.createSelectorMemoized)(selectorChartRawRotationAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, (axis, drawingArea, formattedSeries, seriesConfig) => (0, _computeAxisValue.computeAxisValue)({
   drawingArea,
   formattedSeries,
   axis,
   seriesConfig,
   axisDirection: 'rotation'
 }));
-const selectorChartRadiusAxis = exports.selectorChartRadiusAxis = (0, _store.createSelector)(selectorChartRawRadiusAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, (axis, drawingArea, formattedSeries, seriesConfig) => (0, _computeAxisValue.computeAxisValue)({
+const selectorChartRadiusAxis = exports.selectorChartRadiusAxis = (0, _store.createSelectorMemoized)(selectorChartRawRadiusAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, (axis, drawingArea, formattedSeries, seriesConfig) => (0, _computeAxisValue.computeAxisValue)({
   drawingArea,
   formattedSeries,
   axis,
   seriesConfig,
   axisDirection: 'radius'
 }));
-const selectorChartPolarCenter = exports.selectorChartPolarCenter = (0, _store.createSelector)(_useChartDimensions.selectorChartDrawingArea, drawingArea => ({
-  cx: drawingArea.left + drawingArea.width / 2,
-  cy: drawingArea.top + drawingArea.height / 2
-}));
+function getDrawingAreaCenter(drawingArea) {
+  return {
+    cx: drawingArea.left + drawingArea.width / 2,
+    cy: drawingArea.top + drawingArea.height / 2
+  };
+}
+const selectorChartPolarCenter = exports.selectorChartPolarCenter = (0, _store.createSelectorMemoized)(_useChartDimensions.selectorChartDrawingArea, getDrawingAreaCenter);

package/internals/plugins/models/seriesConfig/index.d.ts

@@ -3,6 +3,7 @@ export * from "./cartesianExtremumGetter.types.js";
 export * from "./polarExtremumGetter.types.js";
 export * from "./seriesConfig.types.js";
 export * from "./seriesProcessor.types.js";
+export * from "./seriesLayout.types.js";
 export * from "./tooltipGetter.types.js";
 export * from "./tooltipItemPositionGetter.types.js";
 export * from "./legendGetter.types.js";

package/internals/plugins/models/seriesConfig/index.js

@@ -58,6 +58,17 @@ Object.keys(_seriesProcessor).forEach(function (key) {
     }
   });
 });
+var _seriesLayout = require("./seriesLayout.types");
+Object.keys(_seriesLayout).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _seriesLayout[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _seriesLayout[key];
+    }
+  });
+});
 var _tooltipGetter = require("./tooltipGetter.types");
 Object.keys(_tooltipGetter).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/plugins/models/seriesConfig/seriesConfig.types.d.ts

@@ -7,8 +7,13 @@ import type { AxisTooltipGetter, TooltipGetter } from "./tooltipGetter.types.js"
 import { PolarExtremumGetter } from "./polarExtremumGetter.types.js";
 import { GetSeriesWithDefaultValues } from "./getSeriesWithDefaultValues.types.js";
 import { TooltipItemPositionGetter } from "./tooltipItemPositionGetter.types.js";
+import { SeriesLayoutGetter } from "./seriesLayout.types.js";
 export type ChartSeriesTypeConfig<TSeriesType extends ChartSeriesType> = {
   seriesProcessor: SeriesProcessor<TSeriesType>;
+  /**
+   * A processor to add series layout when the layout does not depend from other series.
+   */
+  seriesLayout?: SeriesLayoutGetter<TSeriesType>;
   colorProcessor: ColorProcessor<TSeriesType>;
   legendGetter: LegendGetter<TSeriesType>;
   tooltipGetter: TooltipGetter<TSeriesType>;

package/internals/plugins/models/seriesConfig/seriesLayout.types.d.ts

@@ -0,0 +1,6 @@
+import type { ChartSeriesType, ChartSeriesLayout } from "../../../../models/seriesType/config.js";
+import { ChartDrawingArea } from "../../../../hooks/useDrawingArea.js";
+import type { SeriesId } from "../../../../models/seriesType/common.js";
+import { SeriesProcessorResult } from "./seriesProcessor.types.js";
+export type SeriesLayoutGetterResult<TSeriesType extends ChartSeriesType> = Record<SeriesId, ChartSeriesLayout<TSeriesType>>;
+export type SeriesLayoutGetter<TSeriesType extends ChartSeriesType> = (params: SeriesProcessorResult<TSeriesType>, drawingArea: Readonly<ChartDrawingArea>) => SeriesLayoutGetterResult<TSeriesType>;

package/internals/plugins/models/seriesConfig/seriesLayout.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/internals/plugins/models/seriesConfig/tooltipItemPositionGetter.types.d.ts

@@ -1,18 +1,20 @@
 import type { ChartItemIdentifierWithData, ChartSeriesType } from "../../../../models/seriesType/config.js";
-import { ChartsRotationAxisProps, ChartsRadiusAxisProps, PolarAxisDefaultized, ComputedXAxis, ComputedYAxis } from "../../../../models/axis.js";
+import { ChartsRotationAxisProps, ChartsRadiusAxisProps, ComputedXAxis, ComputedYAxis } from "../../../../models/axis.js";
 import { ChartDrawingArea } from "../../../../hooks/useDrawingArea.js";
-import { ProcessedSeries } from "../../corePlugins/useChartSeries/index.js";
+import { ProcessedSeries, SeriesLayout } from "../../corePlugins/useChartSeries/index.js";
+import { ComputeResult } from "../../featurePlugins/useChartPolarAxis/computeAxisValue.js";
 export interface TooltipPositionGetterAxesConfig {
   x?: ComputedXAxis;
   y?: ComputedYAxis;
-  rotation?: PolarAxisDefaultized<any, any, ChartsRotationAxisProps>;
-  radius?: PolarAxisDefaultized<any, any, ChartsRadiusAxisProps>;
+  rotationAxes?: ComputeResult<ChartsRotationAxisProps>;
+  radiusAxes?: ComputeResult<ChartsRadiusAxisProps>;
 }
 export type TooltipItemPositionGetter<TSeriesType extends ChartSeriesType> = (params: {
   series: ProcessedSeries<TSeriesType>;
   axesConfig: TooltipPositionGetterAxesConfig;
   drawingArea: ChartDrawingArea;
   identifier: ChartItemIdentifierWithData<TSeriesType> | null;
+  seriesLayout: SeriesLayout<TSeriesType>;
   /**
    * The preferred placement of the tooltip related to the element.
    * @default 'top'

package/internals/seriesSelectorOfType.d.ts

@@ -3,10 +3,10 @@ import { SeriesId } from "../models/seriesType/common.js";
 import type { ProcessedSeries } from "./plugins/corePlugins/useChartSeries/index.js";
 export declare const selectorAllSeriesOfType: (args_0: import("./plugins/corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("./plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./plugins/corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./plugins/corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof ChartsSeriesConfig> & import("./plugins/corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("./index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("./index.js").ChartStateCacheKey;
-}, seriesType: keyof ChartsSeriesConfig) => import("./index.js").SeriesProcessorResult<"line"> | import("./index.js").SeriesProcessorResult<"bar"> | {
+}, seriesType: keyof ChartsSeriesConfig) => import("./index.js").SeriesProcessorResult<"line"> | {
   series: Record<SeriesId, import("../index.js").DefaultizedScatterSeriesType>;
   seriesOrder: SeriesId[];
-} | {
+} | import("./index.js").SeriesProcessorResult<"bar"> | {
   series: Record<SeriesId, import("../index.js").DefaultizedPieSeriesType>;
   seriesOrder: SeriesId[];
 } | {

package/internals/seriesSelectorOfType.js

@@ -11,7 +11,7 @@ var _useStore = require("./store/useStore");
 var _useSelector = require("./store/useSelector");
 const selectorAllSeriesOfType = exports.selectorAllSeriesOfType = (0, _store.createSelector)(_useChartSeries.selectorChartSeriesProcessed, (processedSeries, seriesType) => processedSeries[seriesType]);
 const selectorSeriesOfType = exports.selectorSeriesOfType = (0, _store.createSelectorMemoized)(_useChartSeries.selectorChartSeriesProcessed, (processedSeries, seriesType, ids) => {
-  if (!ids || Array.isArray(ids) && ids.length === 0) {
+  if (ids === undefined || Array.isArray(ids) && ids.length === 0) {
     return processedSeries[seriesType]?.seriesOrder?.map(seriesId => processedSeries[seriesType]?.series[seriesId]) ?? [];
   }
   if (!Array.isArray(ids)) {

package/models/axis.d.ts

@@ -77,6 +77,11 @@ export interface ChartsAxisProps extends TickParams {
    * @default 'auto'
    */
   tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
   /**
    * The label of the axis.
    */

package/models/seriesType/bar.d.ts

@@ -2,12 +2,13 @@ import { DefaultizedProps } from '@mui/x-internals/types';
 import type { StackOffsetType } from "../stacking.js";
 import { CartesianSeriesType, CommonSeriesType, CommonDefaultizedProps, StackableSeriesType, SeriesId } from "./common.js";
 import { BarItem, BarLabelContext } from "../../BarChart/index.js";
-export interface BarSeriesType extends CommonSeriesType<number | null>, CartesianSeriesType, StackableSeriesType {
+export type BarValueType = number;
+export interface BarSeriesType extends CommonSeriesType<BarValueType | null>, CartesianSeriesType, StackableSeriesType {
   type: 'bar';
   /**
    * Data associated to each bar.
    */
-  data?: readonly (number | null)[];
+  data?: ReadonlyArray<BarValueType | null>;
   /**
    * The key used to retrieve data from the dataset.
    */

package/models/seriesType/config.d.ts

@@ -15,6 +15,11 @@ export interface ChartsSeriesConfig {
      * Series type when stored in the context (with all the preprocessing added))
      */
     series: DefaultizedBarSeriesType;
+    /**
+     * Additional data computed from the series plus drawing area.
+     * Useful for special charts like sankey where the series data is not sufficient to draw the series.
+     * */
+    seriesLayout: {};
     /**
      * Series typing such that the one user need to provide
      */
@@ -28,6 +33,7 @@ export interface ChartsSeriesConfig {
   line: {
     seriesInput: DefaultizedProps<LineSeriesType, 'id'> & MakeRequired<SeriesColor<number | null>, 'color'>;
     series: DefaultizedLineSeriesType;
+    seriesLayout: {};
     seriesProp: LineSeriesType;
     itemIdentifier: LineItemIdentifier;
     itemIdentifierWithData: LineItemIdentifier;
@@ -38,6 +44,7 @@ export interface ChartsSeriesConfig {
   scatter: {
     seriesInput: DefaultizedProps<ScatterSeriesType, 'id'> & MakeRequired<SeriesColor<ScatterValueType | null>, 'color'>;
     series: DefaultizedScatterSeriesType;
+    seriesLayout: {};
     seriesProp: ScatterSeriesType;
     valueType: ScatterValueType;
     itemIdentifier: ScatterItemIdentifier;
@@ -49,6 +56,7 @@ export interface ChartsSeriesConfig {
       data: Array<MakeOptional<PieValueType, 'id'> & MakeRequired<SeriesColor<PieValueType | null>, 'color'>>;
     };
     series: DefaultizedPieSeriesType;
+    seriesLayout: {};
     seriesProp: PieSeriesType<MakeOptional<PieValueType, 'id'>>;
     itemIdentifier: PieItemIdentifier;
     itemIdentifierWithData: PieItemIdentifier;
@@ -57,6 +65,7 @@ export interface ChartsSeriesConfig {
   radar: {
     seriesInput: DefaultizedProps<RadarSeriesType, 'id'> & MakeRequired<SeriesColor<number>, 'color'>;
     series: DefaultizedRadarSeriesType;
+    seriesLayout: {};
     seriesProp: RadarSeriesType;
     itemIdentifier: RadarItemIdentifier;
     itemIdentifierWithData: RadarItemIdentifier;
@@ -80,6 +89,7 @@ export type ChartSeriesDefaultized<T extends ChartSeriesType> = ChartsSeriesConf
 } ? ChartsSeriesConfig[T]['series'] & {
   stackedData: [number, number][];
 } : ChartsSeriesConfig[T]['series'];
+export type ChartSeriesLayout<T extends ChartSeriesType> = ChartsSeriesConfig[T] extends any ? ChartsSeriesConfig[T]['seriesLayout'] : never;
 export type ChartItemIdentifier<T extends ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifier'];
 export type ChartItemIdentifierWithData<T extends ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifierWithData'];
 export type DatasetElementType<T> = {

package/models/seriesType/index.d.ts

@@ -19,6 +19,7 @@ type DefaultizedCartesianSeriesType = DefaultizedSeriesType<CartesianChartSeries
 type StackableSeriesType = DefaultizedSeriesType<StackableChartSeriesType>;
 export type SeriesItemIdentifier<T extends ChartSeriesType = ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifier'];
 export type SeriesItemIdentifierWithData<T extends ChartSeriesType = ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifierWithData'];
+export { type SeriesId } from "./common.js";
 export * from "./line.js";
 export * from "./bar.js";
 export * from "./scatter.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.20.0",
+  "version": "8.21.0",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
   "license": "MIT",
@@ -35,9 +35,9 @@
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.6.0",
-    "@mui/x-internals": "8.19.0",
-    "@mui/x-internal-gestures": "0.3.6",
-    "@mui/x-charts-vendor": "8.19.0"
+    "@mui/x-charts-vendor": "8.21.0",
+    "@mui/x-internals": "8.21.0",
+    "@mui/x-internal-gestures": "0.3.6"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/BarChart/checkScaleErrors.d.ts

@@ -1,10 +0,0 @@
-import { AxisId, ComputedXAxis, ComputedYAxis } from "../models/axis.js";
-import { DefaultizedBarSeriesType } from "../models/seriesType/bar.js";
-import { SeriesId } from "../models/seriesType/common.js";
-export declare function checkScaleErrors(verticalLayout: boolean, seriesId: SeriesId, series: DefaultizedBarSeriesType & {
-  stackedData: [number, number][];
-}, xAxisId: AxisId, xAxis: {
-  [axisId: AxisId]: ComputedXAxis;
-}, yAxisId: AxisId, yAxis: {
-  [axisId: AxisId]: ComputedYAxis;
-}): void;

package/esm/BarChart/checkScaleErrors.d.ts

@@ -1,10 +0,0 @@
-import { AxisId, ComputedXAxis, ComputedYAxis } from "../models/axis.js";
-import { DefaultizedBarSeriesType } from "../models/seriesType/bar.js";
-import { SeriesId } from "../models/seriesType/common.js";
-export declare function checkScaleErrors(verticalLayout: boolean, seriesId: SeriesId, series: DefaultizedBarSeriesType & {
-  stackedData: [number, number][];
-}, xAxisId: AxisId, xAxis: {
-  [axisId: AxisId]: ComputedXAxis;
-}, yAxisId: AxisId, yAxis: {
-  [axisId: AxisId]: ComputedYAxis;
-}): void;