From cd76f19d13115519dd619f18bf0176bb1adb8fc2 Mon Sep 17 00:00:00 2001
From: alexandre <alex.fauquette@gmail.com>
Date: Tue, 4 Jun 2024 13:38:12 +0200
Subject: [PATCH 1/5] [charts] Harmonize charts TS

---
 packages/x-charts/src/ChartsLegend/utils.ts   |  8 ++--
 .../x-charts/src/models/seriesType/config.ts  | 43 +++++++++++++++---
 .../x-charts/src/models/seriesType/index.ts   | 44 +++++++++----------
 3 files changed, 65 insertions(+), 30 deletions(-)

diff --git a/packages/x-charts/src/ChartsLegend/utils.ts b/packages/x-charts/src/ChartsLegend/utils.ts
index a5da75c6985b7..8f57e1077219e 100644
--- a/packages/x-charts/src/ChartsLegend/utils.ts
+++ b/packages/x-charts/src/ChartsLegend/utils.ts
@@ -12,7 +12,7 @@ export type AnchorPosition = { horizontal: AnchorX; vertical: AnchorY };
 
 export type Direction = 'row' | 'column';
 
-const legendGetter: { [T in ChartSeriesType]: LegendGetter<T> } = {
+const legendGetter: { [T in ChartSeriesType]?: LegendGetter<T> } = {
   bar: getBarLegend,
   scatter: getScatterLegend,
   line: getLineLegend,
@@ -21,7 +21,9 @@ const legendGetter: { [T in ChartSeriesType]: LegendGetter<T> } = {
 
 export function getSeriesToDisplay(series: FormattedSeries) {
   return (Object.keys(series) as ChartSeriesType[]).flatMap(
-    <T extends ChartSeriesType>(seriesType: T) =>
-      legendGetter[seriesType as T](series[seriesType as T]!),
+    <T extends ChartSeriesType>(seriesType: T) => {
+      const getter = legendGetter[seriesType as T];
+      return getter === undefined ? [] : getter(series[seriesType as T]!);
+    },
   );
 }
diff --git a/packages/x-charts/src/models/seriesType/config.ts b/packages/x-charts/src/models/seriesType/config.ts
index 608962f6af702..04ca91143c089 100644
--- a/packages/x-charts/src/models/seriesType/config.ts
+++ b/packages/x-charts/src/models/seriesType/config.ts
@@ -7,35 +7,68 @@ import { DefaultizedProps, MakeOptional } from '../helpers';
 import { StackingGroupsType } from '../../internals/stackSeries';
 import { SeriesId } from './common';
 
-interface ChartsSeriesConfig {
+export interface ChartsSeriesConfig {
   bar: {
+    /**
+     * Series type when passed to the formatter (some ids are defaultised to simplify the DX)
+     */
     seriesInput: DefaultizedProps<BarSeriesType, 'id'> & { color: string };
+    /**
+     * Series type when stored in the context (with all the preprocessing added))
+     */
     series: DefaultizedBarSeriesType;
-    canBeStacked: true;
+    /**
+     * Series typing such that the one user need to provide
+     */
+    seriesProp: BarSeriesType;
     itemIdentifier: BarItemIdentifier;
+    canBeStacked: true;
+    cartesian: true;
   };
   line: {
     seriesInput: DefaultizedProps<LineSeriesType, 'id'> & { color: string };
     series: DefaultizedLineSeriesType;
-    canBeStacked: true;
+    seriesProp: LineSeriesType;
     itemIdentifier: LineItemIdentifier;
+    canBeStacked: true;
+    cartesian: true;
   };
   scatter: {
     seriesInput: DefaultizedProps<ScatterSeriesType, 'id'> & { color: string };
     series: DefaultizedScatterSeriesType;
+    seriesProp: ScatterSeriesType;
     itemIdentifier: ScatterItemIdentifier;
+    cartesian: true;
   };
   pie: {
     seriesInput: Omit<DefaultizedProps<PieSeriesType, 'id'>, 'data'> & {
       data: (MakeOptional<PieValueType, 'id'> & { color: string })[];
     };
     series: DefaultizedPieSeriesType;
+    seriesProp: PieSeriesType<MakeOptional<PieValueType, 'id'>>;
     itemIdentifier: PieItemIdentifier;
   };
 }
 
-export type CartesianChartSeriesType = 'bar' | 'line' | 'scatter';
-export type ChartSeriesType = 'bar' | 'line' | 'scatter' | 'pie';
+export type ChartSeriesType = keyof ChartsSeriesConfig;
+
+export type CartesianChartSeriesType = keyof Pick<
+  ChartsSeriesConfig,
+  {
+    [Key in ChartSeriesType]: ChartsSeriesConfig[Key] extends { cartesian: true } ? Key : never;
+  }[ChartSeriesType]
+>;
+
+export function isCartesianSeriesType(seriesType: string): seriesType is CartesianChartSeriesType {
+  return ['bar', 'line', 'scatter', 'heatmap'].includes(seriesType);
+}
+
+export type StackableChartSeriesType = keyof Pick<
+  ChartsSeriesConfig,
+  {
+    [Key in ChartSeriesType]: ChartsSeriesConfig[Key] extends { canBeStacked: true } ? Key : never;
+  }[ChartSeriesType]
+>;
 
 export type ChartSeries<T extends ChartSeriesType> = ChartsSeriesConfig[T] extends {
   canBeStacked: true;
diff --git a/packages/x-charts/src/models/seriesType/index.ts b/packages/x-charts/src/models/seriesType/index.ts
index c6c848eb91656..70dbfedf195aa 100644
--- a/packages/x-charts/src/models/seriesType/index.ts
+++ b/packages/x-charts/src/models/seriesType/index.ts
@@ -1,31 +1,29 @@
-import { BarItemIdentifier, BarSeriesType, DefaultizedBarSeriesType } from './bar';
-import { DefaultizedLineSeriesType, LineItemIdentifier, LineSeriesType } from './line';
-import { DefaultizedScatterSeriesType, ScatterItemIdentifier, ScatterSeriesType } from './scatter';
-import { DefaultizedPieSeriesType, PieSeriesType, PieItemIdentifier, PieValueType } from './pie';
-import { MakeOptional } from '../helpers';
+import { BarSeriesType, DefaultizedBarSeriesType } from './bar';
+import {
+  CartesianChartSeriesType,
+  ChartSeriesType,
+  ChartsSeriesConfig,
+  StackableChartSeriesType,
+} from './config';
 
-type AllSeriesType =
-  | BarSeriesType
-  | LineSeriesType
-  | ScatterSeriesType
-  | PieSeriesType<MakeOptional<PieValueType, 'id'>>;
+// Series definition
 
-type CartesianSeriesType = BarSeriesType | LineSeriesType | ScatterSeriesType;
+type AllSeriesType<T extends ChartSeriesType = ChartSeriesType> =
+  ChartsSeriesConfig[T]['seriesProp'];
 
-type DefaultizedCartesianSeriesType =
-  | DefaultizedBarSeriesType
-  | DefaultizedLineSeriesType
-  | DefaultizedScatterSeriesType;
+type CartesianSeriesType = AllSeriesType<CartesianChartSeriesType>;
 
-type DefaultizedSeriesType = DefaultizedCartesianSeriesType | DefaultizedPieSeriesType;
+type DefaultizedSeriesType<T extends ChartSeriesType = ChartSeriesType> =
+  ChartsSeriesConfig[T]['series'];
 
-type StackableSeriesType = DefaultizedBarSeriesType | DefaultizedLineSeriesType;
+type DefaultizedCartesianSeriesType = DefaultizedSeriesType<CartesianChartSeriesType>;
 
-export type SeriesItemIdentifier =
-  | BarItemIdentifier
-  | LineItemIdentifier
-  | ScatterItemIdentifier
-  | PieItemIdentifier;
+type StackableSeriesType = DefaultizedSeriesType<StackableChartSeriesType>;
+
+// item identifier
+
+export type SeriesItemIdentifier<T extends ChartSeriesType = ChartSeriesType> =
+  ChartsSeriesConfig[T]['itemIdentifier'];
 
 export * from './line';
 export * from './bar';
@@ -39,6 +37,8 @@ export type {
   StackableSeriesType,
 };
 
+// Helpers
+
 export function isDefaultizedBarSeries(
   series: DefaultizedSeriesType,
 ): series is DefaultizedBarSeriesType {

From b181b0ccc49a03c7e43e3512d09da910269c6b8c Mon Sep 17 00:00:00 2001
From: alexandre <alex.fauquette@gmail.com>
Date: Tue, 4 Jun 2024 14:13:05 +0200
Subject: [PATCH 2/5] [charts] Introduce plugins system

---
 packages/x-charts/src/BarChart/BarChart.tsx   |  2 +-
 packages/x-charts/src/BarChart/formatter.ts   |  2 +-
 packages/x-charts/src/BarChart/getColor.ts    | 12 ++---
 packages/x-charts/src/BarChart/plugin.ts      | 12 +++++
 .../src/ChartContainer/ChartContainer.tsx     | 23 ++++++--
 .../src/ChartContainer/defaultPlugins.ts      |  6 +++
 .../src/ChartContainer/usePluginsMerge.ts     | 41 +++++++++++++++
 packages/x-charts/src/LineChart/LineChart.tsx |  2 +-
 packages/x-charts/src/LineChart/formatter.ts  |  2 +-
 packages/x-charts/src/LineChart/getColor.ts   |  8 +--
 packages/x-charts/src/LineChart/plugin.ts     | 12 +++++
 packages/x-charts/src/PieChart/PieChart.tsx   |  2 +-
 packages/x-charts/src/PieChart/plugin.ts      |  9 ++++
 .../ResponsiveChartContainer.tsx              |  5 ++
 .../src/ScatterChart/ScatterChart.tsx         |  2 +-
 .../x-charts/src/ScatterChart/formatter.ts    |  2 +-
 .../x-charts/src/ScatterChart/getColor.ts     |  8 +--
 packages/x-charts/src/ScatterChart/plugin.ts  | 12 +++++
 .../src/SparkLineChart/SparkLineChart.tsx     |  2 +-
 .../src/context/CartesianContextProvider.tsx  |  5 ++
 .../src/context/SeriesContextProvider.tsx     | 52 +++++++++++--------
 .../src/internals/defaultizeValueFormatter.ts |  4 +-
 packages/x-charts/src/models/index.ts         |  1 +
 packages/x-charts/src/models/plugin.ts        | 27 ++++++++++
 24 files changed, 202 insertions(+), 51 deletions(-)
 create mode 100644 packages/x-charts/src/BarChart/plugin.ts
 create mode 100644 packages/x-charts/src/ChartContainer/defaultPlugins.ts
 create mode 100644 packages/x-charts/src/ChartContainer/usePluginsMerge.ts
 create mode 100644 packages/x-charts/src/LineChart/plugin.ts
 create mode 100644 packages/x-charts/src/PieChart/plugin.ts
 create mode 100644 packages/x-charts/src/ScatterChart/plugin.ts
 create mode 100644 packages/x-charts/src/models/plugin.ts

diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx
index 677812fd3a678..a213ea1869834 100644
--- a/packages/x-charts/src/BarChart/BarChart.tsx
+++ b/packages/x-charts/src/BarChart/BarChart.tsx
@@ -51,7 +51,7 @@ export interface BarChartSlotProps
     ChartsOverlaySlotProps {}
 
 export interface BarChartProps
-  extends Omit<ResponsiveChartContainerProps, 'series'>,
+  extends Omit<ResponsiveChartContainerProps, 'series' | 'plugins'>,
     Omit<ChartsAxisProps, 'slots' | 'slotProps'>,
     Omit<BarPlotProps, 'slots' | 'slotProps'>,
     Omit<ChartsOverlayProps, 'slots' | 'slotProps'>,
diff --git a/packages/x-charts/src/BarChart/formatter.ts b/packages/x-charts/src/BarChart/formatter.ts
index 548f363c30106..808268e3e130d 100644
--- a/packages/x-charts/src/BarChart/formatter.ts
+++ b/packages/x-charts/src/BarChart/formatter.ts
@@ -6,7 +6,7 @@ import {
   DatasetType,
   Formatter,
 } from '../models/seriesType/config';
-import defaultizeValueFormatter from '../internals/defaultizeValueFormatter';
+import { defaultizeValueFormatter } from '../internals/defaultizeValueFormatter';
 import { DefaultizedProps } from '../models/helpers';
 import { SeriesId } from '../models/seriesType/common';
 
diff --git a/packages/x-charts/src/BarChart/getColor.ts b/packages/x-charts/src/BarChart/getColor.ts
index 31a06feac93b3..ccb8beb2ea232 100644
--- a/packages/x-charts/src/BarChart/getColor.ts
+++ b/packages/x-charts/src/BarChart/getColor.ts
@@ -3,14 +3,14 @@ import { DefaultizedBarSeriesType } from '../models/seriesType/bar';
 
 export default function getColor(
   series: DefaultizedBarSeriesType,
-  xAxis: AxisDefaultized,
-  yAxis: AxisDefaultized,
+  xAxis?: AxisDefaultized,
+  yAxis?: AxisDefaultized,
 ) {
   const verticalLayout = series.layout === 'vertical';
 
-  const bandColorScale = verticalLayout ? xAxis.colorScale : yAxis.colorScale;
-  const valueColorScale = verticalLayout ? yAxis.colorScale : xAxis.colorScale;
-  const bandValues = verticalLayout ? xAxis.data! : yAxis.data!;
+  const bandColorScale = verticalLayout ? xAxis?.colorScale : yAxis?.colorScale;
+  const valueColorScale = verticalLayout ? yAxis?.colorScale : xAxis?.colorScale;
+  const bandValues = verticalLayout ? xAxis?.data : yAxis?.data;
 
   if (valueColorScale) {
     return (dataIndex: number) => {
@@ -22,7 +22,7 @@ export default function getColor(
       return color;
     };
   }
-  if (bandColorScale) {
+  if (bandColorScale && bandValues) {
     return (dataIndex: number) => {
       const value = bandValues[dataIndex];
       const color = value === null ? series.color : bandColorScale(value);
diff --git a/packages/x-charts/src/BarChart/plugin.ts b/packages/x-charts/src/BarChart/plugin.ts
new file mode 100644
index 0000000000000..1527621c8026e
--- /dev/null
+++ b/packages/x-charts/src/BarChart/plugin.ts
@@ -0,0 +1,12 @@
+import { ChartsPluginType } from '../models/plugin';
+import { getExtremumX, getExtremumY } from './extremums';
+import formatter from './formatter';
+import getColor from './getColor';
+
+export const plugin: ChartsPluginType<'bar'> = {
+  seriesType: 'bar',
+  seriesFormatter: formatter,
+  colorProcessor: getColor,
+  xExtremumGetter: getExtremumX,
+  yExtremumGetter: getExtremumY,
+};
diff --git a/packages/x-charts/src/ChartContainer/ChartContainer.tsx b/packages/x-charts/src/ChartContainer/ChartContainer.tsx
index a61f479e54510..239e0f945eac4 100644
--- a/packages/x-charts/src/ChartContainer/ChartContainer.tsx
+++ b/packages/x-charts/src/ChartContainer/ChartContainer.tsx
@@ -15,16 +15,24 @@ import {
 } from '../context/CartesianContextProvider';
 import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients';
 import { HighlightedProvider, HighlightedProviderProps } from '../context';
+import { ChartsPluginTypes } from '../models/plugin';
+import { ChartSeriesType } from '../models/seriesType/config';
+import { usePluginsMerge } from './usePluginsMerge';
 
-export type ChartContainerProps = Omit<
+export type ChartContainerProps<T extends ChartSeriesType = ChartSeriesType> = Omit<
   ChartsSurfaceProps &
-    SeriesContextProviderProps &
+    Omit<SeriesContextProviderProps, 'seriesFormatters'> &
     Omit<DrawingProviderProps, 'svgRef'> &
-    CartesianContextProviderProps &
+    Omit<CartesianContextProviderProps, 'xExtremumGetters' | 'yExtremumGetters'> &
     HighlightedProviderProps,
   'children'
 > & {
   children?: React.ReactNode;
+  /**
+   * An array of plugins defining how to preprocess data.
+   * If not provided, the container supports line, bar, scatter and pie charts.
+   */
+  plugins?: ChartsPluginTypes<T>[];
 };
 
 const ChartContainer = React.forwardRef(function ChartContainer(props: ChartContainerProps, ref) {
@@ -43,16 +51,23 @@ const ChartContainer = React.forwardRef(function ChartContainer(props: ChartCont
     disableAxisListener,
     highlightedItem,
     onHighlightChange,
+    plugins,
     children,
   } = props;
   const svgRef = React.useRef<SVGSVGElement>(null);
   const handleRef = useForkRef(ref, svgRef);
 
+  const { seriesFormatters } = usePluginsMerge(plugins);
   useReducedMotion(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
 
   return (
     <DrawingProvider width={width} height={height} margin={margin} svgRef={svgRef}>
-      <SeriesContextProvider series={series} colors={colors} dataset={dataset}>
+      <SeriesContextProvider
+        series={series}
+        colors={colors}
+        dataset={dataset}
+        seriesFormatters={seriesFormatters}
+      >
         <CartesianContextProvider xAxis={xAxis} yAxis={yAxis} dataset={dataset}>
           <InteractionProvider>
             <HighlightedProvider
diff --git a/packages/x-charts/src/ChartContainer/defaultPlugins.ts b/packages/x-charts/src/ChartContainer/defaultPlugins.ts
new file mode 100644
index 0000000000000..8b648863eb511
--- /dev/null
+++ b/packages/x-charts/src/ChartContainer/defaultPlugins.ts
@@ -0,0 +1,6 @@
+import { plugin as barPlugin } from '../BarChart/plugin';
+import { plugin as scatterPlugin } from '../ScatterChart/plugin';
+import { plugin as linePlugin } from '../LineChart/plugin';
+import { plugin as piePlugin } from '../PieChart/plugin';
+
+export const defaultPlugins = [barPlugin, scatterPlugin, linePlugin, piePlugin];
diff --git a/packages/x-charts/src/ChartContainer/usePluginsMerge.ts b/packages/x-charts/src/ChartContainer/usePluginsMerge.ts
new file mode 100644
index 0000000000000..82e4293dbbab4
--- /dev/null
+++ b/packages/x-charts/src/ChartContainer/usePluginsMerge.ts
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { ChartsPluginTypes, ColorProcessorsConfig } from '../models';
+import { ChartSeriesType } from '../models/seriesType/config';
+import { ExtremumGettersConfig } from '../context/CartesianContextProvider';
+import { SeriesFormatterConfig } from '../context/SeriesContextProvider';
+import { defaultPlugins } from './defaultPlugins';
+
+export function usePluginsMerge<T extends ChartSeriesType>(plugins?: ChartsPluginTypes<T>[]) {
+  const defaultizedPlugins = plugins ?? defaultPlugins;
+
+  return React.useMemo(() => {
+    const seriesFormatters: SeriesFormatterConfig<ChartSeriesType> = {};
+    const colorProcessors: ColorProcessorsConfig<ChartSeriesType> = {};
+    const xExtremumGetters: ExtremumGettersConfig<ChartSeriesType> = {};
+    const yExtremumGetters: ExtremumGettersConfig<ChartSeriesType> = {};
+
+    for (let i = 0; i < defaultizedPlugins.length; i += 1) {
+      const plugin = defaultizedPlugins[i];
+
+      // To remove those any we will need to solve this union discrimination issue:
+      // https://www.typescriptlang.org/play/?#code/FDAuE8AcFMAIDkCuBbARtATgYQPYDsAzASwHNYBeWAb2FlgGsi8ATALlgHI8V0MOBuWrBwwMAQ1A4M7ABQAPdtzSYAlBQB8sJb0EBfEBBiwAyqAxMSuQqQrUhjFuw4BnMxYFCRmCVNkLYruZ4JGrkmoEWeiAAxviuWqhWxCTsSMrY+Mm2VAxMbLAARNqYBQA0wqI+0rByGrAATLAAVDWw+rF48YFJpOymQZaZNpQ5DvkFEcFlFd6S1bVhsAAG9S0AJFRyukttMXGgsB3JzrYA2niJQyTl3VcAugZQcADylXPOALJikJAW2ULFDAAflSPEwPRIpw4XnEcw4d1KQkmJBBJjcwQhUJhVXhiN0gmAHXi2LmXx+FnYr1mUk+31+wWy+JABCksBkABtoAcjjYcARDldnGoaCA6AB6MWwADqUnoJxw9FgRH5AHc4L9ooroGJogALQ5iZxwPJEABuRGYiDE7PASJVRFAerZPJIADoxsKhHRooa4FwwXxWF66DNYVIyfTIS73Xk7rZoySpIIQyHUBhtfRkyGfUbOMiOEGU3RExgIxZTtGxnHKAm3kng8xoAQxIh2aBC0W0xms-pvftqLkWOUS2141chBLYABJDimuB4HBKxtiWBiVA4RAHXU4FWwSSwTkHAAqxlgiBYmFcYhYAusbrGq5vtepGFX6YPTHo0GYnjrpbp5ZVrYJZ6EAA
+      seriesFormatters[plugin.seriesType] = plugin.seriesFormatter as any;
+
+      colorProcessors[plugin.seriesType] = plugin.colorProcessor as any;
+
+      if (plugin.xExtremumGetter) {
+        xExtremumGetters[plugin.seriesType] = plugin.xExtremumGetter as any;
+      }
+
+      if (plugin.yExtremumGetter) {
+        yExtremumGetters[plugin.seriesType] = plugin.yExtremumGetter as any;
+      }
+    }
+    return {
+      seriesFormatters,
+      colorProcessors,
+      xExtremumGetters,
+      yExtremumGetters,
+    };
+  }, [defaultizedPlugins]);
+}
diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx
index dc8b7d5fe0f4a..3459111e8311f 100644
--- a/packages/x-charts/src/LineChart/LineChart.tsx
+++ b/packages/x-charts/src/LineChart/LineChart.tsx
@@ -64,7 +64,7 @@ export interface LineChartSlotProps
     ChartsOverlaySlotProps {}
 
 export interface LineChartProps
-  extends Omit<ResponsiveChartContainerProps, 'series'>,
+  extends Omit<ResponsiveChartContainerProps, 'series' | 'plugins'>,
     Omit<ChartsAxisProps, 'slots' | 'slotProps'>,
     Omit<ChartsOverlayProps, 'slots' | 'slotProps'>,
     ChartsOnAxisClickHandlerProps {
diff --git a/packages/x-charts/src/LineChart/formatter.ts b/packages/x-charts/src/LineChart/formatter.ts
index 8a7cb0f645894..95a2af39db278 100644
--- a/packages/x-charts/src/LineChart/formatter.ts
+++ b/packages/x-charts/src/LineChart/formatter.ts
@@ -6,7 +6,7 @@ import {
   DatasetType,
   Formatter,
 } from '../models/seriesType/config';
-import defaultizeValueFormatter from '../internals/defaultizeValueFormatter';
+import { defaultizeValueFormatter } from '../internals/defaultizeValueFormatter';
 import { DefaultizedProps } from '../models/helpers';
 import { SeriesId } from '../models/seriesType/common';
 
diff --git a/packages/x-charts/src/LineChart/getColor.ts b/packages/x-charts/src/LineChart/getColor.ts
index af924c4fc574c..07207a177cf9d 100644
--- a/packages/x-charts/src/LineChart/getColor.ts
+++ b/packages/x-charts/src/LineChart/getColor.ts
@@ -3,11 +3,11 @@ import { DefaultizedLineSeriesType } from '../models/seriesType/line';
 
 export default function getColor(
   series: DefaultizedLineSeriesType,
-  xAxis: AxisDefaultized,
-  yAxis: AxisDefaultized,
+  xAxis?: AxisDefaultized,
+  yAxis?: AxisDefaultized,
 ) {
-  const yColorScale = yAxis.colorScale;
-  const xColorScale = xAxis.colorScale;
+  const yColorScale = yAxis?.colorScale;
+  const xColorScale = xAxis?.colorScale;
 
   if (yColorScale) {
     return (dataIndex: number) => {
diff --git a/packages/x-charts/src/LineChart/plugin.ts b/packages/x-charts/src/LineChart/plugin.ts
new file mode 100644
index 0000000000000..bc799c54b1ec7
--- /dev/null
+++ b/packages/x-charts/src/LineChart/plugin.ts
@@ -0,0 +1,12 @@
+import { ChartsPluginType } from '../models/plugin';
+import { getExtremumX, getExtremumY } from './extremums';
+import formatter from './formatter';
+import getColor from './getColor';
+
+export const plugin: ChartsPluginType<'line'> = {
+  seriesType: 'line',
+  colorProcessor: getColor,
+  seriesFormatter: formatter,
+  xExtremumGetter: getExtremumX,
+  yExtremumGetter: getExtremumY,
+};
diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx
index 1cc829f48f0c4..95a05af37c6ed 100644
--- a/packages/x-charts/src/PieChart/PieChart.tsx
+++ b/packages/x-charts/src/PieChart/PieChart.tsx
@@ -52,7 +52,7 @@ export interface PieChartSlotProps
     ChartsOverlaySlotProps {}
 
 export interface PieChartProps
-  extends Omit<ResponsiveChartContainerProps, 'series' | 'leftAxis' | 'bottomAxis'>,
+  extends Omit<ResponsiveChartContainerProps, 'series' | 'leftAxis' | 'bottomAxis' | 'plugins'>,
     Omit<ChartsAxisProps, 'slots' | 'slotProps'>,
     Omit<ChartsOverlayProps, 'slots' | 'slotProps'>,
     Pick<PiePlotProps, 'skipAnimation'> {
diff --git a/packages/x-charts/src/PieChart/plugin.ts b/packages/x-charts/src/PieChart/plugin.ts
new file mode 100644
index 0000000000000..53962ded67649
--- /dev/null
+++ b/packages/x-charts/src/PieChart/plugin.ts
@@ -0,0 +1,9 @@
+import { ChartsPluginType } from '../models/plugin';
+import formatter from './formatter';
+import getColor from './getColor';
+
+export const plugin: ChartsPluginType<'pie'> = {
+  seriesType: 'pie',
+  colorProcessor: getColor,
+  seriesFormatter: formatter,
+};
diff --git a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx
index 3714d73b6040a..e1882708f893a 100644
--- a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx
+++ b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx
@@ -103,6 +103,11 @@ ResponsiveChartContainer.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: PropTypes.func,
+  /**
+   * An array of plugins defining how to preprocess data.
+   * If not provided, the container supports line, bar, scatter and pie charts.
+   */
+  plugins: PropTypes.arrayOf(PropTypes.object),
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx
index ab66f226fd038..f05493ed857c5 100644
--- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx
+++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx
@@ -54,7 +54,7 @@ export interface ScatterChartSlotProps
     ChartsOverlaySlotProps {}
 
 export interface ScatterChartProps
-  extends Omit<ResponsiveChartContainerProps, 'series'>,
+  extends Omit<ResponsiveChartContainerProps, 'series' | 'plugins'>,
     Omit<ZAxisContextProviderProps, 'children' | 'dataset'>,
     Omit<ChartsAxisProps, 'slots' | 'slotProps'>,
     Omit<ChartsOverlayProps, 'slots' | 'slotProps'>,
diff --git a/packages/x-charts/src/ScatterChart/formatter.ts b/packages/x-charts/src/ScatterChart/formatter.ts
index d0db1a6ad0a5a..4f212f9afa8ef 100644
--- a/packages/x-charts/src/ScatterChart/formatter.ts
+++ b/packages/x-charts/src/ScatterChart/formatter.ts
@@ -1,4 +1,4 @@
-import defaultizeValueFormatter from '../internals/defaultizeValueFormatter';
+import { defaultizeValueFormatter } from '../internals/defaultizeValueFormatter';
 import { Formatter } from '../models/seriesType/config';
 
 const formatter: Formatter<'scatter'> = ({ series, seriesOrder }) => {
diff --git a/packages/x-charts/src/ScatterChart/getColor.ts b/packages/x-charts/src/ScatterChart/getColor.ts
index 79166556b1437..273a8b37c7042 100644
--- a/packages/x-charts/src/ScatterChart/getColor.ts
+++ b/packages/x-charts/src/ScatterChart/getColor.ts
@@ -4,13 +4,13 @@ import { DefaultizedScatterSeriesType } from '../models/seriesType/scatter';
 
 export default function getColor(
   series: DefaultizedScatterSeriesType,
-  xAxis: AxisDefaultized,
-  yAxis: AxisDefaultized,
+  xAxis?: AxisDefaultized,
+  yAxis?: AxisDefaultized,
   zAxis?: ZAxisDefaultized,
 ) {
   const zColorScale = zAxis?.colorScale;
-  const yColorScale = yAxis.colorScale;
-  const xColorScale = xAxis.colorScale;
+  const yColorScale = yAxis?.colorScale;
+  const xColorScale = xAxis?.colorScale;
 
   if (zColorScale) {
     return (dataIndex: number) => {
diff --git a/packages/x-charts/src/ScatterChart/plugin.ts b/packages/x-charts/src/ScatterChart/plugin.ts
new file mode 100644
index 0000000000000..ca77573981a1b
--- /dev/null
+++ b/packages/x-charts/src/ScatterChart/plugin.ts
@@ -0,0 +1,12 @@
+import { ChartsPluginType } from '../models/plugin';
+import { getExtremumX, getExtremumY } from './extremums';
+import formatter from './formatter';
+import getColor from './getColor';
+
+export const plugin: ChartsPluginType<'scatter'> = {
+  seriesType: 'scatter',
+  seriesFormatter: formatter,
+  colorProcessor: getColor,
+  xExtremumGetter: getExtremumX,
+  yExtremumGetter: getExtremumY,
+};
diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
index 0e1431d1de4a7..7867bb862bccc 100644
--- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
+++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
@@ -40,7 +40,7 @@ export interface SparkLineChartSlotProps
     ChartsTooltipSlotProps {}
 
 export interface SparkLineChartProps
-  extends Omit<ResponsiveChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'margin'> {
+  extends Omit<ResponsiveChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'margin' | 'plugins'> {
   /**
    * The xAxis configuration.
    * Notice it is a single configuration object, not an array of configuration.
diff --git a/packages/x-charts/src/context/CartesianContextProvider.tsx b/packages/x-charts/src/context/CartesianContextProvider.tsx
index a6eaeb90f9aa5..3a0a22b430357 100644
--- a/packages/x-charts/src/context/CartesianContextProvider.tsx
+++ b/packages/x-charts/src/context/CartesianContextProvider.tsx
@@ -18,6 +18,7 @@ import { SeriesContext } from './SeriesContextProvider';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import {
   CartesianChartSeriesType,
+  ChartSeriesType,
   ChartSeries,
   DatasetType,
   ExtremumGetter,
@@ -29,6 +30,10 @@ import { useDrawingArea } from '../hooks/useDrawingArea';
 import { SeriesId } from '../models/seriesType/common';
 import { getColorScale, getOrdinalColorScale } from '../internals/colorScale';
 
+export type ExtremumGettersConfig<T extends ChartSeriesType = CartesianChartSeriesType> = {
+  [K in T]?: ExtremumGetter<K>;
+};
+
 export type CartesianContextProviderProps = {
   /**
    * The configuration of the x-axes.
diff --git a/packages/x-charts/src/context/SeriesContextProvider.tsx b/packages/x-charts/src/context/SeriesContextProvider.tsx
index e39746611bd4f..4a40379a81b7c 100644
--- a/packages/x-charts/src/context/SeriesContextProvider.tsx
+++ b/packages/x-charts/src/context/SeriesContextProvider.tsx
@@ -1,9 +1,5 @@
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
-import barSeriesFormatter from '../BarChart/formatter';
-import scatterSeriesFormatter from '../ScatterChart/formatter';
-import lineSeriesFormatter from '../LineChart/formatter';
-import pieSeriesFormatter from '../PieChart/formatter';
 import { AllSeriesType } from '../models/seriesType';
 import { defaultizeColor } from '../internals/defaultizeColor';
 import {
@@ -14,19 +10,29 @@ import {
 } from '../models/seriesType/config';
 import { ChartsColorPalette, blueberryTwilightPalette } from '../colorPalettes';
 
-export type SeriesContextProviderProps = {
+export type SeriesFormatterType<T extends ChartSeriesType> = (
+  series: AllSeriesType<T>[],
+  colors: string[],
+  dataset?: DatasetType,
+) => { [type in T]?: FormatterResult<type> };
+
+export type SeriesContextProviderProps<T extends ChartSeriesType = ChartSeriesType> = {
   dataset?: DatasetType;
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
    * Please refer to the appropriate docs page to learn more about it.
    */
-  series: AllSeriesType[];
+  series: AllSeriesType<T>[];
   /**
    * Color palette used to colorize multiple series.
    * @default blueberryTwilightPalette
    */
   colors?: ChartsColorPalette;
+  /**
+   * Preprocessors for each series types.
+   */
+  seriesFormatters: SeriesFormatterConfig<T>;
   children: React.ReactNode;
 };
 
@@ -38,13 +44,9 @@ if (process.env.NODE_ENV !== 'production') {
   SeriesContext.displayName = 'SeriesContext';
 }
 
-const seriesTypeFormatter: {
-  [type in ChartSeriesType]?: (series: any, dataset?: DatasetType) => any;
-} = {
-  bar: barSeriesFormatter,
-  scatter: scatterSeriesFormatter,
-  line: lineSeriesFormatter,
-  pie: pieSeriesFormatter,
+export type SeriesFormatterConfig<T extends ChartSeriesType = ChartSeriesType> = {
+  // TODO replace the function type by Formatter<K>
+  [K in T]?: (series: FormatterParams<K>, dataset?: DatasetType) => any;
 };
 
 /**
@@ -55,7 +57,12 @@ const seriesTypeFormatter: {
  * @param colors The color palette used to defaultize series colors
  * @returns An object structuring all the series by type.
  */
-const formatSeries = (series: AllSeriesType[], colors: string[], dataset?: DatasetType) => {
+const preprocessSeries = <T extends ChartSeriesType>(
+  series: AllSeriesType<T>[],
+  colors: string[],
+  seriesFormatters: SeriesFormatterConfig<T>,
+  dataset?: DatasetType,
+) => {
   // Group series by type
   const seriesGroups: { [type in ChartSeriesType]?: FormatterParams<type> } = {};
   series.forEach((seriesData, seriesIndex: number) => {
@@ -77,29 +84,30 @@ const formatSeries = (series: AllSeriesType[], colors: string[], dataset?: Datas
 
   const formattedSeries: FormattedSeries = {};
   // Apply formatter on a type group
-  (Object.keys(seriesTypeFormatter) as ChartSeriesType[]).forEach((type) => {
-    if (seriesGroups[type] !== undefined) {
-      formattedSeries[type] =
-        seriesTypeFormatter[type]?.(seriesGroups[type], dataset) ?? seriesGroups[type];
+  (Object.keys(seriesFormatters) as T[]).forEach((type) => {
+    const group = seriesGroups[type];
+    if (group !== undefined) {
+      formattedSeries[type] = seriesFormatters[type]?.(group, dataset) ?? seriesGroups[type];
     }
   });
 
   return formattedSeries;
 };
 
-function SeriesContextProvider(props: SeriesContextProviderProps) {
-  const { series, dataset, colors = blueberryTwilightPalette, children } = props;
+function SeriesContextProvider<T extends ChartSeriesType>(props: SeriesContextProviderProps<T>) {
+  const { series, dataset, colors = blueberryTwilightPalette, seriesFormatters, children } = props;
 
   const theme = useTheme();
 
   const formattedSeries = React.useMemo(
     () =>
-      formatSeries(
+      preprocessSeries(
         series,
         typeof colors === 'function' ? colors(theme.palette.mode) : colors,
+        seriesFormatters,
         dataset as DatasetType<number>,
       ),
-    [series, colors, theme.palette.mode, dataset],
+    [series, colors, theme.palette.mode, seriesFormatters, dataset],
   );
 
   return <SeriesContext.Provider value={formattedSeries}>{children}</SeriesContext.Provider>;
diff --git a/packages/x-charts/src/internals/defaultizeValueFormatter.ts b/packages/x-charts/src/internals/defaultizeValueFormatter.ts
index b9fa91ba88103..22b7040e0f1cb 100644
--- a/packages/x-charts/src/internals/defaultizeValueFormatter.ts
+++ b/packages/x-charts/src/internals/defaultizeValueFormatter.ts
@@ -1,6 +1,6 @@
 import { SeriesId, SeriesValueFormatter } from '../models/seriesType/common';
 
-function defaultizeValueFormatter<
+export function defaultizeValueFormatter<
   TValue,
   ISeries extends { valueFormatter?: SeriesValueFormatter<TValue> },
 >(
@@ -19,5 +19,3 @@ function defaultizeValueFormatter<
   });
   return defaultizedSeries;
 }
-
-export default defaultizeValueFormatter;
diff --git a/packages/x-charts/src/models/index.ts b/packages/x-charts/src/models/index.ts
index abb5d36002f65..9f82bffa3f6ad 100644
--- a/packages/x-charts/src/models/index.ts
+++ b/packages/x-charts/src/models/index.ts
@@ -1,6 +1,7 @@
 export * from './seriesType';
 export * from './layout';
 export * from './stacking';
+export * from './plugin';
 export type {
   AxisConfig,
   ChartsYAxisProps,
diff --git a/packages/x-charts/src/models/plugin.ts b/packages/x-charts/src/models/plugin.ts
new file mode 100644
index 0000000000000..176f5abcc3571
--- /dev/null
+++ b/packages/x-charts/src/models/plugin.ts
@@ -0,0 +1,27 @@
+import { ChartSeriesType, ExtremumGetter, Formatter } from './seriesType/config';
+import { AxisDefaultized } from './axis';
+import { DefaultizedSeriesType } from './seriesType';
+import { ZAxisDefaultized } from './z-axis';
+
+type ColorProcessor<T extends ChartSeriesType> = (
+  series: DefaultizedSeriesType<T>,
+  xAxis?: AxisDefaultized,
+  yAxis?: AxisDefaultized,
+  zAxis?: ZAxisDefaultized,
+) => (dataIndex: number) => string;
+
+export type ColorProcessorsConfig<T extends ChartSeriesType> = {
+  [Key in T]?: ColorProcessor<Key>;
+};
+
+export type ChartsPluginType<T extends ChartSeriesType> = {
+  seriesType: T;
+  seriesFormatter: Formatter<T>;
+  colorProcessor: ColorProcessor<T>;
+  xExtremumGetter?: ExtremumGetter<T>;
+  yExtremumGetter?: ExtremumGetter<T>;
+};
+
+export type ChartsPluginTypes<T extends ChartSeriesType> = {
+  [Key in T]: ChartsPluginType<Key>;
+}[T];

From beab53794f73b735467bf880188c5ef8cd413920 Mon Sep 17 00:00:00 2001
From: alexandre <alex.fauquette@gmail.com>
Date: Wed, 5 Jun 2024 14:48:29 +0200
Subject: [PATCH 3/5] fixes

---
 docs/pages/x/api/charts/chart-container.json  |  6 ++++
 .../charts/responsive-chart-container.json    |  6 ++++
 .../chart-container/chart-container.json      |  3 ++
 .../responsive-chart-container.json           |  3 ++
 .../src/ChartContainer/ChartContainer.tsx     | 36 +++++++++++++++++++
 .../ResponsiveChartContainer.tsx              | 33 ++++++++++++++++-
 .../useHighlighted.test.tsx                   |  2 +-
 .../x-charts/src/hooks/useSeries.test.tsx     |  6 +++-
 .../x-charts/src/models/seriesType/config.ts  |  2 +-
 scripts/x-charts.exports.json                 |  3 ++
 10 files changed, 96 insertions(+), 4 deletions(-)

diff --git a/docs/pages/x/api/charts/chart-container.json b/docs/pages/x/api/charts/chart-container.json
index a4fd61c1cc3d3..249706de72d93 100644
--- a/docs/pages/x/api/charts/chart-container.json
+++ b/docs/pages/x/api/charts/chart-container.json
@@ -32,6 +32,12 @@
         "describedArgs": ["highlightedItem"]
       }
     },
+    "plugins": {
+      "type": {
+        "name": "arrayOf",
+        "description": "Array&lt;{ colorProcessor: func, seriesFormatter: func, seriesType: 'bar', xExtremumGetter?: func, yExtremumGetter?: func }<br>&#124;&nbsp;{ colorProcessor: func, seriesFormatter: func, seriesType: 'line', xExtremumGetter?: func, yExtremumGetter?: func }<br>&#124;&nbsp;{ colorProcessor: func, seriesFormatter: func, seriesType: 'scatter', xExtremumGetter?: func, yExtremumGetter?: func }<br>&#124;&nbsp;{ colorProcessor: func, seriesFormatter: func, seriesType: 'pie', xExtremumGetter?: func, yExtremumGetter?: func }&gt;"
+      }
+    },
     "xAxis": {
       "type": {
         "name": "arrayOf",
diff --git a/docs/pages/x/api/charts/responsive-chart-container.json b/docs/pages/x/api/charts/responsive-chart-container.json
index fb64c42ff23da..d3b1b63830ea7 100644
--- a/docs/pages/x/api/charts/responsive-chart-container.json
+++ b/docs/pages/x/api/charts/responsive-chart-container.json
@@ -31,6 +31,12 @@
         "describedArgs": ["highlightedItem"]
       }
     },
+    "plugins": {
+      "type": {
+        "name": "arrayOf",
+        "description": "Array&lt;{ colorProcessor: func, seriesFormatter: func, seriesType: 'bar', xExtremumGetter?: func, yExtremumGetter?: func }<br>&#124;&nbsp;{ colorProcessor: func, seriesFormatter: func, seriesType: 'line', xExtremumGetter?: func, yExtremumGetter?: func }<br>&#124;&nbsp;{ colorProcessor: func, seriesFormatter: func, seriesType: 'scatter', xExtremumGetter?: func, yExtremumGetter?: func }<br>&#124;&nbsp;{ colorProcessor: func, seriesFormatter: func, seriesType: 'pie', xExtremumGetter?: func, yExtremumGetter?: func }&gt;"
+      }
+    },
     "width": { "type": { "name": "number" } },
     "xAxis": {
       "type": {
diff --git a/docs/translations/api-docs/charts/chart-container/chart-container.json b/docs/translations/api-docs/charts/chart-container/chart-container.json
index 9e58aa2904d70..625af15ee0311 100644
--- a/docs/translations/api-docs/charts/chart-container/chart-container.json
+++ b/docs/translations/api-docs/charts/chart-container/chart-container.json
@@ -19,6 +19,9 @@
       "description": "The callback fired when the highlighted item changes.",
       "typeDescriptions": { "highlightedItem": "The newly highlighted item." }
     },
+    "plugins": {
+      "description": "An array of plugins defining how to preprocess data. If not provided, the container supports line, bar, scatter and pie charts."
+    },
     "series": {
       "description": "The array of series to display. Each type of series has its own specificity. Please refer to the appropriate docs page to learn more about it."
     },
diff --git a/docs/translations/api-docs/charts/responsive-chart-container/responsive-chart-container.json b/docs/translations/api-docs/charts/responsive-chart-container/responsive-chart-container.json
index 66c192844541a..812a9391959a6 100644
--- a/docs/translations/api-docs/charts/responsive-chart-container/responsive-chart-container.json
+++ b/docs/translations/api-docs/charts/responsive-chart-container/responsive-chart-container.json
@@ -21,6 +21,9 @@
       "description": "The callback fired when the highlighted item changes.",
       "typeDescriptions": { "highlightedItem": "The newly highlighted item." }
     },
+    "plugins": {
+      "description": "An array of plugins defining how to preprocess data. If not provided, the container supports line, bar, scatter and pie charts."
+    },
     "series": {
       "description": "The array of series to display. Each type of series has its own specificity. Please refer to the appropriate docs page to learn more about it."
     },
diff --git a/packages/x-charts/src/ChartContainer/ChartContainer.tsx b/packages/x-charts/src/ChartContainer/ChartContainer.tsx
index 239e0f945eac4..e39211247e509 100644
--- a/packages/x-charts/src/ChartContainer/ChartContainer.tsx
+++ b/packages/x-charts/src/ChartContainer/ChartContainer.tsx
@@ -146,6 +146,42 @@ ChartContainer.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: PropTypes.func,
+  /**
+   * An array of plugins defining how to preprocess data.
+   * If not provided, the container supports line, bar, scatter and pie charts.
+   */
+  plugins: PropTypes.arrayOf(
+    PropTypes.oneOfType([
+      PropTypes.shape({
+        colorProcessor: PropTypes.func.isRequired,
+        seriesFormatter: PropTypes.func.isRequired,
+        seriesType: PropTypes.oneOf(['bar']).isRequired,
+        xExtremumGetter: PropTypes.func,
+        yExtremumGetter: PropTypes.func,
+      }),
+      PropTypes.shape({
+        colorProcessor: PropTypes.func.isRequired,
+        seriesFormatter: PropTypes.func.isRequired,
+        seriesType: PropTypes.oneOf(['line']).isRequired,
+        xExtremumGetter: PropTypes.func,
+        yExtremumGetter: PropTypes.func,
+      }),
+      PropTypes.shape({
+        colorProcessor: PropTypes.func.isRequired,
+        seriesFormatter: PropTypes.func.isRequired,
+        seriesType: PropTypes.oneOf(['scatter']).isRequired,
+        xExtremumGetter: PropTypes.func,
+        yExtremumGetter: PropTypes.func,
+      }),
+      PropTypes.shape({
+        colorProcessor: PropTypes.func.isRequired,
+        seriesFormatter: PropTypes.func.isRequired,
+        seriesType: PropTypes.oneOf(['pie']).isRequired,
+        xExtremumGetter: PropTypes.func,
+        yExtremumGetter: PropTypes.func,
+      }),
+    ]).isRequired,
+  ),
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
diff --git a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx
index e1882708f893a..962a3dcafd727 100644
--- a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx
+++ b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx
@@ -107,7 +107,38 @@ ResponsiveChartContainer.propTypes = {
    * An array of plugins defining how to preprocess data.
    * If not provided, the container supports line, bar, scatter and pie charts.
    */
-  plugins: PropTypes.arrayOf(PropTypes.object),
+  plugins: PropTypes.arrayOf(
+    PropTypes.oneOfType([
+      PropTypes.shape({
+        colorProcessor: PropTypes.func.isRequired,
+        seriesFormatter: PropTypes.func.isRequired,
+        seriesType: PropTypes.oneOf(['bar']).isRequired,
+        xExtremumGetter: PropTypes.func,
+        yExtremumGetter: PropTypes.func,
+      }),
+      PropTypes.shape({
+        colorProcessor: PropTypes.func.isRequired,
+        seriesFormatter: PropTypes.func.isRequired,
+        seriesType: PropTypes.oneOf(['line']).isRequired,
+        xExtremumGetter: PropTypes.func,
+        yExtremumGetter: PropTypes.func,
+      }),
+      PropTypes.shape({
+        colorProcessor: PropTypes.func.isRequired,
+        seriesFormatter: PropTypes.func.isRequired,
+        seriesType: PropTypes.oneOf(['scatter']).isRequired,
+        xExtremumGetter: PropTypes.func,
+        yExtremumGetter: PropTypes.func,
+      }),
+      PropTypes.shape({
+        colorProcessor: PropTypes.func.isRequired,
+        seriesFormatter: PropTypes.func.isRequired,
+        seriesType: PropTypes.oneOf(['pie']).isRequired,
+        xExtremumGetter: PropTypes.func,
+        yExtremumGetter: PropTypes.func,
+      }),
+    ]).isRequired,
+  ),
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
diff --git a/packages/x-charts/src/context/HighlightedProvider/useHighlighted.test.tsx b/packages/x-charts/src/context/HighlightedProvider/useHighlighted.test.tsx
index 03812aae6959a..1ed2006624560 100644
--- a/packages/x-charts/src/context/HighlightedProvider/useHighlighted.test.tsx
+++ b/packages/x-charts/src/context/HighlightedProvider/useHighlighted.test.tsx
@@ -42,7 +42,7 @@ describe('useHighlighted', () => {
 
   it('should not throw an error when parent context is present', () => {
     const { getByText } = render(
-      <SeriesContextProvider series={[]}>
+      <SeriesContextProvider series={[]} seriesFormatters={{}}>
         <HighlightedProvider highlightedItem={{ seriesId: 'test-id' }}>
           <UseHighlighted />
         </HighlightedProvider>
diff --git a/packages/x-charts/src/hooks/useSeries.test.tsx b/packages/x-charts/src/hooks/useSeries.test.tsx
index 392bece9582b2..0e2d247a0b406 100644
--- a/packages/x-charts/src/hooks/useSeries.test.tsx
+++ b/packages/x-charts/src/hooks/useSeries.test.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { ErrorBoundary, createRenderer } from '@mui/internal-test-utils';
 import { useSeries } from './useSeries';
+import barFormatter from '../BarChart/formatter';
 import { SeriesContextProvider } from '../context/SeriesContextProvider';
 
 function UseSeries() {
@@ -41,7 +42,10 @@ describe('useSeries', () => {
 
   it('should not throw an error when parent context is present', () => {
     const { getByText } = render(
-      <SeriesContextProvider series={[{ type: 'bar', id: 'test-id', data: [1, 2] }]}>
+      <SeriesContextProvider
+        series={[{ type: 'bar', id: 'test-id', data: [1, 2] }]}
+        seriesFormatters={{ bar: barFormatter }}
+      >
         <UseSeries />
       </SeriesContextProvider>,
     );
diff --git a/packages/x-charts/src/models/seriesType/config.ts b/packages/x-charts/src/models/seriesType/config.ts
index 952afd3ee2087..49c0e69736dab 100644
--- a/packages/x-charts/src/models/seriesType/config.ts
+++ b/packages/x-charts/src/models/seriesType/config.ts
@@ -10,7 +10,7 @@ import { SeriesId } from './common';
 export interface ChartsSeriesConfig {
   bar: {
     /**
-     * Series type when passed to the formatter (some ids are defaultised to simplify the DX)
+     * Series type when passed to the formatter (some ids are defaultized to simplify the DX)
      */
     seriesInput: DefaultizedProps<BarSeriesType, 'id'> & { color: string };
     /**
diff --git a/scripts/x-charts.exports.json b/scripts/x-charts.exports.json
index b474cb1075ef4..22e3d6404aefb 100644
--- a/scripts/x-charts.exports.json
+++ b/scripts/x-charts.exports.json
@@ -92,6 +92,8 @@
   { "name": "ChartsOnAxisClickHandler", "kind": "Function" },
   { "name": "ChartsOnAxisClickHandlerProps", "kind": "Interface" },
   { "name": "ChartsPieSorting", "kind": "TypeAlias" },
+  { "name": "ChartsPluginType", "kind": "TypeAlias" },
+  { "name": "ChartsPluginTypes", "kind": "TypeAlias" },
   { "name": "ChartsReferenceLine", "kind": "Function" },
   { "name": "ChartsReferenceLineClasses", "kind": "Interface" },
   { "name": "ChartsReferenceLineClassKey", "kind": "TypeAlias" },
@@ -116,6 +118,7 @@
   { "name": "cheerfulFiestaPalette", "kind": "Variable" },
   { "name": "cheerfulFiestaPaletteDark", "kind": "Variable" },
   { "name": "cheerfulFiestaPaletteLight", "kind": "Variable" },
+  { "name": "ColorProcessorsConfig", "kind": "TypeAlias" },
   { "name": "ComputedPieRadius", "kind": "Interface" },
   { "name": "ContinuousScaleName", "kind": "TypeAlias" },
   { "name": "CurveType", "kind": "TypeAlias" },

From e4da84c0c12918a8f781a850d9d979d4f5cda671 Mon Sep 17 00:00:00 2001
From: alexandre <alex.fauquette@gmail.com>
Date: Thu, 6 Jun 2024 10:05:37 +0200
Subject: [PATCH 4/5] typo

---
 packages/x-charts/src/models/seriesType/config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-charts/src/models/seriesType/config.ts b/packages/x-charts/src/models/seriesType/config.ts
index 49c0e69736dab..6ae2346499c8e 100644
--- a/packages/x-charts/src/models/seriesType/config.ts
+++ b/packages/x-charts/src/models/seriesType/config.ts
@@ -10,7 +10,7 @@ import { SeriesId } from './common';
 export interface ChartsSeriesConfig {
   bar: {
     /**
-     * Series type when passed to the formatter (some ids are defaultized to simplify the DX)
+     * Series type when passed to the formatter (some ids are given default values to simplify the DX)
      */
     seriesInput: DefaultizedProps<BarSeriesType, 'id'> & { color: string };
     /**

From 7dd85def2ec1d820a3277a5602115eedb557ae27 Mon Sep 17 00:00:00 2001
From: alexandre <alex.fauquette@gmail.com>
Date: Thu, 6 Jun 2024 10:06:43 +0200
Subject: [PATCH 5/5] remove plugins from API page documentation

---
 docs/pages/x/api/charts/chart-container.json  |  7 +---
 .../charts/responsive-chart-container.json    |  7 +---
 docs/scripts/generateProptypes.ts             |  1 +
 .../src/ChartContainer/ChartContainer.tsx     | 33 +------------------
 .../ResponsiveChartContainer.tsx              | 33 +------------------
 5 files changed, 5 insertions(+), 76 deletions(-)

diff --git a/docs/pages/x/api/charts/chart-container.json b/docs/pages/x/api/charts/chart-container.json
index 249706de72d93..d033760ead385 100644
--- a/docs/pages/x/api/charts/chart-container.json
+++ b/docs/pages/x/api/charts/chart-container.json
@@ -32,12 +32,7 @@
         "describedArgs": ["highlightedItem"]
       }
     },
-    "plugins": {
-      "type": {
-        "name": "arrayOf",
-        "description": "Array&lt;{ colorProcessor: func, seriesFormatter: func, seriesType: 'bar', xExtremumGetter?: func, yExtremumGetter?: func }<br>&#124;&nbsp;{ colorProcessor: func, seriesFormatter: func, seriesType: 'line', xExtremumGetter?: func, yExtremumGetter?: func }<br>&#124;&nbsp;{ colorProcessor: func, seriesFormatter: func, seriesType: 'scatter', xExtremumGetter?: func, yExtremumGetter?: func }<br>&#124;&nbsp;{ colorProcessor: func, seriesFormatter: func, seriesType: 'pie', xExtremumGetter?: func, yExtremumGetter?: func }&gt;"
-      }
-    },
+    "plugins": { "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" } },
     "xAxis": {
       "type": {
         "name": "arrayOf",
diff --git a/docs/pages/x/api/charts/responsive-chart-container.json b/docs/pages/x/api/charts/responsive-chart-container.json
index d3b1b63830ea7..3e1b1b3ba9ada 100644
--- a/docs/pages/x/api/charts/responsive-chart-container.json
+++ b/docs/pages/x/api/charts/responsive-chart-container.json
@@ -31,12 +31,7 @@
         "describedArgs": ["highlightedItem"]
       }
     },
-    "plugins": {
-      "type": {
-        "name": "arrayOf",
-        "description": "Array&lt;{ colorProcessor: func, seriesFormatter: func, seriesType: 'bar', xExtremumGetter?: func, yExtremumGetter?: func }<br>&#124;&nbsp;{ colorProcessor: func, seriesFormatter: func, seriesType: 'line', xExtremumGetter?: func, yExtremumGetter?: func }<br>&#124;&nbsp;{ colorProcessor: func, seriesFormatter: func, seriesType: 'scatter', xExtremumGetter?: func, yExtremumGetter?: func }<br>&#124;&nbsp;{ colorProcessor: func, seriesFormatter: func, seriesType: 'pie', xExtremumGetter?: func, yExtremumGetter?: func }&gt;"
-      }
-    },
+    "plugins": { "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" } },
     "width": { "type": { "name": "number" } },
     "xAxis": {
       "type": {
diff --git a/docs/scripts/generateProptypes.ts b/docs/scripts/generateProptypes.ts
index 9cab0f8cedfeb..b43a78c8c0b3a 100644
--- a/docs/scripts/generateProptypes.ts
+++ b/docs/scripts/generateProptypes.ts
@@ -71,6 +71,7 @@ async function generateProptypes(project: XTypeScriptProject, sourceFile: string
         'topAxis',
         'leftAxis',
         'rightAxis',
+        'plugins',
       ];
       if (propsToNotResolve.includes(name)) {
         return false;
diff --git a/packages/x-charts/src/ChartContainer/ChartContainer.tsx b/packages/x-charts/src/ChartContainer/ChartContainer.tsx
index e39211247e509..3312283941f62 100644
--- a/packages/x-charts/src/ChartContainer/ChartContainer.tsx
+++ b/packages/x-charts/src/ChartContainer/ChartContainer.tsx
@@ -150,38 +150,7 @@ ChartContainer.propTypes = {
    * An array of plugins defining how to preprocess data.
    * If not provided, the container supports line, bar, scatter and pie charts.
    */
-  plugins: PropTypes.arrayOf(
-    PropTypes.oneOfType([
-      PropTypes.shape({
-        colorProcessor: PropTypes.func.isRequired,
-        seriesFormatter: PropTypes.func.isRequired,
-        seriesType: PropTypes.oneOf(['bar']).isRequired,
-        xExtremumGetter: PropTypes.func,
-        yExtremumGetter: PropTypes.func,
-      }),
-      PropTypes.shape({
-        colorProcessor: PropTypes.func.isRequired,
-        seriesFormatter: PropTypes.func.isRequired,
-        seriesType: PropTypes.oneOf(['line']).isRequired,
-        xExtremumGetter: PropTypes.func,
-        yExtremumGetter: PropTypes.func,
-      }),
-      PropTypes.shape({
-        colorProcessor: PropTypes.func.isRequired,
-        seriesFormatter: PropTypes.func.isRequired,
-        seriesType: PropTypes.oneOf(['scatter']).isRequired,
-        xExtremumGetter: PropTypes.func,
-        yExtremumGetter: PropTypes.func,
-      }),
-      PropTypes.shape({
-        colorProcessor: PropTypes.func.isRequired,
-        seriesFormatter: PropTypes.func.isRequired,
-        seriesType: PropTypes.oneOf(['pie']).isRequired,
-        xExtremumGetter: PropTypes.func,
-        yExtremumGetter: PropTypes.func,
-      }),
-    ]).isRequired,
-  ),
+  plugins: PropTypes.arrayOf(PropTypes.object),
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
diff --git a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx
index 962a3dcafd727..e1882708f893a 100644
--- a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx
+++ b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx
@@ -107,38 +107,7 @@ ResponsiveChartContainer.propTypes = {
    * An array of plugins defining how to preprocess data.
    * If not provided, the container supports line, bar, scatter and pie charts.
    */
-  plugins: PropTypes.arrayOf(
-    PropTypes.oneOfType([
-      PropTypes.shape({
-        colorProcessor: PropTypes.func.isRequired,
-        seriesFormatter: PropTypes.func.isRequired,
-        seriesType: PropTypes.oneOf(['bar']).isRequired,
-        xExtremumGetter: PropTypes.func,
-        yExtremumGetter: PropTypes.func,
-      }),
-      PropTypes.shape({
-        colorProcessor: PropTypes.func.isRequired,
-        seriesFormatter: PropTypes.func.isRequired,
-        seriesType: PropTypes.oneOf(['line']).isRequired,
-        xExtremumGetter: PropTypes.func,
-        yExtremumGetter: PropTypes.func,
-      }),
-      PropTypes.shape({
-        colorProcessor: PropTypes.func.isRequired,
-        seriesFormatter: PropTypes.func.isRequired,
-        seriesType: PropTypes.oneOf(['scatter']).isRequired,
-        xExtremumGetter: PropTypes.func,
-        yExtremumGetter: PropTypes.func,
-      }),
-      PropTypes.shape({
-        colorProcessor: PropTypes.func.isRequired,
-        seriesFormatter: PropTypes.func.isRequired,
-        seriesType: PropTypes.oneOf(['pie']).isRequired,
-        xExtremumGetter: PropTypes.func,
-        yExtremumGetter: PropTypes.func,
-      }),
-    ]).isRequired,
-  ),
+  plugins: PropTypes.arrayOf(PropTypes.object),
   /**
    * The array of series to display.
    * Each type of series has its own specificity.