diff --git a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx
index 3f0cd12c4..feb10ae1d 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx
@@ -30,7 +30,13 @@ import { NoResults } from './no_results';
 import { HitsCounter } from './hits_counter/hits_counter';
 import { TimechartHeader } from './timechart_header';
 import { ExplorerVisualizations } from './visualizations';
-import { IField, IQueryTab, IDefaultTimestampState } from '../../../../common/types/explorer';
+import {
+  IField,
+  IQueryTab,
+  IDefaultTimestampState,
+  ConfigListEntry,
+  DimensionSpan,
+} from '../../../../common/types/explorer';
 import {
   TAB_CHART_TITLE,
   TAB_EVENT_TITLE,
@@ -750,13 +756,18 @@ export const Explorer = ({
       setTriggerAvailability(false);
     }
   };
+
+  const isSeriesNotEmpty = (seriesArray: ConfigListEntry[]) => seriesArray.length !== 0;
+  const isDimensionOrSpanPresent = (dimArray: ConfigListEntry[], spanExpression: DimensionSpan) =>
+    dimArray.length !== 0 || !isEmpty(spanExpression);
+
   const isValidValueOptionConfigSelected = useMemo(() => {
     const { series = [], dimensions = [], span = {} } = visualizations.data.userConfigs?.dataConfig;
     const { TreeMap, Gauge, HeatMap, Metrics } = VIS_CHART_TYPES;
     const isValidValueOptionsXYAxes =
       VIZ_CONTAIN_XY_AXIS.includes(curVisId as VIS_CHART_TYPES) &&
-      series.length !== 0 &&
-      (dimensions.length !== 0 || !isEmpty(span));
+      isSeriesNotEmpty(series) &&
+      isDimensionOrSpanPresent(dimensions, span);
 
     const isValidValueOptions: { [key: string]: boolean } = {
       tree_map:
@@ -764,7 +775,7 @@ export const Explorer = ({
         dimensions.length > 0 &&
         dimensions.childField?.length !== 0 &&
         dimensions.valueField?.length !== 0,
-      gauge: curVisId === Gauge && series.length !== 0,
+      gauge: curVisId === Gauge && isSeriesNotEmpty(series),
       heatmap: Boolean(curVisId === HeatMap && series.length === 1 && dimensions.length === 2),
       bar: isValidValueOptionsXYAxes,
       line: isValidValueOptionsXYAxes,
@@ -772,7 +783,7 @@ export const Explorer = ({
       pie: isValidValueOptionsXYAxes,
       scatter: isValidValueOptionsXYAxes,
       logs_view: true,
-      metrics: curVisId === Metrics && series.length !== 0,
+      metrics: curVisId === Metrics && isSeriesNotEmpty(series),
       horizontal_bar: isValidValueOptionsXYAxes,
       data_table: true,
     };
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx
index ae7986689..33cea8ca1 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx
@@ -46,11 +46,15 @@ export const DataConfigPanelFields = ({
   handleServiceEdit,
 }: DataConfigPanelFieldProps) => {
   const isAggregation = sectionName === AGGREGATIONS;
-  const hideAddButton = (name: string) => {
-    if (!isArray(list) || !HIDE_ADD_BUTTON_VIZ_TYPES.includes(visType)) return false;
 
+  // The function hides the click to add button for visualizations included in the const HIDE_ADD_BUTTON_VIZ_TYPES
+  const hideClickToAddButton = (name: string) => {
+    // returns false when HIDE_ADD_BUTTON_VIZ_TYPES visualizations are not matching with visType.
+    if (!isArray(list) || !HIDE_ADD_BUTTON_VIZ_TYPES.includes(visType)) return false;
+    // condition for heatmap on the basis of section name
     if (visType === VIS_CHART_TYPES.HeatMap)
       return name === AGGREGATIONS ? list.length >= 1 : list.length >= 2;
+    // condition for line and scatter for dimensions section.
     return name === GROUPBY && (list.length >= 1 || !isEmpty(time_field));
   };
 
@@ -124,7 +128,7 @@ export const DataConfigPanelFields = ({
             <EuiSpacer size="s" />
           </Fragment>
         ))}
-      {!hideAddButton(sectionName) && (
+      {!hideClickToAddButton(sectionName) && (
         <EuiPanel className="panelItem_button" grow>
           <EuiText size="s">{addButtonText}</EuiText>
           <EuiButtonIcon