diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx
index ed57f38ec886f..53d62aea1dd47 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx
@@ -397,6 +397,61 @@ describe('MetricVisComponent', function () {
       expect(tileConfig.trend).toEqual(trends[DEFAULT_TRENDLINE_NAME]);
       expect(tileConfig.trendShape).toEqual('area');
     });
+
+    it('should display multi-values non-numeric values formatted and without quotes', () => {
+      const newTable: Datatable = {
+        ...table,
+        // change the format id for the columns
+        columns: table.columns.map((column) =>
+          [basePriceColumnId, minPriceColumnId].includes(column.id)
+            ? {
+                ...column,
+                meta: { ...column.meta, params: { id: 'text' } },
+              }
+            : column
+        ),
+        rows: table.rows.map((row) => ({
+          ...row,
+          [basePriceColumnId]: [String(row[basePriceColumnId]), String(100)],
+          [minPriceColumnId]: [String(row[minPriceColumnId]), String(10)],
+        })),
+      };
+      const component = shallow(<MetricVis config={config} data={newTable} {...defaultProps} />);
+
+      const [[visConfig]] = component.find(Metric).props().data!;
+
+      expect(visConfig!.value).toMatchInlineSnapshot(
+        `
+        Array [
+          "text-28.984375",
+          "text-100",
+        ]
+      `
+      );
+    });
+
+    it('should display multi-values numeric values formatted and without quotes', () => {
+      const newTable = {
+        ...table,
+        rows: table.rows.map((row) => ({
+          ...row,
+          [basePriceColumnId]: [row[basePriceColumnId], 100],
+          [minPriceColumnId]: [row[minPriceColumnId], 10],
+        })),
+      };
+      const component = shallow(<MetricVis config={config} data={newTable} {...defaultProps} />);
+
+      const [[visConfig]] = component.find(Metric).props().data!;
+
+      expect(visConfig!.value).toMatchInlineSnapshot(
+        `
+        Array [
+          "number-28.984375",
+          "number-100",
+        ]
+      `
+      );
+    });
   });
 
   describe('metric grid', () => {
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx
index fb1383ce98d48..4591f20922bb6 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx
@@ -208,15 +208,16 @@ export const MetricVis = ({
     const subtitle = breakdownByColumn ? primaryMetricColumn.name : config.metric.subtitle;
 
     if (typeof value !== 'number') {
-      const nonNumericMetric: MetricWText = {
-        value: formatPrimaryMetric(value),
+      const nonNumericMetricBase: Omit<MetricWText, 'value'> = {
         title: String(title),
         subtitle,
         icon: config.metric?.icon ? getIcon(config.metric?.icon) : undefined,
         extra: renderSecondaryMetric(data.columns, row, config),
         color: config.metric.color ?? defaultColor,
       };
-      return nonNumericMetric;
+      return Array.isArray(value)
+        ? { ...nonNumericMetricBase, value: value.map((v) => formatPrimaryMetric(v)) }
+        : { ...nonNumericMetricBase, value: formatPrimaryMetric(value) };
     }
 
     const baseMetric: MetricWNumber = {