diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/index.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/index.test.tsx.snap
index 9a63e3e31f30e..40e53d88f99cf 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/index.test.tsx.snap
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/index.test.tsx.snap
@@ -11,7 +11,6 @@ exports[`MetricsAxisOptions component should init with the default set of props
             "id": "1",
             "label": "Count",
           },
-          "disabledMode": false,
           "drawLinesBetweenPoints": true,
           "interpolate": "linear",
           "lineWidth": 2,
@@ -84,7 +83,6 @@ exports[`MetricsAxisOptions component should init with the default set of props
             "id": "1",
             "label": "Count",
           },
-          "disabledMode": false,
           "drawLinesBetweenPoints": true,
           "interpolate": "linear",
           "lineWidth": 2,
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.test.tsx
index caf14e57fef7e..def24d51f49f3 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.test.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.test.tsx
@@ -7,10 +7,10 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import { ChartOptions, ChartOptionsParams } from './chart_options';
-import { SeriesParam, ChartMode } from '../../../../types';
+import { SeriesParam, ChartMode, AxisMode } from '../../../../types';
 import { LineOptions } from './line_options';
 import { valueAxis, seriesParam } from './mocks';
 import { ChartType } from '../../../../../common';
@@ -71,4 +71,14 @@ describe('ChartOptions component', () => {
 
     expect(setParamByIndex).toBeCalledWith('seriesParams', 0, paramName, ChartMode.Normal);
   });
+
+  it('should set "stacked" mode and disabled control if the referenced axis is "percentage"', () => {
+    defaultProps.valueAxes[0].scale.mode = AxisMode.Percentage;
+    defaultProps.chart.mode = ChartMode.Normal;
+    const paramName = 'mode';
+    const comp = mount(<ChartOptions {...defaultProps} />);
+
+    expect(setParamByIndex).toBeCalledWith('seriesParams', 0, paramName, ChartMode.Stacked);
+    expect(comp.find({ paramName }).prop('disabled')).toBeTruthy();
+  });
 });
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.tsx
index d9d88b99b5f5a..23452a87aae60 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.tsx
@@ -6,14 +6,14 @@
  * Side Public License, v 1.
  */
 
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback, useEffect, useState } from 'react';
 
 import { i18n } from '@kbn/i18n';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
 import { SelectOption } from '../../../../../../vis_default_editor/public';
 
-import { SeriesParam, ValueAxis } from '../../../../types';
+import { SeriesParam, ValueAxis, ChartMode, AxisMode } from '../../../../types';
 import { LineOptions } from './line_options';
 import { SetParamByIndex, ChangeValueAxis } from '.';
 import { ChartType } from '../../../../../common';
@@ -38,6 +38,7 @@ function ChartOptions({
   changeValueAxis,
   setParamByIndex,
 }: ChartOptionsParams) {
+  const [disabledMode, setDisabledMode] = useState<boolean>(false);
   const setChart: SetChart = useCallback(
     (paramName, value) => {
       setParamByIndex('seriesParams', index, paramName, value);
@@ -68,6 +69,20 @@ function ChartOptions({
     [valueAxes]
   );
 
+  useEffect(() => {
+    const valueAxisToMetric = valueAxes.find((valueAxis) => valueAxis.id === chart.valueAxis);
+    if (valueAxisToMetric) {
+      if (valueAxisToMetric.scale.mode === AxisMode.Percentage) {
+        setDisabledMode(true);
+        if (chart.mode !== ChartMode.Stacked) {
+          setChart('mode', ChartMode.Stacked);
+        }
+      } else if (disabledMode) {
+        setDisabledMode(false);
+      }
+    }
+  }, [valueAxes, chart, disabledMode, setChart, setDisabledMode]);
+
   return (
     <>
       <SelectOption
@@ -104,7 +119,7 @@ function ChartOptions({
             })}
             options={collections.chartModes}
             paramName="mode"
-            disabled={chart.disabledMode}
+            disabled={disabledMode}
             value={chart.mode}
             setValue={setChart}
           />
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.test.tsx
index b5573fbc40b25..45b282506e3db 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.test.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.test.tsx
@@ -128,15 +128,6 @@ describe('MetricsAxisOptions component', () => {
       const updatedSeries = [{ ...chart, data: { id: agg.id, label: agg.makeLabel() } }];
       expect(setValue).toHaveBeenCalledWith(SERIES_PARAMS, updatedSeries);
     });
-
-    it('should set "stacked" mode for metric if the referenced axis is "percentage"', () => {
-      defaultProps.stateParams.valueAxes[0].scale.mode = AxisMode.Percentage;
-      defaultProps.stateParams.seriesParams[0].mode = ChartMode.Normal;
-      mount(<MetricsAxisOptions {...defaultProps} />);
-
-      const updatedSeries = [{ ...chart, disabledMode: true, mode: ChartMode.Stacked }];
-      expect(setValue).toHaveBeenCalledWith(SERIES_PARAMS, updatedSeries);
-    });
   });
 
   describe('updateAxisTitle', () => {
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.tsx
index b653b9b1f03d6..1aee5bfc60041 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.tsx
@@ -13,14 +13,7 @@ import { EuiSpacer } from '@elastic/eui';
 
 import { IAggConfig } from '../../../../../../data/public';
 
-import {
-  VisParams,
-  ValueAxis,
-  SeriesParam,
-  CategoryAxis,
-  ChartMode,
-  AxisMode,
-} from '../../../../types';
+import { VisParams, ValueAxis, SeriesParam, CategoryAxis } from '../../../../types';
 import { ValidationVisOptionsProps } from '../../common';
 import { SeriesPanel } from './series_panel';
 import { CategoryAxisPanel } from './category_axis_panel';
@@ -310,18 +303,6 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps<VisParams>) {
         );
       }
 
-      const valueAxisToMetric = stateParams.valueAxes.find(
-        (valueAxis) => valueAxis.id === series.valueAxis
-      );
-      if (valueAxisToMetric) {
-        if (valueAxisToMetric.scale.mode === AxisMode.Percentage) {
-          series.mode = ChartMode.Stacked;
-          series.disabledMode = true;
-        } else if (series.disabledMode) {
-          series.disabledMode = false;
-        }
-      }
-
       return series;
     });
 
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/mocks.ts b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/mocks.ts
index 1f5ffdee36392..7451f6dea9039 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/mocks.ts
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/mocks.ts
@@ -68,7 +68,6 @@ const seriesParam: SeriesParam = {
   show: true,
   type: ChartType.Histogram,
   mode: ChartMode.Stacked,
-  disabledMode: false,
   data: {
     label: 'Count',
     id: '1',
diff --git a/src/plugins/vis_type_xy/public/types/param.ts b/src/plugins/vis_type_xy/public/types/param.ts
index bd0b557b44b18..69b6daf077a32 100644
--- a/src/plugins/vis_type_xy/public/types/param.ts
+++ b/src/plugins/vis_type_xy/public/types/param.ts
@@ -68,7 +68,6 @@ export interface SeriesParam {
   interpolate?: InterpolationMode;
   lineWidth?: number;
   mode: ChartMode;
-  disabledMode: boolean;
   show: boolean;
   showCircles: boolean;
   type: ChartType;