diff --git a/server/modules/reporting/api/reportingApi.js b/server/modules/reporting/api/reportingApi.js
index 9ed5b6d5c1..24ea6c0d4e 100644
--- a/server/modules/reporting/api/reportingApi.js
+++ b/server/modules/reporting/api/reportingApi.js
@@ -44,8 +44,11 @@ export const init = (app) => {
         chartSpec.chartType === 'barChart' &&
         chartSpec.query &&
         chartSpec.query.metric &&
+        chartSpec.query.metric.field !== '' &&
         chartSpec.query.groupBy &&
-        chartSpec.query.aggregation
+        chartSpec.query.groupBy.field !== '' &&
+        chartSpec.query.aggregation &&
+        chartSpec.query.aggregation.type !== ''
       ) {
         const groupByFieldUuid = chartSpec.query.groupBy.field_uuid
         const metricFieldUuid = chartSpec.query.metric.field_uuid
diff --git a/webapp/components/form/Dropdown/dropdown.scss b/webapp/components/form/Dropdown/dropdown.scss
index 9cd14fa8b3..4b2fb0c51b 100644
--- a/webapp/components/form/Dropdown/dropdown.scss
+++ b/webapp/components/form/Dropdown/dropdown.scss
@@ -5,6 +5,7 @@
 
   .dropdown__control {
     min-height: auto;
+    z-index: 0;
   }
 
   .dropdown__single-value {
diff --git a/webapp/views/App/views/Data/Charts/components/Chart/components/ChartTypes/BarChart/BarChart.js b/webapp/views/App/views/Data/Charts/components/Chart/components/ChartTypes/BarChart/BarChart.js
index 41d861f6aa..d34c5d0114 100644
--- a/webapp/views/App/views/Data/Charts/components/Chart/components/ChartTypes/BarChart/BarChart.js
+++ b/webapp/views/App/views/Data/Charts/components/Chart/components/ChartTypes/BarChart/BarChart.js
@@ -7,8 +7,15 @@ const BarChart = ({ specs, originalData }) => {
   const chartRef = useRef()
 
   useEffect(() => {
-    if (!specs?.query?.metric || !specs?.query?.groupBy || !specs?.query?.aggregation) return
-
+    if (
+      !specs?.query?.metric?.field ||
+      specs?.query?.metric?.field === '' ||
+      !specs?.query?.groupBy?.field ||
+      specs?.query?.groupBy?.field === '' ||
+      !specs?.query?.aggregation?.type ||
+      specs?.query?.aggregation?.type === ''
+    )
+      return
     const groupByField = specs.query.groupBy.field
 
     if (groupByField) {
@@ -42,7 +49,6 @@ BarChart.propTypes = {
     query: PropTypes.shape({
       metric: PropTypes.shape({
         field: PropTypes.string.isRequired,
-        aggregate: PropTypes.string,
       }).isRequired,
       groupBy: PropTypes.shape({
         field: PropTypes.string.isRequired,
diff --git a/webapp/views/App/views/Data/Charts/state/chartTypes/common.js b/webapp/views/App/views/Data/Charts/state/chartTypes/common.js
index ef7679fb61..1f51e69e6a 100644
--- a/webapp/views/App/views/Data/Charts/state/chartTypes/common.js
+++ b/webapp/views/App/views/Data/Charts/state/chartTypes/common.js
@@ -1,10 +1,8 @@
-export const aggregationOptions = {
-  options: [
-    { value: 'average', label: 'Average', name: 'avg', type: 'aggregation' },
-    { value: 'count', label: 'Count', name: 'count', type: 'aggregation' },
-    { value: 'max', label: 'Maximum', name: 'max', type: 'aggregation' },
-    { value: 'median', label: 'Median', name: 'median', type: 'aggregation' },
-    { value: 'min', label: 'Minimum', name: 'min', type: 'aggregation' },
-    { value: 'sum', label: 'Sum', name: 'sum', type: 'aggregation' },
-  ],
-}
+export const aggregationOptions = [
+  { value: 'average', label: 'Average', name: 'avg', type: 'aggregation' },
+  { value: 'count', label: 'Count', name: 'count', type: 'aggregation' },
+  { value: 'max', label: 'Maximum', name: 'max', type: 'aggregation' },
+  { value: 'median', label: 'Median', name: 'median', type: 'aggregation' },
+  { value: 'min', label: 'Minimum', name: 'min', type: 'aggregation' },
+  { value: 'sum', label: 'Sum', name: 'sum', type: 'aggregation' },
+]
diff --git a/webapp/views/App/views/Data/Charts/state/chartTypes/pie/index.js b/webapp/views/App/views/Data/Charts/state/chartTypes/pie/index.js
index 708e9ad98d..7c1777f124 100644
--- a/webapp/views/App/views/Data/Charts/state/chartTypes/pie/index.js
+++ b/webapp/views/App/views/Data/Charts/state/chartTypes/pie/index.js
@@ -21,6 +21,7 @@ const pie = {
         type: 'container',
         blocks: {
           groupBy: GroupByBlock({
+            isMulti: false,
             valuesToSpec: ({ value = [], spec = {} }) => {
               const { key: field_uuid, as: field } = valuesToCalculations(value)
               const groupBy = { field_uuid, field, type: 'nominal' }
@@ -38,6 +39,7 @@ const pie = {
             id: 'metric',
             title: 'Metric',
             subtitle: '',
+            isMulti: false,
             optionsParams: { filter: ['quantitative'] },
             valuesToSpec: ({ spec = {}, value = [] }) => {
               const { as: field, key: field_uuid } = valuesToCalculations(value)
diff --git a/webapp/views/App/views/Data/Charts/state/hooks/useChartRender.js b/webapp/views/App/views/Data/Charts/state/hooks/useChartRender.js
index 670f27aa24..63e87cf7c8 100644
--- a/webapp/views/App/views/Data/Charts/state/hooks/useChartRender.js
+++ b/webapp/views/App/views/Data/Charts/state/hooks/useChartRender.js
@@ -33,7 +33,11 @@ const useChartRender = (spec, query) => {
 
   // Call renderChart only when necessary data is available
   useEffect(() => {
-    if (spec.chartType === 'barChart' ? spec.metric && spec.query && spec.query.groupBy : spec.metric) {
+    if (
+      spec.chartType === 'barChart'
+        ? spec.metric && spec.metric.field !== '' && spec.query && spec.query.groupBy && spec.query.groupBy.field !== ''
+        : spec.metric && spec.metric.field !== ''
+    ) {
       renderChart()
     }
   }, [spec, renderChart])