[WC-3245]: Custom Chart conditional visibility

packages/pluggableWidgets/custom-chart-web/CHANGELOG.md

@@ -10,6 +10,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - We changed how "Static" data and "Source attribute" data are merged. Previously, traces were appended as separate chart elements. Now, traces are merged by index, where source attribute values override static values for the same trace position. This enables proper customization of chart traces through dynamic data.
 
+### Fixed
+
+- We fixed an issue when conditional visibility enabled charts wouldn't re-draw as expected when the data changes.
+
 ## [1.2.3] - 2025-10-10
 
 ### Changed

packages/pluggableWidgets/custom-chart-web/src/hooks/useCustomChart.ts

@@ -32,8 +32,8 @@ export function useCustomChart(props: CustomChartContainerProps): UseCustomChart
     );
 
     const editorStore = useEditorStore({
-        dataLength: chartPropsController.data.length,
-        initState: initStateFromProps(chartPropsController.data)
+        initState: initStateFromProps(chartPropsController.data),
+        dataSourceKey: chartPropsController.data
     });
 
     useEffect(() => {

packages/shared/charts/src/helpers/EditorStore.ts

@@ -35,8 +35,8 @@ export class EditorStore {
         return () => (this.listeners = this.listeners.filter(l => l !== listener));
     }
 
-    resetData(length = 0): void {
-        this.state.data = Array(length).fill("{}");
+    resetData(freshData: JSONString[]): void {
+        this.state = { ...this.state, data: [...freshData] };
         this.emit();
     }
 

packages/shared/charts/src/helpers/useChartController.ts

@@ -12,7 +12,6 @@ type Params = {
 export function useChartController(props: ChartProps, params: Params): [ChartProps, PlaygroundData] {
     const { playgroundOn } = params;
     const store = useEditorStore({
-        dataLength: props.data.length,
         initState: initStateFromProps(props)
     });
     const playgroundContext = usePlaygroundDataFactory(props, store);

packages/shared/charts/src/helpers/useEditorStore.ts

@@ -6,7 +6,7 @@ import { EditorStore, EditorStoreState } from "./EditorStore";
 export type EditorStoreInitializer = () => EditorStoreState;
 
 type Params = {
-    dataLength: number;
+    dataSourceKey?: Data[];
     initState?: EditorStoreInitializer;
 };
 
@@ -23,12 +23,14 @@ export function useEditorStore(params: Params): EditorStore {
         return store;
     });
 
-    useEffect(
-        () => () => {
-            store.resetData(params.dataLength);
-        },
-        [store, params.dataLength]
-    );
+    useEffect(() => {
+        if (params.initState) {
+            // Reset only data, preserving layout/config customizations
+            const freshState = params.initState();
+            store.resetData(freshState.data);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [store, params.dataSourceKey]);
 
     return store;
 }