diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx
index c2aa95813..07801e5fe 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx
@@ -18,7 +18,7 @@ import {
 } from '@elastic/eui';
 import { isEmpty } from 'lodash';
 import { ADD_BUTTON_TEXT } from '../../../../../../../../common/constants/explorer';
-import { NUMERICAL_FIELDS } from '../../../../../../../../common/constants/shared';
+import { visChartTypes } from '../../../../../../../../common/constants/shared';
 
 export const ConfigColorTheme = ({
   visualizations,
@@ -27,8 +27,10 @@ export const ConfigColorTheme = ({
   handleConfigChange,
   sectionName = 'Color theme',
 }: any) => {
-  const { data } = visualizations;
+  const { data, vis } = visualizations;
+  const { defaultAxes = {} } = data;
   const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
+  const { dataConfig = {} } = data?.userConfigs;
   const addButtonText = ADD_BUTTON_TEXT;
   const getColorThemeRow = () => ({
     ctid: htmlIdGenerator('ct')(),
@@ -36,7 +38,12 @@ export const ConfigColorTheme = ({
     color: '#FC0505',
   });
 
-  const options = fields.map((item) => ({
+  const options = (dataConfig?.valueOptions?.metrics && dataConfig.valueOptions.metrics.length !== 0
+    ? dataConfig.valueOptions.metrics
+    : vis.name === visChartTypes.Histogram
+    ? defaultAxes.yaxis ?? []
+    : fields
+  ).map((item) => ({
     ...item,
     label: item.name,
   }));