diff --git a/x-pack/plugins/lens/public/shared_components/columns_number_setting.test.tsx b/x-pack/plugins/lens/public/shared_components/columns_number_setting.test.tsx
new file mode 100644
index 0000000000000..50f2dc2fb93dc
--- /dev/null
+++ b/x-pack/plugins/lens/public/shared_components/columns_number_setting.test.tsx
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { mountWithIntl as mount } from '@kbn/test-jest-helpers';
+import { ColumnsNumberSetting } from './columns_number_setting';
+
+describe('Columns Number Setting', () => {
+  it('should have default the columns input to 1 when no value is given', () => {
+    const component = mount(<ColumnsNumberSetting isDisabled={false} isLegendOutside={false} />);
+    expect(
+      component.find('[data-test-subj="lens-legend-location-columns-input"]').at(0).prop('value')
+    ).toEqual(1);
+  });
+});
diff --git a/x-pack/plugins/lens/public/shared_components/columns_number_setting.tsx b/x-pack/plugins/lens/public/shared_components/columns_number_setting.tsx
new file mode 100644
index 0000000000000..6a1d1ec6d0306
--- /dev/null
+++ b/x-pack/plugins/lens/public/shared_components/columns_number_setting.tsx
@@ -0,0 +1,84 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiFieldNumber, EuiFormRow } from '@elastic/eui';
+import { useDebouncedValue } from './debounced_value';
+import { TooltipWrapper } from './tooltip_wrapper';
+
+export const DEFAULT_FLOATING_COLUMNS = 1;
+
+interface ColumnsNumberSettingProps {
+  /**
+   * Sets the number of columns for legend inside chart
+   */
+  floatingColumns?: number;
+  /**
+   * Callback on horizontal alignment option change
+   */
+  onFloatingColumnsChange?: (value: number) => void;
+  /**
+   * Flag to disable the location settings
+   */
+  isDisabled: boolean;
+  /**
+   * Indicates if legend is located outside
+   */
+  isLegendOutside: boolean;
+}
+
+export const ColumnsNumberSetting = ({
+  floatingColumns,
+  onFloatingColumnsChange = () => {},
+  isDisabled,
+  isLegendOutside,
+}: ColumnsNumberSettingProps) => {
+  const { inputValue, handleInputChange } = useDebouncedValue({
+    value: floatingColumns ?? DEFAULT_FLOATING_COLUMNS,
+    onChange: onFloatingColumnsChange,
+  });
+
+  return (
+    <EuiFormRow
+      label={i18n.translate('xpack.lens.shared.legendInsideColumnsLabel', {
+        defaultMessage: 'Number of columns',
+      })}
+      fullWidth
+      display="columnCompressed"
+    >
+      <TooltipWrapper
+        tooltipContent={
+          isDisabled
+            ? i18n.translate('xpack.lens.shared.legendVisibleTooltip', {
+                defaultMessage: 'Requires legend to be shown',
+              })
+            : i18n.translate('xpack.lens.shared.legendInsideTooltip', {
+                defaultMessage: 'Requires legend to be located inside visualization',
+              })
+        }
+        condition={isDisabled || isLegendOutside}
+        position="top"
+        delay="regular"
+        display="block"
+      >
+        <EuiFieldNumber
+          data-test-subj="lens-legend-location-columns-input"
+          value={inputValue}
+          min={1}
+          max={5}
+          compressed
+          disabled={isDisabled || isLegendOutside}
+          onChange={(e) => {
+            handleInputChange(Number(e.target.value));
+          }}
+          step={1}
+        />
+      </TooltipWrapper>
+    </EuiFormRow>
+  );
+};
diff --git a/x-pack/plugins/lens/public/shared_components/legend_location_settings.test.tsx b/x-pack/plugins/lens/public/shared_components/legend_location_settings.test.tsx
index 49a53c1abf66f..f4b5ced490663 100644
--- a/x-pack/plugins/lens/public/shared_components/legend_location_settings.test.tsx
+++ b/x-pack/plugins/lens/public/shared_components/legend_location_settings.test.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { Position } from '@elastic/charts';
-import { shallowWithIntl as shallow, mountWithIntl as mount } from '@kbn/test-jest-helpers';
+import { shallowWithIntl as shallow } from '@kbn/test-jest-helpers';
 import { LegendLocationSettings, LegendLocationSettingsProps } from './legend_location_settings';
 
 describe('Legend Location Settings', () => {
@@ -104,17 +104,6 @@ describe('Legend Location Settings', () => {
     expect(newProps.onAlignmentChange).toHaveBeenCalled();
   });
 
-  it('should have default the columns input to 1 when no value is given', () => {
-    const newProps = {
-      ...props,
-      location: 'inside',
-    } as LegendLocationSettingsProps;
-    const component = mount(<LegendLocationSettings {...newProps} />);
-    expect(
-      component.find('[data-test-subj="lens-legend-location-columns-input"]').at(0).prop('value')
-    ).toEqual(1);
-  });
-
   it('should disable the components when is Disabled is true', () => {
     const newProps = {
       ...props,
diff --git a/x-pack/plugins/lens/public/shared_components/legend_location_settings.tsx b/x-pack/plugins/lens/public/shared_components/legend_location_settings.tsx
index 6791d5586d327..f3ac54ab00a05 100644
--- a/x-pack/plugins/lens/public/shared_components/legend_location_settings.tsx
+++ b/x-pack/plugins/lens/public/shared_components/legend_location_settings.tsx
@@ -7,9 +7,8 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiFormRow, EuiButtonGroup, EuiFieldNumber } from '@elastic/eui';
+import { EuiFormRow, EuiButtonGroup } from '@elastic/eui';
 import { VerticalAlignment, HorizontalAlignment, Position } from '@elastic/charts';
-import { useDebouncedValue } from './debounced_value';
 import { TooltipWrapper } from './tooltip_wrapper';
 
 export interface LegendLocationSettingsProps {
@@ -41,22 +40,12 @@ export interface LegendLocationSettingsProps {
    * Callback on horizontal alignment option change
    */
   onAlignmentChange?: (id: string) => void;
-  /**
-   * Sets the number of columns for legend inside chart
-   */
-  floatingColumns?: number;
-  /**
-   * Callback on horizontal alignment option change
-   */
-  onFloatingColumnsChange?: (value: number) => void;
   /**
    * Flag to disable the location settings
    */
   isDisabled?: boolean;
 }
 
-const DEFAULT_FLOATING_COLUMNS = 1;
-
 const toggleButtonsIcons = [
   {
     id: Position.Top,
@@ -149,32 +138,6 @@ const locationAlignmentButtonsIcons: Array<{
   },
 ];
 
-const FloatingColumnsInput = ({
-  value,
-  setValue,
-  isDisabled,
-}: {
-  value: number;
-  setValue: (value: number) => void;
-  isDisabled: boolean;
-}) => {
-  const { inputValue, handleInputChange } = useDebouncedValue({ value, onChange: setValue });
-  return (
-    <EuiFieldNumber
-      data-test-subj="lens-legend-location-columns-input"
-      value={inputValue}
-      min={1}
-      max={5}
-      compressed
-      disabled={isDisabled}
-      onChange={(e) => {
-        handleInputChange(Number(e.target.value));
-      }}
-      step={1}
-    />
-  );
-};
-
 export const LegendLocationSettings: React.FunctionComponent<LegendLocationSettingsProps> = ({
   location,
   onLocationChange = () => {},
@@ -183,8 +146,6 @@ export const LegendLocationSettings: React.FunctionComponent<LegendLocationSetti
   verticalAlignment,
   horizontalAlignment,
   onAlignmentChange = () => {},
-  floatingColumns,
-  onFloatingColumnsChange = () => {},
   isDisabled = false,
 }) => {
   const alignment = `${verticalAlignment || VerticalAlignment.Top}_${
@@ -294,37 +255,6 @@ export const LegendLocationSettings: React.FunctionComponent<LegendLocationSetti
           )}
         </>
       </EuiFormRow>
-      {location && (
-        <EuiFormRow
-          label={i18n.translate('xpack.lens.shared.legendInsideColumnsLabel', {
-            defaultMessage: 'Number of columns',
-          })}
-          fullWidth
-          display="columnCompressed"
-        >
-          <TooltipWrapper
-            tooltipContent={
-              isDisabled
-                ? i18n.translate('xpack.lens.shared.legendVisibleTooltip', {
-                    defaultMessage: 'Requires legend to be shown',
-                  })
-                : i18n.translate('xpack.lens.shared.legendInsideTooltip', {
-                    defaultMessage: 'Requires legend to be located inside visualization',
-                  })
-            }
-            condition={isDisabled || location === 'outside'}
-            position="top"
-            delay="regular"
-            display="block"
-          >
-            <FloatingColumnsInput
-              value={floatingColumns ?? DEFAULT_FLOATING_COLUMNS}
-              setValue={onFloatingColumnsChange}
-              isDisabled={isDisabled || location === 'outside'}
-            />
-          </TooltipWrapper>
-        </EuiFormRow>
-      )}
     </>
   );
 };
diff --git a/x-pack/plugins/lens/public/shared_components/legend_settings_popover.tsx b/x-pack/plugins/lens/public/shared_components/legend_settings_popover.tsx
index 15e6697d6c5fa..481c38815d43d 100644
--- a/x-pack/plugins/lens/public/shared_components/legend_settings_popover.tsx
+++ b/x-pack/plugins/lens/public/shared_components/legend_settings_popover.tsx
@@ -17,6 +17,7 @@ import {
 import { Position, VerticalAlignment, HorizontalAlignment } from '@elastic/charts';
 import { ToolbarPopover } from '../shared_components';
 import { LegendLocationSettings } from './legend_location_settings';
+import { ColumnsNumberSetting } from './columns_number_setting';
 import { LegendSizeSettings } from './legend_size_settings';
 import { ToolbarButtonProps } from '../../../../../src/plugins/kibana_react/public';
 import { TooltipWrapper } from './tooltip_wrapper';
@@ -223,8 +224,6 @@ export const LegendSettingsPopover: React.FunctionComponent<LegendSettingsPopove
         verticalAlignment={verticalAlignment}
         horizontalAlignment={horizontalAlignment}
         onAlignmentChange={onAlignmentChange}
-        floatingColumns={floatingColumns}
-        onFloatingColumnsChange={onFloatingColumnsChange}
         isDisabled={mode === 'hide'}
         position={position}
         onPositionChange={onPositionChange}
@@ -235,6 +234,14 @@ export const LegendSettingsPopover: React.FunctionComponent<LegendSettingsPopove
         isVerticalLegend={!position || position === Position.Left || position === Position.Right}
         isDisabled={mode === 'hide'}
       />
+      {location && (
+        <ColumnsNumberSetting
+          floatingColumns={floatingColumns}
+          onFloatingColumnsChange={onFloatingColumnsChange}
+          isDisabled={mode === 'hide'}
+          isLegendOutside={location === 'outside'}
+        />
+      )}
       <EuiFormRow
         display="columnCompressedSwitch"
         label={i18n.translate('xpack.lens.shared.truncateLegend', {
diff --git a/x-pack/plugins/lens/public/shared_components/legend_size_settings.tsx b/x-pack/plugins/lens/public/shared_components/legend_size_settings.tsx
index 8b1cea904d87a..9c785be20c471 100644
--- a/x-pack/plugins/lens/public/shared_components/legend_size_settings.tsx
+++ b/x-pack/plugins/lens/public/shared_components/legend_size_settings.tsx
@@ -5,19 +5,19 @@
  * 2.0.
  */
 
-import React, { useState, useCallback } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';
-import {
-  EuiFieldNumber,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFormRow,
-  EuiIconTip,
-  EuiSwitch,
-} from '@elastic/eui';
+import { EuiFormRow, EuiSuperSelect } from '@elastic/eui';
 import { TooltipWrapper } from './tooltip_wrapper';
 
+export enum LegendSizes {
+  AUTO = '0',
+  SMALL = '50',
+  MEDIUM = '100',
+  LARGE = '150',
+  EXTRA_LARGE = '200',
+}
+
 interface LegendSizeSettingsProps {
   legendSize: number | undefined;
   onLegendSizeChange: (size?: number) => void;
@@ -25,31 +25,41 @@ interface LegendSizeSettingsProps {
   isDisabled: boolean;
 }
 
-const MIN_SIZE_VALUE = 1;
-const DEFAULT_SIZE_VALUE = 100;
-
-const WIDTH_LABEL = i18n.translate('xpack.lens.shared.legendSizeSetting.labelWidth', {
-  defaultMessage: 'width',
-});
-
-const HEIGHT_LABEL = i18n.translate('xpack.lens.shared.legendSizeSetting.labelHeight', {
-  defaultMessage: 'height',
-});
-
-const VERTICAL_TOOLTIP_LABEL = i18n.translate(
-  'xpack.lens.shared.legendSizeSetting.tooltipLabelTVertical',
+const legendSizeOptions: Array<{ value: LegendSizes; inputDisplay: string }> = [
   {
-    defaultMessage:
-      'Vertical legends have minimum of 30% and maximum of 70% of the visualization container width.',
-  }
-);
-
-const HORIZONTAL_TOOLTIP_LABEL = i18n.translate(
-  'xpack.lens.shared.legendSizeSetting.tooltipLabelHorizontal',
+    value: LegendSizes.AUTO,
+    inputDisplay: i18n.translate('xpack.lens.shared.legendSizeSetting.legendSizeOptions.auto', {
+      defaultMessage: 'auto',
+    }),
+  },
   {
-    defaultMessage: 'Horizontal legends have maximum of 70% of the visualization height.',
-  }
-);
+    value: LegendSizes.SMALL,
+    inputDisplay: i18n.translate('xpack.lens.shared.legendSizeSetting.legendSizeOptions.small', {
+      defaultMessage: 'small',
+    }),
+  },
+  {
+    value: LegendSizes.MEDIUM,
+    inputDisplay: i18n.translate('xpack.lens.shared.legendSizeSetting.legendSizeOptions.medium', {
+      defaultMessage: 'medium',
+    }),
+  },
+  {
+    value: LegendSizes.LARGE,
+    inputDisplay: i18n.translate('xpack.lens.shared.legendSizeSetting.legendSizeOptions.large', {
+      defaultMessage: 'large',
+    }),
+  },
+  {
+    value: LegendSizes.EXTRA_LARGE,
+    inputDisplay: i18n.translate(
+      'xpack.lens.shared.legendSizeSetting.legendSizeOptions.extraLarge',
+      {
+        defaultMessage: 'extra large',
+      }
+    ),
+  },
+];
 
 export const LegendSizeSettings = ({
   legendSize,
@@ -57,102 +67,48 @@ export const LegendSizeSettings = ({
   isVerticalLegend,
   isDisabled,
 }: LegendSizeSettingsProps) => {
-  const sizeProperty = isVerticalLegend ? WIDTH_LABEL : HEIGHT_LABEL;
-  const autoSizeLabel = i18n.translate('xpack.lens.shared.legendSizeSetting.switch', {
-    defaultMessage: 'Auto {sizeProperty}',
-    values: { sizeProperty },
-  });
-
-  const [inputValue, setInputValue] = useState(legendSize ?? DEFAULT_SIZE_VALUE);
-  const [isAutoSizeEnabled, setIsAutoSizeEnabled] = useState(!legendSize);
-
-  const handleAutoSizeChange = useCallback(() => {
-    const shouldUseAutoSize = !isAutoSizeEnabled;
-    setIsAutoSizeEnabled(shouldUseAutoSize);
-    onLegendSizeChange(shouldUseAutoSize ? undefined : inputValue);
-  }, [onLegendSizeChange, inputValue, isAutoSizeEnabled]);
+  useEffect(() => {
+    if (legendSize && !isVerticalLegend) {
+      onLegendSizeChange(undefined);
+    }
+  }, [isVerticalLegend, legendSize, onLegendSizeChange]);
 
-  const handleLegendSizeChange = useCallback(
-    (e) => {
-      const value = Math.max(Number(e.target.value), MIN_SIZE_VALUE);
-      setInputValue(value);
-      onLegendSizeChange(value);
-    },
+  const onLegendSizeOptionChange = useCallback(
+    (option) => onLegendSizeChange(Number(option) || undefined),
     [onLegendSizeChange]
   );
 
   return (
-    <>
-      <EuiFormRow display="columnCompressedSwitch" label={autoSizeLabel}>
-        <TooltipWrapper
-          tooltipContent={i18n.translate('xpack.lens.shared.legendVisibleTooltip', {
-            defaultMessage: 'Requires legend to be shown',
-          })}
-          condition={isDisabled}
-          position="top"
-          delay="regular"
-          display="block"
-        >
-          <EuiSwitch
-            compressed
-            showLabel={false}
-            disabled={isDisabled}
-            label={autoSizeLabel}
-            checked={isAutoSizeEnabled}
-            onChange={handleAutoSizeChange}
-          />
-        </TooltipWrapper>
-      </EuiFormRow>
-      <EuiFormRow
-        display="columnCompressed"
-        label={
-          <EuiFlexGroup gutterSize="xs" alignItems="baseline" responsive={false}>
-            <EuiFlexItem>
-              <FormattedMessage
-                id="xpack.lens.shared.legendSizeSetting.label"
-                defaultMessage="Legend {sizeProperty}"
-                values={{ sizeProperty }}
-              />
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiIconTip
-                type="questionInCircle"
-                size="s"
-                content={isVerticalLegend ? VERTICAL_TOOLTIP_LABEL : HORIZONTAL_TOOLTIP_LABEL}
-              />
-            </EuiFlexItem>
-          </EuiFlexGroup>
+    <EuiFormRow
+      display="columnCompressed"
+      label={i18n.translate('xpack.lens.shared.legendSizeSetting.label', {
+        defaultMessage: 'Legend width',
+      })}
+      fullWidth
+    >
+      <TooltipWrapper
+        tooltipContent={
+          isDisabled
+            ? i18n.translate('xpack.lens.shared.legendVisibleTooltip', {
+                defaultMessage: 'Requires legend to be shown',
+              })
+            : i18n.translate('xpack.lens.legendSizeSetting.legendVertical', {
+                defaultMessage: 'Requires legend to be right or left aligned',
+              })
         }
+        condition={isDisabled || !isVerticalLegend}
+        position="top"
+        delay="regular"
+        display="block"
       >
-        <TooltipWrapper
-          tooltipContent={
-            isDisabled
-              ? i18n.translate('xpack.lens.shared.legendVisibleTooltip', {
-                  defaultMessage: 'Requires legend to be shown',
-                })
-              : i18n.translate('xpack.lens.legendSizeSetting.legendAutoSize', {
-                  defaultMessage: 'Requires legend auto {sizeProperty} to be disabled',
-                  values: { sizeProperty },
-                })
-          }
-          condition={isAutoSizeEnabled || isDisabled}
-          position="top"
-          delay="regular"
-          display="block"
-        >
-          <EuiFieldNumber
-            min={MIN_SIZE_VALUE}
-            step={1}
-            compressed
-            disabled={isAutoSizeEnabled || isDisabled}
-            value={legendSize ?? inputValue}
-            onChange={handleLegendSizeChange}
-            append={i18n.translate('xpack.lens.shared.legendSizeSetting.fieldAppend', {
-              defaultMessage: 'px',
-            })}
-          />
-        </TooltipWrapper>
-      </EuiFormRow>
-    </>
+        <EuiSuperSelect
+          compressed
+          valueOfSelected={legendSize?.toString() ?? LegendSizes.AUTO}
+          options={legendSizeOptions}
+          onChange={onLegendSizeOptionChange}
+          disabled={isDisabled || !isVerticalLegend}
+        />
+      </TooltipWrapper>
+    </EuiFormRow>
   );
 };