From af2c4247c98362ce3d72c1869bb6ec4b0456051a Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Thu, 10 Feb 2022 17:35:47 +0300
Subject: [PATCH 1/4] Add `labelFont` and `LabelPosition` args in metric
 expression

---
 .../metric_vis_function.test.ts.snap          |  8 ++++
 .../metric_vis_function.test.ts               |  2 +
 .../metric_vis_function.ts                    | 19 ++++++++++
 .../common/types/expression_functions.ts      |  2 +
 .../common/types/expression_renderers.ts      |  2 +-
 .../__stories__/metric_renderer.stories.tsx   | 11 +++++-
 .../metric_component.test.tsx.snap            | 36 ++++++++++++++++--
 .../public/components/metric.scss             |  2 +
 .../components/metric_component.test.tsx      |  2 +
 .../public/components/metric_component.tsx    |  2 +-
 .../public/components/metric_value.test.tsx   | 37 ++++++++++++++++---
 .../public/components/metric_value.tsx        | 17 +++++++--
 12 files changed, 123 insertions(+), 17 deletions(-)

diff --git a/src/plugins/chart_expressions/expression_metric/common/expression_functions/__snapshots__/metric_vis_function.test.ts.snap b/src/plugins/chart_expressions/expression_metric/common/expression_functions/__snapshots__/metric_vis_function.test.ts.snap
index c502c9efa2beb..affd547dab0cd 100644
--- a/src/plugins/chart_expressions/expression_metric/common/expression_functions/__snapshots__/metric_vis_function.test.ts.snap
+++ b/src/plugins/chart_expressions/expression_metric/common/expression_functions/__snapshots__/metric_vis_function.test.ts.snap
@@ -41,7 +41,15 @@ Object {
       },
       "metric": Object {
         "labels": Object {
+          "position": "bottom",
           "show": true,
+          "style": Object {
+            "css": "",
+            "spec": Object {
+              "fontSize": "24px",
+            },
+            "type": "style",
+          },
         },
         "metricColorMode": "None",
         "palette": Object {
diff --git a/src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.test.ts b/src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.test.ts
index faf2f93e4d188..3d7b70ce1715c 100644
--- a/src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.test.ts
+++ b/src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.test.ts
@@ -35,6 +35,8 @@ describe('interpreter/functions#metric', () => {
     },
     showLabels: true,
     font: { spec: { fontSize: '60px' }, type: 'style', css: '' },
+    labelFont: { spec: { fontSize: '24px' }, type: 'style', css: '' },
+    labelPosition: 'bottom',
     metric: [
       {
         type: 'vis_dimension',
diff --git a/src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.ts b/src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.ts
index ac3b4f5cc4576..5bf59e3bdb7a0 100644
--- a/src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.ts
+++ b/src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.ts
@@ -57,6 +57,21 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
       }),
       default: `{font size=60 align="center"}`,
     },
+    labelFont: {
+      types: ['style'],
+      help: i18n.translate('expressionMetricVis.function.labelFont.help', {
+        defaultMessage: 'Label font settings.',
+      }),
+      default: `{font size=24 align="center"}`,
+    },
+    labelPosition: {
+      types: ['string'],
+      options: ['bottom', 'top'],
+      help: i18n.translate('expressionMetricVis.function.labelPosition.help', {
+        defaultMessage: 'Label position',
+      }),
+      default: `bottom`,
+    },
     metric: {
       types: ['vis_dimension'],
       help: i18n.translate('expressionMetricVis.function.metric.help', {
@@ -111,6 +126,10 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
             metricColorMode: args.colorMode,
             labels: {
               show: args.showLabels,
+              position: args.labelPosition,
+              style: {
+                ...args.labelFont,
+              },
             },
             style: {
               bgColor: args.colorMode === ColorMode.Background,
diff --git a/src/plugins/chart_expressions/expression_metric/common/types/expression_functions.ts b/src/plugins/chart_expressions/expression_metric/common/types/expression_functions.ts
index 88bc0310a6a04..33d588d31aae9 100644
--- a/src/plugins/chart_expressions/expression_metric/common/types/expression_functions.ts
+++ b/src/plugins/chart_expressions/expression_metric/common/types/expression_functions.ts
@@ -23,6 +23,8 @@ export interface MetricArguments {
   showLabels: boolean;
   palette?: PaletteOutput<CustomPaletteState>;
   font: Style;
+  labelFont: Style;
+  labelPosition: 'bottom' | 'top';
   metric: ExpressionValueVisDimension[];
   bucket?: ExpressionValueVisDimension;
 }
diff --git a/src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts b/src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts
index eb7573183894c..74a5963702ea9 100644
--- a/src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts
+++ b/src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts
@@ -28,7 +28,7 @@ export interface MetricVisParam {
   percentageFormatPattern?: string;
   metricColorMode: ColorMode;
   palette?: CustomPaletteState;
-  labels: Labels;
+  labels: Labels & { style: Style; position: 'bottom' | 'top' };
   style: MetricStyle;
 }
 
diff --git a/src/plugins/chart_expressions/expression_metric/public/__stories__/metric_renderer.stories.tsx b/src/plugins/chart_expressions/expression_metric/public/__stories__/metric_renderer.stories.tsx
index 18f97f23538c2..cff5acf8ac5a0 100644
--- a/src/plugins/chart_expressions/expression_metric/public/__stories__/metric_renderer.stories.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/__stories__/metric_renderer.stories.tsx
@@ -57,7 +57,7 @@ const config: MetricVisRenderConfig = {
   visConfig: {
     metric: {
       metricColorMode: ColorMode.None,
-      labels: { show: true },
+      labels: { show: true, style: { spec: {}, type: 'style', css: '' }, position: 'bottom' },
       percentageMode: false,
       style,
     },
@@ -132,7 +132,14 @@ storiesOf('renderers/visMetric', module)
           ...config,
           visConfig: {
             ...config.visConfig,
-            metric: { ...config.visConfig.metric, labels: { show: false } },
+            metric: {
+              ...config.visConfig.metric,
+              labels: {
+                show: false,
+                style: { spec: {}, type: 'style', css: '' },
+                position: 'bottom',
+              },
+            },
           },
         }}
         {...containerSize}
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/__snapshots__/metric_component.test.tsx.snap b/src/plugins/chart_expressions/expression_metric/public/components/__snapshots__/metric_component.test.tsx.snap
index 5f856f3154d58..8aff94230d544 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/__snapshots__/metric_component.test.tsx.snap
+++ b/src/plugins/chart_expressions/expression_metric/public/components/__snapshots__/metric_component.test.tsx.snap
@@ -4,6 +4,17 @@ exports[`MetricVisComponent should render correct structure for multi-value metr
 Array [
   <MetricVisValue
     key="0"
+    labelConfig={
+      Object {
+        "position": "bottom",
+        "show": true,
+        "style": Object {
+          "css": "",
+          "spec": Object {},
+          "type": "style",
+        },
+      }
+    }
     metric={
       Object {
         "bgColor": undefined,
@@ -14,7 +25,6 @@ Array [
         "value": 182,
       }
     }
-    showLabel={true}
     style={
       Object {
         "bgColor": false,
@@ -27,6 +37,17 @@ Array [
   />,
   <MetricVisValue
     key="1"
+    labelConfig={
+      Object {
+        "position": "bottom",
+        "show": true,
+        "style": Object {
+          "css": "",
+          "spec": Object {},
+          "type": "style",
+        },
+      }
+    }
     metric={
       Object {
         "bgColor": undefined,
@@ -37,7 +58,6 @@ Array [
         "value": 445842.4634666484,
       }
     }
-    showLabel={true}
     style={
       Object {
         "bgColor": false,
@@ -54,6 +74,17 @@ Array [
 exports[`MetricVisComponent should render correct structure for single metric 1`] = `
 <MetricVisValue
   key="0"
+  labelConfig={
+    Object {
+      "position": "bottom",
+      "show": true,
+      "style": Object {
+        "css": "",
+        "spec": Object {},
+        "type": "style",
+      },
+    }
+  }
   metric={
     Object {
       "bgColor": undefined,
@@ -64,7 +95,6 @@ exports[`MetricVisComponent should render correct structure for single metric 1`
       "value": 4301021,
     }
   }
-  showLabel={true}
   style={
     Object {
       "bgColor": false,
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric.scss b/src/plugins/chart_expressions/expression_metric/public/components/metric.scss
index 24c5c05129882..03dffb5af9760 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric.scss
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric.scss
@@ -23,6 +23,8 @@
 .mtrVis__container {
   text-align: center;
   padding: $euiSize;
+  display: flex;
+  flex-direction: column;
 }
 
 .mtrVis__container--light {
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.test.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_component.test.tsx
index 033cdd629b8eb..88a82cebf25f7 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.test.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_component.test.tsx
@@ -54,6 +54,8 @@ describe('MetricVisComponent', function () {
       },
       labels: {
         show: true,
+        style: { spec: {}, type: 'style', css: '' },
+        position: 'bottom',
       },
     },
     dimensions: {
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
index 245fdf0a37170..9264022ad92df 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
@@ -116,7 +116,7 @@ class MetricVisComponent extends Component<MetricVisComponentProps> {
         onFilter={
           this.props.visParams.dimensions.bucket ? () => this.filterBucket(index) : undefined
         }
-        showLabel={this.props.visParams.metric.labels.show}
+        labelConfig={this.props.visParams.metric.labels}
       />
     );
   };
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_value.test.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_value.test.tsx
index 9a9e0eef5df97..cabbb28e49309 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric_value.test.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_value.test.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { MetricVisValue } from './metric_value';
-import { MetricOptions, MetricStyle } from '../../common/types';
+import { MetricOptions, MetricStyle, VisParams } from '../../common/types';
 
 const baseMetric: MetricOptions = { label: 'Foo', value: 'foo', lightText: false };
 const font: MetricStyle = {
@@ -24,30 +24,50 @@ const font: MetricStyle = {
   /* stylelint-enable */
 };
 
+const labelConfig: VisParams['metric']['labels'] = {
+  show: true,
+  position: 'bottom',
+  style: { spec: {}, type: 'style', css: '' },
+};
+
 describe('MetricVisValue', () => {
   it('should be wrapped in button if having a click listener', () => {
     const component = shallow(
-      <MetricVisValue style={font} metric={baseMetric} onFilter={() => {}} />
+      <MetricVisValue
+        style={font}
+        metric={baseMetric}
+        onFilter={() => {}}
+        labelConfig={labelConfig}
+      />
     );
     expect(component.find('button').exists()).toBe(true);
   });
 
   it('should not be wrapped in button without having a click listener', () => {
-    const component = shallow(<MetricVisValue style={font} metric={baseMetric} />);
+    const component = shallow(
+      <MetricVisValue style={font} metric={baseMetric} labelConfig={labelConfig} />
+    );
     expect(component.find('button').exists()).toBe(false);
   });
 
   it('should add -isfilterable class if onFilter is provided', () => {
     const onFilter = jest.fn();
     const component = shallow(
-      <MetricVisValue style={font} metric={baseMetric} onFilter={onFilter} />
+      <MetricVisValue
+        style={font}
+        metric={baseMetric}
+        onFilter={onFilter}
+        labelConfig={labelConfig}
+      />
     );
     component.simulate('click');
     expect(component.find('.mtrVis__container-isfilterable')).toHaveLength(1);
   });
 
   it('should not add -isfilterable class if onFilter is not provided', () => {
-    const component = shallow(<MetricVisValue style={font} metric={baseMetric} />);
+    const component = shallow(
+      <MetricVisValue style={font} metric={baseMetric} labelConfig={labelConfig} />
+    );
     component.simulate('click');
     expect(component.find('.mtrVis__container-isfilterable')).toHaveLength(0);
   });
@@ -55,7 +75,12 @@ describe('MetricVisValue', () => {
   it('should call onFilter callback if provided', () => {
     const onFilter = jest.fn();
     const component = shallow(
-      <MetricVisValue style={font} metric={baseMetric} onFilter={onFilter} />
+      <MetricVisValue
+        style={font}
+        metric={baseMetric}
+        onFilter={onFilter}
+        labelConfig={labelConfig}
+      />
     );
     component.simulate('click');
     expect(onFilter).toHaveBeenCalled();
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_value.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_value.tsx
index 54662ee647b6a..7ca16dcaf862d 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric_value.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_value.tsx
@@ -8,16 +8,16 @@
 
 import React, { CSSProperties } from 'react';
 import classNames from 'classnames';
-import type { MetricOptions, MetricStyle } from '../../common/types';
+import type { MetricOptions, MetricStyle, MetricVisParam } from '../../common/types';
 
 interface MetricVisValueProps {
   metric: MetricOptions;
   onFilter?: () => void;
-  showLabel?: boolean;
   style: MetricStyle;
+  labelConfig: MetricVisParam['labels'];
 }
 
-export const MetricVisValue = ({ style, metric, onFilter, showLabel }: MetricVisValueProps) => {
+export const MetricVisValue = ({ style, metric, onFilter, labelConfig }: MetricVisValueProps) => {
   const containerClassName = classNames('mtrVis__container', {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     'mtrVis__container--light': metric.lightText,
@@ -43,7 +43,16 @@ export const MetricVisValue = ({ style, metric, onFilter, showLabel }: MetricVis
          */
         dangerouslySetInnerHTML={{ __html: metric.value }} // eslint-disable-line react/no-danger
       />
-      {showLabel && <div>{metric.label}</div>}
+      {labelConfig.show && (
+        <div
+          style={{
+            ...(labelConfig.style.spec as CSSProperties),
+            order: labelConfig.position === 'top' ? -1 : 2,
+          }}
+        >
+          {metric.label}
+        </div>
+      )}
     </div>
   );
 

From d23fd359d334d1517b9e6fb19187d8443d6441c6 Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Fri, 11 Feb 2022 11:34:29 +0300
Subject: [PATCH 2/4] Fix CI

---
 .../snapshots/baseline/combined_test3.json                      | 2 +-
 .../snapshots/baseline/final_output_test.json                   | 2 +-
 .../snapshots/baseline/metric_all_data.json                     | 2 +-
 .../snapshots/baseline/metric_empty_data.json                   | 2 +-
 .../snapshots/baseline/metric_multi_metric_data.json            | 2 +-
 .../snapshots/baseline/metric_percentage_mode.json              | 2 +-
 .../snapshots/baseline/metric_single_metric_data.json           | 2 +-
 .../snapshots/baseline/partial_test_2.json                      | 2 +-
 .../snapshots/baseline/step_output_test3.json                   | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/test/interpreter_functional/snapshots/baseline/combined_test3.json b/test/interpreter_functional/snapshots/baseline/combined_test3.json
index 2ddf40eb79006..fdcb506acedf7 100644
--- a/test/interpreter_functional/snapshots/baseline/combined_test3.json
+++ b/test/interpreter_functional/snapshots/baseline/combined_test3.json
@@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
\ No newline at end of file
+{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
\ No newline at end of file
diff --git a/test/interpreter_functional/snapshots/baseline/final_output_test.json b/test/interpreter_functional/snapshots/baseline/final_output_test.json
index 2ddf40eb79006..fdcb506acedf7 100644
--- a/test/interpreter_functional/snapshots/baseline/final_output_test.json
+++ b/test/interpreter_functional/snapshots/baseline/final_output_test.json
@@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
\ No newline at end of file
+{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
\ No newline at end of file
diff --git a/test/interpreter_functional/snapshots/baseline/metric_all_data.json b/test/interpreter_functional/snapshots/baseline/metric_all_data.json
index fb16bf98ce761..152ad083e72a8 100644
--- a/test/interpreter_functional/snapshots/baseline/metric_all_data.json
+++ b/test/interpreter_functional/snapshots/baseline/metric_all_data.json
@@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":2,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
\ No newline at end of file
+{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":2,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
\ No newline at end of file
diff --git a/test/interpreter_functional/snapshots/baseline/metric_empty_data.json b/test/interpreter_functional/snapshots/baseline/metric_empty_data.json
index d667cc6088a3a..241ee3ec029cc 100644
--- a/test/interpreter_functional/snapshots/baseline/metric_empty_data.json
+++ b/test/interpreter_functional/snapshots/baseline/metric_empty_data.json
@@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"rows":[],"type":"datatable"},"visType":"metric"}}
\ No newline at end of file
+{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"rows":[],"type":"datatable"},"visType":"metric"}}
\ No newline at end of file
diff --git a/test/interpreter_functional/snapshots/baseline/metric_multi_metric_data.json b/test/interpreter_functional/snapshots/baseline/metric_multi_metric_data.json
index 6ef90caf3da3e..0c41486ecb27a 100644
--- a/test/interpreter_functional/snapshots/baseline/metric_multi_metric_data.json
+++ b/test/interpreter_functional/snapshots/baseline/metric_multi_metric_data.json
@@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},{"accessor":1,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
\ No newline at end of file
+{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},{"accessor":1,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
\ No newline at end of file
diff --git a/test/interpreter_functional/snapshots/baseline/metric_percentage_mode.json b/test/interpreter_functional/snapshots/baseline/metric_percentage_mode.json
index bc1ec6278dc32..8aa42180c755b 100644
--- a/test/interpreter_functional/snapshots/baseline/metric_percentage_mode.json
+++ b/test/interpreter_functional/snapshots/baseline/metric_percentage_mode.json
@@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"metricColorMode":"None","palette":{"colors":["rgb(0,0,0,0)","rgb(100, 100, 100)"],"continuity":"none","gradient":false,"range":"number","rangeMax":10000,"rangeMin":0,"stops":[0,10000]},"percentageMode":true,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
\ No newline at end of file
+{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":{"colors":["rgb(0,0,0,0)","rgb(100, 100, 100)"],"continuity":"none","gradient":false,"range":"number","rangeMax":10000,"rangeMin":0,"stops":[0,10000]},"percentageMode":true,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
\ No newline at end of file
diff --git a/test/interpreter_functional/snapshots/baseline/metric_single_metric_data.json b/test/interpreter_functional/snapshots/baseline/metric_single_metric_data.json
index b5cc75694b4ba..e2f11f055ebb4 100644
--- a/test/interpreter_functional/snapshots/baseline/metric_single_metric_data.json
+++ b/test/interpreter_functional/snapshots/baseline/metric_single_metric_data.json
@@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
\ No newline at end of file
+{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
\ No newline at end of file
diff --git a/test/interpreter_functional/snapshots/baseline/partial_test_2.json b/test/interpreter_functional/snapshots/baseline/partial_test_2.json
index 2ddf40eb79006..fdcb506acedf7 100644
--- a/test/interpreter_functional/snapshots/baseline/partial_test_2.json
+++ b/test/interpreter_functional/snapshots/baseline/partial_test_2.json
@@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
\ No newline at end of file
+{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
\ No newline at end of file
diff --git a/test/interpreter_functional/snapshots/baseline/step_output_test3.json b/test/interpreter_functional/snapshots/baseline/step_output_test3.json
index 2ddf40eb79006..fdcb506acedf7 100644
--- a/test/interpreter_functional/snapshots/baseline/step_output_test3.json
+++ b/test/interpreter_functional/snapshots/baseline/step_output_test3.json
@@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
\ No newline at end of file
+{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
\ No newline at end of file

From 49a8f75ca02a3b302d7ea304c20a79f2a30a3734 Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Mon, 14 Feb 2022 14:26:21 +0300
Subject: [PATCH 3/4] Fixed remarks

---
 .../expression_metric/common/constants.ts                 | 5 +++++
 .../common/types/expression_functions.ts                  | 4 ++--
 .../common/types/expression_renderers.ts                  | 8 +++++++-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/plugins/chart_expressions/expression_metric/common/constants.ts b/src/plugins/chart_expressions/expression_metric/common/constants.ts
index b39902f61ac45..7d3b84283ec4b 100644
--- a/src/plugins/chart_expressions/expression_metric/common/constants.ts
+++ b/src/plugins/chart_expressions/expression_metric/common/constants.ts
@@ -7,3 +7,8 @@
  */
 
 export const EXPRESSION_METRIC_NAME = 'metricVis';
+
+export const LabelPosition = {
+  BOTTOM: 'bottom',
+  TOP: 'top',
+};
diff --git a/src/plugins/chart_expressions/expression_metric/common/types/expression_functions.ts b/src/plugins/chart_expressions/expression_metric/common/types/expression_functions.ts
index bbc409e4dea0d..acce56ef2878d 100644
--- a/src/plugins/chart_expressions/expression_metric/common/types/expression_functions.ts
+++ b/src/plugins/chart_expressions/expression_metric/common/types/expression_functions.ts
@@ -14,7 +14,7 @@ import {
 } from '../../../../expressions';
 import { ExpressionValueVisDimension } from '../../../../visualizations/common';
 import { ColorMode, CustomPaletteState, PaletteOutput } from '../../../../charts/common';
-import { VisParams, visType } from './expression_renderers';
+import { VisParams, visType, LabelPositionType } from './expression_renderers';
 import { EXPRESSION_METRIC_NAME } from '../constants';
 
 export interface MetricArguments {
@@ -24,7 +24,7 @@ export interface MetricArguments {
   palette?: PaletteOutput<CustomPaletteState>;
   font: Style;
   labelFont: Style;
-  labelPosition: 'bottom' | 'top';
+  labelPosition: LabelPositionType;
   metric: ExpressionValueVisDimension[];
   bucket?: ExpressionValueVisDimension;
   autoScale?: boolean;
diff --git a/src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts b/src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts
index e35e50c65ef8e..3804d015d5803 100644
--- a/src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts
+++ b/src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { $Values } from '@kbn/utility-types';
 import { ExpressionValueVisDimension } from '../../../../visualizations/common';
 import {
   ColorMode,
@@ -14,6 +15,7 @@ import {
   Style as ChartStyle,
 } from '../../../../charts/common';
 import { Style } from '../../../../expressions/common';
+import { LabelPosition } from '../constants';
 
 export const visType = 'metric';
 
@@ -22,13 +24,17 @@ export interface DimensionsVisParam {
   bucket?: ExpressionValueVisDimension;
 }
 
+export type LabelPositionType = $Values<typeof LabelPosition>;
+
 export type MetricStyle = Style & Pick<ChartStyle, 'bgColor' | 'labelColor'>;
+
+export type LabelsConfig = Labels & { style: Style; position: LabelPositionType };
 export interface MetricVisParam {
   percentageMode: boolean;
   percentageFormatPattern?: string;
   metricColorMode: ColorMode;
   palette?: CustomPaletteState;
-  labels: Labels & { style: Style; position: 'bottom' | 'top' };
+  labels: LabelsConfig;
   style: MetricStyle;
   autoScale?: boolean;
 }

From 06c264f636ce099bacfdc61996daaac5fa6fa653 Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Mon, 14 Feb 2022 17:12:18 +0300
Subject: [PATCH 4/4] Some fixes

---
 .../expression_metric/common/constants.ts     |  2 +-
 .../metric_vis_function.test.ts               |  3 +-
 .../metric_vis_function.ts                    | 33 +++++++++++++++--
 .../__stories__/metric_renderer.stories.tsx   | 35 +++++++++++++++++--
 .../components/metric_component.test.tsx      |  3 +-
 .../public/components/metric_value.test.tsx   |  3 +-
 6 files changed, 70 insertions(+), 9 deletions(-)

diff --git a/src/plugins/chart_expressions/expression_metric/common/constants.ts b/src/plugins/chart_expressions/expression_metric/common/constants.ts
index 7d3b84283ec4b..03e8852f8155a 100644
--- a/src/plugins/chart_expressions/expression_metric/common/constants.ts
+++ b/src/plugins/chart_expressions/expression_metric/common/constants.ts
@@ -11,4 +11,4 @@ export const EXPRESSION_METRIC_NAME = 'metricVis';
 export const LabelPosition = {
   BOTTOM: 'bottom',
   TOP: 'top',
-};
+} as const;
diff --git a/src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.test.ts b/src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.test.ts
index 3d7b70ce1715c..30b6954b7c88c 100644
--- a/src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.test.ts
+++ b/src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.test.ts
@@ -10,6 +10,7 @@ import { metricVisFunction } from './metric_vis_function';
 import type { MetricArguments } from '../../common';
 import { functionWrapper } from '../../../../expressions/common/expression_functions/specs/tests/utils';
 import { Datatable } from '../../../../expressions/common/expression_types/specs';
+import { LabelPosition } from '../constants';
 
 describe('interpreter/functions#metric', () => {
   const fn = functionWrapper(metricVisFunction());
@@ -36,7 +37,7 @@ describe('interpreter/functions#metric', () => {
     showLabels: true,
     font: { spec: { fontSize: '60px' }, type: 'style', css: '' },
     labelFont: { spec: { fontSize: '24px' }, type: 'style', css: '' },
-    labelPosition: 'bottom',
+    labelPosition: LabelPosition.BOTTOM,
     metric: [
       {
         type: 'vis_dimension',
diff --git a/src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.ts b/src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.ts
index 2766b5475ceb6..5909ed60da141 100644
--- a/src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.ts
+++ b/src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.ts
@@ -12,7 +12,31 @@ import { visType } from '../types';
 import { prepareLogTable, Dimension } from '../../../../visualizations/common/prepare_log_table';
 import { ColorMode } from '../../../../charts/common';
 import { MetricVisExpressionFunctionDefinition } from '../types';
-import { EXPRESSION_METRIC_NAME } from '../constants';
+import { EXPRESSION_METRIC_NAME, LabelPosition } from '../constants';
+
+const validateOptions = (
+  value: string,
+  availableOptions: Record<string, string>,
+  getErrorMessage: () => string
+) => {
+  if (!Object.values(availableOptions).includes(value)) {
+    throw new Error(getErrorMessage());
+  }
+};
+
+const errors = {
+  invalidColorModeError: () =>
+    i18n.translate('expressionMetricVis.function.errors.invalidColorModeError', {
+      defaultMessage: 'Invalid color mode is specified. Supported color modes: {colorModes}',
+      values: { colorModes: Object.values(ColorMode).join(', ') },
+    }),
+  invalidLabelPositionError: () =>
+    i18n.translate('expressionMetricVis.function.errors.invalidLabelPositionError', {
+      defaultMessage:
+        'Invalid label position is specified. Supported label positions: {labelPosition}',
+      values: { labelPosition: Object.values(LabelPosition).join(', ') },
+    }),
+};
 
 export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
   name: EXPRESSION_METRIC_NAME,
@@ -66,11 +90,11 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
     },
     labelPosition: {
       types: ['string'],
-      options: ['bottom', 'top'],
+      options: [LabelPosition.BOTTOM, LabelPosition.TOP],
       help: i18n.translate('expressionMetricVis.function.labelPosition.help', {
         defaultMessage: 'Label position',
       }),
-      default: `bottom`,
+      default: LabelPosition.BOTTOM,
     },
     metric: {
       types: ['vis_dimension'],
@@ -99,6 +123,9 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
       throw new Error('Palette must be provided when using percentageMode');
     }
 
+    validateOptions(args.colorMode, ColorMode, errors.invalidColorModeError);
+    validateOptions(args.labelPosition, LabelPosition, errors.invalidLabelPositionError);
+
     if (handlers?.inspectorAdapters?.tables) {
       const argsTable: Dimension[] = [
         [
diff --git a/src/plugins/chart_expressions/expression_metric/public/__stories__/metric_renderer.stories.tsx b/src/plugins/chart_expressions/expression_metric/public/__stories__/metric_renderer.stories.tsx
index cff5acf8ac5a0..2dd8f4d19cfaa 100644
--- a/src/plugins/chart_expressions/expression_metric/public/__stories__/metric_renderer.stories.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/__stories__/metric_renderer.stories.tsx
@@ -15,6 +15,7 @@ import { Render } from '../../../../presentation_util/public/__stories__';
 import { ColorMode, CustomPaletteState } from '../../../../charts/common';
 import { getMetricVisRenderer } from '../expression_renderers';
 import { MetricStyle, MetricVisRenderConfig, visType } from '../../common/types';
+import { LabelPosition } from '../../common/constants';
 
 const palette: CustomPaletteState = {
   colors: ['rgb(219 231 38)', 'rgb(112 38 231)', 'rgb(38 124 231)'],
@@ -57,7 +58,11 @@ const config: MetricVisRenderConfig = {
   visConfig: {
     metric: {
       metricColorMode: ColorMode.None,
-      labels: { show: true, style: { spec: {}, type: 'style', css: '' }, position: 'bottom' },
+      labels: {
+        show: true,
+        style: { spec: {}, type: 'style', css: '' },
+        position: LabelPosition.BOTTOM,
+      },
       percentageMode: false,
       style,
     },
@@ -137,7 +142,7 @@ storiesOf('renderers/visMetric', module)
               labels: {
                 show: false,
                 style: { spec: {}, type: 'style', css: '' },
-                position: 'bottom',
+                position: LabelPosition.BOTTOM,
               },
             },
           },
@@ -167,6 +172,32 @@ storiesOf('renderers/visMetric', module)
       />
     );
   })
+  .add('With label position is top and custom font for label', () => {
+    return (
+      <Render
+        renderer={metricVisRenderer}
+        config={{
+          ...config,
+          visConfig: {
+            ...config.visConfig,
+            metric: {
+              ...config.visConfig.metric,
+              style: {
+                ...config.visConfig.metric.style,
+                spec: { ...config.visConfig.metric.style.spec, fontSize: '80px' },
+              },
+              labels: {
+                show: false,
+                style: { spec: { fontSize: '60px', align: 'left' }, type: 'style', css: '' },
+                position: LabelPosition.TOP,
+              },
+            },
+          },
+        }}
+        {...containerSize}
+      />
+    );
+  })
   .add('With color ranges, background color mode', () => {
     return (
       <Render
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.test.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_component.test.tsx
index 88a82cebf25f7..f35205a6a6a4d 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.test.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_component.test.tsx
@@ -10,6 +10,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { Datatable } from '../../../../expressions/common';
 import MetricVisComponent, { MetricVisComponentProps } from './metric_component';
+import { LabelPosition } from '../../common/constants';
 
 jest.mock('../../../expression_metric/public/services', () => ({
   getFormatService: () => {
@@ -55,7 +56,7 @@ describe('MetricVisComponent', function () {
       labels: {
         show: true,
         style: { spec: {}, type: 'style', css: '' },
-        position: 'bottom',
+        position: LabelPosition.BOTTOM,
       },
     },
     dimensions: {
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_value.test.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_value.test.tsx
index cabbb28e49309..872dea382e1c0 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric_value.test.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_value.test.tsx
@@ -11,6 +11,7 @@ import { shallow } from 'enzyme';
 
 import { MetricVisValue } from './metric_value';
 import { MetricOptions, MetricStyle, VisParams } from '../../common/types';
+import { LabelPosition } from '../../common/constants';
 
 const baseMetric: MetricOptions = { label: 'Foo', value: 'foo', lightText: false };
 const font: MetricStyle = {
@@ -26,7 +27,7 @@ const font: MetricStyle = {
 
 const labelConfig: VisParams['metric']['labels'] = {
   show: true,
-  position: 'bottom',
+  position: LabelPosition.BOTTOM,
   style: { spec: {}, type: 'style', css: '' },
 };