[charts] Fix hydration missmatch (#15647)

mui · Dec 9, 2024 · 05b5028 · 05b5028
1 parent 79bda06
commit 05b5028
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 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
@@ -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
@@ -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
@@ -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);