diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx
index 87d6802d0..1de41c912 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx
@@ -156,14 +156,17 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) =>
   };
 
   const isPositionButtonVisible = (sectionName: string) =>
-    sectionName === 'metrics' && visualizations.vis.name === visChartTypes.Line;
+    sectionName === 'metrics' &&
+    (visualizations.vis.name === visChartTypes.Line ||
+      visualizations.vis.name === visChartTypes.Scatter);
 
   const getOptionsAvailable = (sectionName: string) => {
     const selectedFields = {};
     const unselectedFields = fieldOptionList.filter((field) => !selectedFields[field.label]);
     return sectionName === 'metrics'
       ? unselectedFields
-      : visualizations.vis.name === visChartTypes.Line
+      : visualizations.vis.name === visChartTypes.Line ||
+        visualizations.vis.name === visChartTypes.Scatter
       ? unselectedFields.filter((i) => i.type === 'timestamp')
       : unselectedFields;
   };
@@ -285,7 +288,9 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) =>
               color="primary"
               onClick={() => handleServiceAdd(sectionName)}
               disabled={
-                sectionName === 'dimensions' && visualizations.vis.name === visChartTypes.Line
+                sectionName === 'dimensions' &&
+                (visualizations.vis.name === visChartTypes.Line ||
+                  visualizations.vis.name === visChartTypes.Scatter)
               }
             >
               Add
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap
index ad8e359f1..742cbbc53 100644
--- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap
@@ -384,139 +384,82 @@ exports[`Gauge component Renders gauge component 1`] = `
     }
   }
 >
-  <Plt
-    config={Object {}}
-    data={
-      Array [
-        Object {
-          "domain": Object {
-            "column": 0,
-            "row": 0,
-          },
-          "gauge": Object {},
-          "mode": "gauge+number+delta",
-          "title": Object {
-            "align": "center",
-            "font": Object {
-              "size": 14,
-            },
-            "text": "error, count()",
-          },
-          "type": "indicator",
-          "value": 154,
-        },
-      ]
-    }
-    layout={
-      Object {
-        "colorway": Array [
-          "#8C55A3",
-        ],
-        "grid": Object {
-          "columns": 1,
-          "pattern": "independent",
-          "rows": 1,
-        },
-        "height": 220,
-        "margin": Object {
-          "b": 15,
-          "l": 60,
-          "pad": 0,
-          "r": 10,
-          "t": 30,
-        },
-        "showlegend": true,
-        "title": "",
-      }
-    }
+  <EmptyPlaceholder
+    icon="visGauge"
   >
-    <PlotlyComponent
-      config={
-        Object {
-          "displayModeBar": false,
-        }
-      }
-      data={
-        Array [
-          Object {
-            "domain": Object {
-              "column": 0,
-              "row": 0,
-            },
-            "gauge": Object {},
-            "mode": "gauge+number+delta",
-            "title": Object {
-              "align": "center",
-              "font": Object {
-                "size": 14,
-              },
-              "text": "error, count()",
-            },
-            "type": "indicator",
-            "value": 154,
-          },
-        ]
-      }
-      debug={false}
-      divId="explorerPlotComponent"
-      layout={
-        Object {
-          "autosize": true,
-          "barmode": "stack",
-          "colorway": Array [
-            "#8C55A3",
-          ],
-          "grid": Object {
-            "columns": 1,
-            "pattern": "independent",
-            "rows": 1,
-          },
-          "height": 220,
-          "hovermode": "closest",
-          "legend": Object {
-            "orientation": "h",
-            "traceorder": "normal",
-          },
-          "margin": Object {
-            "b": 15,
-            "l": 60,
-            "pad": 0,
-            "r": 10,
-            "t": 30,
-          },
-          "showlegend": true,
-          "title": "",
-          "xaxis": Object {
-            "automargin": true,
-            "rangemode": "normal",
-            "showgrid": true,
-            "zeroline": false,
-          },
-          "yaxis": Object {
-            "rangemode": "normal",
-            "showgrid": true,
-            "zeroline": false,
-          },
-        }
-      }
-      style={
-        Object {
-          "height": "100%",
-          "width": "100%",
-        }
-      }
-      useResizeHandler={true}
+    <EuiText
+      className="lnsChart__empty"
+      color="subdued"
+      data-test-subj="vizWorkspace__noData"
+      size="xs"
+      textAlign="center"
     >
       <div
-        id="explorerPlotComponent"
-        style={
-          Object {
-            "height": "100%",
-            "width": "100%",
-          }
-        }
-      />
-    </PlotlyComponent>
-  </Plt>
+        className="euiText euiText--extraSmall lnsChart__empty"
+        data-test-subj="vizWorkspace__noData"
+      >
+        <EuiTextAlign
+          textAlign="center"
+        >
+          <div
+            className="euiTextAlign euiTextAlign--center"
+          >
+            <EuiTextColor
+              color="subdued"
+              component="div"
+            >
+              <div
+                className="euiTextColor euiTextColor--subdued"
+              >
+                <EuiIcon
+                  color="subdued"
+                  size="xxl"
+                  type="visGauge"
+                >
+                  <EuiIconEmpty
+                    aria-hidden={true}
+                    className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
+                    focusable="false"
+                    role="img"
+                    style={null}
+                  >
+                    <svg
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
+                      focusable="false"
+                      height={16}
+                      role="img"
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width={16}
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </EuiIconEmpty>
+                </EuiIcon>
+                <EuiSpacer
+                  size="l"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--l"
+                  />
+                </EuiSpacer>
+                <p>
+                  <FormattedMessage
+                    defaultMessage="No results found"
+                    id="visualization_noData"
+                    values={Object {}}
+                  >
+                    <span>
+                      No results found
+                    </span>
+                  </FormattedMessage>
+                </p>
+              </div>
+            </EuiTextColor>
+          </div>
+        </EuiTextAlign>
+      </div>
+    </EuiText>
+  </EmptyPlaceholder>
 </Gauge>
 `;
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
index e36bda4ca..ec6cad064 100644
--- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
@@ -553,177 +553,82 @@ exports[`Pie component Renders pie component 1`] = `
     }
   }
 >
-  <Plt
-    config={Object {}}
-    data={
-      Array [
-        Object {
-          "automargin": true,
-          "domain": Object {
-            "column": 0,
-            "row": 0,
-          },
-          "hole": 0,
-          "hoverinfo": "all",
-          "labels": Array [
-            "error",
-            "info",
-            "login",
-            "security",
-            "success",
-            "warning",
-          ],
-          "name": "count()",
-          "outsidetextfont": Object {
-            "size": undefined,
-          },
-          "text": "count()",
-          "textinfo": "percent",
-          "textposition": "outside",
-          "type": "pie",
-          "values": Array [
-            154,
-            1753,
-            116,
-            468,
-            1964,
-            219,
-          ],
-        },
-      ]
-    }
-    layout={
-      Object {
-        "colorway": Array [
-          "#8C55A3",
-        ],
-        "grid": Object {
-          "columns": 1,
-          "rows": 1,
-        },
-        "height": 220,
-        "legend": Object {
-          "font": Object {
-            "size": undefined,
-          },
-          "orientation": "v",
-        },
-        "margin": Object {
-          "b": 15,
-          "l": 60,
-          "pad": 0,
-          "r": 10,
-          "t": 30,
-        },
-        "showlegend": "show",
-        "title": "",
-      }
-    }
+  <EmptyPlaceholder
+    icon="visBarVerticalStacked"
   >
-    <PlotlyComponent
-      config={
-        Object {
-          "displayModeBar": false,
-        }
-      }
-      data={
-        Array [
-          Object {
-            "automargin": true,
-            "domain": Object {
-              "column": 0,
-              "row": 0,
-            },
-            "hole": 0,
-            "hoverinfo": "all",
-            "labels": Array [
-              "error",
-              "info",
-              "login",
-              "security",
-              "success",
-              "warning",
-            ],
-            "name": "count()",
-            "outsidetextfont": Object {
-              "size": undefined,
-            },
-            "text": "count()",
-            "textinfo": "percent",
-            "textposition": "outside",
-            "type": "pie",
-            "values": Array [
-              154,
-              1753,
-              116,
-              468,
-              1964,
-              219,
-            ],
-          },
-        ]
-      }
-      debug={false}
-      divId="explorerPlotComponent"
-      layout={
-        Object {
-          "autosize": true,
-          "barmode": "stack",
-          "colorway": Array [
-            "#8C55A3",
-          ],
-          "grid": Object {
-            "columns": 1,
-            "rows": 1,
-          },
-          "height": 220,
-          "hovermode": "closest",
-          "legend": Object {
-            "font": Object {
-              "size": undefined,
-            },
-            "orientation": "v",
-          },
-          "margin": Object {
-            "b": 15,
-            "l": 60,
-            "pad": 0,
-            "r": 10,
-            "t": 30,
-          },
-          "showlegend": "show",
-          "title": "",
-          "xaxis": Object {
-            "automargin": true,
-            "rangemode": "normal",
-            "showgrid": true,
-            "zeroline": false,
-          },
-          "yaxis": Object {
-            "rangemode": "normal",
-            "showgrid": true,
-            "zeroline": false,
-          },
-        }
-      }
-      style={
-        Object {
-          "height": "100%",
-          "width": "100%",
-        }
-      }
-      useResizeHandler={true}
+    <EuiText
+      className="lnsChart__empty"
+      color="subdued"
+      data-test-subj="vizWorkspace__noData"
+      size="xs"
+      textAlign="center"
     >
       <div
-        id="explorerPlotComponent"
-        style={
-          Object {
-            "height": "100%",
-            "width": "100%",
-          }
-        }
-      />
-    </PlotlyComponent>
-  </Plt>
+        className="euiText euiText--extraSmall lnsChart__empty"
+        data-test-subj="vizWorkspace__noData"
+      >
+        <EuiTextAlign
+          textAlign="center"
+        >
+          <div
+            className="euiTextAlign euiTextAlign--center"
+          >
+            <EuiTextColor
+              color="subdued"
+              component="div"
+            >
+              <div
+                className="euiTextColor euiTextColor--subdued"
+              >
+                <EuiIcon
+                  color="subdued"
+                  size="xxl"
+                  type="visBarVerticalStacked"
+                >
+                  <EuiIconEmpty
+                    aria-hidden={true}
+                    className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
+                    focusable="false"
+                    role="img"
+                    style={null}
+                  >
+                    <svg
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
+                      focusable="false"
+                      height={16}
+                      role="img"
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width={16}
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </EuiIconEmpty>
+                </EuiIcon>
+                <EuiSpacer
+                  size="l"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--l"
+                  />
+                </EuiSpacer>
+                <p>
+                  <FormattedMessage
+                    defaultMessage="No results found"
+                    id="visualization_noData"
+                    values={Object {}}
+                  >
+                    <span>
+                      No results found
+                    </span>
+                  </FormattedMessage>
+                </p>
+              </div>
+            </EuiTextColor>
+          </div>
+        </EuiTextAlign>
+      </div>
+    </EuiText>
+  </EmptyPlaceholder>
 </Pie>
 `;
diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx
index c5d55ffef..7234d4430 100644
--- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx
+++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx
@@ -77,18 +77,14 @@ export const Line = ({ visualizations, layout, config }: any) => {
       dataConfig.colorTheme.find((colorSelected) => colorSelected.name.name === field.name)
         ?.color) ||
     PLOTLY_COLOR[index % PLOTLY_COLOR.length];
-  /**
-   * determine x axis
-   */
-  const xaxis = useMemo(() => {
-    // span selection
-    const timestampField = find(fields, (field) => field.type === 'timestamp');
-    if (dataConfig.span && dataConfig.span.time_field && timestampField) {
-      return [timestampField, ...dataConfig.dimensions];
-    }
+  let xaxis;
+  const timestampField = find(fields, (field) => field.type === 'timestamp');
 
-    return dataConfig.dimensions;
-  }, [dataConfig.dimensions]);
+  if (dataConfig.span && dataConfig.span.time_field && timestampField) {
+    xaxis = [timestampField, ...dataConfig.dimensions];
+  } else {
+    xaxis = dataConfig.dimensions;
+  }
 
   if (isEmpty(xaxis) || isEmpty(yaxis))
     return <EmptyPlaceholder icon={visualizations?.vis?.icontype} />;