diff --git a/web/client/components/widgets/enhancers/__tests__/emptyChartState-test.jsx b/web/client/components/widgets/enhancers/__tests__/emptyChartState-test.jsx
index 77b6937e54..efae1e8415 100644
--- a/web/client/components/widgets/enhancers/__tests__/emptyChartState-test.jsx
+++ b/web/client/components/widgets/enhancers/__tests__/emptyChartState-test.jsx
@@ -38,4 +38,9 @@ describe('widgets emptyChartState enhancer', () => {
         ReactDOM.render(<Dummy data={[]}/>, document.getElementById("container"));
         expect(document.querySelector(".ms-widget-empty-message")).toExist();
     });
+    it("should render empty chart state in case of data has empty arr item", () => {
+        const Dummy = emptyChartState(() => <div id="dummy"></div>);
+        ReactDOM.render(<Dummy data={[[]]}/>, document.getElementById("container"));
+        expect(document.querySelector(".ms-widget-empty-message")).toExist();
+    });
 });
diff --git a/web/client/components/widgets/enhancers/emptyChartState.js b/web/client/components/widgets/enhancers/emptyChartState.js
index bebff93e1e..a5867df1dd 100644
--- a/web/client/components/widgets/enhancers/emptyChartState.js
+++ b/web/client/components/widgets/enhancers/emptyChartState.js
@@ -2,7 +2,7 @@ import emptyState from '../../misc/enhancers/emptyState';
 import WidgetEmptyMessage from '../widget/WidgetEmptyMessage';
 
 export default emptyState(
-    ({data = []}) => !data || data.length === 0,
+    ({data = []}) => !data || data.length === 0 || data?.flat()?.length === 0,
     ({mapSync, iconFit} = {}) => ({
         iconFit,
         messageId: mapSync ? "widgets.errors.nodatainviewport" : "widgets.errors.nodata",
diff --git a/web/client/components/widgets/widget/CounterView.jsx b/web/client/components/widgets/widget/CounterView.jsx
index dcac71c2fc..70ac385287 100644
--- a/web/client/components/widgets/widget/CounterView.jsx
+++ b/web/client/components/widgets/widget/CounterView.jsx
@@ -104,7 +104,7 @@ const CounterView = enhanceCounter(({
     const renderCounter = ({ dataKey } = {}, i) => (<Counter
         key={dataKey}
         uom={get(options, `seriesOptions[${i}].uom`)}
-        value={data[0][dataKey]}
+        value={data[0][dataKey] || 0}
         counterOpts={counterOpts}
         formula={formula}
         style={{ textAlign: "center", ...style }}
diff --git a/web/client/reducers/__tests__/widgets-test.js b/web/client/reducers/__tests__/widgets-test.js
index 2864c9cdc3..0162c6d0e3 100644
--- a/web/client/reducers/__tests__/widgets-test.js
+++ b/web/client/reducers/__tests__/widgets-test.js
@@ -148,6 +148,18 @@ describe('Test the widgets reducer', () => {
                                     name: "layer3",
                                     id: "3"
                                 }
+                            }, {
+                                layer: {
+                                    visibility: false,
+                                    name: "layer3",
+                                    id: "3"
+                                }, traces: [{
+                                    layer: {
+                                        visibility: false,
+                                        name: "layer3",
+                                        id: "3"
+                                    }, id: "traceId"
+                                }]
                             }
                         ]
                     }]
@@ -164,8 +176,10 @@ describe('Test the widgets reducer', () => {
         expect(widgetObjects[1].layer).toEqual(newTargetLayer);
         expect(widgetObjects[2].layer).toEqual(state.containers[DEFAULT_TARGET].widgets[2].layer);
         expect(widgetObjects[3].layer).toEqual(newTargetLayer);
-        expect(widgetObjects[4].charts[0].layer).toEqual(newTargetLayer);
+        expect(widgetObjects[4].charts[0].layer.id).toEqual(newTargetLayer.id);
         expect(widgetObjects[4].charts[1].layer).toEqual(state.containers[DEFAULT_TARGET].widgets[4].charts[1].layer);
+        expect(widgetObjects[4].charts[2].layer).toEqual(state.containers[DEFAULT_TARGET].widgets[4].charts[1].layer);
+        expect(widgetObjects[4].charts[2].traces[0].layer).toEqual(state.containers[DEFAULT_TARGET].widgets[4].charts[2].traces[0].layer);
     });
     it('deleteWidget', () => {
         const state = {
diff --git a/web/client/reducers/widgets.js b/web/client/reducers/widgets.js
index 074f02484b..96f1fb0406 100644
--- a/web/client/reducers/widgets.js
+++ b/web/client/reducers/widgets.js
@@ -158,9 +158,15 @@ function widgetsReducer(state = emptyState, action) {
                             // every chart stores the layer object configuration
                             // so we need to loop around them to update correctly the layer properties
                             // including the layerFilter
-                            return set("charts", w.charts.map((chart) =>
-                                get(chart, "layer.id") === action.layer.id ? set("layer", action.layer, chart) : chart
-                            ), w);
+                            let chartsCopy = w?.charts?.length ? [...w.charts] : [];
+                            chartsCopy = chartsCopy.map(chart=>{
+                                let chartItem = {...chart};
+                                chartItem.traces = chartItem?.traces?.map(trace=>
+                                    get(trace, "layer.id") === action.layer.id ? set("layer", action.layer, trace) : trace
+                                );
+                                return chartItem;
+                            });
+                            return set("charts", chartsCopy, w);
                         }
                         return get(w, "layer.id") === action.layer.id ? set("layer", action.layer, w) : w;
                     }), state);