diff --git a/src/legacy/core_plugins/kibana/public/discover/kibana_services.ts b/src/legacy/core_plugins/kibana/public/discover/kibana_services.ts
index 7a3a6949baa94c..e1ff2749112848 100644
--- a/src/legacy/core_plugins/kibana/public/discover/kibana_services.ts
+++ b/src/legacy/core_plugins/kibana/public/discover/kibana_services.ts
@@ -75,6 +75,5 @@ export {
   EsQuerySortValue,
   SortDirection,
 } from '../../../../../plugins/data/public';
-export { getFormat } from 'ui/visualize/loader/pipeline_helpers/utilities';
 // @ts-ignore
 export { buildPointSeriesData } from 'ui/agg_response/point_series/point_series';
diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/response_handler.js b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/response_handler.js
index e49f43a443719d..0c19c108415356 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/response_handler.js
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/response_handler.js
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { buildPointSeriesData, getFormat } from '../../kibana_services';
+import { buildPointSeriesData, getServices } from '../../kibana_services';
 
 function tableResponseHandler(table, dimensions) {
   const converted = { tables: [] };
@@ -26,7 +26,7 @@ function tableResponseHandler(table, dimensions) {
   if (split) {
     converted.direction = dimensions.splitRow ? 'row' : 'column';
     const splitColumnIndex = split[0].accessor;
-    const splitColumnFormatter = getFormat(split[0].format);
+    const splitColumnFormatter = getServices().data.fieldFormats.deserialize(split[0].format);
     const splitColumn = table.columns[splitColumnIndex];
     const splitMap = {};
     let splitIndex = 0;
diff --git a/src/legacy/core_plugins/vis_type_metric/public/components/__snapshots__/metric_vis_component.test.tsx.snap b/src/legacy/core_plugins/vis_type_metric/public/components/__snapshots__/metric_vis_component.test.tsx.snap
index d84424cc6179a6..47ca3f1e0465e4 100644
--- a/src/legacy/core_plugins/vis_type_metric/public/components/__snapshots__/metric_vis_component.test.tsx.snap
+++ b/src/legacy/core_plugins/vis_type_metric/public/components/__snapshots__/metric_vis_component.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MetricVisComponent should render correct structure for single metric 1`] = `
+exports[`MetricVisComponent should render correct structure for multi-value metrics 1`] = `
 <div
   className="mtrVis"
 >
@@ -10,45 +10,45 @@ exports[`MetricVisComponent should render correct structure for single metric 1`
       Object {
         "bgColor": undefined,
         "color": undefined,
-        "label": "Count",
+        "label": "1st percentile of bytes",
         "lightText": false,
         "rowIndex": 0,
-        "value": "<span ng-non-bindable>4301021</span>",
+        "value": 182,
       }
     }
     showLabel={true}
   />
-</div>
-`;
-
-exports[`MetricVisComponent should render correct structure for multi-value metrics 1`] = `
-<div
-  className="mtrVis"
->
   <MetricVisValue
-    key="0"
+    key="1"
     metric={
       Object {
         "bgColor": undefined,
         "color": undefined,
-        "label": "1st percentile of bytes",
+        "label": "99th percentile of bytes",
         "lightText": false,
         "rowIndex": 0,
-        "value": "<span ng-non-bindable>182</span>",
+        "value": 445842.4634666484,
       }
     }
     showLabel={true}
   />
+</div>
+`;
+
+exports[`MetricVisComponent should render correct structure for single metric 1`] = `
+<div
+  className="mtrVis"
+>
   <MetricVisValue
-    key="1"
+    key="0"
     metric={
       Object {
         "bgColor": undefined,
         "color": undefined,
-        "label": "99th percentile of bytes",
+        "label": "Count",
         "lightText": false,
         "rowIndex": 0,
-        "value": "<span ng-non-bindable>445842.4634666484</span>",
+        "value": 4301021,
       }
     }
     showLabel={true}
diff --git a/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_component.test.tsx b/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_component.test.tsx
index 7ba4fe017522d3..00e8df2f0f9363 100644
--- a/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_component.test.tsx
+++ b/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_component.test.tsx
@@ -21,13 +21,17 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { MetricVisComponent, MetricVisComponentProps } from './metric_vis_component';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { npStart } from 'ui/new_platform';
-import { fieldFormats } from '../../../../../plugins/data/public';
-import { identity } from 'lodash';
 import { ExprVis } from '../../../visualizations/public/np_ready/public/expressions/vis';
 
-jest.mock('ui/new_platform');
+jest.mock('../services', () => ({
+  getFormatService: () => ({
+    deserialize: () => {
+      return {
+        convert: (x: unknown) => x,
+      };
+    },
+  }),
+}));
 
 type Props = MetricVisComponentProps;
 
@@ -66,12 +70,6 @@ describe('MetricVisComponent', function() {
     return shallow(<MetricVisComponent {...props} />);
   };
 
-  beforeAll(() => {
-    (npStart.plugins.data.fieldFormats.deserialize as jest.Mock).mockImplementation(() => {
-      return new (fieldFormats.FieldFormat.from(identity))();
-    });
-  });
-
   it('should render component', () => {
     expect(getComponent().exists()).toBe(true);
   });
diff --git a/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_component.tsx b/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_component.tsx
index 175458497a05e8..3fca1df92eacb0 100644
--- a/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_component.tsx
+++ b/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_component.tsx
@@ -20,13 +20,13 @@
 import { last, findIndex, isNaN } from 'lodash';
 import React, { Component } from 'react';
 import { isColorDark } from '@elastic/eui';
-import { getFormat } from '../legacy_imports';
 import { MetricVisValue } from './metric_vis_value';
 import { Input } from '../metric_vis_fn';
 import { FieldFormatsContentType, IFieldFormat } from '../../../../../plugins/data/public';
 import { KibanaDatatable } from '../../../../../plugins/expressions/public';
 import { getHeatmapColors } from '../../../../../plugins/charts/public';
 import { VisParams, MetricVisMetric } from '../types';
+import { getFormatService } from '../services';
 import { SchemaConfig } from '../../../visualizations/public';
 import { ExprVis } from '../../../visualizations/public/np_ready/public/expressions/vis';
 
@@ -122,13 +122,13 @@ export class MetricVisComponent extends Component<MetricVisComponentProps> {
 
     if (dimensions.bucket) {
       bucketColumnId = table.columns[dimensions.bucket.accessor].id;
-      bucketFormatter = getFormat(dimensions.bucket.format);
+      bucketFormatter = getFormatService().deserialize(dimensions.bucket.format);
     }
 
     dimensions.metrics.forEach((metric: SchemaConfig) => {
       const columnIndex = metric.accessor;
       const column = table?.columns[columnIndex];
-      const formatter = getFormat(metric.format);
+      const formatter = getFormatService().deserialize(metric.format);
       table.rows.forEach((row, rowIndex) => {
         let title = column.name;
         let value: any = row[column.id];
diff --git a/src/legacy/core_plugins/vis_type_metric/public/legacy.ts b/src/legacy/core_plugins/vis_type_metric/public/legacy.ts
index 87355c57926b6f..5fc2e48609d4bc 100644
--- a/src/legacy/core_plugins/vis_type_metric/public/legacy.ts
+++ b/src/legacy/core_plugins/vis_type_metric/public/legacy.ts
@@ -33,4 +33,4 @@ const plugins: Readonly<MetricVisPluginSetupDependencies> = {
 const pluginInstance = plugin({} as PluginInitializerContext);
 
 export const setup = pluginInstance.setup(npSetup.core, plugins);
-export const start = pluginInstance.start(npStart.core);
+export const start = pluginInstance.start(npStart.core, { data: npStart.plugins.data });
diff --git a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.test.ts b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.test.ts
index c0bfa47bff5023..2a5478f23e8509 100644
--- a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.test.ts
+++ b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.test.ts
@@ -20,14 +20,11 @@
 import $ from 'jquery';
 
 // TODO This is an integration test and thus requires a running platform. When moving to the new platform,
-// this test has to be migrated to the newly created integration test environment.
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { npStart } from 'ui/new_platform';
+// this test has to be migrated to a real unit test.
 // @ts-ignore
 import getStubIndexPattern from 'fixtures/stubbed_logstash_index_pattern';
 
 import { Vis } from '../../visualizations/public';
-import { fieldFormats } from '../../../../plugins/data/public';
 import {
   setup as visualizationsSetup,
   start as visualizationsStart,
@@ -36,6 +33,16 @@ import { createMetricVisTypeDefinition } from './metric_vis_type';
 
 jest.mock('ui/new_platform');
 
+jest.mock('./services', () => ({
+  getFormatService: () => ({
+    deserialize: () => {
+      return {
+        convert: (x: unknown) => `<a href="http://ip.info?address={{${x}}">ip[${x}]</a>`,
+      };
+    },
+  }),
+}));
+
 jest.mock('../../vis_default_editor/public', () => ({
   Schemas: class {},
 }));
@@ -45,12 +52,6 @@ describe('metric_vis - createMetricVisTypeDefinition', () => {
 
   beforeAll(() => {
     visualizationsSetup.createReactVisualization(createMetricVisTypeDefinition());
-    (npStart.plugins.data.fieldFormats.getType as jest.Mock).mockImplementation(() => {
-      return fieldFormats.UrlFormat;
-    });
-    (npStart.plugins.data.fieldFormats.deserialize as jest.Mock).mockImplementation(mapping => {
-      return new fieldFormats.UrlFormat(mapping ? mapping.params : {});
-    });
   });
 
   const setup = () => {
diff --git a/src/legacy/core_plugins/vis_type_metric/public/plugin.ts b/src/legacy/core_plugins/vis_type_metric/public/plugin.ts
index 28b435cbc79807..1c3e1568f4de25 100644
--- a/src/legacy/core_plugins/vis_type_metric/public/plugin.ts
+++ b/src/legacy/core_plugins/vis_type_metric/public/plugin.ts
@@ -24,6 +24,8 @@ import { VisualizationsSetup } from '../../visualizations/public';
 import { createMetricVisFn } from './metric_vis_fn';
 import { createMetricVisTypeDefinition } from './metric_vis_type';
 import { ChartsPluginSetup } from '../../../../plugins/charts/public';
+import { DataPublicPluginStart } from '../../../../plugins/data/public';
+import { setFormatService } from './services';
 
 /** @internal */
 export interface MetricVisPluginSetupDependencies {
@@ -32,6 +34,11 @@ export interface MetricVisPluginSetupDependencies {
   charts: ChartsPluginSetup;
 }
 
+/** @internal */
+export interface MetricVisPluginStartDependencies {
+  data: DataPublicPluginStart;
+}
+
 /** @internal */
 export class MetricVisPlugin implements Plugin<void, void> {
   initializerContext: PluginInitializerContext;
@@ -48,7 +55,7 @@ export class MetricVisPlugin implements Plugin<void, void> {
     visualizations.createReactVisualization(createMetricVisTypeDefinition());
   }
 
-  public start(core: CoreStart) {
-    // nothing to do here yet
+  public start(core: CoreStart, { data }: MetricVisPluginStartDependencies) {
+    setFormatService(data.fieldFormats);
   }
 }
diff --git a/src/legacy/core_plugins/vis_type_metric/public/services.ts b/src/legacy/core_plugins/vis_type_metric/public/services.ts
new file mode 100644
index 00000000000000..5af11bc7f0b039
--- /dev/null
+++ b/src/legacy/core_plugins/vis_type_metric/public/services.ts
@@ -0,0 +1,25 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { createGetterSetter } from '../../../../plugins/kibana_utils/common';
+import { DataPublicPluginStart } from '../../../../plugins/data/public';
+
+export const [getFormatService, setFormatService] = createGetterSetter<
+  DataPublicPluginStart['fieldFormats']
+>('metric data.fieldFormats');
diff --git a/src/legacy/core_plugins/vis_type_table/public/agg_table/agg_table.js b/src/legacy/core_plugins/vis_type_table/public/agg_table/agg_table.js
index 83d7ca4084a202..b9e79f96e4fc13 100644
--- a/src/legacy/core_plugins/vis_type_table/public/agg_table/agg_table.js
+++ b/src/legacy/core_plugins/vis_type_table/public/agg_table/agg_table.js
@@ -18,7 +18,7 @@
  */
 import _ from 'lodash';
 import aggTableTemplate from './agg_table.html';
-import { getFormat } from '../legacy_imports';
+import { getFormatService } from '../services';
 import { i18n } from '@kbn/i18n';
 
 export function KbnAggTable(config, RecursionHelper) {
@@ -127,7 +127,7 @@ export function KbnAggTable(config, RecursionHelper) {
 
               if (!dimension) return;
 
-              const formatter = getFormat(dimension.format);
+              const formatter = getFormatService().deserialize(dimension.format);
 
               const formattedColumn = {
                 id: col.id,
@@ -247,7 +247,7 @@ export function KbnAggTable(config, RecursionHelper) {
 function addPercentageCol(columns, title, rows, insertAtIndex) {
   const { id, sumTotal } = columns[insertAtIndex];
   const newId = `${id}-percents`;
-  const formatter = getFormat({ id: 'percent' });
+  const formatter = getFormatService().deserialize({ id: 'percent' });
   const i18nTitle = i18n.translate('visTypeTable.params.percentageTableColumnName', {
     defaultMessage: '{title} percentages',
     values: { title },
diff --git a/src/legacy/core_plugins/vis_type_table/public/legacy.ts b/src/legacy/core_plugins/vis_type_table/public/legacy.ts
index e5b2619ef29702..30403139d212d9 100644
--- a/src/legacy/core_plugins/vis_type_table/public/legacy.ts
+++ b/src/legacy/core_plugins/vis_type_table/public/legacy.ts
@@ -32,4 +32,4 @@ const plugins: Readonly<TablePluginSetupDependencies> = {
 const pluginInstance = plugin({} as PluginInitializerContext);
 
 export const setup = pluginInstance.setup(npSetup.core, plugins);
-export const start = pluginInstance.start(npStart.core);
+export const start = pluginInstance.start(npStart.core, { data: npStart.plugins.data });
diff --git a/src/legacy/core_plugins/vis_type_table/public/legacy_imports.ts b/src/legacy/core_plugins/vis_type_table/public/legacy_imports.ts
index 287b6c172ffd94..1030e971d64504 100644
--- a/src/legacy/core_plugins/vis_type_table/public/legacy_imports.ts
+++ b/src/legacy/core_plugins/vis_type_table/public/legacy_imports.ts
@@ -18,4 +18,3 @@
  */
 
 export { npSetup, npStart } from 'ui/new_platform';
-export { getFormat } from 'ui/visualize/loader/pipeline_helpers/utilities';
diff --git a/src/legacy/core_plugins/vis_type_table/public/plugin.ts b/src/legacy/core_plugins/vis_type_table/public/plugin.ts
index 519a56da23ac9b..42bd36c83e28c5 100644
--- a/src/legacy/core_plugins/vis_type_table/public/plugin.ts
+++ b/src/legacy/core_plugins/vis_type_table/public/plugin.ts
@@ -23,6 +23,8 @@ import { PluginInitializerContext, CoreSetup, CoreStart, Plugin } from '../../..
 
 import { createTableVisFn } from './table_vis_fn';
 import { tableVisTypeDefinition } from './table_vis_type';
+import { DataPublicPluginStart } from '../../../../plugins/data/public';
+import { setFormatService } from './services';
 
 /** @internal */
 export interface TablePluginSetupDependencies {
@@ -30,6 +32,11 @@ export interface TablePluginSetupDependencies {
   visualizations: VisualizationsSetup;
 }
 
+/** @internal */
+export interface TablePluginStartDependencies {
+  data: DataPublicPluginStart;
+}
+
 /** @internal */
 export class TableVisPlugin implements Plugin<Promise<void>, void> {
   initializerContext: PluginInitializerContext;
@@ -47,7 +54,7 @@ export class TableVisPlugin implements Plugin<Promise<void>, void> {
     visualizations.createBaseVisualization(tableVisTypeDefinition);
   }
 
-  public start(core: CoreStart) {
-    // nothing to do here yet
+  public start(core: CoreStart, { data }: TablePluginStartDependencies) {
+    setFormatService(data.fieldFormats);
   }
 }
diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/legacy_imports.ts b/src/legacy/core_plugins/vis_type_table/public/services.ts
similarity index 73%
rename from src/legacy/core_plugins/vis_type_tagcloud/public/legacy_imports.ts
rename to src/legacy/core_plugins/vis_type_table/public/services.ts
index cd7a8e740d85d8..08efed733cafe5 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/legacy_imports.ts
+++ b/src/legacy/core_plugins/vis_type_table/public/services.ts
@@ -17,4 +17,9 @@
  * under the License.
  */
 
-export { getFormat } from 'ui/visualize/loader/pipeline_helpers/utilities';
+import { createGetterSetter } from '../../../../plugins/kibana_utils/common';
+import { DataPublicPluginStart } from '../../../../plugins/data/public';
+
+export const [getFormatService, setFormatService] = createGetterSetter<
+  DataPublicPluginStart['fieldFormats']
+>('table data.fieldFormats');
diff --git a/src/legacy/core_plugins/vis_type_table/public/table_vis_response_handler.ts b/src/legacy/core_plugins/vis_type_table/public/table_vis_response_handler.ts
index 426480fa5b52de..4bf33c876dfff9 100644
--- a/src/legacy/core_plugins/vis_type_table/public/table_vis_response_handler.ts
+++ b/src/legacy/core_plugins/vis_type_table/public/table_vis_response_handler.ts
@@ -19,7 +19,7 @@
 
 import { Required } from '@kbn/utility-types';
 
-import { getFormat } from './legacy_imports';
+import { getFormatService } from './services';
 import { Input } from './table_vis_fn';
 
 export interface TableContext {
@@ -54,7 +54,7 @@ export function tableVisResponseHandler(table: Input, dimensions: any): TableCon
   if (split) {
     converted.direction = dimensions.splitRow ? 'row' : 'column';
     const splitColumnIndex = split[0].accessor;
-    const splitColumnFormatter = getFormat(split[0].format);
+    const splitColumnFormatter = getFormatService().deserialize(split[0].format);
     const splitColumn = table.columns[splitColumnIndex];
     const splitMap = {};
     let splitIndex = 0;
diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.js b/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.js
index 04f447bf78d505..4094f2ab591588 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.js
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.js
@@ -23,7 +23,7 @@ import { take } from 'rxjs/operators';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { I18nProvider } from '@kbn/i18n/react';
 
-import { getFormat } from '../legacy_imports';
+import { getFormatService } from '../services';
 
 import { Label } from './label';
 import { TagCloud } from './tag_cloud';
@@ -118,7 +118,7 @@ export function createTagCloudVisualization({ colors }) {
 
       const bucket = this._visParams.bucket;
       const metric = this._visParams.metric;
-      const bucketFormatter = bucket ? getFormat(bucket.format) : null;
+      const bucketFormatter = bucket ? getFormatService().deserialize(bucket.format) : null;
       const tagColumn = bucket ? data.columns[bucket.accessor].id : -1;
       const metricColumn = data.columns[metric.accessor].id;
       const tags = data.rows.map((row, rowIndex) => {
diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/legacy.ts b/src/legacy/core_plugins/vis_type_tagcloud/public/legacy.ts
index 182da40a3e6eaf..96073caf205158 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/legacy.ts
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/legacy.ts
@@ -33,4 +33,4 @@ const plugins: Readonly<TagCloudPluginSetupDependencies> = {
 const pluginInstance = plugin({} as PluginInitializerContext);
 
 export const setup = pluginInstance.setup(npSetup.core, plugins);
-export const start = pluginInstance.start(npStart.core);
+export const start = pluginInstance.start(npStart.core, { data: npStart.plugins.data });
diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/plugin.ts b/src/legacy/core_plugins/vis_type_tagcloud/public/plugin.ts
index 8244cba38edc32..c9dd4943519be1 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/plugin.ts
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/plugin.ts
@@ -24,6 +24,8 @@ import { ChartsPluginSetup } from '../../../../plugins/charts/public';
 
 import { createTagCloudFn } from './tag_cloud_fn';
 import { createTagCloudVisTypeDefinition } from './tag_cloud_type';
+import { DataPublicPluginStart } from '../../../../plugins/data/public';
+import { setFormatService } from './services';
 
 /** @internal */
 export interface TagCloudPluginSetupDependencies {
@@ -37,6 +39,11 @@ export interface TagCloudVisDependencies {
   colors: ChartsPluginSetup['colors'];
 }
 
+/** @internal */
+export interface TagCloudVisPluginStartDependencies {
+  data: DataPublicPluginStart;
+}
+
 /** @internal */
 export class TagCloudPlugin implements Plugin<void, void> {
   initializerContext: PluginInitializerContext;
@@ -58,7 +65,7 @@ export class TagCloudPlugin implements Plugin<void, void> {
     );
   }
 
-  public start(core: CoreStart) {
-    // nothing to do here yet
+  public start(core: CoreStart, { data }: TagCloudVisPluginStartDependencies) {
+    setFormatService(data.fieldFormats);
   }
 }
diff --git a/src/legacy/core_plugins/vis_type_metric/public/legacy_imports.ts b/src/legacy/core_plugins/vis_type_tagcloud/public/services.ts
similarity index 73%
rename from src/legacy/core_plugins/vis_type_metric/public/legacy_imports.ts
rename to src/legacy/core_plugins/vis_type_tagcloud/public/services.ts
index cd7a8e740d85d8..30fd185be877d3 100644
--- a/src/legacy/core_plugins/vis_type_metric/public/legacy_imports.ts
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/services.ts
@@ -17,4 +17,9 @@
  * under the License.
  */
 
-export { getFormat } from 'ui/visualize/loader/pipeline_helpers/utilities';
+import { createGetterSetter } from '../../../../plugins/kibana_utils/common';
+import { DataPublicPluginStart } from '../../../../plugins/data/public';
+
+export const [getFormatService, setFormatService] = createGetterSetter<
+  DataPublicPluginStart['fieldFormats']
+>('data.fieldFormats');
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/legacy.ts b/src/legacy/core_plugins/vis_type_vislib/public/legacy.ts
index 5828a0cccebd7b..de3a115fc3e49a 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/legacy.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/legacy.ts
@@ -39,6 +39,7 @@ const setupPlugins: Readonly<VisTypeVislibPluginSetupDependencies> = {
 const startPlugins: Readonly<VisTypeVislibPluginStartDependencies> = {
   expressions: npStart.plugins.expressions,
   visualizations: visualizationsStart,
+  data: npStart.plugins.data,
 };
 
 const pluginInstance = plugin({} as PluginInitializerContext);
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/legacy_imports.ts b/src/legacy/core_plugins/vis_type_vislib/public/legacy_imports.ts
index 2b177bff98d565..667396a14c3dda 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/legacy_imports.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/legacy_imports.ts
@@ -19,7 +19,6 @@
 
 import { npStart } from 'ui/new_platform';
 export const { createFiltersFromEvent } = npStart.plugins.data.actions;
-export { getFormat } from 'ui/visualize/loader/pipeline_helpers/utilities';
 import { search } from '../../../../plugins/data/public';
 export const { tabifyAggResponse, tabifyGetColumns } = search;
 // @ts-ignore
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/plugin.ts b/src/legacy/core_plugins/vis_type_vislib/public/plugin.ts
index a71892cc47b05a..9539adbd2ec29f 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/plugin.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/plugin.ts
@@ -40,6 +40,8 @@ import {
 } from './vis_type_vislib_vis_types';
 import { ChartsPluginSetup } from '../../../../plugins/charts/public';
 import { ConfigSchema as VisTypeXyConfigSchema } from '../../vis_type_xy';
+import { DataPublicPluginStart } from '../../../../plugins/data/public';
+import { setFormatService } from './services';
 
 export interface VisTypeVislibDependencies {
   uiSettings: IUiSettingsClient;
@@ -57,6 +59,7 @@ export interface VisTypeVislibPluginSetupDependencies {
 export interface VisTypeVislibPluginStartDependencies {
   expressions: ReturnType<ExpressionsPublicPlugin['start']>;
   visualizations: VisualizationsStart;
+  data: DataPublicPluginStart;
 }
 
 type VisTypeVislibCoreSetup = CoreSetup<VisTypeVislibPluginStartDependencies>;
@@ -109,6 +112,6 @@ export class VisTypeVislibPlugin implements Plugin<Promise<void>, void> {
   }
 
   public start(core: CoreStart, deps: VisTypeVislibPluginStartDependencies) {
-    // nothing to do here
+    setFormatService(deps.data.fieldFormats);
   }
 }
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/services.ts b/src/legacy/core_plugins/vis_type_vislib/public/services.ts
new file mode 100644
index 00000000000000..658db00b9a31d3
--- /dev/null
+++ b/src/legacy/core_plugins/vis_type_vislib/public/services.ts
@@ -0,0 +1,25 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { createGetterSetter } from '../../../../plugins/kibana_utils/common';
+import { DataPublicPluginStart } from '../../../../plugins/data/public';
+
+export const [getFormatService, setFormatService] = createGetterSetter<
+  DataPublicPluginStart['fieldFormats']
+>('vislib data.fieldFormats');
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/vislib/lib/data.js b/src/legacy/core_plugins/vis_type_vislib/public/vislib/lib/data.js
index 2ed6d899f86028..2df157b6f121db 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/vislib/lib/data.js
+++ b/src/legacy/core_plugins/vis_type_vislib/public/vislib/lib/data.js
@@ -23,7 +23,7 @@ import _ from 'lodash';
 import { injectZeros } from '../components/zero_injection/inject_zeros';
 import { orderXValues } from '../components/zero_injection/ordered_x_keys';
 import { labels } from '../components/labels/labels';
-import { getFormat } from '../../legacy_imports';
+import { getFormatService } from '../../services';
 
 /**
  * Provides an API for pulling values off the data
@@ -56,8 +56,8 @@ export class Data {
           newData[key] = data[key];
         } else {
           newData[key] = data[key].map(seri => {
-            const converter = getFormat(seri.format);
-            const zConverter = getFormat(seri.zFormat);
+            const converter = getFormatService().deserialize(seri.format);
+            const zConverter = getFormatService().deserialize(seri.zFormat);
             return {
               id: seri.id,
               rawId: seri.rawId,
@@ -76,9 +76,9 @@ export class Data {
         }
       });
 
-      const xConverter = getFormat(newData.xAxisFormat);
-      const yConverter = getFormat(newData.yAxisFormat);
-      const zConverter = getFormat(newData.zAxisFormat);
+      const xConverter = getFormatService().deserialize(newData.xAxisFormat);
+      const yConverter = getFormatService().deserialize(newData.yAxisFormat);
+      const zConverter = getFormatService().deserialize(newData.zAxisFormat);
       newData.xAxisFormatter = val => xConverter.convert(val);
       newData.yAxisFormatter = val => yConverter.convert(val);
       newData.zAxisFormatter = val => zConverter.convert(val);
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/vislib/response_handler.js b/src/legacy/core_plugins/vis_type_vislib/public/vislib/response_handler.js
index 0c584fedda217d..9ba86c5181a4c8 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/vislib/response_handler.js
+++ b/src/legacy/core_plugins/vis_type_vislib/public/vislib/response_handler.js
@@ -17,7 +17,8 @@
  * under the License.
  */
 
-import { buildHierarchicalData, buildPointSeriesData, getFormat } from '../legacy_imports';
+import { buildHierarchicalData, buildPointSeriesData } from '../legacy_imports';
+import { getFormatService } from '../services';
 
 function tableResponseHandler(table, dimensions) {
   const converted = { tables: [] };
@@ -26,7 +27,7 @@ function tableResponseHandler(table, dimensions) {
   if (split) {
     converted.direction = dimensions.splitRow ? 'row' : 'column';
     const splitColumnIndex = split[0].accessor;
-    const splitColumnFormatter = getFormat(split[0].format);
+    const splitColumnFormatter = getFormatService().deserialize(split[0].format);
     const splitColumn = table.columns[splitColumnIndex];
     const splitMap = {};
     let splitIndex = 0;
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/_chart.js b/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/_chart.js
index a36c7c4774dadf..8e881c2a157269 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/_chart.js
+++ b/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/_chart.js
@@ -22,7 +22,7 @@ import _ from 'lodash';
 
 import { dataLabel } from '../lib/_data_label';
 import { Dispatch } from '../lib/dispatch';
-import { getFormat } from '../../legacy_imports';
+import { getFormatService } from '../../services';
 import {
   Tooltip,
   hierarchicalTooltipFormatter,
@@ -47,7 +47,9 @@ export class Chart {
 
     const events = (this.events = new Dispatch(handler, deps.uiSettings));
 
-    const fieldFormatter = getFormat(this.handler.data.get('tooltipFormatter'));
+    const fieldFormatter = getFormatService().deserialize(
+      this.handler.data.get('tooltipFormatter')
+    );
     const tooltipFormatterProvider =
       this.handler.visConfig.get('type') === 'pie'
         ? hierarchicalTooltipFormatter
diff --git a/src/legacy/ui/public/agg_response/hierarchical/build_hierarchical_data.test.js b/src/legacy/ui/public/agg_response/hierarchical/build_hierarchical_data.test.js
index f96f194108ff9f..21a937bf1fb66e 100644
--- a/src/legacy/ui/public/agg_response/hierarchical/build_hierarchical_data.test.js
+++ b/src/legacy/ui/public/agg_response/hierarchical/build_hierarchical_data.test.js
@@ -18,7 +18,58 @@
  */
 
 import { buildHierarchicalData } from './build_hierarchical_data';
-import { tableVisResponseHandler } from '../../../../core_plugins/vis_type_table/public/table_vis_response_handler';
+
+function tableVisResponseHandler(table, dimensions) {
+  const converted = {
+    tables: [],
+  };
+
+  const split = dimensions.splitColumn || dimensions.splitRow;
+
+  if (split) {
+    converted.direction = dimensions.splitRow ? 'row' : 'column';
+    const splitColumnIndex = split[0].accessor;
+    const splitColumn = table.columns[splitColumnIndex];
+    const splitMap = {};
+    let splitIndex = 0;
+
+    table.rows.forEach((row, rowIndex) => {
+      const splitValue = row[splitColumn.id];
+
+      if (!splitMap.hasOwnProperty(splitValue)) {
+        splitMap[splitValue] = splitIndex++;
+        const tableGroup = {
+          $parent: converted,
+          title: `splitValue: ${splitColumn.name}`,
+          name: splitColumn.name,
+          key: splitValue,
+          column: splitColumnIndex,
+          row: rowIndex,
+          table,
+          tables: [],
+        };
+
+        tableGroup.tables.push({
+          $parent: tableGroup,
+          columns: table.columns,
+          rows: [],
+        });
+
+        converted.tables.push(tableGroup);
+      }
+
+      const tableIndex = splitMap[splitValue];
+      converted.tables[tableIndex].tables[0].rows.push(row);
+    });
+  } else {
+    converted.tables.push({
+      columns: table.columns,
+      rows: table.rows,
+    });
+  }
+
+  return converted;
+}
 
 jest.mock('ui/new_platform');
 jest.mock('ui/chrome', () => ({
diff --git a/x-pack/legacy/plugins/lens/public/datatable_visualization/expression.tsx b/x-pack/legacy/plugins/lens/public/datatable_visualization/expression.tsx
index 440f7bdc42bcbf..050f294d0b9642 100644
--- a/x-pack/legacy/plugins/lens/public/datatable_visualization/expression.tsx
+++ b/x-pack/legacy/plugins/lens/public/datatable_visualization/expression.tsx
@@ -8,13 +8,12 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { i18n } from '@kbn/i18n';
 import { EuiBasicTable } from '@elastic/eui';
-import { LensMultiTable } from '../types';
+import { FormatFactory, LensMultiTable } from '../types';
 import {
   ExpressionFunctionDefinition,
   ExpressionRenderDefinition,
   IInterpreterRenderHandlers,
 } from '../../../../../../src/plugins/expressions/public';
-import { FormatFactory } from '../../../../../../src/legacy/ui/public/visualize/loader/pipeline_helpers/utilities';
 import { VisualizationContainer } from '../visualization_container';
 
 export interface DatatableColumns {
@@ -102,7 +101,7 @@ export const datatableColumns: ExpressionFunctionDefinition<
 };
 
 export const getDatatableRenderer = (
-  formatFactory: FormatFactory
+  formatFactory: Promise<FormatFactory>
 ): ExpressionRenderDefinition<DatatableProps> => ({
   name: 'lens_datatable_renderer',
   displayName: i18n.translate('xpack.lens.datatable.visualizationName', {
@@ -116,8 +115,9 @@ export const getDatatableRenderer = (
     config: DatatableProps,
     handlers: IInterpreterRenderHandlers
   ) => {
+    const resolvedFormatFactory = await formatFactory;
     ReactDOM.render(
-      <DatatableComponent {...config} formatFactory={formatFactory} />,
+      <DatatableComponent {...config} formatFactory={resolvedFormatFactory} />,
       domNode,
       () => {
         handlers.done();
diff --git a/x-pack/legacy/plugins/lens/public/datatable_visualization/index.ts b/x-pack/legacy/plugins/lens/public/datatable_visualization/index.ts
index 6dee47cc632c27..7a54a5daa30956 100644
--- a/x-pack/legacy/plugins/lens/public/datatable_visualization/index.ts
+++ b/x-pack/legacy/plugins/lens/public/datatable_visualization/index.ts
@@ -8,12 +8,11 @@ import { CoreSetup } from 'src/core/public';
 import { datatableVisualization } from './visualization';
 import { ExpressionsSetup } from '../../../../../../src/plugins/expressions/public';
 import { datatable, datatableColumns, getDatatableRenderer } from './expression';
-import { FormatFactory } from '../legacy_imports';
-import { EditorFrameSetup } from '../types';
+import { EditorFrameSetup, FormatFactory } from '../types';
 
 export interface DatatableVisualizationPluginSetupPlugins {
   expressions: ExpressionsSetup;
-  formatFactory: FormatFactory;
+  formatFactory: Promise<FormatFactory>;
   editorFrame: EditorFrameSetup;
 }
 
diff --git a/x-pack/legacy/plugins/lens/public/legacy.ts b/x-pack/legacy/plugins/lens/public/legacy.ts
index 1cfd3e198547d5..b7d47644c7f31c 100644
--- a/x-pack/legacy/plugins/lens/public/legacy.ts
+++ b/x-pack/legacy/plugins/lens/public/legacy.ts
@@ -5,7 +5,7 @@
  */
 
 import { npSetup, npStart } from 'ui/new_platform';
-import { getFormat, visualizations } from './legacy_imports';
+import { visualizations } from './legacy_imports';
 
 export * from './types';
 
@@ -14,6 +14,6 @@ import { plugin } from './index';
 const pluginInstance = plugin();
 pluginInstance.setup(npSetup.core, {
   ...npSetup.plugins,
-  __LEGACY: { formatFactory: getFormat, visualizations },
+  __LEGACY: { visualizations },
 });
 pluginInstance.start(npStart.core, npStart.plugins);
diff --git a/x-pack/legacy/plugins/lens/public/legacy_imports.ts b/x-pack/legacy/plugins/lens/public/legacy_imports.ts
index 88f189fe3db5a7..d53842d209e2b7 100644
--- a/x-pack/legacy/plugins/lens/public/legacy_imports.ts
+++ b/x-pack/legacy/plugins/lens/public/legacy_imports.ts
@@ -4,6 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { getFormat, FormatFactory } from 'ui/visualize/loader/pipeline_helpers/utilities';
 export { setup as visualizations } from '../../../../../src/legacy/core_plugins/visualizations/public/np_ready/public/legacy';
 export { VisualizationsSetup } from '../../../../../src/legacy/core_plugins/visualizations/public';
diff --git a/x-pack/legacy/plugins/lens/public/metric_visualization/index.ts b/x-pack/legacy/plugins/lens/public/metric_visualization/index.ts
index 217cc6902fc995..65f064258a5e21 100644
--- a/x-pack/legacy/plugins/lens/public/metric_visualization/index.ts
+++ b/x-pack/legacy/plugins/lens/public/metric_visualization/index.ts
@@ -5,15 +5,14 @@
  */
 
 import { CoreSetup } from 'src/core/public';
-import { FormatFactory } from '../legacy_imports';
 import { metricVisualization } from './metric_visualization';
 import { ExpressionsSetup } from '../../../../../../src/plugins/expressions/public';
 import { metricChart, getMetricChartRenderer } from './metric_expression';
-import { EditorFrameSetup } from '../types';
+import { EditorFrameSetup, FormatFactory } from '../types';
 
 export interface MetricVisualizationPluginSetupPlugins {
   expressions: ExpressionsSetup;
-  formatFactory: FormatFactory;
+  formatFactory: Promise<FormatFactory>;
   editorFrame: EditorFrameSetup;
 }
 
diff --git a/x-pack/legacy/plugins/lens/public/metric_visualization/metric_expression.tsx b/x-pack/legacy/plugins/lens/public/metric_visualization/metric_expression.tsx
index 4d979a766cd2b9..a80552e57a9e06 100644
--- a/x-pack/legacy/plugins/lens/public/metric_visualization/metric_expression.tsx
+++ b/x-pack/legacy/plugins/lens/public/metric_visualization/metric_expression.tsx
@@ -6,14 +6,13 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { FormatFactory } from 'ui/visualize/loader/pipeline_helpers/utilities';
 import {
   ExpressionFunctionDefinition,
   ExpressionRenderDefinition,
   IInterpreterRenderHandlers,
 } from '../../../../../../src/plugins/expressions/public';
 import { MetricConfig } from './types';
-import { LensMultiTable } from '../types';
+import { FormatFactory, LensMultiTable } from '../types';
 import { AutoScale } from './auto_scale';
 import { VisualizationContainer } from '../visualization_container';
 
@@ -68,17 +67,26 @@ export const metricChart: ExpressionFunctionDefinition<
 };
 
 export const getMetricChartRenderer = (
-  formatFactory: FormatFactory
+  formatFactory: Promise<FormatFactory>
 ): ExpressionRenderDefinition<MetricChartProps> => ({
   name: 'lens_metric_chart_renderer',
   displayName: 'Metric chart',
   help: 'Metric chart renderer',
   validate: () => undefined,
   reuseDomNode: true,
-  render: (domNode: Element, config: MetricChartProps, handlers: IInterpreterRenderHandlers) => {
-    ReactDOM.render(<MetricChart {...config} formatFactory={formatFactory} />, domNode, () => {
-      handlers.done();
-    });
+  render: async (
+    domNode: Element,
+    config: MetricChartProps,
+    handlers: IInterpreterRenderHandlers
+  ) => {
+    const resolvedFormatFactory = await formatFactory;
+    ReactDOM.render(
+      <MetricChart {...config} formatFactory={resolvedFormatFactory} />,
+      domNode,
+      () => {
+        handlers.done();
+      }
+    );
     handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
   },
 });
diff --git a/x-pack/legacy/plugins/lens/public/plugin.tsx b/x-pack/legacy/plugins/lens/public/plugin.tsx
index 16f1d194b240ac..fad1371199e6a1 100644
--- a/x-pack/legacy/plugins/lens/public/plugin.tsx
+++ b/x-pack/legacy/plugins/lens/public/plugin.tsx
@@ -37,7 +37,6 @@ import {
   getUrlVars,
   getLensUrlFromDashboardAbsoluteUrl,
 } from '../../../../../src/legacy/core_plugins/kibana/public/dashboard/np_ready/url_helper';
-import { FormatFactory } from './legacy_imports';
 import { EmbeddableSetup, EmbeddableStart } from '../../../../../src/plugins/embeddable/public';
 import { EditorFrameStart } from './types';
 import { getLensAliasConfig } from './vis_type_alias';
@@ -48,7 +47,6 @@ export interface LensPluginSetupDependencies {
   data: DataPublicPluginSetup;
   embeddable: EmbeddableSetup;
   __LEGACY: {
-    formatFactory: FormatFactory;
     visualizations: VisualizationsSetup;
   };
 }
@@ -86,7 +84,7 @@ export class LensPlugin {
       expressions,
       data,
       embeddable,
-      __LEGACY: { formatFactory, visualizations },
+      __LEGACY: { visualizations },
     }: LensPluginSetupDependencies
   ) {
     const editorFrameSetupInterface = this.editorFrameService.setup(core, {
@@ -98,7 +96,9 @@ export class LensPlugin {
       expressions,
       data,
       editorFrame: editorFrameSetupInterface,
-      formatFactory,
+      formatFactory: core
+        .getStartServices()
+        .then(([_, { data: dataStart }]) => dataStart.fieldFormats.deserialize),
     };
     this.indexpatternDatasource.setup(core, dependencies);
     this.xyVisualization.setup(core, dependencies);
diff --git a/x-pack/legacy/plugins/lens/public/types.ts b/x-pack/legacy/plugins/lens/public/types.ts
index c897979b06cfb6..3d67b7b2da460c 100644
--- a/x-pack/legacy/plugins/lens/public/types.ts
+++ b/x-pack/legacy/plugins/lens/public/types.ts
@@ -7,14 +7,19 @@
 import { Ast } from '@kbn/interpreter/common';
 import { IconType } from '@elastic/eui/src/components/icon/icon';
 import { CoreSetup } from 'src/core/public';
-import { KibanaDatatable } from '../../../../../src/plugins/expressions/public';
+import {
+  KibanaDatatable,
+  SerializedFieldFormat,
+} from '../../../../../src/plugins/expressions/public';
 import { DragContextState } from './drag_drop';
 import { Document } from './persistence';
 import { DateRange } from '../../../../plugins/lens/common';
-import { Query, Filter, SavedQuery } from '../../../../../src/plugins/data/public';
+import { Query, Filter, SavedQuery, IFieldFormat } from '../../../../../src/plugins/data/public';
 
 export type ErrorCallback = (e: { message: string }) => void;
 
+export type FormatFactory = (mapping?: SerializedFieldFormat) => IFieldFormat;
+
 export interface PublicAPIProps<T> {
   state: T;
   layerId: string;
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization/index.ts b/x-pack/legacy/plugins/lens/public/xy_visualization/index.ts
index fc836d81ada2b5..8cc5abb44d6e1d 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization/index.ts
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization/index.ts
@@ -7,18 +7,17 @@
 import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
 import { CoreSetup, IUiSettingsClient, CoreStart } from 'src/core/public';
 import moment from 'moment-timezone';
-import { FormatFactory } from '../legacy_imports';
 import { ExpressionsSetup } from '../../../../../../src/plugins/expressions/public';
 import { xyVisualization } from './xy_visualization';
 import { xyChart, getXyChartRenderer } from './xy_expression';
 import { legendConfig, xConfig, layerConfig } from './types';
-import { EditorFrameSetup } from '../types';
+import { EditorFrameSetup, FormatFactory } from '../types';
 import { UiActionsStart } from '../../../../../../src/plugins/ui_actions/public';
 import { setExecuteTriggerActions } from './services';
 
 export interface XyVisualizationPluginSetupPlugins {
   expressions: ExpressionsSetup;
-  formatFactory: FormatFactory;
+  formatFactory: Promise<FormatFactory>;
   editorFrame: EditorFrameSetup;
 }
 
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization/xy_expression.tsx b/x-pack/legacy/plugins/lens/public/xy_visualization/xy_expression.tsx
index 98d95c2ea77153..eaf3acf7bb2a7c 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization/xy_expression.tsx
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization/xy_expression.tsx
@@ -30,8 +30,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { EmbeddableVisTriggerContext } from '../../../../../../src/plugins/embeddable/public';
 import { VIS_EVENT_TO_TRIGGER } from '../../../../../../src/legacy/core_plugins/visualizations/public/np_ready/public/embeddable/events';
-import { FormatFactory } from '../../../../../../src/legacy/ui/public/visualize/loader/pipeline_helpers/utilities';
-import { LensMultiTable } from '../types';
+import { LensMultiTable, FormatFactory } from '../types';
 import { XYArgs, SeriesType, visualizationTypes } from './types';
 import { VisualizationContainer } from '../visualization_container';
 import { isHorizontalChart } from './state_helpers';
@@ -108,7 +107,7 @@ export const xyChart: ExpressionFunctionDefinition<
 };
 
 export const getXyChartRenderer = (dependencies: {
-  formatFactory: FormatFactory;
+  formatFactory: Promise<FormatFactory>;
   chartTheme: PartialTheme;
   timeZone: string;
 }): ExpressionRenderDefinition<XYChartProps> => ({
@@ -119,14 +118,17 @@ export const getXyChartRenderer = (dependencies: {
   }),
   validate: () => undefined,
   reuseDomNode: true,
-  render: (domNode: Element, config: XYChartProps, handlers: IInterpreterRenderHandlers) => {
+  render: async (domNode: Element, config: XYChartProps, handlers: IInterpreterRenderHandlers) => {
     const executeTriggerActions = getExecuteTriggerActions();
     handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
+    const formatFactory = await dependencies.formatFactory;
     ReactDOM.render(
       <I18nProvider>
         <XYChartReportable
           {...config}
-          {...dependencies}
+          formatFactory={formatFactory}
+          chartTheme={dependencies.chartTheme}
+          timeZone={dependencies.timeZone}
           executeTriggerActions={executeTriggerActions}
         />
       </I18nProvider>,