From 05b502890f525b73fd9dd662066a4f180e187c70 Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
Date: Mon, 9 Dec 2024 23:21:01 +0100
Subject: [PATCH] [charts] Fix hydration missmatch (#15647)

---
 .../internals/plugins/corePlugins/useChartId/useChartId.ts | 2 +-
 .../plugins/corePlugins/useChartId/useChartId.types.ts     | 6 +++---
 packages/x-charts/src/internals/store/useCharts.ts         | 7 +++++--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/x-charts/src/internals/plugins/corePlugins/useChartId/useChartId.ts b/packages/x-charts/src/internals/plugins/corePlugins/useChartId/useChartId.ts
index bdd0f65b2021..e7f8c6d0e290 100644
--- a/packages/x-charts/src/internals/plugins/corePlugins/useChartId/useChartId.ts
+++ b/packages/x-charts/src/internals/plugins/corePlugins/useChartId/useChartId.ts
@@ -24,5 +24,5 @@ useChartId.params = {
 };
 
 useChartId.getInitialState = ({ id }) => ({
-  id: { chartId: createChartDefaultId(), providedChartId: id },
+  id: { chartId: id, providedChartId: id },
 });
diff --git a/packages/x-charts/src/internals/plugins/corePlugins/useChartId/useChartId.types.ts b/packages/x-charts/src/internals/plugins/corePlugins/useChartId/useChartId.types.ts
index 99df1544ece6..e57df61977e9 100644
--- a/packages/x-charts/src/internals/plugins/corePlugins/useChartId/useChartId.types.ts
+++ b/packages/x-charts/src/internals/plugins/corePlugins/useChartId/useChartId.types.ts
@@ -5,14 +5,14 @@ export interface UseChartIdParameters {
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
-  id?: string;
+  id: string | undefined;
 }
 
-export type UseChartIdDefaultizedParameters = UseChartIdParameters;
+export type UseChartIdDefaultizedParameters = Required<UseChartIdParameters>;
 
 export interface UseChartIdState {
   id: {
-    chartId: string;
+    chartId: string | undefined;
     providedChartId: string | undefined;
   };
 }
diff --git a/packages/x-charts/src/internals/store/useCharts.ts b/packages/x-charts/src/internals/store/useCharts.ts
index ac61c10a1804..ae0738c84879 100644
--- a/packages/x-charts/src/internals/store/useCharts.ts
+++ b/packages/x-charts/src/internals/store/useCharts.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useId from '@mui/utils/useId';
 import { ChartStore } from '../plugins/utils/ChartStore';
 import {
   ChartAnyPluginSignature,
@@ -48,7 +49,9 @@ export function useCharts<
     [inPlugins],
   );
 
-  const pluginParams = {}; // To generate when plugins use params.
+  const defaultChartId = useId();
+
+  const pluginParams = { id: defaultChartId }; // To generate when plugins use params.
   const instanceRef = React.useRef({} as ChartInstance<TSignatures>);
   const instance = instanceRef.current as ChartInstance<TSignatures>;
   const publicAPI = useChartApiInitialization<ChartPublicAPI<TSignatures>>(props.apiRef);
@@ -70,7 +73,7 @@ export function useCharts<
 
     plugins.forEach((plugin) => {
       if (plugin.getInitialState) {
-        Object.assign(initialState, plugin.getInitialState({}));
+        Object.assign(initialState, plugin.getInitialState({ id: defaultChartId }));
       }
     });
     storeRef.current = new ChartStore(initialState);