diff --git a/.i18nrc.json b/.i18nrc.json
index 04606cb6d5519..8cb0025ad05e0 100644
--- a/.i18nrc.json
+++ b/.i18nrc.json
@@ -12,6 +12,7 @@
     "embeddableExamples": "examples/embeddable_examples",
     "share": "src/plugins/share",
     "home": "src/plugins/home",
+    "charts": "src/plugins/charts",
     "esUi": "src/plugins/es_ui_shared",
     "devTools": "src/plugins/dev_tools",
     "expressions": "src/plugins/expressions",
diff --git a/docs/developer/add-data-guide.asciidoc b/docs/developer/add-data-guide.asciidoc
index aec44a9537ee8..e00e46868bb2d 100644
--- a/docs/developer/add-data-guide.asciidoc
+++ b/docs/developer/add-data-guide.asciidoc
@@ -11,23 +11,24 @@ Each tutorial contains three sets of instructions:
 
 [float]
 === Creating a new tutorial
-// TODO: update path to where the directory must be created on the new platform
-1. Create a new directory in the link:https://github.com/elastic/kibana/tree/master/src/legacy/core_plugins/kibana/server/tutorials[tutorials directory].
-2. In the new directory, create a file called `index.js` that exports a function.
-The function must return a JavaScript object that conforms to the link:https://github.com/elastic/kibana/blob/master/src/plugins/home/server/services/tutorials/lib/tutorial_schema.ts[tutorial schema].
-// TODO: update path to where the tutorial must be registered on the new platform
-3. Register the tutorial in link:https://github.com/elastic/kibana/blob/master/src/legacy/core_plugins/kibana/server/tutorials/register.js[register.js] by calling `server.newPlatform.setup.plugins.home.tutorials.registerTutorial(myFuncImportedFromIndexJs)`.
-// TODO: update path to where the image assets must be added on the new platform
+1. Create a new directory in the link:https://github.com/elastic/kibana/tree/master/src/plugins/home/server/tutorials[tutorials directory].
+2. In the new directory, create a file called `index.ts` that exports a function.
+The function must return a function object that conforms to the `TutorialSchema` interface link:https://github.com/elastic/kibana/blob/master/src/plugins/home/server/services/tutorials/lib/tutorial_schema.ts[tutorial schema].
+3. Register the tutorial in link:https://github.com/elastic/kibana/blob/master/src/plugins/home/server/tutorials/register.ts[register.ts] by adding it to the `builtInTutorials`.
+// TODO update path once assets are migrated
 4. Add image assets to the link:https://github.com/elastic/kibana/tree/master/src/legacy/core_plugins/kibana/public/home/tutorial_resources[tutorial_resources directory].
 5. Run Kibana locally to preview the tutorial.
 6. Create a PR and go through the review process to get the changes approved.
 
+If you are creating a new plugin and the tutorial is only related to that plugin, you can also place the `TutorialSchema` object into your plugin folder. Add `home` to the `requiredPlugins` list in your `kibana.json` file.
+Then register the tutorial object by calling `home.tutorials.registerTutorial(tutorialObject)` in the `setup` lifecycle of your server plugin.
+
 [float]
 ==== Variables
 String values can contain variables that are substituted when rendered. Variables are specified by `{}`.
 For example: `{config.docs.version}` is rendered as `6.2` when running the tutorial in Kibana 6.2.
 
-link:https://github.com/elastic/kibana/blob/master/src/legacy/core_plugins/kibana/public/home/components/tutorial/replace_template_strings.js#L23[Provided variables]
+link:https://github.com/elastic/kibana/blob/master/src/legacy/core_plugins/kibana/public/home/np_ready/components/tutorial/replace_template_strings.js#L23[Provided variables]
 
 [float]
 ==== Markdown
diff --git a/src/core/TESTING.md b/src/core/TESTING.md
index 467110b3874b8..23c0879e4411e 100644
--- a/src/core/TESTING.md
+++ b/src/core/TESTING.md
@@ -41,7 +41,7 @@ If the unit under test expects a particular response from a Core API, the test w
 
 #### Example
 
-```ts
+```typescript
 import { elasticsearchServiceMock } from 'src/core/server/mocks';
 
 test('my test', async () => {
@@ -59,11 +59,319 @@ test('my test', async () => {
 });
 ```
 
-### Strategies for specific Core APIs
+## Strategies for specific Core APIs
 
-#### HTTP Routes
+### HTTP Routes
+The HTTP API interface is another public contract of Kibana, although not every Kibana endpoint is for external use. When evaluating the required level of test coverage for an HTTP resource, make your judgment based on whether an endpoint is considered to be public or private. Public API is expected to have a higher level of test coverage.
+Public API tests should cover the **observable behavior** of the system, therefore they should be close to the real user interactions as much as possible, ideally by using HTTP requests to communicate with the Kibana server as a real user would do.
 
-_How to test route handlers_
+##### Preconditions
+We are going to add tests for `myPlugin` plugin that allows to format user-provided text, store and retrieve it later.
+The plugin has *thin* route controllers isolating all the network layer dependencies and delegating all the logic to the plugin model.
+
+```typescript
+class TextFormatter {
+  public static async format(text: string, sanitizer: Deps['sanitizer']) {
+    // sanitizer.sanitize throws MisformedTextError when passed text contains HTML markup
+    const sanitizedText = await sanitizer.sanitize(text); 
+    return sanitizedText;
+  }
+
+  public static async save(text: string, savedObjectsClient: SavedObjectsClient) {
+    const { id } = await savedObjectsClient.update('myPlugin-type', 'myPlugin', {
+      userText: text
+    });
+    return { id };
+  }
+
+  public static async getById(id: string, savedObjectsClient: SavedObjectsClient) {
+    const { attributes } = await savedObjectsClient.get('myPlugin-type', id);
+    return { text: attributes.userText };
+  }
+}
+router.get(
+  {
+    path: '/myPlugin/formatter',
+    validate: {
+      query: schema.object({
+        text: schema.string({ maxLength: 100 }),
+      }),
+    },
+  },
+  async (context, request, response) => {
+    try {
+      const formattedText = await TextFormatter.format(request.query.text, deps.sanitizer);
+      return response.ok({ body: formattedText });
+    } catch(error) {
+      if (error instanceof MisformedTextError) {
+        return response.badRequest({ body: error.message })
+      }
+
+      throw e;
+    }
+  }
+);
+router.post(
+  {
+    path: '/myPlugin/formatter/text',
+    validate: {
+      body: schema.object({
+        text: schema.string({ maxLength: 100 }),
+      }),
+    },
+  },
+  async (context, request, response) => {
+    try {
+      const { id } = await TextFormatter.save(request.query.text, context.core.savedObjects.client);
+      return response.ok({ body: { id } });
+    } catch(error) {
+      if (SavedObjectsErrorHelpers.isConflictError(error)) {
+        return response.conflict({ body: error.message })
+      }
+      throw e;
+    }
+  }
+);
+
+router.get(
+  {
+    path: '/myPlugin/formatter/text/{id}',
+    validate: {
+      params: schema.object({
+        id: schema.string(),
+      }),
+    },
+  },
+  async (context, request, response) => {
+    try {
+      const { text } = await TextFormatter.getById(request.params.id, context.core.savedObjects.client);
+      return response.ok({
+        body: text
+      });
+    } catch(error) {
+      if (SavedObjectsErrorHelpers.isNotFoundError(error)) {
+        return response.notFound()
+      }
+      throw e;
+    }
+  }
+);
+```
+
+#### Unit testing
+Unit tests provide the simplest and fastest way to test the logic in your route controllers and plugin models. 
+Use them whenever adding an integration test is hard and slow due to complex setup or the number of logic permutations.
+Since all external core and plugin dependencies are mocked, you don't have the guarantee that the whole system works as
+expected.
+Pros:
+- fast
+- easier to debug
+
+Cons:
+- doesn't test against real dependencies
+- doesn't cover integration with other plugins
+
+###### Example
+You can leverage existing unit-test infrastructure for this. You should add `*.test.ts` file and use dependencies mocks to cover the functionality with a broader test suit that covers:
+- input permutations
+- input edge cases
+- expected exception
+- interaction with dependencies
+```typescript
+// src/plugins/my_plugin/server/formatter.test.ts
+describe('TextFormatter', () => {
+  describe('format()', () => {
+    const sanitizer = sanitizerMock.createSetup();
+    sanitizer.sanitize.mockImplementation((input: string) => `sanitizer result:${input}`);
+
+    it('formats text to a ... format', async () => {
+      expect(await TextFormatter.format('aaa', sanitizer)).toBe('...');
+    });
+
+    it('calls Sanitizer.sanitize with correct arguments', async () => {
+      await TextFormatter.format('aaa', sanitizer);
+      expect(sanitizer.sanitize).toHaveBeenCalledTimes(1);
+      expect(sanitizer.sanitize).toHaveBeenCalledWith('aaa');
+    });
+
+    it('throws MisformedTextError if passed string contains banned symbols', async () => {
+      sanitizer.sanitize.mockRejectedValueOnce(new MisformedTextError());
+      await expect(TextFormatter.format('any', sanitizer)).rejects.toThrow(MisformedTextError);
+    });
+    // ... other tests
+  });
+});
+```
+
+#### Integration tests
+Depending on the number of external dependencies, you can consider implementing several high-level integration tests. 
+They would work as a set of [smoke tests](https://en.wikipedia.org/wiki/Smoke_testing_(software)) for the most important functionality.
+Main subjects for tests should be:
+- authenticated / unauthenticated access to an endpoint.
+- endpoint validation (params, query, body).
+- main business logic.
+- dependencies on other plugins.
+
+##### Functional Test Runner
+If your plugin relies on the elasticsearch server to store data and supports additional configuration, you can leverage the Functional Test Runner(FTR) to implement integration tests. 
+FTR bootstraps an elasticsearch and a Kibana instance and runs the test suite against it.
+Pros:
+- runs the whole Elastic stack
+- tests cross-plugin integration
+- emulates a real user interaction with the stack
+- allows adjusting config values
+
+Cons:
+- slow start
+- hard to debug
+- brittle tests
+
+###### Example
+You can reuse existing [api_integration](/test/api_integration/config.js) setup by registering a test file within a [test loader](/test/api_integration/apis/index.js). More about the existing FTR setup in the [contribution guide](/CONTRIBUTING.md#running-specific-kibana-tests)
+
+The tests cover:
+- authenticated / non-authenticated user access (when applicable)
+```typescript
+// TODO after https://github.com/elastic/kibana/pull/53208/
+```
+- request validation
+```typescript
+// test/api_integration/apis/my_plugin/something.ts
+export default function({ getService }: FtrProviderContext) {
+  const supertest = getService('supertest');
+  describe('myPlugin', () => {
+    it('validate params before to store text', async () => {
+      const response = await supertest
+        .post('/myPlugin/formatter/text')
+        .set('content-type', 'application/json')
+        .send({ text: 'aaa'.repeat(100) })
+        .expect(400);
+
+      expect(response.body).to.have.property('message');
+      expect(response.body.message).to.contain('must have a maximum length of [100]');
+    });
+  });
+```
+- the main logic of the plugin
+```typescript
+export default function({ getService }: FtrProviderContext) {
+  const supertest = getService('supertest');
+  describe('myPlugin', () => {
+    it('stores text', async () => {
+      const response = await supertest
+        .post('/myPlugin/formatter/text')
+        .set('content-type', 'application/json')
+        .send({ text: 'aaa' })
+        .expect(200);
+
+      expect(response.body).to.have.property('id');
+      expect(response.body.id).to.be.a('string');
+    });
+
+    it('retrieves text', async () => {
+      const { body } = await supertest
+        .post('/myPlugin/formatter/text')
+        .set('content-type', 'application/json')
+        .send({ text: 'bbb' })
+        .expect(200);
+
+      const response = await supertest.get(`/myPlugin/formatter/text/${body.id}`).expect(200);
+      expect(response.text).be('bbb');
+    });
+
+    it('returns NotFound error when cannot find a text', async () => {
+      await supertest
+        .get('/myPlugin/something/missing')
+        .expect(404, 'Saved object [myPlugin-type/missing] not found');
+    });
+  });
+```
+
+##### TestUtils
+It can be utilized if your plugin doesn't interact with the elasticsearch server or mocks the own methods doing so.
+Runs tests against real Kibana server instance.
+Pros:
+- runs the real Kibana instance
+- tests cross-plugin integration
+- emulates a real user interaction with the HTTP resources
+
+Cons:
+- faster than FTR because it doesn't run elasticsearch instance, but still slow
+- hard to debug
+- doesn't cover Kibana CLI logic
+
+###### Example
+To have access to Kibana TestUtils, you should create `integration_tests` folder and import `test_utils` within a test file:
+```typescript
+// src/plugins/my_plugin/server/integration_tests/formatter.test.ts
+import * as kbnTestServer from 'src/test_utils/kbn_server';
+
+describe('myPlugin', () => {
+  describe('GET /myPlugin/formatter', () => {
+    let root: ReturnType<typeof kbnTestServer.createRoot>;
+    beforeAll(async () => {
+      root = kbnTestServer.createRoot();
+      await root.setup();
+      await root.start();
+    }, 30000);
+
+    afterAll(async () => await root.shutdown());
+    it('validates given text', async () => {
+      const response = await kbnTestServer.request
+        .get(root, '/myPlugin/formatter')
+        .query({ text: 'input string'.repeat(100) })
+        .expect(400);
+
+      expect(response.body).toHaveProperty('message');
+    });
+
+    it('formats given text', async () => {
+      const response = await kbnTestServer.request
+        .get(root, '/myPlugin/formatter')
+        .query({ text: 'input string' })
+        .expect(200);
+
+      expect(response.text).toBe('...');
+    });
+
+    it('returns BadRequest if passed string contains banned symbols', async () => {
+      await kbnTestServer.request
+        .get(root, '/myPlugin/formatter')
+        .query({ text: '<script>' })
+        .expect(400, 'Text cannot contain unescaped HTML markup.');
+    });
+  });
+});
+```
+Sometimes we want to test a route controller logic and don't rely on the internal logic of the platform or a third-party plugin. 
+Then we can apply a hybrid approach and mock the necessary method of `TextFormatter` model to test how `MisformedTextError`
+handled in the route handler without calling `sanitizer` dependency directly.
+```typescript
+jest.mock('../path/to/model');
+import { TextFormatter } from '../path/to/model';
+import { MisformedTextError } from '../path/to/sanitizer'
+
+describe('myPlugin', () => {
+  describe('GET /myPlugin/formatter', () => {
+    let root: ReturnType<typeof kbnTestServer.createRoot>;
+    beforeAll(async () => {
+      root = kbnTestServer.createRoot();
+      await root.setup();
+      await root.start();
+    }, 30000);
+
+    afterAll(async () => await root.shutdown());
+    it('returns BadRequest if Sanitizer throws MisformedTextError', async () => {
+      TextFormatter.format.mockRejectedValueOnce(new MisformedTextError());
+
+      await kbnTestServer.request
+        .get(root, '/myPlugin/formatter')
+        .query({ text: 'any text' })
+        .expect(400, 'bad bad request');
+    });
+  });
+});
+```
 
 ### Applications
 
@@ -80,7 +388,7 @@ While applications do get an opportunity to unmount and run cleanup logic, it is
 
 By following the [renderApp](./CONVENTIONS.md#applications) convention, you can greatly reduce the amount of logic in your application's mount function. This makes testing your application's actual rendering logic easier.
 
-```tsx
+```typescript jsx
 /** public/plugin.ts */
 class Plugin {
   setup(core) {
@@ -104,7 +412,7 @@ We _could_ still write tests for this logic, but you may find that you're just a
 <details>
 <summary>See example</summary>
 
-```ts
+```typescript
 /** public/plugin.test.ts */
 jest.mock('./application', () => ({ renderApp: jest.fn() }));
 import { coreMock } from 'src/core/public/mocks';
@@ -144,7 +452,7 @@ describe('Plugin', () => {
 
 The more interesting logic is in `renderApp`:
 
-```ts
+```typescript
 /** public/application.ts */
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -184,7 +492,7 @@ In testing `renderApp` you should be verifying that:
 1) Your application mounts and unmounts correctly
 2) Cleanup logic is completed as expected
 
-```ts
+```typescript
 /** public/application.test.ts */
 import { coreMock } from 'src/core/public/mocks';
 import { renderApp } from './application';
diff --git a/src/core/server/config/object_to_config_adapter.test.ts b/src/core/server/config/object_to_config_adapter.test.ts
new file mode 100644
index 0000000000000..af41741e6208a
--- /dev/null
+++ b/src/core/server/config/object_to_config_adapter.test.ts
@@ -0,0 +1,53 @@
+/*
+ * 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 { ObjectToConfigAdapter } from './object_to_config_adapter';
+
+describe('ObjectToConfigAdapter', () => {
+  describe('#getFlattenedPaths()', () => {
+    it('considers arrays as final values', () => {
+      const data = {
+        string: 'string',
+        array: ['an', 'array'],
+      };
+      const config = new ObjectToConfigAdapter(data);
+
+      expect(config.getFlattenedPaths()).toEqual(['string', 'array']);
+    });
+
+    it('handles nested arrays', () => {
+      const data = {
+        string: 'string',
+        array: ['an', 'array'],
+        nested: {
+          number: 12,
+          array: [{ key: 1 }, { key: 2 }],
+        },
+      };
+      const config = new ObjectToConfigAdapter(data);
+
+      expect(config.getFlattenedPaths()).toEqual([
+        'string',
+        'array',
+        'nested.number',
+        'nested.array',
+      ]);
+    });
+  });
+});
diff --git a/src/core/server/config/object_to_config_adapter.ts b/src/core/server/config/object_to_config_adapter.ts
index b6ec772603565..d4c2f73364060 100644
--- a/src/core/server/config/object_to_config_adapter.ts
+++ b/src/core/server/config/object_to_config_adapter.ts
@@ -19,6 +19,7 @@
 
 import { cloneDeep, get, has, set } from 'lodash';
 
+import { getFlattenedObject } from '../../utils';
 import { Config, ConfigPath } from './';
 
 /**
@@ -41,24 +42,10 @@ export class ObjectToConfigAdapter implements Config {
   }
 
   public getFlattenedPaths() {
-    return [...flattenObjectKeys(this.rawConfig)];
+    return Object.keys(getFlattenedObject(this.rawConfig));
   }
 
   public toRaw() {
     return cloneDeep(this.rawConfig);
   }
 }
-
-function* flattenObjectKeys(
-  obj: { [key: string]: any },
-  path: string = ''
-): IterableIterator<string> {
-  if (typeof obj !== 'object' || obj === null) {
-    yield path;
-  } else {
-    for (const [key, value] of Object.entries(obj)) {
-      const newPath = path !== '' ? `${path}.${key}` : key;
-      yield* flattenObjectKeys(value, newPath);
-    }
-  }
-}
diff --git a/src/core/server/legacy/config/get_unused_config_keys.test.ts b/src/core/server/legacy/config/get_unused_config_keys.test.ts
index c4452fc6a1209..2106a0748d814 100644
--- a/src/core/server/legacy/config/get_unused_config_keys.test.ts
+++ b/src/core/server/legacy/config/get_unused_config_keys.test.ts
@@ -200,6 +200,24 @@ describe('getUnusedConfigKeys', () => {
     ).toEqual(['foo.dolly']);
   });
 
+  it('handles array values', async () => {
+    expect(
+      await getUnusedConfigKeys({
+        coreHandledConfigPaths: ['core', 'array'],
+        pluginSpecs: [],
+        disabledPluginSpecs: [],
+        settings: {
+          core: {
+            prop: 'value',
+            array: [1, 2, 3],
+          },
+          array: ['some', 'values'],
+        },
+        legacyConfig: getConfig({}),
+      })
+    ).toEqual([]);
+  });
+
   describe('using deprecation', () => {
     it('should use the plugin deprecations provider', async () => {
       expect(
diff --git a/src/core/server/legacy/logging/appenders/legacy_appender.ts b/src/core/server/legacy/logging/appenders/legacy_appender.ts
index 6d82d929e7daa..0c2f4ce93c3b8 100644
--- a/src/core/server/legacy/logging/appenders/legacy_appender.ts
+++ b/src/core/server/legacy/logging/appenders/legacy_appender.ts
@@ -33,6 +33,12 @@ export class LegacyAppender implements DisposableAppender {
     legacyLoggingConfig: schema.any(),
   });
 
+  /**
+   * Sets {@link Appender.receiveAllLevels} because legacy does its own filtering based on the legacy logging
+   * configuration.
+   */
+  public readonly receiveAllLevels = true;
+
   private readonly loggingServer: LegacyLoggingServer;
 
   constructor(legacyLoggingConfig: Readonly<LegacyVars>) {
diff --git a/src/core/server/logging/appenders/appenders.ts b/src/core/server/logging/appenders/appenders.ts
index 3aa86495e4d82..871acb8c465ca 100644
--- a/src/core/server/logging/appenders/appenders.ts
+++ b/src/core/server/logging/appenders/appenders.ts
@@ -42,6 +42,12 @@ export type AppenderConfigType = TypeOf<typeof appendersSchema>;
  */
 export interface Appender {
   append(record: LogRecord): void;
+
+  /**
+   * Used to signal to `Logger` that log level filtering should be ignored for this appender. Defaults to `false`.
+   * @deprecated Should be removed once the `LegacyAppender` is removed.
+   */
+  receiveAllLevels?: boolean;
 }
 
 /**
diff --git a/src/core/server/logging/logger.test.ts b/src/core/server/logging/logger.test.ts
index 026e24fc5df54..eeebb8ad5a0fa 100644
--- a/src/core/server/logging/logger.test.ts
+++ b/src/core/server/logging/logger.test.ts
@@ -410,3 +410,85 @@ test('passes log record to appenders only if log level is supported.', () => {
     });
   }
 });
+
+test('passes log record to appender with receiveAllLevels: true, regardless if log level is supported', () => {
+  const receiveAllAppender = { append: jest.fn(), receiveAllLevels: true };
+  const warnLogger = new BaseLogger(context, LogLevel.Warn, [receiveAllAppender], factory);
+
+  warnLogger.trace('trace-message');
+  expect(receiveAllAppender.append).toHaveBeenCalledTimes(1);
+  expect(receiveAllAppender.append.mock.calls[0][0]).toMatchObject({
+    level: LogLevel.Trace,
+    message: 'trace-message',
+  });
+
+  warnLogger.debug('debug-message');
+  expect(receiveAllAppender.append).toHaveBeenCalledTimes(2);
+  expect(receiveAllAppender.append.mock.calls[1][0]).toMatchObject({
+    level: LogLevel.Debug,
+    message: 'debug-message',
+  });
+
+  warnLogger.info('info-message');
+  expect(receiveAllAppender.append).toHaveBeenCalledTimes(3);
+  expect(receiveAllAppender.append.mock.calls[2][0]).toMatchObject({
+    level: LogLevel.Info,
+    message: 'info-message',
+  });
+
+  warnLogger.warn('warn-message');
+  expect(receiveAllAppender.append).toHaveBeenCalledTimes(4);
+  expect(receiveAllAppender.append.mock.calls[3][0]).toMatchObject({
+    level: LogLevel.Warn,
+    message: 'warn-message',
+  });
+
+  warnLogger.error('error-message');
+  expect(receiveAllAppender.append).toHaveBeenCalledTimes(5);
+  expect(receiveAllAppender.append.mock.calls[4][0]).toMatchObject({
+    level: LogLevel.Error,
+    message: 'error-message',
+  });
+
+  warnLogger.fatal('fatal-message');
+  expect(receiveAllAppender.append).toHaveBeenCalledTimes(6);
+  expect(receiveAllAppender.append.mock.calls[5][0]).toMatchObject({
+    level: LogLevel.Fatal,
+    message: 'fatal-message',
+  });
+});
+
+test('passes log record to appender with receiveAllLevels: false, only if log level is supported', () => {
+  const notReceiveAllAppender = { append: jest.fn(), receiveAllLevels: false };
+  const warnLogger = new BaseLogger(context, LogLevel.Warn, [notReceiveAllAppender], factory);
+
+  warnLogger.trace('trace-message');
+  expect(notReceiveAllAppender.append).toHaveBeenCalledTimes(0);
+
+  warnLogger.debug('debug-message');
+  expect(notReceiveAllAppender.append).toHaveBeenCalledTimes(0);
+
+  warnLogger.info('info-message');
+  expect(notReceiveAllAppender.append).toHaveBeenCalledTimes(0);
+
+  warnLogger.warn('warn-message');
+  expect(notReceiveAllAppender.append).toHaveBeenCalledTimes(1);
+  expect(notReceiveAllAppender.append.mock.calls[0][0]).toMatchObject({
+    level: LogLevel.Warn,
+    message: 'warn-message',
+  });
+
+  warnLogger.error('error-message');
+  expect(notReceiveAllAppender.append).toHaveBeenCalledTimes(2);
+  expect(notReceiveAllAppender.append.mock.calls[1][0]).toMatchObject({
+    level: LogLevel.Error,
+    message: 'error-message',
+  });
+
+  warnLogger.fatal('fatal-message');
+  expect(notReceiveAllAppender.append).toHaveBeenCalledTimes(3);
+  expect(notReceiveAllAppender.append.mock.calls[2][0]).toMatchObject({
+    level: LogLevel.Fatal,
+    message: 'fatal-message',
+  });
+});
diff --git a/src/core/server/logging/logger.ts b/src/core/server/logging/logger.ts
index ac79c1916c07b..ab6906ff5d684 100644
--- a/src/core/server/logging/logger.ts
+++ b/src/core/server/logging/logger.ts
@@ -136,12 +136,12 @@ export class BaseLogger implements Logger {
   }
 
   public log(record: LogRecord) {
-    if (!this.level.supports(record.level)) {
-      return;
-    }
+    const supportedLevel = this.level.supports(record.level);
 
     for (const appender of this.appenders) {
-      appender.append(record);
+      if (supportedLevel || appender.receiveAllLevels) {
+        appender.append(record);
+      }
     }
   }
 
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/__tests__/get_embeddable_factories_mock.ts b/src/legacy/core_plugins/kibana/public/dashboard/__tests__/get_embeddable_factories_mock.ts
deleted file mode 100644
index 357ab307c3f12..0000000000000
--- a/src/legacy/core_plugins/kibana/public/dashboard/__tests__/get_embeddable_factories_mock.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
- * 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.
- */
-
-/* global jest */
-export function getEmbeddableFactoryMock(config?: any) {
-  const embeddableFactoryMockDefaults = {
-    create: jest.fn(() => Promise.resolve({})),
-  };
-  return Object.assign(embeddableFactoryMockDefaults, config);
-}
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/__tests__/__snapshots__/dashboard_empty_screen.test.tsx.snap b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/__snapshots__/dashboard_empty_screen.test.tsx.snap
similarity index 100%
rename from src/legacy/core_plugins/kibana/public/dashboard/__tests__/__snapshots__/dashboard_empty_screen.test.tsx.snap
rename to src/legacy/core_plugins/kibana/public/dashboard/np_ready/__snapshots__/dashboard_empty_screen.test.tsx.snap
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/__tests__/dashboard_empty_screen.test.tsx b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_empty_screen.test.tsx
similarity index 96%
rename from src/legacy/core_plugins/kibana/public/dashboard/__tests__/dashboard_empty_screen.test.tsx
rename to src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_empty_screen.test.tsx
index 347502c2560ab..d5e22798b4f24 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/__tests__/dashboard_empty_screen.test.tsx
+++ b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_empty_screen.test.tsx
@@ -18,10 +18,7 @@
  */
 import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
-import {
-  DashboardEmptyScreen,
-  DashboardEmptyScreenProps,
-} from '../np_ready/dashboard_empty_screen';
+import { DashboardEmptyScreen, DashboardEmptyScreenProps } from './dashboard_empty_screen';
 // @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { coreMock } from '../../../../../../core/public/mocks';
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_state.test.ts b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_state.test.ts
index 152cd84b7c38d..60ea14dad19e1 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_state.test.ts
+++ b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_state.test.ts
@@ -20,7 +20,7 @@
 import './np_core.test.mocks';
 import { createBrowserHistory } from 'history';
 import { DashboardStateManager } from './dashboard_state_manager';
-import { getSavedDashboardMock } from '../__tests__';
+import { getSavedDashboardMock } from './test_utils';
 import { InputTimeRange, TimefilterContract, TimeRange } from 'src/plugins/data/public';
 import { ViewMode } from 'src/plugins/embeddable/public';
 import { createKbnUrlStateStorage } from 'src/plugins/kibana_utils/public';
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/__tests__/get_saved_dashboard_mock.ts b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/test_utils/get_saved_dashboard_mock.ts
similarity index 85%
rename from src/legacy/core_plugins/kibana/public/dashboard/__tests__/get_saved_dashboard_mock.ts
rename to src/legacy/core_plugins/kibana/public/dashboard/np_ready/test_utils/get_saved_dashboard_mock.ts
index baf5bad510ce1..d5e61936f67cf 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/__tests__/get_saved_dashboard_mock.ts
+++ b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/test_utils/get_saved_dashboard_mock.ts
@@ -17,9 +17,8 @@
  * under the License.
  */
 
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { searchSourceMock } from '../../../../../../plugins/data/public/search/search_source/mocks';
-import { SavedObjectDashboard } from '../saved_dashboard/saved_dashboard';
+import { searchSourceMock } from '../../../../../../../plugins/data/public/search/search_source/mocks';
+import { SavedObjectDashboard } from '../../saved_dashboard/saved_dashboard';
 
 export function getSavedDashboardMock(
   config?: Partial<SavedObjectDashboard>
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/__tests__/index.ts b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/test_utils/index.ts
similarity index 91%
rename from src/legacy/core_plugins/kibana/public/dashboard/__tests__/index.ts
rename to src/legacy/core_plugins/kibana/public/dashboard/np_ready/test_utils/index.ts
index 2b992f95695f3..a9a306da7f1a2 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/__tests__/index.ts
+++ b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/test_utils/index.ts
@@ -18,4 +18,3 @@
  */
 
 export { getSavedDashboardMock } from './get_saved_dashboard_mock';
-export { getEmbeddableFactoryMock } from './get_embeddable_factories_mock';
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/__tests__/url_helper.test.ts b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/url_helper.test.ts
similarity index 99%
rename from src/legacy/core_plugins/kibana/public/dashboard/__tests__/url_helper.test.ts
rename to src/legacy/core_plugins/kibana/public/dashboard/np_ready/url_helper.test.ts
index df2dbfd54c130..60ca1b39d29d6 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/__tests__/url_helper.test.ts
+++ b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/url_helper.test.ts
@@ -47,7 +47,7 @@ import {
   addEmbeddableToDashboardUrl,
   getLensUrlFromDashboardAbsoluteUrl,
   getUrlVars,
-} from '../np_ready/url_helper';
+} from './url_helper';
 
 describe('Dashboard URL Helper', () => {
   beforeEach(() => {
diff --git a/src/legacy/core_plugins/kibana/public/discover/build_services.ts b/src/legacy/core_plugins/kibana/public/discover/build_services.ts
index bc2436ecdf5ea..f9265323b2dcb 100644
--- a/src/legacy/core_plugins/kibana/public/discover/build_services.ts
+++ b/src/legacy/core_plugins/kibana/public/discover/build_services.ts
@@ -32,10 +32,10 @@ import {
 } from 'src/plugins/data/public';
 import { createSavedSearchesLoader } from './saved_searches';
 import { DiscoverStartPlugins } from './plugin';
-import { EuiUtilsStart } from '../../../../../plugins/eui_utils/public';
 import { SharePluginStart } from '../../../../../plugins/share/public';
 import { SavedSearch } from './np_ready/types';
 import { DocViewsRegistry } from './np_ready/doc_views/doc_views_registry';
+import { ChartsPluginStart } from '../../../../../plugins/charts/public';
 
 export interface DiscoverServices {
   addBasePath: (path: string) => string;
@@ -45,7 +45,7 @@ export interface DiscoverServices {
   data: DataPublicPluginStart;
   docLinks: DocLinksStart;
   docViewsRegistry: DocViewsRegistry;
-  eui_utils: EuiUtilsStart;
+  theme: ChartsPluginStart['theme'];
   filterManager: FilterManager;
   indexPatterns: IndexPatternsContract;
   inspector: unknown;
@@ -77,7 +77,7 @@ export async function buildServices(
     data: plugins.data,
     docLinks: core.docLinks,
     docViewsRegistry,
-    eui_utils: plugins.eui_utils,
+    theme: plugins.charts.theme,
     filterManager: plugins.data.query.filterManager,
     getSavedSearchById: async (id: string) => savedObjectService.get(id),
     getSavedSearchUrlById: async (id: string) => savedObjectService.urlFor(id),
diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx
index b83ac5b4a7795..4d387f44c3d57 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx
@@ -114,13 +114,13 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
 
   private subscription?: Subscription;
   public state = {
-    chartsTheme: getServices().eui_utils.getChartsThemeDefault(),
+    chartsTheme: getServices().theme.chartsDefaultTheme,
   };
 
   componentDidMount() {
-    this.subscription = getServices()
-      .eui_utils.getChartsTheme$()
-      .subscribe((chartsTheme: EuiChartThemeType['theme']) => this.setState({ chartsTheme }));
+    this.subscription = getServices().theme.chartsTheme$.subscribe(
+      (chartsTheme: EuiChartThemeType['theme']) => this.setState({ chartsTheme })
+    );
   }
 
   componentWillUnmount() {
diff --git a/src/legacy/core_plugins/kibana/public/discover/plugin.ts b/src/legacy/core_plugins/kibana/public/discover/plugin.ts
index 0897f62574e93..77135f6a98173 100644
--- a/src/legacy/core_plugins/kibana/public/discover/plugin.ts
+++ b/src/legacy/core_plugins/kibana/public/discover/plugin.ts
@@ -27,7 +27,7 @@ import { IEmbeddableStart, IEmbeddableSetup } from '../../../../../plugins/embed
 import { getInnerAngularModule, getInnerAngularModuleEmbeddable } from './get_inner_angular';
 import { setAngularModule, setServices } from './kibana_services';
 import { NavigationPublicPluginStart as NavigationStart } from '../../../../../plugins/navigation/public';
-import { EuiUtilsStart } from '../../../../../plugins/eui_utils/public';
+import { ChartsPluginStart } from '../../../../../plugins/charts/public';
 import { buildServices } from './build_services';
 import { SharePluginStart } from '../../../../../plugins/share/public';
 import { KibanaLegacySetup } from '../../../../../plugins/kibana_legacy/public';
@@ -56,7 +56,7 @@ export interface DiscoverStartPlugins {
   uiActions: IUiActionsStart;
   embeddable: IEmbeddableStart;
   navigation: NavigationStart;
-  eui_utils: EuiUtilsStart;
+  charts: ChartsPluginStart;
   data: DataPublicPluginStart;
   share: SharePluginStart;
   inspector: any;
diff --git a/src/legacy/core_plugins/kibana/public/kibana.js b/src/legacy/core_plugins/kibana/public/kibana.js
index bd947b9cb9d7f..50f1702a2a6d0 100644
--- a/src/legacy/core_plugins/kibana/public/kibana.js
+++ b/src/legacy/core_plugins/kibana/public/kibana.js
@@ -52,7 +52,6 @@ import './visualize/legacy';
 import './dashboard/legacy';
 import './management';
 import './dev_tools';
-import 'ui/color_maps';
 import 'ui/agg_response';
 import 'ui/agg_types';
 import { showAppRedirectNotification } from 'ui/notify';
diff --git a/src/legacy/core_plugins/region_map/public/choropleth_layer.js b/src/legacy/core_plugins/region_map/public/choropleth_layer.js
index 8132976fcbc69..e637a217bfbc3 100644
--- a/src/legacy/core_plugins/region_map/public/choropleth_layer.js
+++ b/src/legacy/core_plugins/region_map/public/choropleth_layer.js
@@ -23,11 +23,12 @@ import _ from 'lodash';
 import d3 from 'd3';
 import { i18n } from '@kbn/i18n';
 import { KibanaMapLayer } from 'ui/vis/map/kibana_map_layer';
-import { truncatedColorMaps } from 'ui/color_maps';
 import * as topojson from 'topojson-client';
 import { toastNotifications } from 'ui/notify';
 import * as colorUtil from 'ui/vis/map/color_util';
 
+import { truncatedColorMaps } from '../../../../plugins/charts/public';
+
 const EMPTY_STYLE = {
   weight: 1,
   opacity: 0.6,
diff --git a/src/legacy/core_plugins/region_map/public/region_map_type.js b/src/legacy/core_plugins/region_map/public/region_map_type.js
index 39353a379ce52..c6c345782d5f5 100644
--- a/src/legacy/core_plugins/region_map/public/region_map_type.js
+++ b/src/legacy/core_plugins/region_map/public/region_map_type.js
@@ -19,11 +19,11 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { Schemas } from 'ui/vis/editors/default/schemas';
-import { truncatedColorSchemas as colorSchemas } from 'ui/color_maps';
 import { mapToLayerWithId } from './util';
 import { createRegionMapVisualization } from './region_map_visualization';
 import { Status } from '../../visualizations/public';
 import { RegionMapOptions } from './components/region_map_options';
+import { truncatedColorSchemas } from '../../../../plugins/charts/public';
 
 // TODO: reference to TILE_MAP plugin should be removed
 import { ORIGIN } from '../../tile_map/common/origin';
@@ -60,7 +60,7 @@ provided base maps, or add your own. Darker colors represent higher values.',
     editorConfig: {
       optionsTemplate: props => <RegionMapOptions {...props} serviceSettings={serviceSettings} />,
       collections: {
-        colorSchemas,
+        colorSchemas: truncatedColorSchemas,
         vectorLayers: [],
         tmsLayers: [],
       },
diff --git a/src/legacy/core_plugins/region_map/public/region_map_visualization.js b/src/legacy/core_plugins/region_map/public/region_map_visualization.js
index f9a5793ca8137..8b5812052a395 100644
--- a/src/legacy/core_plugins/region_map/public/region_map_visualization.js
+++ b/src/legacy/core_plugins/region_map/public/region_map_visualization.js
@@ -19,11 +19,11 @@
 
 import { i18n } from '@kbn/i18n';
 import ChoroplethLayer from './choropleth_layer';
-import { truncatedColorMaps } from 'ui/color_maps';
 import { getFormat } from 'ui/visualize/loader/pipeline_helpers/utilities';
 import { toastNotifications } from 'ui/notify';
 
 import { TileMapTooltipFormatter } from './tooltip_formatter';
+import { truncatedColorMaps } from '../../../../plugins/charts/public';
 
 // TODO: reference to TILE_MAP plugin should be removed
 import { BaseMapsVisualizationProvider } from '../../tile_map/public/base_maps_visualization';
diff --git a/src/legacy/core_plugins/tile_map/public/markers/scaled_circles.js b/src/legacy/core_plugins/tile_map/public/markers/scaled_circles.js
index fe29d9b6aad21..88d6db82946c7 100644
--- a/src/legacy/core_plugins/tile_map/public/markers/scaled_circles.js
+++ b/src/legacy/core_plugins/tile_map/public/markers/scaled_circles.js
@@ -22,9 +22,10 @@ import _ from 'lodash';
 import d3 from 'd3';
 import $ from 'jquery';
 import { EventEmitter } from 'events';
-import { truncatedColorMaps } from 'ui/color_maps';
 import * as colorUtil from 'ui/vis/map/color_util';
 
+import { truncatedColorMaps } from '../../../../../plugins/charts/public';
+
 export class ScaledCirclesMarkers extends EventEmitter {
   constructor(
     featureCollection,
@@ -87,7 +88,7 @@ export class ScaledCirclesMarkers extends EventEmitter {
 
     const quantizeDomain = min !== max ? [min, max] : d3.scale.quantize().domain();
 
-    this._legendColors = makeLegendColors(this._colorRamp);
+    this._legendColors = this.getLegendColors();
     this._legendQuantizer = d3.scale
       .quantize()
       .domain(quantizeDomain)
@@ -222,11 +223,11 @@ export class ScaledCirclesMarkers extends EventEmitter {
   getBounds() {
     return this._leafletLayer.getBounds();
   }
-}
 
-function makeLegendColors(colorRampKey) {
-  const colorRamp = _.get(truncatedColorMaps[colorRampKey], 'value');
-  return colorUtil.getLegendColors(colorRamp);
+  getLegendColors() {
+    const colorRamp = _.get(truncatedColorMaps[this._colorRamp], 'value');
+    return colorUtil.getLegendColors(colorRamp);
+  }
 }
 
 function makeColorDarker(color) {
diff --git a/src/legacy/core_plugins/tile_map/public/tile_map_type.js b/src/legacy/core_plugins/tile_map/public/tile_map_type.js
index c58c226f0aba0..b4fca3009352a 100644
--- a/src/legacy/core_plugins/tile_map/public/tile_map_type.js
+++ b/src/legacy/core_plugins/tile_map/public/tile_map_type.js
@@ -21,7 +21,6 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 
 import { Schemas } from 'ui/vis/editors/default/schemas';
-import { truncatedColorSchemas as colorSchemas } from 'ui/color_maps';
 import { convertToGeoJson } from 'ui/vis/map/convert_to_geojson';
 
 import { createTileMapVisualization } from './tile_map_visualization';
@@ -29,6 +28,7 @@ import { Status } from '../../visualizations/public';
 import { TileMapOptions } from './components/tile_map_options';
 import { MapTypes } from './map_types';
 import { supportsCssFilters } from './css_filters';
+import { truncatedColorSchemas } from '../../../../plugins/charts/public';
 
 export function createTileMapTypeDefinition(dependencies) {
   const CoordinateMapsVisualization = createTileMapVisualization(dependencies);
@@ -63,7 +63,7 @@ export function createTileMapTypeDefinition(dependencies) {
     responseHandler: convertToGeoJson,
     editorConfig: {
       collections: {
-        colorSchemas,
+        colorSchemas: truncatedColorSchemas,
         legendPositions: [
           {
             value: 'bottomleft',
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 901273ccbeb95..ada9e8c248a02 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
@@ -20,12 +20,12 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { MetricVisComponent } from './metric_vis_component';
 import { Vis } from '../legacy_imports';
+import { MetricVisComponent, MetricVisComponentProps } from './metric_vis_component';
 
 jest.mock('ui/new_platform');
 
-type Props = MetricVisComponent['props'];
+type Props = MetricVisComponentProps;
 
 const baseVisData = {
   columns: [{ id: 'col-0', name: 'Count' }],
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 3a6d60a89e610..df563306ef832 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
@@ -22,15 +22,16 @@ import React, { Component } from 'react';
 
 import { isColorDark } from '@elastic/eui';
 
-import { getHeatmapColors, getFormat, Vis } from '../legacy_imports';
+import { getFormat, Vis } from '../legacy_imports';
 import { MetricVisValue } from './metric_vis_value';
 import { fieldFormats } from '../../../../../plugins/data/public';
 import { Context } from '../metric_vis_fn';
 import { KibanaDatatable } from '../../../../../plugins/expressions/public';
+import { getHeatmapColors } from '../../../../../plugins/charts/public';
 import { VisParams, MetricVisMetric } from '../types';
 import { SchemaConfig } from '../../../visualizations/public';
 
-interface MetricVisComponentProps {
+export interface MetricVisComponentProps {
   visParams: VisParams;
   visData: Context;
   vis: Vis;
@@ -50,7 +51,6 @@ export class MetricVisComponent extends Component<MetricVisComponentProps> {
       const to = isPercentageMode ? Math.round((100 * range.to) / max) : range.to;
       labels.push(`${from} - ${to}`);
     });
-
     return labels;
   }
 
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 65179ae1315c6..87355c57926b6 100644
--- a/src/legacy/core_plugins/vis_type_metric/public/legacy.ts
+++ b/src/legacy/core_plugins/vis_type_metric/public/legacy.ts
@@ -27,6 +27,7 @@ import { plugin } from '.';
 const plugins: Readonly<MetricVisPluginSetupDependencies> = {
   expressions: npSetup.plugins.expressions,
   visualizations: visualizationsSetup,
+  charts: npSetup.plugins.charts,
 };
 
 const pluginInstance = plugin({} as PluginInitializerContext);
diff --git a/src/legacy/core_plugins/vis_type_metric/public/legacy_imports.ts b/src/legacy/core_plugins/vis_type_metric/public/legacy_imports.ts
index 93dfd76e16b16..6f02407919baa 100644
--- a/src/legacy/core_plugins/vis_type_metric/public/legacy_imports.ts
+++ b/src/legacy/core_plugins/vis_type_metric/public/legacy_imports.ts
@@ -18,8 +18,6 @@
  */
 
 export { Vis, VisParams } from 'ui/vis';
-export { vislibColorMaps, colorSchemas, ColorSchemas } from 'ui/color_maps';
-export { getHeatmapColors } from 'ui/color_maps';
 export { getFormat } from 'ui/visualize/loader/pipeline_helpers/utilities';
 export { VisOptionsProps } from 'ui/vis/editors/default';
 // @ts-ignore
diff --git a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.test.ts b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.test.ts
index cdd8c2e5b05b3..389b0f53916d0 100644
--- a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.test.ts
+++ b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.test.ts
@@ -18,8 +18,7 @@
  */
 
 import { createMetricVisFn } from './metric_vis_fn';
-
-// eslint-disable-next-line
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { functionWrapper } from '../../../../plugins/expressions/public/functions/tests/utils';
 
 jest.mock('ui/new_platform');
diff --git a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.ts b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.ts
index 4ebd8bf97c55a..644de88021c1f 100644
--- a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.ts
+++ b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.ts
@@ -19,7 +19,6 @@
 
 import { i18n } from '@kbn/i18n';
 
-import { vislibColorMaps, ColorSchemas } from './legacy_imports';
 import {
   ExpressionFunction,
   KibanaDatatable,
@@ -29,6 +28,7 @@ import {
 } from '../../../../plugins/expressions/public';
 import { ColorModes } from '../../vis_type_vislib/public';
 import { visType, DimensionsVisParam, VisParams } from './types';
+import { ColorSchemas, vislibColorMaps } from '../../../../plugins/charts/public';
 
 export type Context = KibanaDatatable;
 
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 c2b7e6da3f7bd..4f535c62f56a0 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
@@ -29,7 +29,7 @@ import {
   setup as visualizationsSetup,
   start as visualizationsStart,
 } from '../../visualizations/public/np_ready/public/legacy';
-import { metricVisTypeDefinition } from './metric_vis_type';
+import { createMetricVisTypeDefinition } from './metric_vis_type';
 
 jest.mock('ui/new_platform');
 
@@ -37,7 +37,7 @@ describe('metric_vis - createMetricVisTypeDefinition', () => {
   let vis: Vis;
 
   beforeAll(() => {
-    visualizationsSetup.types.createReactVisualization(metricVisTypeDefinition);
+    visualizationsSetup.types.createReactVisualization(createMetricVisTypeDefinition());
     (npStart.plugins.data.fieldFormats.getType as jest.Mock).mockImplementation(() => {
       return fieldFormats.UrlFormat;
     });
diff --git a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.ts b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.ts
index ee7ead0b7331b..0b8d9b17659f4 100644
--- a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.ts
+++ b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.ts
@@ -22,9 +22,10 @@ import { i18n } from '@kbn/i18n';
 import { MetricVisComponent } from './components/metric_vis_component';
 import { MetricVisOptions } from './components/metric_vis_options';
 import { ColorModes } from '../../vis_type_vislib/public';
-import { Schemas, AggGroupNames, colorSchemas, ColorSchemas } from './legacy_imports';
+import { Schemas, AggGroupNames } from './legacy_imports';
+import { ColorSchemas, colorSchemas } from '../../../../plugins/charts/public';
 
-export const metricVisTypeDefinition = {
+export const createMetricVisTypeDefinition = () => ({
   name: 'metric',
   title: i18n.translate('visTypeMetric.metricTitle', { defaultMessage: 'Metric' }),
   icon: 'visMetric',
@@ -121,4 +122,4 @@ export const metricVisTypeDefinition = {
       },
     ]),
   },
-};
+});
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 413f846d78991..082fab47e573c 100644
--- a/src/legacy/core_plugins/vis_type_metric/public/plugin.ts
+++ b/src/legacy/core_plugins/vis_type_metric/public/plugin.ts
@@ -22,12 +22,14 @@ import { Plugin as ExpressionsPublicPlugin } from '../../../../plugins/expressio
 import { VisualizationsSetup } from '../../visualizations/public';
 
 import { createMetricVisFn } from './metric_vis_fn';
-import { metricVisTypeDefinition } from './metric_vis_type';
+import { createMetricVisTypeDefinition } from './metric_vis_type';
+import { ChartsPluginSetup } from '../../../../plugins/charts/public';
 
 /** @internal */
 export interface MetricVisPluginSetupDependencies {
   expressions: ReturnType<ExpressionsPublicPlugin['setup']>;
   visualizations: VisualizationsSetup;
+  charts: ChartsPluginSetup;
 }
 
 /** @internal */
@@ -38,9 +40,12 @@ export class MetricVisPlugin implements Plugin<void, void> {
     this.initializerContext = initializerContext;
   }
 
-  public setup(core: CoreSetup, { expressions, visualizations }: MetricVisPluginSetupDependencies) {
+  public setup(
+    core: CoreSetup,
+    { expressions, visualizations, charts }: MetricVisPluginSetupDependencies
+  ) {
     expressions.registerFunction(createMetricVisFn);
-    visualizations.types.createReactVisualization(metricVisTypeDefinition);
+    visualizations.types.createReactVisualization(createMetricVisTypeDefinition());
   }
 
   public start(core: CoreStart) {
diff --git a/src/legacy/core_plugins/vis_type_metric/public/types.ts b/src/legacy/core_plugins/vis_type_metric/public/types.ts
index 34cb1b209a3ae..298eebf23027d 100644
--- a/src/legacy/core_plugins/vis_type_metric/public/types.ts
+++ b/src/legacy/core_plugins/vis_type_metric/public/types.ts
@@ -17,10 +17,10 @@
  * under the License.
  */
 
-import { ColorSchemas } from './legacy_imports';
 import { Range } from '../../../../plugins/expressions/public';
 import { SchemaConfig } from '../../visualizations/public';
 import { ColorModes, Labels, Style } from '../../vis_type_vislib/public';
+import { ColorSchemas } from '../../../../plugins/charts/public';
 
 export const visType = 'metric';
 
diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud.js b/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud.js
index 4d4363377563d..136fe51674bf1 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud.js
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud.js
@@ -26,6 +26,14 @@ import { fromNode, delay } from 'bluebird';
 import { ImageComparator } from 'test_utils/image_comparator';
 import simpleloadPng from './simpleload.png';
 
+// Replace with mock when converting to jest tests
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { seedColors } from '../../../../../../plugins/charts/public/services/colors/seed_colors';
+
+const colors = {
+  seedColors,
+};
+
 describe('tag cloud tests', function() {
   const minValue = 1;
   const maxValue = 9;
@@ -124,7 +132,7 @@ describe('tag cloud tests', function() {
     )}`, function() {
       beforeEach(async function() {
         setupDOM();
-        tagCloud = new TagCloud(domNode);
+        tagCloud = new TagCloud(domNode, colors);
         tagCloud.setData(test.data);
         tagCloud.setOptions(test.options);
         await fromNode(cb => tagCloud.once('renderComplete', cb));
@@ -156,7 +164,7 @@ describe('tag cloud tests', function() {
 
         //TagCloud takes at least 600ms to complete (due to d3 animation)
         //renderComplete should only notify at the last one
-        tagCloud = new TagCloud(domNode);
+        tagCloud = new TagCloud(domNode, colors);
         tagCloud.setData(baseTest.data);
         tagCloud.setOptions(baseTest.options);
 
@@ -188,7 +196,7 @@ describe('tag cloud tests', function() {
   describe('should use the latest state before notifying (when modifying options multiple times)', function() {
     beforeEach(async function() {
       setupDOM();
-      tagCloud = new TagCloud(domNode);
+      tagCloud = new TagCloud(domNode, colors);
       tagCloud.setData(baseTest.data);
       tagCloud.setOptions(baseTest.options);
       tagCloud.setOptions(logScaleTest.options);
@@ -215,7 +223,7 @@ describe('tag cloud tests', function() {
   describe('should use the latest state before notifying (when modifying data multiple times)', function() {
     beforeEach(async function() {
       setupDOM();
-      tagCloud = new TagCloud(domNode);
+      tagCloud = new TagCloud(domNode, colors);
       tagCloud.setData(baseTest.data);
       tagCloud.setOptions(baseTest.options);
       tagCloud.setData(trimDataTest.data);
@@ -245,7 +253,7 @@ describe('tag cloud tests', function() {
       counter = 0;
       setupDOM();
       return new Promise((resolve, reject) => {
-        tagCloud = new TagCloud(domNode);
+        tagCloud = new TagCloud(domNode, colors);
         tagCloud.setData(baseTest.data);
         tagCloud.setOptions(baseTest.options);
 
@@ -291,7 +299,7 @@ describe('tag cloud tests', function() {
   describe('should show correct data when state-updates are interleaved with resize event', function() {
     beforeEach(async function() {
       setupDOM();
-      tagCloud = new TagCloud(domNode);
+      tagCloud = new TagCloud(domNode, colors);
       tagCloud.setData(logScaleTest.data);
       tagCloud.setOptions(logScaleTest.options);
 
@@ -329,7 +337,7 @@ describe('tag cloud tests', function() {
       setupDOM();
       domNode.style.width = '1px';
       domNode.style.height = '1px';
-      tagCloud = new TagCloud(domNode);
+      tagCloud = new TagCloud(domNode, colors);
       tagCloud.setData(baseTest.data);
       tagCloud.setOptions(baseTest.options);
       await fromNode(cb => tagCloud.once('renderComplete', cb));
@@ -355,7 +363,7 @@ describe('tag cloud tests', function() {
       domNode.style.width = '1px';
       domNode.style.height = '1px';
 
-      tagCloud = new TagCloud(domNode);
+      tagCloud = new TagCloud(domNode, colors);
       tagCloud.setData(baseTest.data);
       tagCloud.setOptions(baseTest.options);
       await fromNode(cb => tagCloud.once('renderComplete', cb));
@@ -380,7 +388,7 @@ describe('tag cloud tests', function() {
   describe(`tags should no longer fit after making container smaller`, function() {
     beforeEach(async function() {
       setupDOM();
-      tagCloud = new TagCloud(domNode);
+      tagCloud = new TagCloud(domNode, colors);
       tagCloud.setData(baseTest.data);
       tagCloud.setOptions(baseTest.options);
       await fromNode(cb => tagCloud.once('renderComplete', cb));
@@ -412,7 +420,7 @@ describe('tag cloud tests', function() {
     });
 
     it('should render simple image', async function() {
-      tagCloud = new TagCloud(domNode);
+      tagCloud = new TagCloud(domNode, colors);
       tagCloud.setData(baseTest.data);
       tagCloud.setOptions(baseTest.options);
 
diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud_visualization.js b/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud_visualization.js
index 0cd1fdf1d7103..75cad3bc167bf 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud_visualization.js
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud_visualization.js
@@ -22,11 +22,15 @@ import ngMock from 'ng_mock';
 import LogstashIndexPatternStubProvider from 'fixtures/stubbed_logstash_index_pattern';
 import { Vis } from 'ui/vis';
 import { ImageComparator } from 'test_utils/image_comparator';
-import { TagCloudVisualization } from '../tag_cloud_visualization';
+import { createTagCloudVisualization } from '../tag_cloud_visualization';
 import basicdrawPng from './basicdraw.png';
 import afterresizePng from './afterresize.png';
 import afterparamChange from './afterparamchange.png';
 
+// Replace with mock when converting to jest tests
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { seedColors } from '../../../../../../plugins/charts/public/services/colors/seed_colors';
+
 const THRESHOLD = 0.65;
 const PIXEL_DIFF = 64;
 
@@ -55,6 +59,11 @@ describe('TagCloudVisualizationTest', function() {
       { 'col-0': 'BR', 'col-1': 3 },
     ],
   };
+  const TagCloudVisualization = createTagCloudVisualization({
+    colors: {
+      seedColors,
+    },
+  });
 
   beforeEach(ngMock.module('kibana'));
   beforeEach(
diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud.js b/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud.js
index 5bd64ec000a6a..f5084fd92cfee 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud.js
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud.js
@@ -19,7 +19,6 @@
 
 import d3 from 'd3';
 import d3TagCloud from 'd3-cloud';
-import { seedColors } from 'ui/vis/components/color/seed_colors';
 import { EventEmitter } from 'events';
 
 const ORIENTATIONS = {
@@ -38,7 +37,7 @@ const D3_SCALING_FUNCTIONS = {
 };
 
 export class TagCloud extends EventEmitter {
-  constructor(domNode) {
+  constructor(domNode, colors) {
     super();
 
     //DOM
@@ -55,6 +54,7 @@ export class TagCloud extends EventEmitter {
     this._spiral = 'archimedean'; //layout shape
     this._timeInterval = 1000; //time allowed for layout algorithm
     this._padding = 5;
+    this._seedColors = colors.seedColors;
 
     //OPTIONS
     this._orientation = 'single';
@@ -208,7 +208,7 @@ export class TagCloud extends EventEmitter {
       enteringTags.style('font-style', this._fontStyle);
       enteringTags.style('font-weight', () => this._fontWeight);
       enteringTags.style('font-family', () => this._fontFamily);
-      enteringTags.style('fill', getFill);
+      enteringTags.style('fill', this.getFill.bind(this));
       enteringTags.attr('text-anchor', () => 'middle');
       enteringTags.attr('transform', affineTransform);
       enteringTags.attr('data-test-subj', getDisplayText);
@@ -369,6 +369,11 @@ export class TagCloud extends EventEmitter {
     };
     return debug;
   }
+
+  getFill(tag) {
+    const colorScale = d3.scale.ordinal().range(this._seedColors);
+    return colorScale(tag.text);
+  }
 }
 
 TagCloud.STATUS = { COMPLETE: 0, INCOMPLETE: 1 };
@@ -402,11 +407,6 @@ function getSizeInPixels(tag) {
   return `${tag.size}px`;
 }
 
-const colorScale = d3.scale.ordinal().range(seedColors);
-function getFill(tag) {
-  return colorScale(tag.text);
-}
-
 function hashWithinRange(str, max) {
   str = JSON.stringify(str);
   let hash = 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 7d6e8252d86d9..f2163abbbc723 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
@@ -31,130 +31,132 @@ import { FeedbackMessage } from './feedback_message';
 
 const MAX_TAG_COUNT = 200;
 
-export class TagCloudVisualization {
-  constructor(node, vis) {
-    this._containerNode = node;
-
-    const cloudRelativeContainer = document.createElement('div');
-    cloudRelativeContainer.classList.add('tgcVis');
-    cloudRelativeContainer.setAttribute('style', 'position: relative');
-    const cloudContainer = document.createElement('div');
-    cloudContainer.classList.add('tgcVis');
-    cloudContainer.setAttribute('data-test-subj', 'tagCloudVisualization');
-    this._containerNode.classList.add('visChart--vertical');
-    cloudRelativeContainer.appendChild(cloudContainer);
-    this._containerNode.appendChild(cloudRelativeContainer);
-
-    this._vis = vis;
-    this._truncated = false;
-    this._tagCloud = new TagCloud(cloudContainer);
-    this._tagCloud.on('select', event => {
-      if (!this._visParams.bucket) {
-        return;
-      }
-      this._vis.API.events.filter({
-        table: event.meta.data,
-        column: 0,
-        row: event.meta.rowIndex,
+export function createTagCloudVisualization({ colors }) {
+  return class TagCloudVisualization {
+    constructor(node, vis) {
+      this._containerNode = node;
+
+      const cloudRelativeContainer = document.createElement('div');
+      cloudRelativeContainer.classList.add('tgcVis');
+      cloudRelativeContainer.setAttribute('style', 'position: relative');
+      const cloudContainer = document.createElement('div');
+      cloudContainer.classList.add('tgcVis');
+      cloudContainer.setAttribute('data-test-subj', 'tagCloudVisualization');
+      this._containerNode.classList.add('visChart--vertical');
+      cloudRelativeContainer.appendChild(cloudContainer);
+      this._containerNode.appendChild(cloudRelativeContainer);
+
+      this._vis = vis;
+      this._truncated = false;
+      this._tagCloud = new TagCloud(cloudContainer, colors);
+      this._tagCloud.on('select', event => {
+        if (!this._visParams.bucket) {
+          return;
+        }
+        this._vis.API.events.filter({
+          table: event.meta.data,
+          column: 0,
+          row: event.meta.rowIndex,
+        });
       });
-    });
-    this._renderComplete$ = Rx.fromEvent(this._tagCloud, 'renderComplete');
-
-    this._feedbackNode = document.createElement('div');
-    this._containerNode.appendChild(this._feedbackNode);
-    this._feedbackMessage = React.createRef();
-    render(
-      <I18nContext>
-        <FeedbackMessage ref={this._feedbackMessage} />
-      </I18nContext>,
-      this._feedbackNode
-    );
-
-    this._labelNode = document.createElement('div');
-    this._containerNode.appendChild(this._labelNode);
-    this._label = React.createRef();
-    render(<Label ref={this._label} />, this._labelNode);
-  }
-
-  async render(data, visParams, status) {
-    if (!(status.resize || status.data || status.params)) return;
-
-    if (status.params || status.data) {
-      this._updateParams(visParams);
-      this._updateData(data);
+      this._renderComplete$ = Rx.fromEvent(this._tagCloud, 'renderComplete');
+
+      this._feedbackNode = document.createElement('div');
+      this._containerNode.appendChild(this._feedbackNode);
+      this._feedbackMessage = React.createRef();
+      render(
+        <I18nContext>
+          <FeedbackMessage ref={this._feedbackMessage} />
+        </I18nContext>,
+        this._feedbackNode
+      );
+
+      this._labelNode = document.createElement('div');
+      this._containerNode.appendChild(this._labelNode);
+      this._label = React.createRef();
+      render(<Label ref={this._label} />, this._labelNode);
     }
 
-    if (status.resize) {
-      this._resize();
-    }
+    async render(data, visParams, status) {
+      if (!(status.resize || status.data || status.params)) return;
+
+      if (status.params || status.data) {
+        this._updateParams(visParams);
+        this._updateData(data);
+      }
 
-    await this._renderComplete$.pipe(take(1)).toPromise();
+      if (status.resize) {
+        this._resize();
+      }
+
+      await this._renderComplete$.pipe(take(1)).toPromise();
+
+      if (data.columns.length !== 2) {
+        this._feedbackMessage.current.setState({
+          shouldShowTruncate: false,
+          shouldShowIncomplete: false,
+        });
+        return;
+      }
 
-    if (data.columns.length !== 2) {
+      this._label.current.setState({
+        label: `${data.columns[0].name} - ${data.columns[1].name}`,
+        shouldShowLabel: visParams.showLabel,
+      });
       this._feedbackMessage.current.setState({
-        shouldShowTruncate: false,
-        shouldShowIncomplete: false,
+        shouldShowTruncate: this._truncated,
+        shouldShowIncomplete: this._tagCloud.getStatus() === TagCloud.STATUS.INCOMPLETE,
       });
-      return;
     }
 
-    this._label.current.setState({
-      label: `${data.columns[0].name} - ${data.columns[1].name}`,
-      shouldShowLabel: visParams.showLabel,
-    });
-    this._feedbackMessage.current.setState({
-      shouldShowTruncate: this._truncated,
-      shouldShowIncomplete: this._tagCloud.getStatus() === TagCloud.STATUS.INCOMPLETE,
-    });
-  }
-
-  destroy() {
-    this._tagCloud.destroy();
-    unmountComponentAtNode(this._feedbackNode);
-    unmountComponentAtNode(this._labelNode);
-  }
-
-  _updateData(data) {
-    if (!data || !data.rows.length) {
-      this._tagCloud.setData([]);
-      return;
+    destroy() {
+      this._tagCloud.destroy();
+      unmountComponentAtNode(this._feedbackNode);
+      unmountComponentAtNode(this._labelNode);
     }
 
-    const bucket = this._visParams.bucket;
-    const metric = this._visParams.metric;
-    const bucketFormatter = bucket ? getFormat(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) => {
-      const tag = row[tagColumn] === undefined ? 'all' : row[tagColumn];
-      const metric = row[metricColumn];
-      return {
-        displayText: bucketFormatter ? bucketFormatter.convert(tag, 'text') : tag,
-        rawText: tag,
-        value: metric,
-        meta: {
-          data: data,
-          rowIndex: rowIndex,
-        },
-      };
-    });
-
-    if (tags.length > MAX_TAG_COUNT) {
-      tags.length = MAX_TAG_COUNT;
-      this._truncated = true;
-    } else {
-      this._truncated = false;
-    }
+    _updateData(data) {
+      if (!data || !data.rows.length) {
+        this._tagCloud.setData([]);
+        return;
+      }
 
-    this._tagCloud.setData(tags);
-  }
+      const bucket = this._visParams.bucket;
+      const metric = this._visParams.metric;
+      const bucketFormatter = bucket ? getFormat(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) => {
+        const tag = row[tagColumn] === undefined ? 'all' : row[tagColumn];
+        const metric = row[metricColumn];
+        return {
+          displayText: bucketFormatter ? bucketFormatter.convert(tag, 'text') : tag,
+          rawText: tag,
+          value: metric,
+          meta: {
+            data: data,
+            rowIndex: rowIndex,
+          },
+        };
+      });
 
-  _updateParams(visParams) {
-    this._visParams = visParams;
-    this._tagCloud.setOptions(visParams);
-  }
+      if (tags.length > MAX_TAG_COUNT) {
+        tags.length = MAX_TAG_COUNT;
+        this._truncated = true;
+      } else {
+        this._truncated = false;
+      }
 
-  _resize() {
-    this._tagCloud.resize();
-  }
+      this._tagCloud.setData(tags);
+    }
+
+    _updateParams(visParams) {
+      this._visParams = visParams;
+      this._tagCloud.setOptions(visParams);
+    }
+
+    _resize() {
+      this._tagCloud.resize();
+    }
+  };
 }
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 66710791edc83..182da40a3e6ea 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/legacy.ts
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/legacy.ts
@@ -27,6 +27,7 @@ import { plugin } from '.';
 const plugins: Readonly<TagCloudPluginSetupDependencies> = {
   expressions: npSetup.plugins.expressions,
   visualizations: visualizationsSetup,
+  charts: npSetup.plugins.charts,
 };
 
 const pluginInstance = plugin({} as PluginInitializerContext);
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 865229ce0e4c1..9e5940eca1598 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/plugin.ts
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/plugin.ts
@@ -20,14 +20,21 @@
 import { PluginInitializerContext, CoreSetup, CoreStart, Plugin } from '../../../../core/public';
 import { Plugin as ExpressionsPublicPlugin } from '../../../../plugins/expressions/public';
 import { VisualizationsSetup } from '../../visualizations/public';
+import { ChartsPluginSetup } from '../../../../plugins/charts/public';
 
 import { createTagCloudFn } from './tag_cloud_fn';
-import { tagcloudVisDefinition } from './tag_cloud_type';
+import { createTagCloudVisTypeDefinition } from './tag_cloud_type';
 
 /** @internal */
 export interface TagCloudPluginSetupDependencies {
   expressions: ReturnType<ExpressionsPublicPlugin['setup']>;
   visualizations: VisualizationsSetup;
+  charts: ChartsPluginSetup;
+}
+
+/** @internal */
+export interface TagCloudVisDependencies {
+  colors: ChartsPluginSetup['colors'];
 }
 
 /** @internal */
@@ -38,9 +45,17 @@ export class TagCloudPlugin implements Plugin<void, void> {
     this.initializerContext = initializerContext;
   }
 
-  public setup(core: CoreSetup, { expressions, visualizations }: TagCloudPluginSetupDependencies) {
+  public setup(
+    core: CoreSetup,
+    { expressions, visualizations, charts }: TagCloudPluginSetupDependencies
+  ) {
+    const visualizationDependencies: TagCloudVisDependencies = {
+      colors: charts.colors,
+    };
     expressions.registerFunction(createTagCloudFn);
-    visualizations.types.createBaseVisualization(tagcloudVisDefinition);
+    visualizations.types.createBaseVisualization(
+      createTagCloudVisTypeDefinition(visualizationDependencies)
+    );
   }
 
   public start(core: CoreStart) {
diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/tag_cloud_type.ts b/src/legacy/core_plugins/vis_type_tagcloud/public/tag_cloud_type.ts
index 9c673b1122573..626c53b73b241 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/tag_cloud_type.ts
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/tag_cloud_type.ts
@@ -25,9 +25,10 @@ import { Status } from '../../visualizations/public';
 import { TagCloudOptions } from './components/tag_cloud_options';
 
 // @ts-ignore
-import { TagCloudVisualization } from './components/tag_cloud_visualization';
+import { createTagCloudVisualization } from './components/tag_cloud_visualization';
+import { TagCloudVisDependencies } from './plugin';
 
-export const tagcloudVisDefinition = {
+export const createTagCloudVisTypeDefinition = (deps: TagCloudVisDependencies) => ({
   name: 'tagcloud',
   title: i18n.translate('visTypeTagCloud.vis.tagCloudTitle', { defaultMessage: 'Tag Cloud' }),
   icon: 'visTagCloud',
@@ -44,7 +45,7 @@ export const tagcloudVisDefinition = {
     },
   },
   requiresUpdateStatus: [Status.PARAMS, Status.RESIZE, Status.DATA],
-  visualization: TagCloudVisualization,
+  visualization: createTagCloudVisualization(deps),
   editorConfig: {
     collections: {
       scales: [
@@ -121,4 +122,4 @@ export const tagcloudVisDefinition = {
     ]),
   },
   useCustomNoDataScreen: true,
-};
+});
diff --git a/src/legacy/core_plugins/vis_type_vislib/index.ts b/src/legacy/core_plugins/vis_type_vislib/index.ts
index 8c24368f43ab1..74c8f3f96e669 100644
--- a/src/legacy/core_plugins/vis_type_vislib/index.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/index.ts
@@ -22,7 +22,7 @@ import { Legacy } from 'kibana';
 
 import { LegacyPluginApi, LegacyPluginInitializer } from '../../types';
 
-const kbnVislibVisTypesPluginInitializer: LegacyPluginInitializer = ({ Plugin }: LegacyPluginApi) =>
+const visTypeVislibPluginInitializer: LegacyPluginInitializer = ({ Plugin }: LegacyPluginApi) =>
   new Plugin({
     id: 'vis_type_vislib',
     require: ['kibana', 'elasticsearch', 'visualizations', 'interpreter', 'data'],
@@ -41,4 +41,4 @@ const kbnVislibVisTypesPluginInitializer: LegacyPluginInitializer = ({ Plugin }:
   } as Legacy.PluginSpecOptions);
 
 // eslint-disable-next-line import/no-default-export
-export default kbnVislibVisTypesPluginInitializer;
+export default visTypeVislibPluginInitializer;
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/area.ts b/src/legacy/core_plugins/vis_type_vislib/public/area.ts
index a96fb19a9321c..71027d7db5af8 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/area.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/area.ts
@@ -38,9 +38,9 @@ import {
 } from './utils/collections';
 import { getAreaOptionTabs, countLabel } from './utils/common_config';
 import { createVislibVisController } from './vis_controller';
-import { KbnVislibVisTypesDependencies } from './plugin';
+import { VisTypeVislibDependencies } from './plugin';
 
-export const createAreaVisTypeDefinition = (deps: KbnVislibVisTypesDependencies) => ({
+export const createAreaVisTypeDefinition = (deps: VisTypeVislibDependencies) => ({
   name: 'area',
   title: i18n.translate('visTypeVislib.area.areaTitle', { defaultMessage: 'Area' }),
   icon: 'visArea',
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/common/color_schema.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/common/color_schema.tsx
index eac73f716bd91..48553da90b649 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/common/color_schema.tsx
+++ b/src/legacy/core_plugins/vis_type_vislib/public/components/common/color_schema.tsx
@@ -22,10 +22,11 @@ import { i18n } from '@kbn/i18n';
 import { EuiLink, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { VisOptionsProps, ColorSchema } from '../../legacy_imports';
+import { VisOptionsProps } from '../../legacy_imports';
 import { SelectOption } from './select';
 import { SwitchOption } from './switch';
 import { ColorSchemaVislibParams } from '../../types';
+import { ColorSchema } from '../../../../../../plugins/charts/public';
 
 export type SetColorSchemaOptionsValue = <T extends keyof ColorSchemaVislibParams>(
   paramName: T,
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/gauge/ranges_panel.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/gauge/ranges_panel.tsx
index d88988b4d53c5..7de64e5888096 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/gauge/ranges_panel.tsx
+++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/gauge/ranges_panel.tsx
@@ -22,12 +22,12 @@ import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { ColorSchemas } from '../../../legacy_imports';
 import { ColorRanges, ColorSchemaOptions, SwitchOption } from '../../common';
 import { GaugeOptionsInternalProps } from '.';
 import { ColorSchemaVislibParams } from '../../../types';
 import { Gauge } from '../../../gauge';
 import { SetColorRangeValue } from '../../common/color_ranges';
+import { ColorSchemas } from '../../../../../../../plugins/charts/public';
 
 function RangesPanel({
   setGaugeValue,
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/gauge.ts b/src/legacy/core_plugins/vis_type_vislib/public/gauge.ts
index f235ed4bb04e4..e502bcc632199 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/gauge.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/gauge.ts
@@ -19,12 +19,13 @@
 
 import { i18n } from '@kbn/i18n';
 
-import { Schemas, AggGroupNames, ColorSchemas, RangeValues } from './legacy_imports';
+import { Schemas, AggGroupNames, RangeValues } from './legacy_imports';
 import { GaugeOptions } from './components/options';
 import { getGaugeCollections, Alignments, ColorModes, GaugeTypes } from './utils/collections';
 import { createVislibVisController } from './vis_controller';
 import { ColorSchemaVislibParams, Labels, Style } from './types';
-import { KbnVislibVisTypesDependencies } from './plugin';
+import { VisTypeVislibDependencies } from './plugin';
+import { ColorSchemas } from '../../../../plugins/charts/public';
 
 export interface Gauge extends ColorSchemaVislibParams {
   backStyle: 'Full';
@@ -54,7 +55,7 @@ export interface GaugeVisParams {
   gauge: Gauge;
 }
 
-export const createGaugeVisTypeDefinition = (deps: KbnVislibVisTypesDependencies) => ({
+export const createGaugeVisTypeDefinition = (deps: VisTypeVislibDependencies) => ({
   name: 'gauge',
   title: i18n.translate('visTypeVislib.gauge.gaugeTitle', { defaultMessage: 'Gauge' }),
   icon: 'visGauge',
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/goal.ts b/src/legacy/core_plugins/vis_type_vislib/public/goal.ts
index 94262629669be..d2fdb9543d827 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/goal.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/goal.ts
@@ -19,13 +19,14 @@
 
 import { i18n } from '@kbn/i18n';
 
-import { Schemas, AggGroupNames, ColorSchemas } from './legacy_imports';
+import { Schemas, AggGroupNames } from './legacy_imports';
 import { GaugeOptions } from './components/options';
 import { getGaugeCollections, GaugeTypes, ColorModes } from './utils/collections';
 import { createVislibVisController } from './vis_controller';
-import { KbnVislibVisTypesDependencies } from './plugin';
+import { VisTypeVislibDependencies } from './plugin';
+import { ColorSchemas } from '../../../../plugins/charts/public';
 
-export const createGoalVisTypeDefinition = (deps: KbnVislibVisTypesDependencies) => ({
+export const createGoalVisTypeDefinition = (deps: VisTypeVislibDependencies) => ({
   name: 'goal',
   title: i18n.translate('visTypeVislib.goal.goalTitle', { defaultMessage: 'Goal' }),
   icon: 'visGoal',
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/heatmap.ts b/src/legacy/core_plugins/vis_type_vislib/public/heatmap.ts
index 470e978027ca2..cbb255d58d7bf 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/heatmap.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/heatmap.ts
@@ -19,13 +19,14 @@
 
 import { i18n } from '@kbn/i18n';
 
-import { Schemas, AggGroupNames, ColorSchemas, RangeValues } from './legacy_imports';
+import { Schemas, AggGroupNames, RangeValues } from './legacy_imports';
 import { AxisTypes, getHeatmapCollections, Positions, ScaleTypes } from './utils/collections';
 import { HeatmapOptions } from './components/options';
 import { createVislibVisController } from './vis_controller';
 import { TimeMarker } from './vislib/visualizations/time_marker';
 import { CommonVislibParams, ColorSchemaVislibParams, ValueAxis } from './types';
-import { KbnVislibVisTypesDependencies } from './plugin';
+import { VisTypeVislibDependencies } from './plugin';
+import { ColorSchemas } from '../../../../plugins/charts/public';
 
 export interface HeatmapVisParams extends CommonVislibParams, ColorSchemaVislibParams {
   type: 'heatmap';
@@ -39,7 +40,7 @@ export interface HeatmapVisParams extends CommonVislibParams, ColorSchemaVislibP
   times: TimeMarker[];
 }
 
-export const createHeatmapVisTypeDefinition = (deps: KbnVislibVisTypesDependencies) => ({
+export const createHeatmapVisTypeDefinition = (deps: VisTypeVislibDependencies) => ({
   name: 'heatmap',
   title: i18n.translate('visTypeVislib.heatmap.heatmapTitle', { defaultMessage: 'Heat Map' }),
   icon: 'visHeatmap',
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/histogram.ts b/src/legacy/core_plugins/vis_type_vislib/public/histogram.ts
index 490b557b7bafb..7b9b008481c40 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/histogram.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/histogram.ts
@@ -38,9 +38,9 @@ import {
 } from './utils/collections';
 import { getAreaOptionTabs, countLabel } from './utils/common_config';
 import { createVislibVisController } from './vis_controller';
-import { KbnVislibVisTypesDependencies } from './plugin';
+import { VisTypeVislibDependencies } from './plugin';
 
-export const createHistogramVisTypeDefinition = (deps: KbnVislibVisTypesDependencies) => ({
+export const createHistogramVisTypeDefinition = (deps: VisTypeVislibDependencies) => ({
   name: 'histogram',
   title: i18n.translate('visTypeVislib.histogram.histogramTitle', {
     defaultMessage: 'Vertical Bar',
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/horizontal_bar.ts b/src/legacy/core_plugins/vis_type_vislib/public/horizontal_bar.ts
index e8d51fe037a63..eca26b4f55f60 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/horizontal_bar.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/horizontal_bar.ts
@@ -38,9 +38,9 @@ import {
 } from './utils/collections';
 import { getAreaOptionTabs, countLabel } from './utils/common_config';
 import { createVislibVisController } from './vis_controller';
-import { KbnVislibVisTypesDependencies } from './plugin';
+import { VisTypeVislibDependencies } from './plugin';
 
-export const createHorizontalBarVisTypeDefinition = (deps: KbnVislibVisTypesDependencies) => ({
+export const createHorizontalBarVisTypeDefinition = (deps: VisTypeVislibDependencies) => ({
   name: 'horizontal_bar',
   title: i18n.translate('visTypeVislib.horizontalBar.horizontalBarTitle', {
     defaultMessage: 'Horizontal Bar',
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/index.ts b/src/legacy/core_plugins/vis_type_vislib/public/index.ts
index 80c078de1a10b..1f773c4efcb02 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/index.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/index.ts
@@ -18,7 +18,7 @@
  */
 
 import { PluginInitializerContext } from '../../../../core/public';
-import { KbnVislibVisTypesPlugin as Plugin } from './plugin';
+import { VisTypeVislibPlugin as Plugin } from './plugin';
 
 export function plugin(initializerContext: PluginInitializerContext) {
   return new Plugin(initializerContext);
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 49d62bc70c8bb..5828a0cccebd7 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/legacy.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/legacy.ts
@@ -20,28 +20,23 @@
 import { npSetup, npStart } from 'ui/new_platform';
 import { PluginInitializerContext } from 'kibana/public';
 
-// @ts-ignore
-import { vislibColor } from 'ui/vis/components/color/color';
-
 import { plugin } from '.';
 import {
-  KbnVislibVisTypesPluginSetupDependencies,
-  KbnVislibVisTypesPluginStartDependencies,
+  VisTypeVislibPluginSetupDependencies,
+  VisTypeVislibPluginStartDependencies,
 } from './plugin';
 import {
   setup as visualizationsSetup,
   start as visualizationsStart,
 } from '../../visualizations/public/np_ready/public/legacy';
 
-const setupPlugins: Readonly<KbnVislibVisTypesPluginSetupDependencies> = {
+const setupPlugins: Readonly<VisTypeVislibPluginSetupDependencies> = {
   expressions: npSetup.plugins.expressions,
   visualizations: visualizationsSetup,
-  __LEGACY: {
-    vislibColor,
-  },
+  charts: npSetup.plugins.charts,
 };
 
-const startPlugins: Readonly<KbnVislibVisTypesPluginStartDependencies> = {
+const startPlugins: Readonly<VisTypeVislibPluginStartDependencies> = {
   expressions: npStart.plugins.expressions,
   visualizations: visualizationsStart,
 };
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 704ccf01acfaf..5e72dbff7ef61 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
@@ -20,7 +20,6 @@
 export { AggGroupNames, VisOptionsProps } from 'ui/vis/editors/default';
 export { Schemas } from 'ui/vis/editors/default/schemas';
 export { RangeValues, RangesParamEditor } from 'ui/vis/editors/default/controls/ranges';
-export { ColorSchema, ColorSchemas, colorSchemas, getHeatmapColors } from 'ui/color_maps';
 export { AggConfig, Vis, VisParams } from 'ui/vis';
 export { AggType } from 'ui/agg_types';
 // @ts-ignore
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/line.ts b/src/legacy/core_plugins/vis_type_vislib/public/line.ts
index d3f2bc1bb684c..7aaad52ed8841 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/line.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/line.ts
@@ -38,9 +38,9 @@ import {
 } from './utils/collections';
 import { getAreaOptionTabs, countLabel } from './utils/common_config';
 import { createVislibVisController } from './vis_controller';
-import { KbnVislibVisTypesDependencies } from './plugin';
+import { VisTypeVislibDependencies } from './plugin';
 
-export const createLineVisTypeDefinition = (deps: KbnVislibVisTypesDependencies) => ({
+export const createLineVisTypeDefinition = (deps: VisTypeVislibDependencies) => ({
   name: 'line',
   title: i18n.translate('visTypeVislib.line.lineTitle', { defaultMessage: 'Line' }),
   icon: 'visLine',
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/pie.ts b/src/legacy/core_plugins/vis_type_vislib/public/pie.ts
index 3c30030ca45f5..b56dba659ffc8 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/pie.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/pie.ts
@@ -24,7 +24,7 @@ import { PieOptions } from './components/options';
 import { getPositions, Positions } from './utils/collections';
 import { createVislibVisController } from './vis_controller';
 import { CommonVislibParams } from './types';
-import { KbnVislibVisTypesDependencies } from './plugin';
+import { VisTypeVislibDependencies } from './plugin';
 
 export interface PieVisParams extends CommonVislibParams {
   type: 'pie';
@@ -38,7 +38,7 @@ export interface PieVisParams extends CommonVislibParams {
   };
 }
 
-export const createPieVisTypeDefinition = (deps: KbnVislibVisTypesDependencies) => ({
+export const createPieVisTypeDefinition = (deps: VisTypeVislibDependencies) => ({
   name: 'pie',
   title: i18n.translate('visTypeVislib.pie.pieTitle', { defaultMessage: 'Pie' }),
   icon: 'visPie',
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/pie_fn.test.ts b/src/legacy/core_plugins/vis_type_vislib/public/pie_fn.test.ts
index d38c8b216a995..54bd9e93292e2 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/pie_fn.test.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/pie_fn.test.ts
@@ -42,7 +42,7 @@ jest.mock('./vislib/response_handler', () => ({
 }));
 
 describe('interpreter/functions#pie', () => {
-  const fn = functionWrapper(createPieVisFn());
+  const fn = functionWrapper(createPieVisFn);
   const context = {
     type: 'kibana_datatable',
     rows: [{ 'col-0-1': 0 }],
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/pie_fn.ts b/src/legacy/core_plugins/vis_type_vislib/public/pie_fn.ts
index 199ff82a969c7..5e80e28b7cc6b 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/pie_fn.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/pie_fn.ts
@@ -43,12 +43,7 @@ interface RenderValue {
 
 type Return = Render<RenderValue>;
 
-export const createPieVisFn = () => (): ExpressionFunction<
-  typeof name,
-  Context,
-  Arguments,
-  Return
-> => ({
+export const createPieVisFn = (): ExpressionFunction<typeof name, Context, Arguments, Return> => ({
   name: 'kibana_pie',
   type: 'render',
   context: {
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 4ee7929387767..9bf7ee3d59401 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/plugin.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/plugin.ts
@@ -26,7 +26,7 @@ import {
 
 import { Plugin as ExpressionsPublicPlugin } from '../../../../plugins/expressions/public';
 import { VisualizationsSetup, VisualizationsStart } from '../../visualizations/public';
-import { createKbnVislibVisTypesFn } from './vis_type_vislib_vis_fn';
+import { createVisTypeVislibVisFn } from './vis_type_vislib_vis_fn';
 import { createPieVisFn } from './pie_fn';
 import {
   createHistogramVisTypeDefinition,
@@ -38,45 +38,43 @@ import {
   createGaugeVisTypeDefinition,
   createGoalVisTypeDefinition,
 } from './vis_type_vislib_vis_types';
+import { ChartsPluginSetup } from '../../../../plugins/charts/public';
 
-type KbnVislibVisTypesCoreSetup = CoreSetup<KbnVislibVisTypesPluginStartDependencies>;
-
-export interface LegacyDependencies {
-  vislibColor: (colors: Array<string | number>, mappings: any) => (value: any) => any;
-}
-
-export type KbnVislibVisTypesDependencies = LegacyDependencies & {
+export interface VisTypeVislibDependencies {
   uiSettings: IUiSettingsClient;
-};
+  charts: ChartsPluginSetup;
+}
 
 /** @internal */
-export interface KbnVislibVisTypesPluginSetupDependencies {
+export interface VisTypeVislibPluginSetupDependencies {
   expressions: ReturnType<ExpressionsPublicPlugin['setup']>;
   visualizations: VisualizationsSetup;
-  __LEGACY: LegacyDependencies;
+  charts: ChartsPluginSetup;
 }
 
 /** @internal */
-export interface KbnVislibVisTypesPluginStartDependencies {
+export interface VisTypeVislibPluginStartDependencies {
   expressions: ReturnType<ExpressionsPublicPlugin['start']>;
   visualizations: VisualizationsStart;
 }
 
+type VisTypeVislibCoreSetup = CoreSetup<VisTypeVislibPluginStartDependencies>;
+
 /** @internal */
-export class KbnVislibVisTypesPlugin implements Plugin<Promise<void>, void> {
+export class VisTypeVislibPlugin implements Plugin<Promise<void>, void> {
   constructor(public initializerContext: PluginInitializerContext) {}
 
   public async setup(
-    core: KbnVislibVisTypesCoreSetup,
-    { expressions, visualizations, __LEGACY }: KbnVislibVisTypesPluginSetupDependencies
+    core: VisTypeVislibCoreSetup,
+    { expressions, visualizations, charts }: VisTypeVislibPluginSetupDependencies
   ) {
-    const visualizationDependencies: Readonly<KbnVislibVisTypesDependencies> = {
-      ...__LEGACY,
+    const visualizationDependencies: Readonly<VisTypeVislibDependencies> = {
       uiSettings: core.uiSettings,
+      charts,
     };
 
-    expressions.registerFunction(createKbnVislibVisTypesFn());
-    expressions.registerFunction(createPieVisFn());
+    expressions.registerFunction(createVisTypeVislibVisFn);
+    expressions.registerFunction(createPieVisFn);
 
     [
       createHistogramVisTypeDefinition,
@@ -90,7 +88,7 @@ export class KbnVislibVisTypesPlugin implements Plugin<Promise<void>, void> {
     ].forEach(vis => visualizations.types.createBaseVisualization(vis(visualizationDependencies)));
   }
 
-  public start(core: CoreStart, deps: KbnVislibVisTypesPluginStartDependencies) {
+  public start(core: CoreStart, deps: VisTypeVislibPluginStartDependencies) {
     // nothing to do here
   }
 }
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/types.ts b/src/legacy/core_plugins/vis_type_vislib/public/types.ts
index b6928be89f648..f33b42483c53e 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/types.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/types.ts
@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import { ColorSchemas } from './legacy_imports';
 import { TimeMarker } from './vislib/visualizations/time_marker';
 import {
   Positions,
@@ -30,6 +29,7 @@ import {
   ScaleTypes,
   ThresholdLineStyles,
 } from './utils/collections';
+import { ColorSchemas } from '../../../../plugins/charts/public';
 
 export interface CommonVislibParams {
   addTooltip: boolean;
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/utils/collections.ts b/src/legacy/core_plugins/vis_type_vislib/public/utils/collections.ts
index d8f9fbf7d756a..f32b765cd6e57 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/utils/collections.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/utils/collections.ts
@@ -19,7 +19,8 @@
 
 import { i18n } from '@kbn/i18n';
 import { $Values } from '@kbn/utility-types';
-import { colorSchemas } from '../legacy_imports';
+
+import { colorSchemas } from '../../../../../plugins/charts/public';
 
 export const Positions = Object.freeze({
   RIGHT: 'right' as 'right',
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/vis_controller.tsx b/src/legacy/core_plugins/vis_type_vislib/public/vis_controller.tsx
index ca49f17e7c264..aa23dfe2e5614 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/vis_controller.tsx
+++ b/src/legacy/core_plugins/vis_type_vislib/public/vis_controller.tsx
@@ -24,7 +24,7 @@ import { Vis, VisParams } from './legacy_imports';
 // @ts-ignore
 import { Vis as Vislib } from './vislib/vis';
 import { Positions } from './utils/collections';
-import { KbnVislibVisTypesDependencies } from './plugin';
+import { VisTypeVislibDependencies } from './plugin';
 import { mountReactNode } from '../../../../core/public/utils';
 import { VisLegend, CUSTOM_LEGEND_VIS_TYPES } from './vislib/components/legend';
 
@@ -35,7 +35,7 @@ const legendClassName = {
   right: 'visLib--legend-right',
 };
 
-export const createVislibVisController = (deps: KbnVislibVisTypesDependencies) => {
+export const createVislibVisController = (deps: VisTypeVislibDependencies) => {
   return class VislibVisController {
     unmount: (() => void) | null = null;
     visParams?: VisParams;
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/vis_type_vislib_vis_fn.ts b/src/legacy/core_plugins/vis_type_vislib/public/vis_type_vislib_vis_fn.ts
index 1f6c0d87b8520..5e948496ff08a 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/vis_type_vislib_vis_fn.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/vis_type_vislib_vis_fn.ts
@@ -45,7 +45,7 @@ interface RenderValue {
 
 type Return = Render<RenderValue>;
 
-export const createKbnVislibVisTypesFn = () => (): ExpressionFunction<
+export const createVisTypeVislibVisFn = (): ExpressionFunction<
   typeof name,
   Context,
   Arguments,
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/vislib/__tests__/lib/fixtures/_vis_fixture.js b/src/legacy/core_plugins/vis_type_vislib/public/vislib/__tests__/lib/fixtures/_vis_fixture.js
index 966cac4c2b2f5..05cea7addf560 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/vislib/__tests__/lib/fixtures/_vis_fixture.js
+++ b/src/legacy/core_plugins/vis_type_vislib/public/vislib/__tests__/lib/fixtures/_vis_fixture.js
@@ -20,10 +20,14 @@
 import _ from 'lodash';
 import $ from 'jquery';
 
-import { vislibColor } from 'ui/vis/components/color/color';
-
 import { Vis } from '../../../vis';
 
+// TODO: Remove when converted to jest mocks
+import {
+  ColorsService,
+  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
+} from '../../../../../../../../plugins/charts/public/services';
+
 const $visCanvas = $('<div>')
   .attr('id', 'vislib-vis-fixtures')
   .css({
@@ -57,9 +61,14 @@ afterEach(function() {
 
 const getDeps = () => {
   const uiSettings = new Map();
+  const colors = new ColorsService();
+  colors.init(uiSettings);
+
   return {
     uiSettings,
-    vislibColor,
+    charts: {
+      colors,
+    },
   };
 };
 
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 c7824c43eeec5..2ed6d899f8602 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
@@ -35,14 +35,16 @@ import { getFormat } from '../../legacy_imports';
  * @param attr {Object|*} Visualization options
  */
 export class Data {
-  constructor(data, uiState, vislibColor) {
+  constructor(data, uiState, createColorLookupFunction) {
     this.uiState = uiState;
-    this.vislibColor = vislibColor;
+    this.createColorLookupFunction = createColorLookupFunction;
     this.data = this.copyDataObj(data);
     this.type = this.getDataType();
     this._cleanVisData();
     this.labels = this._getLabels(this.data);
-    this.color = this.labels ? vislibColor(this.labels, uiState.get('vis.colors')) : undefined;
+    this.color = this.labels
+      ? createColorLookupFunction(this.labels, uiState.get('vis.colors'))
+      : undefined;
     this._normalizeOrdered();
   }
 
@@ -473,7 +475,7 @@ export class Data {
     const defaultColors = this.uiState.get('vis.defaultColors');
     const overwriteColors = this.uiState.get('vis.colors');
     const colors = defaultColors ? _.defaults({}, overwriteColors, defaultColors) : overwriteColors;
-    return this.vislibColor(this.getLabels(), colors);
+    return this.createColorLookupFunction(this.getLabels(), colors);
   }
 
   /**
@@ -483,7 +485,7 @@ export class Data {
    * @returns {Function} Performs lookup on string and returns hex color
    */
   getPieColorFunc() {
-    return this.vislibColor(
+    return this.createColorLookupFunction(
       this.pieNames(this.getVisData()).map(function(d) {
         return d.label;
       }),
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/vislib/lib/vis_config.js b/src/legacy/core_plugins/vis_type_vislib/public/vislib/lib/vis_config.js
index 091e6b1752d8d..0354724703208 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/vislib/lib/vis_config.js
+++ b/src/legacy/core_plugins/vis_type_vislib/public/vislib/lib/vis_config.js
@@ -35,8 +35,8 @@ const DEFAULT_VIS_CONFIG = {
 };
 
 export class VisConfig {
-  constructor(visConfigArgs, data, uiState, el, vislibColor) {
-    this.data = new Data(data, uiState, vislibColor);
+  constructor(visConfigArgs, data, uiState, el, createColorLookupFunction) {
+    this.data = new Data(data, uiState, createColorLookupFunction);
 
     const visType = visTypes[visConfigArgs.type];
     const typeDefaults = visType(visConfigArgs, this.data);
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/vislib/vis.js b/src/legacy/core_plugins/vis_type_vislib/public/vislib/vis.js
index 32afb6a008b61..ca4f36f0ab0f7 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/vislib/vis.js
+++ b/src/legacy/core_plugins/vis_type_vislib/public/vislib/vis.js
@@ -55,7 +55,7 @@ export class Vis extends EventEmitter {
       this.data,
       this.uiState,
       this.element,
-      this.deps.vislibColor
+      this.deps.charts.colors.createColorLookupFunction.bind(this.deps.charts.colors)
     );
   }
 
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/gauges/meter.js b/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/gauges/meter.js
index f519914662251..62de6d8413664 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/gauges/meter.js
+++ b/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/gauges/meter.js
@@ -20,7 +20,7 @@
 import d3 from 'd3';
 import _ from 'lodash';
 
-import { getHeatmapColors } from '../../../legacy_imports';
+import { getHeatmapColors } from '../../../../../../../plugins/charts/public';
 
 const arcAngles = {
   angleFactor: 0.75,
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/point_series.js b/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/point_series.js
index 53f06c79d178c..f7e50b841e59c 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/point_series.js
+++ b/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/point_series.js
@@ -249,7 +249,7 @@ export class PointSeries extends Chart {
           if (!seriArgs.show) return;
           const SeriClass =
             seriTypes[seriArgs.type || self.handler.visConfig.get('chart.type')] || seriTypes.line;
-          const series = new SeriClass(self.handler, svg, data.series[i], seriArgs, this.deps);
+          const series = new SeriClass(self.handler, svg, data.series[i], seriArgs, self.deps);
           series.events = self.events;
           svg.call(series.draw());
           self.series.push(series);
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/point_series/heatmap_chart.js b/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/point_series/heatmap_chart.js
index 948cf98a64352..9822932c6071b 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/point_series/heatmap_chart.js
+++ b/src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/point_series/heatmap_chart.js
@@ -23,7 +23,7 @@ import moment from 'moment';
 import { isColorDark } from '@elastic/eui';
 
 import { PointSeries } from './_point_series';
-import { getHeatmapColors } from '../../../legacy_imports';
+import { getHeatmapColors } from '../../.../../../../../../../plugins/charts/public';
 
 const defaults = {
   color: undefined, // todo
@@ -42,6 +42,7 @@ const defaults = {
 export class HeatmapChart extends PointSeries {
   constructor(handler, chartEl, chartData, seriesConfigArgs, deps) {
     super(handler, chartEl, chartData, seriesConfigArgs, deps);
+
     this.seriesConfig = _.defaults(seriesConfigArgs || {}, defaults);
 
     this.handler.visConfig.set('legend', {
diff --git a/src/legacy/ui/public/new_platform/__mocks__/helpers.ts b/src/legacy/ui/public/new_platform/__mocks__/helpers.ts
index d1d7603bd82ed..c89ae9f8b3c9b 100644
--- a/src/legacy/ui/public/new_platform/__mocks__/helpers.ts
+++ b/src/legacy/ui/public/new_platform/__mocks__/helpers.ts
@@ -27,11 +27,13 @@ import { inspectorPluginMock } from '../../../../../plugins/inspector/public/moc
 import { uiActionsPluginMock } from '../../../../../plugins/ui_actions/public/mocks';
 import { managementPluginMock } from '../../../../../plugins/management/public/mocks';
 import { usageCollectionPluginMock } from '../../../../../plugins/usage_collection/public/mocks';
+import { chartPluginMock } from '../../../../../plugins/charts/public/mocks';
 /* eslint-enable @kbn/eslint/no-restricted-paths */
 
 export const pluginsMock = {
   createSetup: () => ({
     data: dataPluginMock.createSetupContract(),
+    charts: chartPluginMock.createSetupContract(),
     navigation: navigationPluginMock.createSetupContract(),
     embeddable: embeddablePluginMock.createSetupContract(),
     inspector: inspectorPluginMock.createSetupContract(),
@@ -41,6 +43,7 @@ export const pluginsMock = {
   }),
   createStart: () => ({
     data: dataPluginMock.createStartContract(),
+    charts: chartPluginMock.createStartContract(),
     navigation: navigationPluginMock.createStartContract(),
     embeddable: embeddablePluginMock.createStartContract(),
     inspector: inspectorPluginMock.createStartContract(),
diff --git a/src/legacy/ui/public/new_platform/new_platform.karma_mock.js b/src/legacy/ui/public/new_platform/new_platform.karma_mock.js
index 6f4b20c425fc9..31dd00c37069f 100644
--- a/src/legacy/ui/public/new_platform/new_platform.karma_mock.js
+++ b/src/legacy/ui/public/new_platform/new_platform.karma_mock.js
@@ -141,6 +141,12 @@ export const npSetup = {
         update: sinon.fake(),
       },
     },
+    charts: {
+      theme: {
+        chartsTheme$: mockObservable,
+        useChartsTheme: sinon.fake(),
+      },
+    },
   },
 };
 
@@ -276,12 +282,21 @@ export const npStart = {
       featureCatalogue: {
         register: sinon.fake(),
       },
+      environment: {
+        get: sinon.fake(),
+      },
     },
     navigation: {
       ui: {
         TopNavMenu: mockComponent,
       },
     },
+    charts: {
+      theme: {
+        chartsTheme$: mockObservable,
+        useChartsTheme: sinon.fake(),
+      },
+    },
   },
 };
 
diff --git a/src/legacy/ui/public/new_platform/new_platform.ts b/src/legacy/ui/public/new_platform/new_platform.ts
index c948565bb0835..cb98e72591b03 100644
--- a/src/legacy/ui/public/new_platform/new_platform.ts
+++ b/src/legacy/ui/public/new_platform/new_platform.ts
@@ -27,7 +27,7 @@ import {
   Setup as InspectorSetup,
   Start as InspectorStart,
 } from '../../../../plugins/inspector/public';
-import { EuiUtilsStart } from '../../../../plugins/eui_utils/public';
+import { ChartsPluginSetup, ChartsPluginStart } from '../../../../plugins/charts/public';
 import { DevToolsSetup, DevToolsStart } from '../../../../plugins/dev_tools/public';
 import { KibanaLegacySetup, KibanaLegacyStart } from '../../../../plugins/kibana_legacy/public';
 import { HomePublicPluginSetup, HomePublicPluginStart } from '../../../../plugins/home/public';
@@ -42,6 +42,7 @@ import {
 
 export interface PluginsSetup {
   bfetch: BfetchPublicSetup;
+  charts: ChartsPluginSetup;
   data: ReturnType<DataPlugin['setup']>;
   embeddable: IEmbeddableSetup;
   expressions: ReturnType<ExpressionsPlugin['setup']>;
@@ -57,9 +58,9 @@ export interface PluginsSetup {
 
 export interface PluginsStart {
   bfetch: BfetchPublicStart;
+  charts: ChartsPluginStart;
   data: ReturnType<DataPlugin['start']>;
   embeddable: IEmbeddableStart;
-  eui_utils: EuiUtilsStart;
   expressions: ReturnType<ExpressionsPlugin['start']>;
   home: HomePublicPluginStart;
   inspector: InspectorStart;
diff --git a/src/legacy/ui/public/vis/__tests__/components/color.js b/src/legacy/ui/public/vis/__tests__/components/color.js
deleted file mode 100644
index 31bfb60918faf..0000000000000
--- a/src/legacy/ui/public/vis/__tests__/components/color.js
+++ /dev/null
@@ -1,343 +0,0 @@
-/*
- * 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 expect from '@kbn/expect';
-import ngMock from 'ng_mock';
-import _ from 'lodash';
-import d3 from 'd3';
-import chrome from '../../../chrome';
-import { seedColors } from '../../../vis/components/color/seed_colors';
-import { vislibColor as getColors } from '../../components/color/color';
-import { mappedColors } from '../../components/color/mapped_colors';
-import { createColorPalette } from '../../components/color/color_palette';
-
-const config = chrome.getUiSettingsClient();
-
-describe('Vislib Color Module Test Suite', function() {
-  describe('Color (main)', function() {
-    let previousConfig;
-    const arr = ['good', 'better', 'best', 'never', 'let', 'it', 'rest'];
-    const arrayOfNumbers = [1, 2, 3, 4, 5];
-    const arrayOfUndefinedValues = [undefined, undefined, undefined];
-    const arrayOfObjects = [{}, {}, {}];
-    const arrayOfBooleans = [true, false, true];
-    const arrayOfNullValues = [null, null, null];
-    const emptyObject = {};
-    const nullValue = null;
-    let notAValue;
-    let color;
-
-    beforeEach(ngMock.module('kibana'));
-    beforeEach(() => {
-      previousConfig = config.get('visualization:colorMapping');
-      config.set('visualization:colorMapping', {});
-      color = getColors(arr, {});
-    });
-
-    afterEach(() => {
-      config.set('visualization:colorMapping', previousConfig);
-    });
-
-    it('should throw an error if input is not an array', function() {
-      expect(function() {
-        getColors(200);
-      }).to.throwError();
-
-      expect(function() {
-        getColors('help');
-      }).to.throwError();
-
-      expect(function() {
-        getColors(true);
-      }).to.throwError();
-
-      expect(function() {
-        getColors(notAValue);
-      }).to.throwError();
-
-      expect(function() {
-        getColors(nullValue);
-      }).to.throwError();
-
-      expect(function() {
-        getColors(emptyObject);
-      }).to.throwError();
-    });
-
-    describe('when array is not composed of numbers, strings, or undefined values', function() {
-      it('should throw an error', function() {
-        expect(function() {
-          getColors(arrayOfObjects);
-        }).to.throwError();
-
-        expect(function() {
-          getColors(arrayOfBooleans);
-        }).to.throwError();
-
-        expect(function() {
-          getColors(arrayOfNullValues);
-        }).to.throwError();
-      });
-    });
-
-    describe('when input is an array of strings, numbers, or undefined values', function() {
-      it('should not throw an error', function() {
-        expect(function() {
-          getColors(arr);
-        }).to.not.throwError();
-
-        expect(function() {
-          getColors(arrayOfNumbers);
-        }).to.not.throwError();
-
-        expect(function() {
-          getColors(arrayOfUndefinedValues);
-        }).to.not.throwError();
-      });
-    });
-
-    it('should be a function', function() {
-      expect(typeof getColors).to.be('function');
-    });
-
-    it('should return a function', function() {
-      expect(typeof color).to.be('function');
-    });
-
-    it('should return the first hex color in the seed colors array', function() {
-      expect(color(arr[0])).to.be(seedColors[0]);
-    });
-
-    it('should return the value from the mapped colors', function() {
-      expect(color(arr[1])).to.be(mappedColors.get(arr[1]));
-    });
-
-    it('should return the value from the specified color mapping overrides', function() {
-      const colorFn = getColors(arr, { good: 'red' });
-      expect(colorFn('good')).to.be('red');
-    });
-  });
-
-  describe('Seed Colors', function() {
-    it('should return an array', function() {
-      expect(seedColors instanceof Array).to.be(true);
-    });
-  });
-
-  describe('Mapped Colors', () => {
-    let previousConfig;
-
-    beforeEach(ngMock.module('kibana'));
-    beforeEach(() => {
-      previousConfig = config.get('visualization:colorMapping');
-      mappedColors.mapping = {};
-    });
-
-    afterEach(() => {
-      config.set('visualization:colorMapping', previousConfig);
-    });
-
-    it('should properly map keys to unique colors', () => {
-      config.set('visualization:colorMapping', {});
-
-      const arr = [1, 2, 3, 4, 5];
-      mappedColors.mapKeys(arr);
-      expect(
-        _(mappedColors.mapping)
-          .values()
-          .uniq()
-          .size()
-      ).to.be(arr.length);
-    });
-
-    it('should not include colors used by the config', () => {
-      const newConfig = { bar: seedColors[0] };
-      config.set('visualization:colorMapping', newConfig);
-
-      const arr = ['foo', 'baz', 'qux'];
-      mappedColors.mapKeys(arr);
-
-      const colorValues = _(mappedColors.mapping).values();
-      expect(colorValues.contains(seedColors[0])).to.be(false);
-      expect(colorValues.uniq().size()).to.be(arr.length);
-    });
-
-    it('should create a unique array of colors even when config is set', () => {
-      const newConfig = { bar: seedColors[0] };
-      config.set('visualization:colorMapping', newConfig);
-
-      const arr = ['foo', 'bar', 'baz', 'qux'];
-      mappedColors.mapKeys(arr);
-
-      const expectedSize = _(arr)
-        .difference(_.keys(newConfig))
-        .size();
-      expect(
-        _(mappedColors.mapping)
-          .values()
-          .uniq()
-          .size()
-      ).to.be(expectedSize);
-      expect(mappedColors.get(arr[0])).to.not.be(seedColors[0]);
-    });
-
-    it('should treat different formats of colors as equal', () => {
-      const color = d3.rgb(seedColors[0]);
-      const rgb = `rgb(${color.r}, ${color.g}, ${color.b})`;
-      const newConfig = { bar: rgb };
-      config.set('visualization:colorMapping', newConfig);
-
-      const arr = ['foo', 'bar', 'baz', 'qux'];
-      mappedColors.mapKeys(arr);
-
-      const expectedSize = _(arr)
-        .difference(_.keys(newConfig))
-        .size();
-      expect(
-        _(mappedColors.mapping)
-          .values()
-          .uniq()
-          .size()
-      ).to.be(expectedSize);
-      expect(mappedColors.get(arr[0])).to.not.be(seedColors[0]);
-      expect(mappedColors.get('bar')).to.be(seedColors[0]);
-    });
-
-    it('should have a flush method that moves the current map to the old map', function() {
-      const arr = [1, 2, 3, 4, 5];
-      mappedColors.mapKeys(arr);
-      expect(_.keys(mappedColors.mapping).length).to.be(5);
-      expect(_.keys(mappedColors.oldMap).length).to.be(0);
-
-      mappedColors.flush();
-
-      expect(_.keys(mappedColors.oldMap).length).to.be(5);
-      expect(_.keys(mappedColors.mapping).length).to.be(0);
-
-      mappedColors.flush();
-
-      expect(_.keys(mappedColors.oldMap).length).to.be(0);
-      expect(_.keys(mappedColors.mapping).length).to.be(0);
-    });
-
-    it('should use colors in the oldMap if they are available', function() {
-      const arr = [1, 2, 3, 4, 5];
-      mappedColors.mapKeys(arr);
-      expect(_.keys(mappedColors.mapping).length).to.be(5);
-      expect(_.keys(mappedColors.oldMap).length).to.be(0);
-
-      mappedColors.flush();
-
-      mappedColors.mapKeys([3, 4, 5]);
-      expect(_.keys(mappedColors.oldMap).length).to.be(5);
-      expect(_.keys(mappedColors.mapping).length).to.be(3);
-
-      expect(mappedColors.mapping[1]).to.be(undefined);
-      expect(mappedColors.mapping[2]).to.be(undefined);
-      expect(mappedColors.mapping[3]).to.equal(mappedColors.oldMap[3]);
-      expect(mappedColors.mapping[4]).to.equal(mappedColors.oldMap[4]);
-      expect(mappedColors.mapping[5]).to.equal(mappedColors.oldMap[5]);
-    });
-
-    it('should have a purge method that clears both maps', function() {
-      const arr = [1, 2, 3, 4, 5];
-      mappedColors.mapKeys(arr);
-      mappedColors.flush();
-      mappedColors.mapKeys(arr);
-
-      expect(_.keys(mappedColors.mapping).length).to.be(5);
-      expect(_.keys(mappedColors.oldMap).length).to.be(5);
-
-      mappedColors.purge();
-
-      expect(_.keys(mappedColors.mapping).length).to.be(0);
-      expect(_.keys(mappedColors.oldMap).length).to.be(0);
-    });
-  });
-
-  describe('Color Palette', function() {
-    const num1 = 45;
-    const num2 = 72;
-    const num3 = 90;
-    const string = 'Welcome';
-    const bool = true;
-    const nullValue = null;
-    const emptyArr = [];
-    const emptyObject = {};
-    let notAValue;
-    let colorPalette;
-
-    beforeEach(ngMock.module('kibana'));
-    beforeEach(
-      ngMock.inject(function() {
-        colorPalette = createColorPalette(num1);
-      })
-    );
-
-    it('should throw an error if input is not a number', function() {
-      expect(function() {
-        createColorPalette(string);
-      }).to.throwError();
-
-      expect(function() {
-        createColorPalette(bool);
-      }).to.throwError();
-
-      expect(function() {
-        createColorPalette(nullValue);
-      }).to.throwError();
-
-      expect(function() {
-        createColorPalette(emptyArr);
-      }).to.throwError();
-
-      expect(function() {
-        createColorPalette(emptyObject);
-      }).to.throwError();
-
-      expect(function() {
-        createColorPalette(notAValue);
-      }).to.throwError();
-    });
-
-    it('should be a function', function() {
-      expect(typeof createColorPalette).to.be('function');
-    });
-
-    it('should return an array', function() {
-      expect(colorPalette instanceof Array).to.be(true);
-    });
-
-    it('should return an array of the same length as the input', function() {
-      expect(colorPalette.length).to.be(num1);
-    });
-
-    it('should return the seed color array when input length is 72', function() {
-      expect(createColorPalette(num2)[71]).to.be(seedColors[71]);
-    });
-
-    it('should return an array of the same length as the input when input is greater than 72', function() {
-      expect(createColorPalette(num3).length).to.be(num3);
-    });
-
-    it('should create new darker colors when input is greater than 72', function() {
-      expect(createColorPalette(num3)[72]).not.to.equal(seedColors[0]);
-    });
-  });
-});
diff --git a/src/legacy/ui/public/vis/components/color/color.js b/src/legacy/ui/public/vis/components/color/color.js
deleted file mode 100644
index 95dd036ff3d40..0000000000000
--- a/src/legacy/ui/public/vis/components/color/color.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * 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 _ from 'lodash';
-import { mappedColors } from './mapped_colors';
-
-/*
- * Accepts an array of strings or numbers that are used to create a
- * a lookup table that associates the values (key) with a hex color (value).
- * Returns a function that accepts a value (i.e. a string or number)
- * and returns a hex color associated with that value.
- */
-
-export function vislibColor(arrayOfStringsOrNumbers, colorMapping) {
-  colorMapping = colorMapping || {};
-  if (!Array.isArray(arrayOfStringsOrNumbers)) {
-    throw new Error('ColorUtil expects an array');
-  }
-
-  arrayOfStringsOrNumbers.forEach(function(val) {
-    if (!_.isString(val) && !_.isNumber(val) && !_.isUndefined(val)) {
-      throw new TypeError('ColorUtil expects an array of strings, numbers, or undefined values');
-    }
-  });
-
-  mappedColors.mapKeys(arrayOfStringsOrNumbers);
-
-  return function(value) {
-    return colorMapping[value] || mappedColors.get(value);
-  };
-}
diff --git a/src/plugins/charts/README.md b/src/plugins/charts/README.md
new file mode 100644
index 0000000000000..319da67981aa9
--- /dev/null
+++ b/src/plugins/charts/README.md
@@ -0,0 +1,97 @@
+# Charts
+
+The Charts plugin is a way to create easier integration of shared colors, themes, types and other utilities across all Kibana charts and visualizations.
+
+## Static methods
+
+### `vislibColorMaps`
+
+Color mappings related to vislib visualizations
+
+### `truncatedColorMaps`
+
+Color mappings subset of `vislibColorMaps`
+
+### `colorSchemas`
+
+Color mappings in `value`/`text` form
+
+### `getHeatmapColors`
+
+Funciton to retrive heatmap related colors based on `value` and `colorSchemaName`
+
+### `truncatedColorSchemas`
+
+Truncated color mappings in `value`/`text` form
+
+## Theme
+
+the `theme` service offers utilities to interact with theme of kibana. EUI provides a light and dark theme object to work with Elastic-Charts. However, every instance of a Chart would need to pass down this the correctly EUI theme depending on Kibana's light or dark mode. There are several ways you can use the `theme` service to get the correct theme.
+
+> The current theme (light or dark) of Kibana is typically taken into account for the functions below.
+
+### `useChartsTheme`
+
+The simple fetching of the correct EUI theme; a **React hook**.
+
+```js
+import { npStart } from 'ui/new_platform';
+import { Chart, Settings } from '@elastic/charts';
+
+export const YourComponent = () => (
+  <Chart>
+    <Settings theme={npStart.plugins.charts.theme.useChartsTheme()} />
+  </Chart>
+);
+```
+
+### `chartsTheme$`
+
+An **observable** of the current charts theme. Use this implementation for more flexible updates to the chart theme without full page refreshes.
+
+```tsx
+import { npStart } from 'ui/new_platform';
+import { EuiChartThemeType } from '@elastic/eui/src/themes/charts/themes';
+import { Subscription } from 'rxjs';
+import { Chart, Settings } from '@elastic/charts';
+
+interface YourComponentProps {};
+
+interface YourComponentState {
+  chartsTheme: EuiChartThemeType['theme'];
+}
+
+export class YourComponent extends Component<YourComponentProps, YourComponentState> {
+  private subscription?: Subscription;
+  public state = {
+    chartsTheme: npStart.plugins.charts.theme.chartsDefaultTheme,
+  };
+
+  componentDidMount() {
+    this.subscription = npStart.plugins.charts.theme
+      .chartsTheme$
+      .subscribe(chartsTheme => this.setState({ chartsTheme }));
+  }
+
+  componentWillUnmount() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+      this.subscription = undefined;
+    }
+  }
+
+  public render() {
+    const { chartsTheme } = this.state;
+
+    return (
+      <Chart>
+        <Settings theme={chartsTheme} />
+      </Chart>
+    );
+  }
+}
+```
+
+### `chartsDefaultTheme`
+
+Returns default charts theme (i.e. light).
diff --git a/src/plugins/eui_utils/kibana.json b/src/plugins/charts/kibana.json
similarity index 73%
rename from src/plugins/eui_utils/kibana.json
rename to src/plugins/charts/kibana.json
index 29671d2f1bc9f..43c41fe64306a 100644
--- a/src/plugins/eui_utils/kibana.json
+++ b/src/plugins/charts/kibana.json
@@ -1,5 +1,5 @@
 {
-  "id": "eui_utils",
+  "id": "charts",
   "version": "kibana",
   "server": false,
   "ui": true
diff --git a/src/plugins/charts/public/index.ts b/src/plugins/charts/public/index.ts
new file mode 100644
index 0000000000000..a8203a31a6847
--- /dev/null
+++ b/src/plugins/charts/public/index.ts
@@ -0,0 +1,27 @@
+/*
+ * 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 { ChartsPlugin } from './plugin';
+
+export const plugin = () => new ChartsPlugin();
+
+export type ChartsPluginSetup = ReturnType<ChartsPlugin['setup']>;
+export type ChartsPluginStart = ReturnType<ChartsPlugin['start']>;
+
+export * from './static';
diff --git a/src/plugins/charts/public/mocks.ts b/src/plugins/charts/public/mocks.ts
new file mode 100644
index 0000000000000..d8fab7b535e9f
--- /dev/null
+++ b/src/plugins/charts/public/mocks.ts
@@ -0,0 +1,42 @@
+/*
+ * 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 { ChartsPlugin } from './plugin';
+import { themeServiceMock } from './services/theme/mock';
+import { colorsServiceMock } from './services/colors/mock';
+
+export type Setup = jest.Mocked<ReturnType<ChartsPlugin['setup']>>;
+export type Start = jest.Mocked<ReturnType<ChartsPlugin['start']>>;
+
+const createSetupContract = (): Setup => ({
+  colors: colorsServiceMock,
+  theme: themeServiceMock,
+});
+
+const createStartContract = (): Start => ({
+  colors: colorsServiceMock,
+  theme: themeServiceMock,
+});
+
+export { colorMapsMock } from './static/color_maps/mock';
+
+export const chartPluginMock = {
+  createSetupContract,
+  createStartContract,
+};
diff --git a/src/plugins/charts/public/plugin.ts b/src/plugins/charts/public/plugin.ts
new file mode 100644
index 0000000000000..bc91735f52052
--- /dev/null
+++ b/src/plugins/charts/public/plugin.ts
@@ -0,0 +1,57 @@
+/*
+ * 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 { Plugin, CoreSetup } from 'kibana/public';
+
+import { ThemeService, ColorsService } from './services';
+
+export type Theme = Omit<ThemeService, 'init'>;
+export type Color = Omit<ColorsService, 'init'>;
+
+/** @public */
+export interface ChartsPluginSetup {
+  colors: Color;
+  theme: Theme;
+}
+
+/** @public */
+export type ChartsPluginStart = ChartsPluginSetup;
+
+/** @public */
+export class ChartsPlugin implements Plugin<ChartsPluginSetup, ChartsPluginStart> {
+  private readonly themeService = new ThemeService();
+  private readonly colorsService = new ColorsService();
+
+  public setup({ uiSettings }: CoreSetup): ChartsPluginSetup {
+    this.themeService.init(uiSettings);
+    this.colorsService.init(uiSettings);
+
+    return {
+      colors: this.colorsService,
+      theme: this.themeService,
+    };
+  }
+
+  public start(): ChartsPluginStart {
+    return {
+      colors: this.colorsService,
+      theme: this.themeService,
+    };
+  }
+}
diff --git a/src/legacy/ui/public/vis/components/color/color_palette.js b/src/plugins/charts/public/services/colors/color_palette.ts
similarity index 90%
rename from src/legacy/ui/public/vis/components/color/color_palette.js
rename to src/plugins/charts/public/services/colors/color_palette.ts
index c6a50f36e2d67..7b8e93bbde240 100644
--- a/src/legacy/ui/public/vis/components/color/color_palette.js
+++ b/src/plugins/charts/public/services/colors/color_palette.ts
@@ -19,18 +19,13 @@
 
 import d3 from 'd3';
 import _ from 'lodash';
-import { seedColors } from './seed_colors';
 
-/*
- * Generates an array of hex colors the length of the input number.
- * If the number is greater than the length of seed colors available,
- * new colors are generated up to the value of the input number.
- */
+import { seedColors } from './seed_colors';
 
 const offset = 300; // Hue offset to start at
 
-const fraction = function(goal) {
-  const walkTree = function(numerator, denominator, bytes) {
+const fraction = function(goal: number) {
+  const walkTree = (numerator: number, denominator: number, bytes: number[]): number => {
     if (bytes.length) {
       return walkTree(numerator * 2 + (bytes.pop() ? 1 : -1), denominator * 2, bytes);
     } else {
@@ -49,13 +44,17 @@ const fraction = function(goal) {
   return walkTree(1, 2, b);
 };
 
-export function createColorPalette(num) {
+/**
+ * Generates an array of hex colors the length of the input number.
+ * If the number is greater than the length of seed colors available,
+ * new colors are generated up to the value of the input number.
+ */
+export function createColorPalette(num?: any): string[] {
   if (!_.isNumber(num)) {
     throw new TypeError('ColorPaletteUtilService expects a number');
   }
 
   const colors = seedColors;
-
   const seedLength = seedColors.length;
 
   _.times(num - seedLength, function(i) {
diff --git a/src/plugins/charts/public/services/colors/colors.test.ts b/src/plugins/charts/public/services/colors/colors.test.ts
new file mode 100644
index 0000000000000..3e9012cd71dc5
--- /dev/null
+++ b/src/plugins/charts/public/services/colors/colors.test.ts
@@ -0,0 +1,140 @@
+/*
+ * 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 { coreMock } from '../../../../../core/public/mocks';
+import { seedColors } from './seed_colors';
+import { ColorsService } from './colors';
+
+// Local state for config
+const config = new Map<string, any>();
+
+describe('Vislib Color Service', () => {
+  const colors = new ColorsService();
+  const mockUiSettings = coreMock.createSetup().uiSettings;
+  mockUiSettings.get.mockImplementation(a => config.get(a));
+  mockUiSettings.set.mockImplementation((...a) => config.set(...a) as any);
+  colors.init(mockUiSettings);
+
+  let color: any;
+  let previousConfig: any;
+
+  const arr = ['good', 'better', 'best', 'never', 'let', 'it', 'rest'];
+  const arrayOfNumbers = [1, 2, 3, 4, 5];
+  const arrayOfUndefinedValues = [undefined, undefined, undefined];
+  const arrayOfObjects = [{}, {}, {}];
+  const arrayOfBooleans = [true, false, true];
+  const arrayOfNullValues = [null, null, null];
+  const emptyObject = {};
+  const nullValue = null;
+
+  beforeEach(() => {
+    previousConfig = config.get('visualization:colorMapping');
+    config.set('visualization:colorMapping', {});
+    color = colors.createColorLookupFunction(arr, {});
+  });
+
+  afterEach(() => {
+    config.set('visualization:colorMapping', previousConfig);
+  });
+
+  it('should throw error if not initialized', () => {
+    const colorsBad = new ColorsService();
+
+    expect(() => colorsBad.createColorLookupFunction(arr, {})).toThrowError();
+  });
+
+  it('should throw an error if input is not an array', () => {
+    expect(() => {
+      colors.createColorLookupFunction(200);
+    }).toThrowError();
+
+    expect(() => {
+      colors.createColorLookupFunction('help');
+    }).toThrowError();
+
+    expect(() => {
+      colors.createColorLookupFunction(true);
+    }).toThrowError();
+
+    expect(() => {
+      colors.createColorLookupFunction();
+    }).toThrowError();
+
+    expect(() => {
+      colors.createColorLookupFunction(nullValue);
+    }).toThrowError();
+
+    expect(() => {
+      colors.createColorLookupFunction(emptyObject);
+    }).toThrowError();
+  });
+
+  describe('when array is not composed of numbers, strings, or undefined values', () => {
+    it('should throw an error', () => {
+      expect(() => {
+        colors.createColorLookupFunction(arrayOfObjects);
+      }).toThrowError();
+
+      expect(() => {
+        colors.createColorLookupFunction(arrayOfBooleans);
+      }).toThrowError();
+
+      expect(() => {
+        colors.createColorLookupFunction(arrayOfNullValues);
+      }).toThrowError();
+    });
+  });
+
+  describe('when input is an array of strings, numbers, or undefined values', () => {
+    it('should not throw an error', () => {
+      expect(() => {
+        colors.createColorLookupFunction(arr);
+      }).not.toThrowError();
+
+      expect(() => {
+        colors.createColorLookupFunction(arrayOfNumbers);
+      }).not.toThrowError();
+
+      expect(() => {
+        colors.createColorLookupFunction(arrayOfUndefinedValues);
+      }).not.toThrowError();
+    });
+  });
+
+  it('should be a function', () => {
+    expect(typeof colors.createColorLookupFunction).toBe('function');
+  });
+
+  it('should return a function', () => {
+    expect(typeof color).toBe('function');
+  });
+
+  it('should return the first hex color in the seed colors array', () => {
+    expect(color(arr[0])).toBe(seedColors[0]);
+  });
+
+  it('should return the value from the mapped colors', () => {
+    expect(color(arr[1])).toBe(colors.mappedColors.get(arr[1]));
+  });
+
+  it('should return the value from the specified color mapping overrides', () => {
+    const colorFn = colors.createColorLookupFunction(arr, { good: 'red' });
+    expect(colorFn('good')).toBe('red');
+  });
+});
diff --git a/src/plugins/charts/public/services/colors/colors.ts b/src/plugins/charts/public/services/colors/colors.ts
new file mode 100644
index 0000000000000..3c12adf84d8b2
--- /dev/null
+++ b/src/plugins/charts/public/services/colors/colors.ts
@@ -0,0 +1,74 @@
+/*
+ * 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 _ from 'lodash';
+
+import { CoreSetup } from 'kibana/public';
+
+import { MappedColors } from './mapped_colors';
+import { seedColors } from './seed_colors';
+
+/**
+ * Accepts an array of strings or numbers that are used to create a
+ * a lookup table that associates the values (key) with a hex color (value).
+ * Returns a function that accepts a value (i.e. a string or number)
+ * and returns a hex color associated with that value.
+ */
+export class ColorsService {
+  private _mappedColors?: MappedColors;
+
+  public readonly seedColors = seedColors;
+
+  public get mappedColors() {
+    if (!this._mappedColors) {
+      throw new Error('ColorService not yet initialized');
+    }
+
+    return this._mappedColors;
+  }
+
+  init(uiSettings: CoreSetup['uiSettings']) {
+    this._mappedColors = new MappedColors(uiSettings);
+  }
+
+  createColorLookupFunction(
+    arrayOfStringsOrNumbers?: any,
+    colorMapping: Partial<Record<string, string>> = {}
+  ) {
+    if (!Array.isArray(arrayOfStringsOrNumbers)) {
+      throw new Error(
+        `createColorLookupFunction expects an array but recived: ${typeof arrayOfStringsOrNumbers}`
+      );
+    }
+
+    arrayOfStringsOrNumbers.forEach(function(val) {
+      if (!_.isString(val) && !_.isNumber(val) && !_.isUndefined(val)) {
+        throw new TypeError(
+          'createColorLookupFunction expects an array of strings, numbers, or undefined values'
+        );
+      }
+    });
+
+    this.mappedColors.mapKeys(arrayOfStringsOrNumbers);
+
+    return (value: string) => {
+      return colorMapping[value] || this.mappedColors.get(value);
+    };
+  }
+}
diff --git a/src/plugins/charts/public/services/colors/colors_palette.test.ts b/src/plugins/charts/public/services/colors/colors_palette.test.ts
new file mode 100644
index 0000000000000..6612447cefe9e
--- /dev/null
+++ b/src/plugins/charts/public/services/colors/colors_palette.test.ts
@@ -0,0 +1,87 @@
+/*
+ * 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 { seedColors } from './seed_colors';
+import { createColorPalette } from './color_palette';
+
+describe('Color Palette', () => {
+  const num1 = 45;
+  const num2 = 72;
+  const num3 = 90;
+  const string = 'Welcome';
+  const bool = true;
+  const nullValue = null;
+  const emptyArr: [] = [];
+  const emptyObject = {};
+  let colorPalette: string[];
+
+  beforeEach(() => {
+    colorPalette = createColorPalette(num1);
+  });
+
+  it('should throw an error if input is not a number', () => {
+    expect(() => {
+      createColorPalette(string);
+    }).toThrowError();
+
+    expect(() => {
+      createColorPalette(bool);
+    }).toThrowError();
+
+    expect(() => {
+      createColorPalette(nullValue);
+    }).toThrowError();
+
+    expect(() => {
+      createColorPalette(emptyArr);
+    }).toThrowError();
+
+    expect(() => {
+      createColorPalette(emptyObject);
+    }).toThrowError();
+
+    expect(() => {
+      createColorPalette();
+    }).toThrowError();
+  });
+
+  it('should be a function', () => {
+    expect(typeof createColorPalette).toBe('function');
+  });
+
+  it('should return an array', () => {
+    expect(colorPalette).toBeInstanceOf(Array);
+  });
+
+  it('should return an array of the same length as the input', () => {
+    expect(colorPalette.length).toBe(num1);
+  });
+
+  it('should return the seed color array when input length is 72', () => {
+    expect(createColorPalette(num2)[71]).toBe(seedColors[71]);
+  });
+
+  it('should return an array of the same length as the input when input is greater than 72', () => {
+    expect(createColorPalette(num3).length).toBe(num3);
+  });
+
+  it('should create new darker colors when input is greater than 72', () => {
+    expect(createColorPalette(num3)[72]).not.toEqual(seedColors[0]);
+  });
+});
diff --git a/src/plugins/eui_utils/public/index.ts b/src/plugins/charts/public/services/colors/index.ts
similarity index 84%
rename from src/plugins/eui_utils/public/index.ts
rename to src/plugins/charts/public/services/colors/index.ts
index 9efe3a71135d8..7ee5e0262e1b8 100644
--- a/src/plugins/eui_utils/public/index.ts
+++ b/src/plugins/charts/public/services/colors/index.ts
@@ -17,7 +17,4 @@
  * under the License.
  */
 
-import { EuiUtils } from './eui_utils';
-
-export const plugin = () => new EuiUtils();
-export type EuiUtilsStart = ReturnType<EuiUtils['start']>;
+export { ColorsService } from './colors';
diff --git a/src/plugins/charts/public/services/colors/mapped_colors.test.ts b/src/plugins/charts/public/services/colors/mapped_colors.test.ts
new file mode 100644
index 0000000000000..77f1faf468b46
--- /dev/null
+++ b/src/plugins/charts/public/services/colors/mapped_colors.test.ts
@@ -0,0 +1,163 @@
+/*
+ * 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 _ from 'lodash';
+import d3 from 'd3';
+
+import { coreMock } from '../../../../../core/public/mocks';
+import { seedColors } from './seed_colors';
+import { MappedColors } from './mapped_colors';
+
+// Local state for config
+const config = new Map<string, any>();
+
+describe('Mapped Colors', () => {
+  const mockUiSettings = coreMock.createSetup().uiSettings;
+  mockUiSettings.get.mockImplementation(a => config.get(a));
+  mockUiSettings.set.mockImplementation((...a) => config.set(...a) as any);
+
+  const mappedColors = new MappedColors(mockUiSettings);
+  let previousConfig: any;
+
+  beforeEach(() => {
+    previousConfig = config.get('visualization:colorMapping');
+    mappedColors.purge();
+  });
+
+  afterEach(() => {
+    config.set('visualization:colorMapping', previousConfig);
+  });
+
+  it('should properly map keys to unique colors', () => {
+    config.set('visualization:colorMapping', {});
+
+    const arr = [1, 2, 3, 4, 5];
+    mappedColors.mapKeys(arr);
+    expect(
+      _(mappedColors.mapping)
+        .values()
+        .uniq()
+        .size()
+    ).toBe(arr.length);
+  });
+
+  it('should not include colors used by the config', () => {
+    const newConfig = { bar: seedColors[0] };
+    config.set('visualization:colorMapping', newConfig);
+
+    const arr = ['foo', 'baz', 'qux'];
+    mappedColors.mapKeys(arr);
+
+    const colorValues = _(mappedColors.mapping).values();
+    expect(colorValues.contains(seedColors[0])).toBe(false);
+    expect(colorValues.uniq().size()).toBe(arr.length);
+  });
+
+  it('should create a unique array of colors even when config is set', () => {
+    const newConfig = { bar: seedColors[0] };
+    config.set('visualization:colorMapping', newConfig);
+
+    const arr = ['foo', 'bar', 'baz', 'qux'];
+    mappedColors.mapKeys(arr);
+
+    const expectedSize = _(arr)
+      .difference(_.keys(newConfig))
+      .size();
+    expect(
+      _(mappedColors.mapping)
+        .values()
+        .uniq()
+        .size()
+    ).toBe(expectedSize);
+    expect(mappedColors.get(arr[0])).not.toBe(seedColors[0]);
+  });
+
+  it('should treat different formats of colors as equal', () => {
+    const color = d3.rgb(seedColors[0]);
+    const rgb = `rgb(${color.r}, ${color.g}, ${color.b})`;
+    const newConfig = { bar: rgb };
+    config.set('visualization:colorMapping', newConfig);
+
+    const arr = ['foo', 'bar', 'baz', 'qux'];
+    mappedColors.mapKeys(arr);
+
+    const expectedSize = _(arr)
+      .difference(_.keys(newConfig))
+      .size();
+    expect(
+      _(mappedColors.mapping)
+        .values()
+        .uniq()
+        .size()
+    ).toBe(expectedSize);
+    expect(mappedColors.get(arr[0])).not.toBe(seedColors[0]);
+    expect(mappedColors.get('bar')).toBe(seedColors[0]);
+  });
+
+  it('should have a flush method that moves the current map to the old map', function() {
+    const arr = [1, 2, 3, 4, 5];
+    mappedColors.mapKeys(arr);
+    expect(_.keys(mappedColors.mapping).length).toBe(5);
+    expect(_.keys(mappedColors.oldMap).length).toBe(0);
+
+    mappedColors.flush();
+
+    expect(_.keys(mappedColors.oldMap).length).toBe(5);
+    expect(_.keys(mappedColors.mapping).length).toBe(0);
+
+    mappedColors.flush();
+
+    expect(_.keys(mappedColors.oldMap).length).toBe(0);
+    expect(_.keys(mappedColors.mapping).length).toBe(0);
+  });
+
+  it('should use colors in the oldMap if they are available', function() {
+    const arr = [1, 2, 3, 4, 5];
+    mappedColors.mapKeys(arr);
+    expect(_.keys(mappedColors.mapping).length).toBe(5);
+    expect(_.keys(mappedColors.oldMap).length).toBe(0);
+
+    mappedColors.flush();
+
+    mappedColors.mapKeys([3, 4, 5]);
+    expect(_.keys(mappedColors.oldMap).length).toBe(5);
+    expect(_.keys(mappedColors.mapping).length).toBe(3);
+
+    expect(mappedColors.mapping[1]).toBe(undefined);
+    expect(mappedColors.mapping[2]).toBe(undefined);
+    expect(mappedColors.mapping[3]).toEqual(mappedColors.oldMap[3]);
+    expect(mappedColors.mapping[4]).toEqual(mappedColors.oldMap[4]);
+    expect(mappedColors.mapping[5]).toEqual(mappedColors.oldMap[5]);
+  });
+
+  it('should have a purge method that clears both maps', function() {
+    const arr = [1, 2, 3, 4, 5];
+    mappedColors.mapKeys(arr);
+    mappedColors.flush();
+    mappedColors.mapKeys(arr);
+
+    expect(_.keys(mappedColors.mapping).length).toBe(5);
+    expect(_.keys(mappedColors.oldMap).length).toBe(5);
+
+    mappedColors.purge();
+
+    expect(_.keys(mappedColors.mapping).length).toBe(0);
+    expect(_.keys(mappedColors.oldMap).length).toBe(0);
+  });
+});
diff --git a/src/legacy/ui/public/vis/components/color/mapped_colors.js b/src/plugins/charts/public/services/colors/mapped_colors.ts
similarity index 61%
rename from src/legacy/ui/public/vis/components/color/mapped_colors.js
rename to src/plugins/charts/public/services/colors/mapped_colors.ts
index 9734d2f613aa4..1c6ed690df632 100644
--- a/src/legacy/ui/public/vis/components/color/mapped_colors.js
+++ b/src/plugins/charts/public/services/colors/mapped_colors.ts
@@ -19,64 +19,75 @@
 
 import _ from 'lodash';
 import d3 from 'd3';
-import chrome from '../../../chrome';
-import { createColorPalette } from './color_palette';
 
-const standardizeColor = color => d3.rgb(color).toString();
+import { CoreSetup } from 'kibana/public';
 
-const config = chrome.getUiSettingsClient();
+import { createColorPalette } from './color_palette';
 
-function getConfigColorMapping() {
-  return _.mapValues(config.get('visualization:colorMapping'), standardizeColor);
-}
+const standardizeColor = (color: string) => d3.rgb(color).toString();
 
-/*
+/**
  * Maintains a lookup table that associates the value (key) with a hex color (value)
  * across the visualizations.
  * Provides functions to interact with the lookup table
  */
-class MappedColors {
-  constructor() {
-    this.oldMap = {};
-    this.mapping = {};
+export class MappedColors {
+  private _oldMap: any;
+  private _mapping: any;
+
+  constructor(private uiSettings: CoreSetup['uiSettings']) {
+    this._oldMap = {};
+    this._mapping = {};
+  }
+
+  private getConfigColorMapping() {
+    return _.mapValues(this.uiSettings.get('visualization:colorMapping'), standardizeColor);
+  }
+
+  public get oldMap(): any {
+    return this._oldMap;
   }
 
-  get(key) {
-    return getConfigColorMapping()[key] || this.mapping[key];
+  public get mapping(): any {
+    return this._mapping;
+  }
+
+  get(key: string | number) {
+    return this.getConfigColorMapping()[key] || this._mapping[key];
   }
 
   flush() {
-    this.oldMap = _.clone(this.mapping);
-    this.mapping = {};
+    this._oldMap = _.clone(this._mapping);
+    this._mapping = {};
   }
 
   purge() {
-    this.oldMap = {};
-    this.mapping = {};
+    this._oldMap = {};
+    this._mapping = {};
   }
 
-  mapKeys(keys) {
-    const configMapping = getConfigColorMapping();
+  mapKeys(keys: Array<string | number>) {
+    const configMapping = this.getConfigColorMapping();
     const configColors = _.values(configMapping);
-    const oldColors = _.values(this.oldMap);
+    const oldColors = _.values(this._oldMap);
 
-    const keysToMap = [];
+    const keysToMap: Array<string | number> = [];
     _.each(keys, key => {
       // If this key is mapped in the config, it's unnecessary to have it mapped here
-      if (configMapping[key]) delete this.mapping[key];
+      if (configMapping[key]) delete this._mapping[key];
 
       // If this key is mapped to a color used by the config color mapping, we need to remap it
-      if (_.contains(configColors, this.mapping[key])) keysToMap.push(key);
+      if (_.contains(configColors, this._mapping[key])) keysToMap.push(key);
 
       // if key exist in oldMap, move it to mapping
-      if (this.oldMap[key]) this.mapping[key] = this.oldMap[key];
+      if (this._oldMap[key]) this._mapping[key] = this._oldMap[key];
 
       // If this key isn't mapped, we need to map it
       if (this.get(key) == null) keysToMap.push(key);
     });
 
     // Generate a color palette big enough that all new keys can have unique color values
-    const allColors = _(this.mapping)
+    const allColors = _(this._mapping)
       .values()
       .union(configColors)
       .union(oldColors)
@@ -88,8 +99,6 @@ class MappedColors {
       newColors = newColors.concat(_.sample(allColors, keysToMap.length - newColors.length));
     }
 
-    _.merge(this.mapping, _.zipObject(keysToMap, newColors));
+    _.merge(this._mapping, _.zipObject(keysToMap, newColors));
   }
 }
-
-export const mappedColors = new MappedColors();
diff --git a/src/plugins/charts/public/services/colors/mock.ts b/src/plugins/charts/public/services/colors/mock.ts
new file mode 100644
index 0000000000000..924dbd6aa52a4
--- /dev/null
+++ b/src/plugins/charts/public/services/colors/mock.ts
@@ -0,0 +1,28 @@
+/*
+ * 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 { ColorsService } from './colors';
+import { coreMock } from '../../../../../core/public/mocks';
+
+const colors = new ColorsService();
+colors.init(coreMock.createSetup().uiSettings);
+
+export const colorsServiceMock: ColorsService = {
+  createColorLookupFunction: jest.fn(colors.createColorLookupFunction),
+} as any;
diff --git a/src/plugins/charts/public/services/colors/seed_colors.test.ts b/src/plugins/charts/public/services/colors/seed_colors.test.ts
new file mode 100644
index 0000000000000..c4aac726e49e7
--- /dev/null
+++ b/src/plugins/charts/public/services/colors/seed_colors.test.ts
@@ -0,0 +1,26 @@
+/*
+ * 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 { seedColors } from './seed_colors';
+
+describe('Seed Colors', function() {
+  it('should return an array', function() {
+    expect(seedColors).toBeInstanceOf(Array);
+  });
+});
diff --git a/src/legacy/ui/public/vis/components/color/seed_colors.js b/src/plugins/charts/public/services/colors/seed_colors.ts
similarity index 96%
rename from src/legacy/ui/public/vis/components/color/seed_colors.js
rename to src/plugins/charts/public/services/colors/seed_colors.ts
index 30a178c01a08c..7a27a25ae319f 100644
--- a/src/legacy/ui/public/vis/components/color/seed_colors.js
+++ b/src/plugins/charts/public/services/colors/seed_colors.ts
@@ -17,13 +17,12 @@
  * under the License.
  */
 
-/*
+/**
  * Using a random color generator presented awful colors and unpredictable color schemes.
  * So we needed to come up with a color scheme of our own that creates consistent, pleasing color patterns.
  * The order allows us to guarantee that 1st, 2nd, 3rd, etc values always get the same color.
  */
-
-export const seedColors = [
+export const seedColors: string[] = [
   '#00a69b',
   '#57c17b',
   '#6f87d8',
diff --git a/src/legacy/ui/public/color_maps/index.ts b/src/plugins/charts/public/services/index.ts
similarity index 84%
rename from src/legacy/ui/public/color_maps/index.ts
rename to src/plugins/charts/public/services/index.ts
index 50dfe682f4418..2bb4a99494e8a 100644
--- a/src/legacy/ui/public/color_maps/index.ts
+++ b/src/plugins/charts/public/services/index.ts
@@ -17,8 +17,5 @@
  * under the License.
  */
 
-export * from './color_maps';
-// @ts-ignore
-export { getHeatmapColors } from './heatmap_color';
-// @ts-ignore
-export * from './truncated_color_maps';
+export { ColorsService } from './colors';
+export { ThemeService } from './theme';
diff --git a/src/plugins/charts/public/services/theme/index.ts b/src/plugins/charts/public/services/theme/index.ts
new file mode 100644
index 0000000000000..2827f8d00a4fc
--- /dev/null
+++ b/src/plugins/charts/public/services/theme/index.ts
@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+export { ThemeService } from './theme';
diff --git a/src/plugins/charts/public/services/theme/mock.ts b/src/plugins/charts/public/services/theme/mock.ts
new file mode 100644
index 0000000000000..8aa1a4f2368ac
--- /dev/null
+++ b/src/plugins/charts/public/services/theme/mock.ts
@@ -0,0 +1,29 @@
+/*
+ * 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 { EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
+import { ThemeService } from './theme';
+
+export const themeServiceMock: ThemeService = {
+  chartsTheme$: jest.fn(() => ({
+    subsribe: jest.fn(),
+  })),
+  chartsDefaultTheme: EUI_CHARTS_THEME_LIGHT.theme,
+  useChartsTheme: jest.fn(),
+} as any;
diff --git a/src/plugins/eui_utils/public/eui_utils.test.tsx b/src/plugins/charts/public/services/theme/theme.test.tsx
similarity index 57%
rename from src/plugins/eui_utils/public/eui_utils.test.tsx
rename to src/plugins/charts/public/services/theme/theme.test.tsx
index a42eba838fe23..fca503e387ea2 100644
--- a/src/plugins/eui_utils/public/eui_utils.test.tsx
+++ b/src/plugins/charts/public/services/theme/theme.test.tsx
@@ -18,49 +18,53 @@
  */
 
 import { BehaviorSubject } from 'rxjs';
+import { take } from 'rxjs/operators';
 import { renderHook, act } from '@testing-library/react-hooks';
 
 import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
-import { EuiUtils } from './eui_utils';
-import { coreMock } from '../../../core/public/mocks';
-import { take } from 'rxjs/operators';
-const startMock = coreMock.createStart();
 
-describe('EuiUtils', () => {
-  describe('getChartsTheme()', () => {
+import { ThemeService } from './theme';
+import { coreMock } from '../../../../../core/public/mocks';
+
+const { uiSettings: setupMockUiSettings } = coreMock.createSetup();
+
+describe('ThemeService', () => {
+  describe('chartsTheme$', () => {
+    it('should throw error if service has not been initialized', () => {
+      const themeService = new ThemeService();
+      expect(() => themeService.chartsTheme$).toThrowError();
+    });
     it('returns the light theme when not in dark mode', async () => {
-      startMock.uiSettings.get$.mockReturnValue(new BehaviorSubject(false));
+      setupMockUiSettings.get$.mockReturnValue(new BehaviorSubject(false));
+      const themeService = new ThemeService();
+      themeService.init(setupMockUiSettings);
 
-      expect(
-        await new EuiUtils()
-          .start(startMock)
-          .getChartsTheme$()
-          .pipe(take(1))
-          .toPromise()
-      ).toEqual(EUI_CHARTS_THEME_LIGHT.theme);
+      expect(await themeService.chartsTheme$.pipe(take(1)).toPromise()).toEqual(
+        EUI_CHARTS_THEME_LIGHT.theme
+      );
     });
 
     describe('in dark mode', () => {
       it(`returns the dark theme`, async () => {
         // Fake dark theme turned returning true
-        startMock.uiSettings.get$.mockReturnValue(new BehaviorSubject(true));
+        setupMockUiSettings.get$.mockReturnValue(new BehaviorSubject(true));
+        const themeService = new ThemeService();
+        themeService.init(setupMockUiSettings);
 
-        expect(
-          await new EuiUtils()
-            .start(startMock)
-            .getChartsTheme$()
-            .pipe(take(1))
-            .toPromise()
-        ).toEqual(EUI_CHARTS_THEME_DARK.theme);
+        expect(await themeService.chartsTheme$.pipe(take(1)).toPromise()).toEqual(
+          EUI_CHARTS_THEME_DARK.theme
+        );
       });
     });
   });
 
-  describe('useChartsTheme()', () => {
+  describe('useChartsTheme', () => {
     it('updates when the uiSettings change', () => {
       const darkMode$ = new BehaviorSubject(false);
-      startMock.uiSettings.get$.mockReturnValue(darkMode$);
-      const { useChartsTheme } = new EuiUtils().start(startMock);
+      setupMockUiSettings.get$.mockReturnValue(darkMode$);
+      const themeService = new ThemeService();
+      themeService.init(setupMockUiSettings);
+      const { useChartsTheme } = themeService;
 
       const { result } = renderHook(() => useChartsTheme());
       expect(result.current).toBe(EUI_CHARTS_THEME_LIGHT.theme);
diff --git a/src/plugins/charts/public/services/theme/theme.ts b/src/plugins/charts/public/services/theme/theme.ts
new file mode 100644
index 0000000000000..65d4dc3393658
--- /dev/null
+++ b/src/plugins/charts/public/services/theme/theme.ts
@@ -0,0 +1,63 @@
+/*
+ * 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 { useEffect, useState } from 'react';
+import { map } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+
+import { CoreSetup } from 'kibana/public';
+import { RecursivePartial, Theme } from '@elastic/charts';
+import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
+
+export class ThemeService {
+  private _chartsTheme$?: Observable<RecursivePartial<Theme>>;
+
+  /** Returns default charts theme */
+  public readonly chartsDefaultTheme = EUI_CHARTS_THEME_LIGHT.theme;
+
+  /** An observable of the current charts theme */
+  public get chartsTheme$(): Observable<RecursivePartial<Theme>> {
+    if (!this._chartsTheme$) {
+      throw new Error('ThemeService not initialized');
+    }
+
+    return this._chartsTheme$;
+  }
+
+  /** A React hook for consuming the charts theme */
+  public useChartsTheme = () => {
+    const [value, update] = useState(this.chartsDefaultTheme);
+
+    useEffect(() => {
+      const s = this.chartsTheme$.subscribe(update);
+      return () => s.unsubscribe();
+    }, []);
+
+    return value;
+  };
+
+  /** initialize service with uiSettings */
+  public init(uiSettings: CoreSetup['uiSettings']) {
+    this._chartsTheme$ = uiSettings
+      .get$('theme:darkMode')
+      .pipe(
+        map(darkMode => (darkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme))
+      );
+  }
+}
diff --git a/src/legacy/ui/public/color_maps/color_maps.ts b/src/plugins/charts/public/static/color_maps/color_maps.ts
similarity index 99%
rename from src/legacy/ui/public/color_maps/color_maps.ts
rename to src/plugins/charts/public/static/color_maps/color_maps.ts
index fed32c767b2c3..9a84a70b7af2d 100644
--- a/src/legacy/ui/public/color_maps/color_maps.ts
+++ b/src/plugins/charts/public/static/color_maps/color_maps.ts
@@ -33,11 +33,21 @@ export interface ColorSchema {
   text: string;
 }
 
-export const vislibColorMaps = {
+export interface RawColorSchema {
+  id: ColorSchemas;
+  label: string;
+  value: Array<[number, number[]]>;
+}
+
+export interface ColorMap {
+  [key: string]: RawColorSchema;
+}
+
+export const vislibColorMaps: ColorMap = {
   // Sequential
   [ColorSchemas.Blues]: {
     id: ColorSchemas.Blues,
-    label: i18n.translate('common.ui.vislib.colormaps.bluesText', {
+    label: i18n.translate('charts.colormaps.bluesText', {
       defaultMessage: 'Blues',
     }),
     value: [
@@ -557,7 +567,7 @@ export const vislibColorMaps = {
   },
   [ColorSchemas.Greens]: {
     id: ColorSchemas.Greens,
-    label: i18n.translate('common.ui.vislib.colormaps.greensText', {
+    label: i18n.translate('charts.colormaps.greensText', {
       defaultMessage: 'Greens',
     }),
     value: [
@@ -1077,7 +1087,7 @@ export const vislibColorMaps = {
   },
   [ColorSchemas.Greys]: {
     id: ColorSchemas.Greys,
-    label: i18n.translate('common.ui.vislib.colormaps.greysText', {
+    label: i18n.translate('charts.colormaps.greysText', {
       defaultMessage: 'Greys',
     }),
     value: [
@@ -1597,7 +1607,7 @@ export const vislibColorMaps = {
   },
   [ColorSchemas.Reds]: {
     id: ColorSchemas.Reds,
-    label: i18n.translate('common.ui.vislib.colormaps.redsText', {
+    label: i18n.translate('charts.colormaps.redsText', {
       defaultMessage: 'Reds',
     }),
     value: [
@@ -2117,7 +2127,7 @@ export const vislibColorMaps = {
   },
   [ColorSchemas.YellowToRed]: {
     id: ColorSchemas.YellowToRed,
-    label: i18n.translate('common.ui.vislib.colormaps.yellowToRedText', {
+    label: i18n.translate('charts.colormaps.yellowToRedText', {
       defaultMessage: 'Yellow to Red',
     }),
     value: [
@@ -2638,7 +2648,7 @@ export const vislibColorMaps = {
 
   [ColorSchemas.GreenToRed]: {
     id: ColorSchemas.GreenToRed,
-    label: i18n.translate('common.ui.vislib.colormaps.greenToRedText', {
+    label: i18n.translate('charts.colormaps.greenToRedText', {
       defaultMessage: 'Green to Red',
     }),
     value: [
@@ -3158,7 +3168,7 @@ export const vislibColorMaps = {
   },
 };
 
-export const colorSchemas = Object.values(vislibColorMaps).map(({ id, label }) => ({
+export const colorSchemas: ColorSchema[] = Object.values(vislibColorMaps).map(({ id, label }) => ({
   value: id,
   text: label,
 }));
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/vislib/__tests__/components/heatmap_color.js b/src/plugins/charts/public/static/color_maps/heatmap_color.test.ts
similarity index 53%
rename from src/legacy/core_plugins/vis_type_vislib/public/vislib/__tests__/components/heatmap_color.js
rename to src/plugins/charts/public/static/color_maps/heatmap_color.test.ts
index c7ffc843876e3..bceddfc09a560 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/vislib/__tests__/components/heatmap_color.js
+++ b/src/plugins/charts/public/static/color_maps/heatmap_color.test.ts
@@ -17,76 +17,83 @@
  * under the License.
  */
 
-import expect from '@kbn/expect';
+import { getHeatmapColors } from './heatmap_color';
 
-import { getHeatmapColors } from '../../../legacy_imports';
-
-describe('Vislib Heatmap Color Module Test Suite', function() {
+describe('Vislib Heatmap Color Module Test Suite', () => {
   const emptyObject = {};
   const nullValue = null;
-  let notAValue;
 
-  it('should throw an error if schema is invalid', function() {
-    expect(function() {
+  it('should throw an error if schema is invalid', () => {
+    expect(() => {
       getHeatmapColors(4, 'invalid schema');
-    }).to.throwError();
+    }).toThrowError();
   });
 
-  it('should throw an error if input is not a number', function() {
-    expect(function() {
+  it('should throw an error if input is not a number', () => {
+    expect(() => {
       getHeatmapColors([200], 'Greens');
-    }).to.throwError();
+    }).toThrowError();
 
-    expect(function() {
+    expect(() => {
       getHeatmapColors('help', 'Greens');
-    }).to.throwError();
+    }).toThrowError();
 
-    expect(function() {
+    expect(() => {
       getHeatmapColors(true, 'Greens');
-    }).to.throwError();
+    }).toThrowError();
 
-    expect(function() {
-      getHeatmapColors(notAValue, 'Greens');
-    }).to.throwError();
+    expect(() => {
+      getHeatmapColors(undefined, 'Greens');
+    }).toThrowError();
 
-    expect(function() {
+    expect(() => {
       getHeatmapColors(nullValue, 'Greens');
-    }).to.throwError();
+    }).toThrowError();
 
-    expect(function() {
+    expect(() => {
       getHeatmapColors(emptyObject, 'Greens');
-    }).to.throwError();
+    }).toThrowError();
   });
 
-  it('should throw an error if input is less than 0', function() {
-    expect(function() {
+  it('should throw an error if input is less than 0', () => {
+    expect(() => {
       getHeatmapColors(-2, 'Greens');
-    }).to.throwError();
+    }).toThrowError();
   });
 
-  it('should throw an error if input is greater than 1', function() {
-    expect(function() {
+  it('should throw an error if input is greater than 1', () => {
+    expect(() => {
       getHeatmapColors(2, 'Greens');
-    }).to.throwError();
+    }).toThrowError();
   });
 
-  it('should be a function', function() {
-    expect(typeof getHeatmapColors).to.be('function');
+  it('should be a function', () => {
+    expect(typeof getHeatmapColors).toBe('function');
   });
 
-  it('should return a color for 10 numbers from 0 to 1', function() {
+  it('should return a color for 10 numbers from 0 to 1', () => {
     const colorRegex = /^rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)$/;
     const schema = 'Greens';
     for (let i = 0; i < 10; i++) {
-      expect(getHeatmapColors(i / 10, schema)).to.match(colorRegex);
+      expect(getHeatmapColors(i / 10, schema)).toMatch(colorRegex);
     }
   });
 
   describe('drawColormap function', () => {
+    const canvasElement = {
+      getContext: jest.fn(() => ({
+        fillStyle: null,
+        fillRect: jest.fn(),
+      })),
+    };
+    beforeEach(() => {
+      jest.spyOn(document, 'createElement').mockImplementation(() => canvasElement as any);
+    });
+
     it('should return canvas element', () => {
       const response = getHeatmapColors.prototype.drawColormap('Greens');
-      expect(typeof response).to.equal('object');
-      expect(response instanceof window.HTMLElement).to.equal(true);
+      expect(typeof response).toEqual('object');
+      expect(response).toBe(canvasElement);
     });
   });
 });
diff --git a/src/legacy/ui/public/color_maps/heatmap_color.js b/src/plugins/charts/public/static/color_maps/heatmap_color.ts
similarity index 81%
rename from src/legacy/ui/public/color_maps/heatmap_color.js
rename to src/plugins/charts/public/static/color_maps/heatmap_color.ts
index 06d754235f88b..afc649b68826e 100644
--- a/src/legacy/ui/public/color_maps/heatmap_color.js
+++ b/src/plugins/charts/public/static/color_maps/heatmap_color.ts
@@ -18,9 +18,10 @@
  */
 
 import _ from 'lodash';
-import { vislibColorMaps } from './color_maps';
 
-function enforceBounds(x) {
+import { vislibColorMaps, RawColorSchema } from './color_maps';
+
+function enforceBounds(x: number) {
   if (x < 0) {
     return 0;
   } else if (x > 1) {
@@ -30,12 +31,12 @@ function enforceBounds(x) {
   }
 }
 
-function interpolateLinearly(x, values) {
+function interpolateLinearly(x: number, values: RawColorSchema['value']) {
   // Split values into four lists
-  const xValues = [];
-  const rValues = [];
-  const gValues = [];
-  const bValues = [];
+  const xValues: number[] = [];
+  const rValues: number[] = [];
+  const gValues: number[] = [];
+  const bValues: number[] = [];
   values.forEach(value => {
     xValues.push(value[0]);
     rValues.push(value[1][0]);
@@ -54,11 +55,12 @@ function interpolateLinearly(x, values) {
   return [enforceBounds(r), enforceBounds(g), enforceBounds(b)];
 }
 
-export function getHeatmapColors(value, colorSchemaName) {
+export function getHeatmapColors(value: any, colorSchemaName: string) {
   if (!_.isNumber(value) || value < 0 || value > 1) {
     throw new Error('heatmap_color expects a number from 0 to 1 as first parameter');
   }
 
+  // @ts-ignore
   const colorSchema = vislibColorMaps[colorSchemaName].value;
   if (!colorSchema) {
     throw new Error('invalid colorSchemaName provided');
@@ -71,11 +73,16 @@ export function getHeatmapColors(value, colorSchemaName) {
   return `rgb(${r},${g},${b})`;
 }
 
-function drawColormap(colorSchema, width = 100, height = 10) {
+function drawColormap(colorSchema: string, width = 100, height = 10) {
   const canvas = document.createElement('canvas');
   canvas.width = width;
   canvas.height = height;
   const ctx = canvas.getContext('2d');
+
+  if (ctx === null) {
+    throw new Error('no HeatmapColors canvas context found');
+  }
+
   for (let i = 0; i <= width; i++) {
     ctx.fillStyle = getHeatmapColors(i / width, colorSchema);
     ctx.fillRect(i, 0, 1, height);
diff --git a/src/plugins/charts/public/static/color_maps/index.ts b/src/plugins/charts/public/static/color_maps/index.ts
new file mode 100644
index 0000000000000..9a8eea7900115
--- /dev/null
+++ b/src/plugins/charts/public/static/color_maps/index.ts
@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+
+export {
+  ColorSchemas,
+  ColorSchema,
+  RawColorSchema,
+  ColorMap,
+  vislibColorMaps,
+  colorSchemas,
+} from './color_maps';
+export { getHeatmapColors } from './heatmap_color';
+export { truncatedColorMaps, truncatedColorSchemas } from './truncated_color_maps';
diff --git a/src/plugins/charts/public/static/color_maps/mock.ts b/src/plugins/charts/public/static/color_maps/mock.ts
new file mode 100644
index 0000000000000..13c392db05848
--- /dev/null
+++ b/src/plugins/charts/public/static/color_maps/mock.ts
@@ -0,0 +1,31 @@
+/*
+ * 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 { colorSchemas, vislibColorMaps } from './color_maps';
+import { getHeatmapColors } from './heatmap_color';
+import { truncatedColorMaps, truncatedColorSchemas } from './truncated_color_maps';
+
+// Note: Using actual values due to existing test dependencies
+export const colorMapsMock = {
+  getHeatmapColors: jest.fn(getHeatmapColors),
+  vislibColorMaps,
+  colorSchemas,
+  truncatedColorMaps,
+  truncatedColorSchemas,
+} as any;
diff --git a/src/legacy/ui/public/color_maps/truncated_color_maps.js b/src/plugins/charts/public/static/color_maps/truncated_color_maps.ts
similarity index 67%
rename from src/legacy/ui/public/color_maps/truncated_color_maps.js
rename to src/plugins/charts/public/static/color_maps/truncated_color_maps.ts
index cb7772c875e48..8455584184f37 100644
--- a/src/legacy/ui/public/color_maps/truncated_color_maps.js
+++ b/src/plugins/charts/public/static/color_maps/truncated_color_maps.ts
@@ -17,22 +17,26 @@
  * under the License.
  */
 
-import { vislibColorMaps } from './color_maps';
+import { vislibColorMaps, ColorMap, ColorSchema } from './color_maps';
 
-export const truncatedColorMaps = {};
+export const truncatedColorMaps: ColorMap = {};
 
-const colormaps = vislibColorMaps;
+const colormaps: ColorMap = vislibColorMaps;
 for (const key in colormaps) {
   if (colormaps.hasOwnProperty(key)) {
     // slice off lightest colors
+    // @ts-ignore
+    const color = colormaps[key];
     truncatedColorMaps[key] = {
-      ...colormaps[key],
-      value: colormaps[key].value.slice(Math.floor(colormaps[key].value.length / 4)),
+      ...color,
+      value: color.value.slice(Math.floor(color.value.length / 4)),
     };
   }
 }
 
-export const truncatedColorSchemas = Object.values(truncatedColorMaps).map(({ id, label }) => ({
-  value: id,
-  text: label,
-}));
+export const truncatedColorSchemas: ColorSchema[] = Object.values(truncatedColorMaps).map(
+  ({ id, label }) => ({
+    value: id,
+    text: label,
+  })
+);
diff --git a/src/legacy/ui/public/vis/components/color/index.js b/src/plugins/charts/public/static/index.ts
similarity index 95%
rename from src/legacy/ui/public/vis/components/color/index.js
rename to src/plugins/charts/public/static/index.ts
index 4872606fdfc78..bee58e4f1e3e1 100644
--- a/src/legacy/ui/public/vis/components/color/index.js
+++ b/src/plugins/charts/public/static/index.ts
@@ -17,4 +17,4 @@
  * under the License.
  */
 
-export { vislibColor } from './color';
+export * from './color_maps';
diff --git a/src/plugins/eui_utils/README.md b/src/plugins/eui_utils/README.md
deleted file mode 100644
index 019cca9c04515..0000000000000
--- a/src/plugins/eui_utils/README.md
+++ /dev/null
@@ -1,67 +0,0 @@
-# EuiUtils
-
-The EuiUtils plugin is a way to create easier integration of EUI colors, themes, and other utilities with Kibana. They usually take into account the current theme (light or dark) of Kibana and return the correct object that was asked for.
-
-## EUI plus Elastic-Charts
-
-EUI provides a light and dark theme object to work with Elastic-Charts. However, every instance of a Chart would need to pass down this the correctly EUI theme depending on Kibana's light or dark mode. There are several ways you can use EuiUtils to grab the correct theme.
-
-### `useChartsTheme`
-
-The simple fetching of the correct EUI theme; a **React hook**.
-
-```js
-import { npStart } from 'ui/new_platform';
-import { Chart, Settings } from '@elastic/charts';
-
-export const YourComponent = () => (
-  <Chart>
-    <Settings theme={npStart.plugins.eui_utils.useChartsTheme()} />
-  </Chart>
-);
-```
-
-### `getChartsTheme$`
-
-An **observable** of the current charts theme. Use this implementation for more flexible updates to the chart theme without full page refreshes.
-
-```ts
-import { npStart } from 'ui/new_platform';
-import { EuiChartThemeType } from '@elastic/eui/src/themes/charts/themes';
-import { Subscription } from 'rxjs';
-import { Chart, Settings } from '@elastic/charts';
-
-interface YourComponentState {
-  chartsTheme: EuiChartThemeType['theme'];
-}
-
-export class YourComponent extends Component<YourComponentProps, YourComponentState> {
-  private subscription?: Subscription;
-  public state = {
-    chartsTheme: npStart.plugins.eui_utils.getChartsThemeDefault(),
-  };
-
-  componentDidMount() {
-    this.subscription = npStart.plugins.eui_utils
-      .getChartsTheme$()
-      .subscribe(chartsTheme => this.setState({ chartsTheme }));
-  }
-
-  componentWillUnmount() {
-    if (this.subscription) {
-      this.subscription.unsubscribe();
-      this.subscription = undefined;
-    }
-  }
-
-  public render() {
-    const { chartsTheme } = this.state;
-
-    return (
-      <Chart>
-        <Settings theme={chartsTheme} />
-      </Chart>
-    );
-  }
-}
-```
diff --git a/src/plugins/eui_utils/public/eui_utils.ts b/src/plugins/eui_utils/public/eui_utils.ts
deleted file mode 100644
index d9c10c34dd4a8..0000000000000
--- a/src/plugins/eui_utils/public/eui_utils.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * 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 { useEffect, useState } from 'react';
-
-import { CoreStart, CoreSetup } from 'src/core/public';
-import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
-import { map } from 'rxjs/operators';
-
-export class EuiUtils {
-  public setup(core: CoreSetup) {}
-  public start(core: CoreStart) {
-    const getChartsThemeDefault = () => EUI_CHARTS_THEME_LIGHT.theme;
-
-    const getChartsTheme$ = () => {
-      return core.uiSettings
-        .get$('theme:darkMode')
-        .pipe(
-          map(darkMode => (darkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme))
-        );
-    };
-
-    const useChartsTheme = () => {
-      const [value, update] = useState(getChartsThemeDefault());
-
-      useEffect(() => {
-        const s = getChartsTheme$().subscribe(update);
-        return () => s.unsubscribe();
-      }, []);
-
-      return value;
-    };
-
-    return {
-      /** The default charts theme */
-      getChartsThemeDefault,
-
-      /** An observable of the current charts theme */
-      getChartsTheme$,
-
-      /** A React hook for consuming the charts theme */
-      useChartsTheme,
-    };
-  }
-}
diff --git a/x-pack/legacy/plugins/dashboard_mode/public/dashboard_viewer.js b/x-pack/legacy/plugins/dashboard_mode/public/dashboard_viewer.js
index fbf917054edbf..ebae49f994723 100644
--- a/x-pack/legacy/plugins/dashboard_mode/public/dashboard_viewer.js
+++ b/x-pack/legacy/plugins/dashboard_mode/public/dashboard_viewer.js
@@ -30,7 +30,6 @@ import 'uiExports/shareContextMenuExtensions';
 import _ from 'lodash';
 import 'ui/autoload/all';
 import 'ui/kbn_top_nav';
-import 'ui/color_maps';
 import 'ui/agg_response';
 import 'ui/agg_types';
 import 'leaflet';
diff --git a/x-pack/legacy/plugins/index_management/public/app/sections/home/index_list/detail_panel/edit_settings_json/edit_settings_json.js b/x-pack/legacy/plugins/index_management/public/app/sections/home/index_list/detail_panel/edit_settings_json/edit_settings_json.js
index f9e398e384a83..4f2d0b3de96b7 100644
--- a/x-pack/legacy/plugins/index_management/public/app/sections/home/index_list/detail_panel/edit_settings_json/edit_settings_json.js
+++ b/x-pack/legacy/plugins/index_management/public/app/sections/home/index_list/detail_panel/edit_settings_json/edit_settings_json.js
@@ -67,7 +67,8 @@ export class EditSettingsJson extends React.PureComponent {
       const editor = (this.editor = createAceEditor(this.aceDiv, prettyJson, false, settingsKeys));
       const session = editor.getSession();
       session.on('changeAnnotation', () => {
-        this.setState({ valid: session.getAnnotations().length === 0 });
+        const isEmptyString = session.getValue() === '';
+        this.setState({ valid: !isEmptyString && session.getAnnotations().length === 0 });
       });
     }
   }
diff --git a/x-pack/legacy/plugins/index_management/public/app/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.js b/x-pack/legacy/plugins/index_management/public/app/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.js
index 938e5961a8db4..ea1fcdc51fc4d 100644
--- a/x-pack/legacy/plugins/index_management/public/app/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.js
+++ b/x-pack/legacy/plugins/index_management/public/app/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.js
@@ -13,7 +13,7 @@ import {
   EuiButton,
   EuiCallOut,
   EuiContextMenu,
-  EuiFieldText,
+  EuiFieldNumber,
   EuiForm,
   EuiFormRow,
   EuiPopover,
@@ -368,7 +368,7 @@ export class IndexActionsContextMenu extends Component {
           <EuiSpacer size="m" />
 
           <EuiForm
-            isInvalid={this.forcemergeSegmentsError()}
+            isInvalid={!!this.forcemergeSegmentsError()}
             error={this.forcemergeSegmentsError()}
           >
             <EuiFormRow
@@ -380,10 +380,11 @@ export class IndexActionsContextMenu extends Component {
               )}
               helpText={helpText}
             >
-              <EuiFieldText
+              <EuiFieldNumber
                 onChange={event => {
                   this.setState({ forcemergeSegments: event.target.value });
                 }}
+                min={1}
                 name="maxNumberSegments"
               />
             </EuiFormRow>
diff --git a/x-pack/legacy/plugins/index_management/public/app/sections/home/index_list/index_table/index_table.js b/x-pack/legacy/plugins/index_management/public/app/sections/home/index_list/index_table/index_table.js
index 9441207a0da20..e043323c5b290 100644
--- a/x-pack/legacy/plugins/index_management/public/app/sections/home/index_list/index_table/index_table.js
+++ b/x-pack/legacy/plugins/index_management/public/app/sections/home/index_list/index_table/index_table.js
@@ -104,7 +104,13 @@ export class IndexTable extends Component {
     const { filterChanged, filterFromURI } = this.props;
     if (filterFromURI) {
       const decodedFilter = decodeURIComponent(filterFromURI);
-      filterChanged(EuiSearchBar.Query.parse(decodedFilter));
+
+      try {
+        const filter = EuiSearchBar.Query.parse(decodedFilter);
+        filterChanged(filter);
+      } catch (e) {
+        this.setState({ filterError: e });
+      }
     }
   }
   componentWillUnmount() {
@@ -122,7 +128,8 @@ export class IndexTable extends Component {
       return;
     }
     return (
-      <Fragment>
+      <>
+        <EuiSpacer />
         <EuiCallOut
           iconType="faceSad"
           color="danger"
@@ -134,8 +141,8 @@ export class IndexTable extends Component {
             },
           })}
         />
-        <EuiSpacer size="l" />
-      </Fragment>
+        <EuiSpacer />
+      </>
     );
   }
   onFilterChanged = ({ query, error }) => {
diff --git a/x-pack/legacy/plugins/maps/public/layers/joins/inner_join.test.js b/x-pack/legacy/plugins/maps/public/layers/joins/inner_join.test.js
index 543d00438d2ff..452f669a113cd 100644
--- a/x-pack/legacy/plugins/maps/public/layers/joins/inner_join.test.js
+++ b/x-pack/legacy/plugins/maps/public/layers/joins/inner_join.test.js
@@ -6,13 +6,13 @@
 
 import { InnerJoin } from './inner_join';
 
+jest.mock('ui/new_platform');
 jest.mock('ui/vis/editors/default/schemas', () => {
   class MockSchemas {}
   return {
     Schemas: MockSchemas,
   };
 });
-jest.mock('../../kibana_services', () => {});
 jest.mock('ui/agg_types', () => {});
 jest.mock('ui/timefilter', () => {});
 jest.mock('../vector_layer', () => {});
diff --git a/x-pack/legacy/plugins/maps/public/layers/sources/ems_file_source/ems_file_source.test.js b/x-pack/legacy/plugins/maps/public/layers/sources/ems_file_source/ems_file_source.test.js
index acb803b44affb..93c9af98eb17f 100644
--- a/x-pack/legacy/plugins/maps/public/layers/sources/ems_file_source/ems_file_source.test.js
+++ b/x-pack/legacy/plugins/maps/public/layers/sources/ems_file_source/ems_file_source.test.js
@@ -6,7 +6,7 @@
 
 import { EMSFileSource } from './ems_file_source';
 
-jest.mock('../../../kibana_services', () => {});
+jest.mock('ui/new_platform');
 jest.mock('../../vector_layer', () => {});
 
 function makeEMSFileSource(tooltipProperties) {
diff --git a/x-pack/legacy/plugins/maps/public/layers/sources/es_term_source.test.js b/x-pack/legacy/plugins/maps/public/layers/sources/es_term_source.test.js
index a525705d63d5a..e63a322eafe01 100644
--- a/x-pack/legacy/plugins/maps/public/layers/sources/es_term_source.test.js
+++ b/x-pack/legacy/plugins/maps/public/layers/sources/es_term_source.test.js
@@ -6,11 +6,11 @@
 
 import { ESTermSource, extractPropertiesMap } from './es_term_source';
 
+jest.mock('ui/new_platform');
 jest.mock('../vector_layer', () => {});
 jest.mock('ui/vis/editors/default/schemas', () => ({
   Schemas: function() {},
 }));
-jest.mock('../../kibana_services', () => {});
 jest.mock('ui/agg_types', () => {});
 jest.mock('ui/timefilter', () => {});
 
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/color_utils.js b/x-pack/legacy/plugins/maps/public/layers/styles/color_utils.js
index b04f8ff56e5ee..fc305f8daed59 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/color_utils.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/color_utils.js
@@ -5,14 +5,16 @@
  */
 
 import React from 'react';
+import tinycolor from 'tinycolor2';
+import chroma from 'chroma-js';
+
+import { euiPaletteColorBlind } from '@elastic/eui/lib/services';
 
-import { vislibColorMaps } from 'ui/color_maps';
 import { getLegendColors, getColor } from 'ui/vis/map/color_util';
+
 import { ColorGradient } from './components/color_gradient';
-import { euiPaletteColorBlind } from '@elastic/eui/lib/services';
-import tinycolor from 'tinycolor2';
-import chroma from 'chroma-js';
 import { COLOR_PALETTE_MAX_SIZE } from '../../../common/constants';
+import { vislibColorMaps } from '../../../../../../../src/plugins/charts/public';
 
 const GRADIENT_INTERVALS = 8;
 
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/color_utils.test.js b/x-pack/legacy/plugins/maps/public/layers/styles/color_utils.test.js
index 1d7fbeb996915..5a8289ba903f3 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/color_utils.test.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/color_utils.test.js
@@ -13,6 +13,8 @@ import {
   getRGBColorRangeStrings,
 } from './color_utils';
 
+jest.mock('ui/new_platform');
+
 describe('COLOR_GRADIENTS', () => {
   it('Should contain EuiSuperSelect options list of color ramps', () => {
     expect(COLOR_GRADIENTS.length).toBe(6);
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/heatmap_style_editor.test.js b/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/heatmap_style_editor.test.js
index f082e67512099..aa4dbc67e8e4d 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/heatmap_style_editor.test.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/heatmap_style_editor.test.js
@@ -9,6 +9,8 @@ import { shallow } from 'enzyme';
 
 import { HeatmapStyleEditor } from './heatmap_style_editor';
 
+jest.mock('ui/new_platform');
+
 describe('HeatmapStyleEditor', () => {
   test('is rendered', () => {
     const component = shallow(
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js
index 83cd101d30212..6b08fc2a105c3 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+jest.mock('ui/new_platform');
 jest.mock('../components/vector_style_editor', () => ({
   VectorStyleEditor: () => {
     return <div>mockVectorStyleEditor</div>;
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.test.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.test.js
index 7c35bbeba018b..84e539794b150 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.test.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.test.js
@@ -9,6 +9,8 @@ import { DataRequest } from '../../util/data_request';
 import { VECTOR_SHAPE_TYPES } from '../../sources/vector_feature_types';
 import { FIELD_ORIGIN } from '../../../../common/constants';
 
+jest.mock('ui/new_platform');
+
 class MockField {
   constructor({ fieldName }) {
     this._fieldName = fieldName;
diff --git a/x-pack/legacy/plugins/ml/public/application/components/navigation_menu/top_nav/__snapshots__/top_nav.test.tsx.snap b/x-pack/legacy/plugins/ml/public/application/components/navigation_menu/top_nav/__snapshots__/top_nav.test.tsx.snap
deleted file mode 100644
index f9df085d2cbe7..0000000000000
--- a/x-pack/legacy/plugins/ml/public/application/components/navigation_menu/top_nav/__snapshots__/top_nav.test.tsx.snap
+++ /dev/null
@@ -1,76 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Navigation Menu: <TopNav /> Minimal initialization. 1`] = `
-<Fragment>
-  <div
-    className="mlNavigationMenu__topNav"
-  >
-    <EuiSuperDatePicker
-      commonlyUsedRanges={
-        Array [
-          Object {
-            "end": "now/d",
-            "label": "Today",
-            "start": "now/d",
-          },
-          Object {
-            "end": "now/w",
-            "label": "This week",
-            "start": "now/w",
-          },
-          Object {
-            "end": "now/M",
-            "label": "This month",
-            "start": "now/M",
-          },
-          Object {
-            "end": "now/y",
-            "label": "This year",
-            "start": "now/y",
-          },
-          Object {
-            "end": "now-1d/d",
-            "label": "Yesterday",
-            "start": "now-1d/d",
-          },
-          Object {
-            "end": "now",
-            "label": "Week to date",
-            "start": "now/w",
-          },
-          Object {
-            "end": "now",
-            "label": "Month to date",
-            "start": "now/M",
-          },
-          Object {
-            "end": "now",
-            "label": "Year to date",
-            "start": "now/y",
-          },
-        ]
-      }
-      dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
-      end="Sun Sep 29 2019 01:45:36 GMT+0200"
-      isAutoRefreshOnly={false}
-      isDisabled={false}
-      isPaused={true}
-      onRefresh={[Function]}
-      onRefreshChange={[Function]}
-      onTimeChange={[Function]}
-      recentlyUsedRanges={
-        Array [
-          Object {
-            "end": "Sun Sep 29 2019 01:45:36 GMT+0200",
-            "start": "Thu Aug 29 2019 02:04:19 GMT+0200",
-          },
-        ]
-      }
-      refreshInterval={0}
-      showUpdateButton={true}
-      start="Thu Aug 29 2019 02:04:19 GMT+0200"
-      timeFormat="HH:mm"
-    />
-  </div>
-</Fragment>
-`;
diff --git a/x-pack/legacy/plugins/ml/public/application/components/navigation_menu/top_nav/top_nav.test.tsx b/x-pack/legacy/plugins/ml/public/application/components/navigation_menu/top_nav/top_nav.test.tsx
index b64cccc9eb9b9..e9bec02868b71 100644
--- a/x-pack/legacy/plugins/ml/public/application/components/navigation_menu/top_nav/top_nav.test.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/components/navigation_menu/top_nav/top_nav.test.tsx
@@ -4,8 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount, shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
 
 import { EuiSuperDatePicker } from '@elastic/eui';
 
@@ -34,8 +35,13 @@ describe('Navigation Menu: <TopNav />', () => {
     const refreshListener = jest.fn();
     const refreshSubscription = mlTimefilterRefresh$.subscribe(refreshListener);
 
-    const wrapper = shallow(<TopNav />);
-    expect(wrapper).toMatchSnapshot();
+    const wrapper = mount(
+      <MemoryRouter>
+        <TopNav />
+      </MemoryRouter>
+    );
+    expect(wrapper.find(TopNav)).toHaveLength(1);
+    expect(wrapper.find('EuiSuperDatePicker')).toHaveLength(1);
     expect(refreshListener).toBeCalledTimes(0);
 
     refreshSubscription.unsubscribe();
diff --git a/x-pack/legacy/plugins/ml/public/application/components/navigation_menu/top_nav/top_nav.tsx b/x-pack/legacy/plugins/ml/public/application/components/navigation_menu/top_nav/top_nav.tsx
index eb068f40716bc..c76967455fa42 100644
--- a/x-pack/legacy/plugins/ml/public/application/components/navigation_menu/top_nav/top_nav.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/components/navigation_menu/top_nav/top_nav.tsx
@@ -15,6 +15,7 @@ import {
   mlTimefilterTimeChange$,
 } from '../../../services/timefilter_refresh_service';
 import { useUiContext } from '../../../contexts/ui/use_ui_context';
+import { useUrlState } from '../../../util/url_state';
 
 interface Duration {
   start: string;
@@ -40,9 +41,17 @@ function updateLastRefresh(timeRange: OnRefreshProps) {
 
 export const TopNav: FC = () => {
   const { chrome, timefilter, timeHistory } = useUiContext();
+  const [globalState, setGlobalState] = useUrlState('_g');
   const getRecentlyUsedRanges = getRecentlyUsedRangesFactory(timeHistory);
 
-  const [refreshInterval, setRefreshInterval] = useState(timefilter.getRefreshInterval());
+  const [refreshInterval, setRefreshInterval] = useState(
+    globalState?.refreshInterval ?? timefilter.getRefreshInterval()
+  );
+  useEffect(() => {
+    setGlobalState({ refreshInterval });
+    timefilter.setRefreshInterval(refreshInterval);
+  }, [refreshInterval?.pause, refreshInterval?.value]);
+
   const [time, setTime] = useState(timefilter.getTime());
   const [recentlyUsedRanges, setRecentlyUsedRanges] = useState(getRecentlyUsedRanges());
   const [isAutoRefreshSelectorEnabled, setIsAutoRefreshSelectorEnabled] = useState(
@@ -96,20 +105,13 @@ export const TopNav: FC = () => {
   }
 
   function updateInterval({
-    isPaused,
-    refreshInterval: interval,
+    isPaused: pause,
+    refreshInterval: value,
   }: {
     isPaused: boolean;
     refreshInterval: number;
   }) {
-    const newInterval = {
-      pause: isPaused,
-      value: interval,
-    };
-    // Update timefilter for controllers listening for changes
-    timefilter.setRefreshInterval(newInterval);
-    // Update state
-    setRefreshInterval(newInterval);
+    setRefreshInterval({ pause, value });
   }
 
   return (
diff --git a/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/import_view/import_view.js b/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/import_view/import_view.js
index 9e82f5e9f0e8d..7031308b337b4 100644
--- a/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/import_view/import_view.js
+++ b/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/import_view/import_view.js
@@ -207,7 +207,7 @@ export class ImportView extends Component {
                 if (success) {
                   const importer = importerFactory(format, results, indexCreationSettings);
                   if (importer !== undefined) {
-                    const readResp = await importer.read(fileContents, this.setReadProgress);
+                    const readResp = importer.read(fileContents, this.setReadProgress);
                     success = readResp.success;
                     this.setState({
                       readStatus: success ? IMPORT_STATUS.COMPLETE : IMPORT_STATUS.FAILED,
diff --git a/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/import_view/importer/csv_importer.js b/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/import_view/importer/csv_importer.js
deleted file mode 100644
index 78873294fccce..0000000000000
--- a/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/import_view/importer/csv_importer.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { ES_FIELD_TYPES } from '../../../../../../../../../../../src/plugins/data/public';
-
-import { Importer } from './importer';
-import Papa from 'papaparse';
-
-export class CsvImporter extends Importer {
-  constructor(results, settings) {
-    super(settings);
-
-    this.format = results.format;
-    this.delimiter = results.delimiter;
-    this.quote = results.quote;
-    this.hasHeaderRow = results.has_header_row;
-    this.columnNames = results.column_names;
-    this.shouldTrimFields = results.should_trim_fields || false;
-  }
-
-  async read(csv) {
-    try {
-      const transform = this.shouldTrimFields ? f => f.trim() : f => f;
-      const dynamicTyping = c => shouldUseDynamicType(this.columnNames, this.mappings, c);
-      const config = {
-        header: false,
-        skipEmptyLines: 'greedy',
-        delimiter: this.delimiter,
-        quoteChar: this.quote,
-        transform,
-        dynamicTyping,
-      };
-
-      const parserOutput = Papa.parse(csv, config);
-
-      if (parserOutput.errors.length) {
-        // throw an error with the message of the first error encountered
-        throw parserOutput.errors[0].message;
-      }
-
-      this.data = parserOutput.data;
-
-      if (this.hasHeaderRow) {
-        this.data.shift();
-      }
-
-      this.docArray = formatToJson(this.data, this.columnNames);
-
-      return {
-        success: true,
-      };
-    } catch (error) {
-      return {
-        success: false,
-        error,
-      };
-    }
-  }
-}
-
-// parse numeric and boolean fields - treat everything else as a string
-function shouldUseDynamicType(columnNames, mappings, columnNumber) {
-  if (columnNumber >= columnNames.length) {
-    return false;
-  }
-  const columnMapping = mappings[columnNames[columnNumber]];
-  if (columnMapping === undefined || columnMapping.type === undefined) {
-    return false;
-  }
-  switch (columnMapping.type) {
-    case ES_FIELD_TYPES.BOOLEAN:
-    case ES_FIELD_TYPES.LONG:
-    case ES_FIELD_TYPES.INTEGER:
-    case ES_FIELD_TYPES.SHORT:
-    case ES_FIELD_TYPES.BYTE:
-    case ES_FIELD_TYPES.DOUBLE:
-    case ES_FIELD_TYPES.FLOAT:
-    case ES_FIELD_TYPES.HALF_FLOAT:
-    case ES_FIELD_TYPES.SCALED_FLOAT:
-      return true;
-    default:
-      return false;
-  }
-}
-
-function formatToJson(data, columnNames) {
-  const docArray = [];
-  for (let i = 0; i < data.length; i++) {
-    const line = {};
-    for (let c = 0; c < columnNames.length; c++) {
-      const col = columnNames[c];
-      if (data[i][c] !== null && data[i][c] !== '') {
-        line[col] = data[i][c];
-      }
-    }
-    docArray.push(line);
-  }
-  return docArray;
-}
diff --git a/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/import_view/importer/importer_factory.js b/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/import_view/importer/importer_factory.js
index 56c2f8d24d771..381e8ef604452 100644
--- a/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/import_view/importer/importer_factory.js
+++ b/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/import_view/importer/importer_factory.js
@@ -4,16 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { CsvImporter } from './csv_importer';
-import { SstImporter } from './sst_importer';
+import { MessageImporter } from './message_importer';
 import { NdjsonImporter } from './ndjson_importer';
 
 export function importerFactory(format, results, settings) {
   switch (format) {
+    // delimited and semi-structured text are both handled by splitting the
+    // file into messages, then sending these to ES for further processing
+    // in an ingest pipeline in documents containing a single "message"
+    // field (like Filebeat does)
     case 'delimited':
-      return new CsvImporter(results, settings);
     case 'semi_structured_text':
-      return new SstImporter(results, settings);
+      return new MessageImporter(results, settings);
     case 'ndjson':
       return new NdjsonImporter(results, settings);
     default:
diff --git a/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/import_view/importer/message_importer.js b/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/import_view/importer/message_importer.js
new file mode 100644
index 0000000000000..840248817945a
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/import_view/importer/message_importer.js
@@ -0,0 +1,94 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Importer } from './importer';
+
+export class MessageImporter extends Importer {
+  constructor(results, settings) {
+    super(settings);
+
+    this.excludeLinesRegex =
+      results.exclude_lines_pattern === undefined
+        ? null
+        : new RegExp(results.exclude_lines_pattern);
+    this.multilineStartRegex =
+      results.multiline_start_pattern === undefined
+        ? null
+        : new RegExp(results.multiline_start_pattern);
+  }
+
+  // split the text into an array of lines by looking for newlines.
+  // any lines that match the exclude_lines_pattern regex are ignored.
+  // if a newline is found, check the next line to see if it starts with the
+  // multiline_start_pattern regex
+  // if it does, it is a legitimate end of line and can be pushed into the list,
+  // if not, it must be a newline char inside a field value, so keep looking.
+  read(text) {
+    try {
+      const data = [];
+
+      let message = '';
+      let line = '';
+      for (let i = 0; i < text.length; i++) {
+        const char = text[i];
+        if (char === '\n') {
+          message = this.processLine(data, message, line);
+          line = '';
+        } else {
+          line += char;
+        }
+      }
+
+      // the last line may have been missing a newline ending
+      if (line !== '') {
+        message = this.processLine(data, message, line);
+      }
+
+      // add the last message to the list if not already done
+      if (message !== '') {
+        this.addMessage(data, message);
+      }
+
+      // remove first line if it is blank
+      if (data[0] && data[0].message === '') {
+        data.shift();
+      }
+
+      this.data = data;
+      this.docArray = this.data;
+
+      return {
+        success: true,
+      };
+    } catch (error) {
+      console.error(error);
+      return {
+        success: false,
+        error,
+      };
+    }
+  }
+
+  processLine(data, message, line) {
+    if (this.excludeLinesRegex === null || line.match(this.excludeLinesRegex) === null) {
+      if (this.multilineStartRegex === null || line.match(this.multilineStartRegex) !== null) {
+        this.addMessage(data, message);
+        message = '';
+      } else {
+        message += '\n';
+      }
+      message += line;
+    }
+    return message;
+  }
+
+  addMessage(data, message) {
+    // if the message ended \r\n (Windows line endings)
+    // then omit the \r as well as the \n for consistency
+    message = message.replace(/\r$/, '');
+    data.push({ message });
+  }
+}
diff --git a/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/import_view/importer/ndjson_importer.js b/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/import_view/importer/ndjson_importer.js
index e92297dc0f01c..887bf1a41200a 100644
--- a/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/import_view/importer/ndjson_importer.js
+++ b/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/import_view/importer/ndjson_importer.js
@@ -11,7 +11,7 @@ export class NdjsonImporter extends Importer {
     super(settings);
   }
 
-  async read(json) {
+  read(json) {
     try {
       const splitJson = json.split(/}\s*\n/);
 
diff --git a/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/import_view/importer/sst_importer.js b/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/import_view/importer/sst_importer.js
deleted file mode 100644
index 8060b046d2840..0000000000000
--- a/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/import_view/importer/sst_importer.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { Importer } from './importer';
-
-export class SstImporter extends Importer {
-  constructor(results, settings) {
-    super(settings);
-
-    this.format = results.format;
-    this.multilineStartPattern = results.multiline_start_pattern;
-    this.grokPattern = results.grok_pattern;
-  }
-
-  // convert the semi structured text string into an array of lines
-  // by looking over each char, looking for newlines.
-  // if one is found, check the next line to see if it starts with the
-  // multiline_start_pattern regex
-  // if it does, it is a legitimate end of line and can be pushed into the list,
-  // if not, it must be a new line char inside a field value, so keep looking.
-  async read(text) {
-    try {
-      const data = [];
-
-      let message = '';
-      let line = '';
-      for (let i = 0; i < text.length; i++) {
-        const char = text[i];
-        if (char === '\n') {
-          if (line.match(this.multilineStartPattern) !== null) {
-            data.push({ message });
-            message = '';
-          } else {
-            message += char;
-          }
-          message += line;
-          line = '';
-        } else {
-          line += char;
-        }
-      }
-
-      // add the last line of the file to the list
-      if (message !== '') {
-        data.push({ message });
-      }
-
-      // remove first line if it is blank
-      if (data[0] && data[0].message === '') {
-        data.shift();
-      }
-
-      this.data = data;
-      this.docArray = this.data;
-
-      return {
-        success: true,
-      };
-    } catch (error) {
-      console.error(error);
-      return {
-        success: false,
-        error,
-      };
-    }
-  }
-}
diff --git a/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/page.tsx b/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/page.tsx
index 721b8a458efc1..268cd86da74fd 100644
--- a/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/page.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/page.tsx
@@ -41,6 +41,7 @@ import { useKibanaContext, SavedSearchQuery } from '../../contexts/kibana';
 import { kbnTypeToMLJobType } from '../../util/field_types_utils';
 import { timeBasedIndexCheck, getQueryFromSavedSearch } from '../../util/index_utils';
 import { TimeBuckets } from '../../util/time_buckets';
+import { useUrlState } from '../../util/url_state';
 import { FieldRequestConfig, FieldVisConfig } from './common';
 import { ActionsPanel } from './components/actions_panel';
 import { FieldsPanel } from './components/fields_panel';
@@ -102,6 +103,26 @@ export const Page: FC = () => {
 
   const dataLoader = new DataLoader(currentIndexPattern, kibanaConfig);
 
+  const [globalState, setGlobalState] = useUrlState('_g');
+  useEffect(() => {
+    if (globalState?.time !== undefined) {
+      timefilter.setTime({
+        from: globalState.time.from,
+        to: globalState.time.to,
+      });
+    }
+  }, [globalState?.time?.from, globalState?.time?.to]);
+  useEffect(() => {
+    if (globalState?.refreshInterval !== undefined) {
+      timefilter.setRefreshInterval(globalState.refreshInterval);
+    }
+  }, [globalState?.refreshInterval?.pause, globalState?.refreshInterval?.value]);
+
+  const [lastRefresh, setLastRefresh] = useState(0);
+  useEffect(() => {
+    loadOverallStats();
+  }, [lastRefresh]);
+
   useEffect(() => {
     if (currentIndexPattern.timeFieldName !== undefined) {
       timefilter.enableTimeRangeSelector();
@@ -175,7 +196,13 @@ export const Page: FC = () => {
     const timeUpdateSubscription = merge(
       timefilter.getTimeUpdate$(),
       mlTimefilterRefresh$
-    ).subscribe(loadOverallStats);
+    ).subscribe(() => {
+      setGlobalState({
+        time: timefilter.getTime(),
+        refreshInterval: timefilter.getRefreshInterval(),
+      });
+      setLastRefresh(Date.now());
+    });
     return () => {
       timeUpdateSubscription.unsubscribe();
     };
@@ -231,9 +258,16 @@ export const Page: FC = () => {
     const tf = timefilter as any;
     let earliest;
     let latest;
+
+    const activeBounds = tf.getActiveBounds();
+
+    if (currentIndexPattern.timeFieldName !== undefined && activeBounds === undefined) {
+      return;
+    }
+
     if (currentIndexPattern.timeFieldName !== undefined) {
-      earliest = tf.getActiveBounds().min.valueOf();
-      latest = tf.getActiveBounds().max.valueOf();
+      earliest = activeBounds.min.valueOf();
+      latest = activeBounds.max.valueOf();
     }
 
     try {
diff --git a/x-pack/legacy/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx b/x-pack/legacy/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx
index bc457f1a3fe89..4455e6e99ada7 100644
--- a/x-pack/legacy/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx
@@ -89,6 +89,7 @@ export const TimeSeriesExplorerUrlStateManager: FC<TimeSeriesExplorerUrlStateMan
   const [appState, setAppState] = useUrlState('_a');
   const [globalState, setGlobalState] = useUrlState('_g');
   const [lastRefresh, setLastRefresh] = useState(0);
+  const previousRefresh = usePrevious(lastRefresh);
   const [selectedJobId, setSelectedJobId] = useState<string>();
 
   const refresh = useRefresh();
@@ -295,6 +296,7 @@ export const TimeSeriesExplorerUrlStateManager: FC<TimeSeriesExplorerUrlStateMan
         bounds,
         dateFormatTz,
         lastRefresh,
+        previousRefresh,
         selectedJobId,
         selectedDetectorIndex,
         selectedEntities,
diff --git a/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js b/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
index 7ee1c64e189a7..474b4f2470bde 100644
--- a/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
+++ b/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
@@ -432,6 +432,9 @@ const TimeseriesChartIntl = injectI18n(
       }
       focusLoadTo = Math.min(focusLoadTo, contextXMax);
 
+      const brushVisibility = focusLoadFrom !== contextXMin || focusLoadTo !== contextXMax;
+      this.setBrushVisibility(brushVisibility);
+
       if (focusLoadFrom !== contextXMin || focusLoadTo !== contextXMax) {
         this.setContextBrushExtent(new Date(focusLoadFrom), new Date(focusLoadTo), true);
         const newSelectedBounds = {
diff --git a/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js b/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
index 75815f8bc48a7..a864808276166 100644
--- a/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
+++ b/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
@@ -161,6 +161,7 @@ export class TimeSeriesExplorer extends React.Component {
     bounds: PropTypes.object.isRequired,
     dateFormatTz: PropTypes.string.isRequired,
     lastRefresh: PropTypes.number.isRequired,
+    previousRefresh: PropTypes.number.isRequired,
     selectedJobId: PropTypes.string.isRequired,
     selectedDetectorIndex: PropTypes.number,
     selectedEntities: PropTypes.object,
@@ -319,7 +320,11 @@ export class TimeSeriesExplorer extends React.Component {
       to: selection.to.toISOString(),
     };
 
-    if (isEqual(this.props.zoom, zoomState) && this.state.focusChartData !== undefined) {
+    if (
+      isEqual(this.props.zoom, zoomState) &&
+      this.state.focusChartData !== undefined &&
+      this.props.previousRefresh === this.props.lastRefresh
+    ) {
       return;
     }
 
@@ -1089,13 +1094,12 @@ export class TimeSeriesExplorer extends React.Component {
       this.previousShowAnnotations === showAnnotations &&
       this.previousShowForecast === showForecast &&
       this.previousShowModelBounds === showModelBounds &&
-      this.previousLastRefresh === lastRefresh
+      this.props.previousRefresh === lastRefresh
     ) {
       renderFocusChartOnly = false;
     }
 
     this.previousChartProps = chartProps;
-    this.previousLastRefresh = lastRefresh;
     this.previousShowAnnotations = showAnnotations;
     this.previousShowForecast = showForecast;
     this.previousShowModelBounds = showModelBounds;
diff --git a/x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/inspect/inspect.spec.ts b/x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/inspect/inspect.spec.ts
index 7b0b10831c4a0..e7411aba11af5 100644
--- a/x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/inspect/inspect.spec.ts
+++ b/x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/inspect/inspect.spec.ts
@@ -9,12 +9,15 @@ import {
   INSPECT_MODAL,
   INSPECT_NETWORK_BUTTONS_IN_SIEM,
   INSPECT_HOSTS_BUTTONS_IN_SIEM,
-  TIMELINE_SETTINGS_ICON,
-  TIMELINE_INSPECT_BUTTON,
-} from '../../lib/inspect/selectors';
-import { DEFAULT_TIMEOUT, loginAndWaitForPage } from '../../lib/util/helpers';
-import { executeKQL, hostExistsQuery, toggleTimelineVisibility } from '../../lib/timeline/helpers';
-import { closesModal, openStatsAndTables } from '../../lib/inspect/helpers';
+} from '../../../screens/inspect';
+import {
+  executeTimelineKQL,
+  openTimeline,
+  openTimelineSettings,
+  openTimelineInspectButton,
+} from '../../../tasks/timeline/main';
+import { DEFAULT_TIMEOUT, loginAndWaitForPage } from '../../../tasks/login';
+import { closesModal, openStatsAndTables } from '../../../tasks/inspect';
 
 describe('Inspect', () => {
   context('Hosts stats and tables', () => {
@@ -51,12 +54,12 @@ describe('Inspect', () => {
 
   context('Timeline', () => {
     it('inspects the timeline', () => {
+      const hostExistsQuery = 'host.name: *';
       loginAndWaitForPage(HOSTS_PAGE);
-      toggleTimelineVisibility();
-      executeKQL(hostExistsQuery);
-      cy.get(TIMELINE_SETTINGS_ICON).trigger('click', { force: true });
-      cy.get(TIMELINE_INSPECT_BUTTON, { timeout: DEFAULT_TIMEOUT }).should('not.be.disabled');
-      cy.get(TIMELINE_INSPECT_BUTTON).trigger('click', { force: true });
+      openTimeline();
+      executeTimelineKQL(hostExistsQuery);
+      openTimelineSettings();
+      openTimelineInspectButton();
       cy.get(INSPECT_MODAL, { timeout: DEFAULT_TIMEOUT }).should('be.visible');
     });
   });
diff --git a/x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/ml_conditional_links/ml_conditional_links.spec.ts b/x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/ml_conditional_links/ml_conditional_links.spec.ts
index 142729189e49b..fabd86cf51f91 100644
--- a/x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/ml_conditional_links/ml_conditional_links.spec.ts
+++ b/x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/ml_conditional_links/ml_conditional_links.spec.ts
@@ -18,14 +18,14 @@ import {
   mlHostMultiHostKqlQuery,
   mlHostVariableHostNullKqlQuery,
   mlHostVariableHostKqlQuery,
-} from '../../lib/ml_conditional_links';
-import { loginAndWaitForPage } from '../../lib/util/helpers';
-import { KQL_INPUT } from '../../lib/url_state';
+} from '../../../urls/ml_conditional_links';
+import { loginAndWaitForPage, DEFAULT_TIMEOUT } from '../../../tasks/login';
+import { KQL_INPUT } from '../../../screens/header';
 
 describe('ml conditional links', () => {
   it('sets the KQL from a single IP with a value for the query', () => {
     loginAndWaitForPage(mlNetworkSingleIpKqlQuery);
-    cy.get(KQL_INPUT, { timeout: 5000 }).should(
+    cy.get(KQL_INPUT, { timeout: DEFAULT_TIMEOUT }).should(
       'have.attr',
       'value',
       '(process.name: "conhost.exe" or process.name: "sc.exe")'
@@ -34,7 +34,7 @@ describe('ml conditional links', () => {
 
   it('sets the KQL from a multiple IPs with a null for the query', () => {
     loginAndWaitForPage(mlNetworkMultipleIpNullKqlQuery);
-    cy.get(KQL_INPUT, { timeout: 5000 }).should(
+    cy.get(KQL_INPUT, { timeout: DEFAULT_TIMEOUT }).should(
       'have.attr',
       'value',
       '((source.ip: "127.0.0.1" or destination.ip: "127.0.0.1") or (source.ip: "127.0.0.2" or destination.ip: "127.0.0.2"))'
@@ -43,7 +43,7 @@ describe('ml conditional links', () => {
 
   it('sets the KQL from a multiple IPs with a value for the query', () => {
     loginAndWaitForPage(mlNetworkMultipleIpKqlQuery);
-    cy.get(KQL_INPUT, { timeout: 5000 }).should(
+    cy.get(KQL_INPUT, { timeout: DEFAULT_TIMEOUT }).should(
       'have.attr',
       'value',
       '((source.ip: "127.0.0.1" or destination.ip: "127.0.0.1") or (source.ip: "127.0.0.2" or destination.ip: "127.0.0.2")) and ((process.name: "conhost.exe" or process.name: "sc.exe"))'
@@ -52,7 +52,7 @@ describe('ml conditional links', () => {
 
   it('sets the KQL from a $ip$ with a value for the query', () => {
     loginAndWaitForPage(mlNetworkKqlQuery);
-    cy.get(KQL_INPUT, { timeout: 5000 }).should(
+    cy.get(KQL_INPUT, { timeout: DEFAULT_TIMEOUT }).should(
       'have.attr',
       'value',
       '(process.name: "conhost.exe" or process.name: "sc.exe")'
@@ -61,7 +61,7 @@ describe('ml conditional links', () => {
 
   it('sets the KQL from a single host name with a value for query', () => {
     loginAndWaitForPage(mlHostSingleHostKqlQuery);
-    cy.get(KQL_INPUT, { timeout: 5000 }).should(
+    cy.get(KQL_INPUT, { timeout: DEFAULT_TIMEOUT }).should(
       'have.attr',
       'value',
       '(process.name: "conhost.exe" or process.name: "sc.exe")'
@@ -70,7 +70,7 @@ describe('ml conditional links', () => {
 
   it('sets the KQL from a multiple host names with null for query', () => {
     loginAndWaitForPage(mlHostMultiHostNullKqlQuery);
-    cy.get(KQL_INPUT, { timeout: 5000 }).should(
+    cy.get(KQL_INPUT, { timeout: DEFAULT_TIMEOUT }).should(
       'have.attr',
       'value',
       '(host.name: "siem-windows" or host.name: "siem-suricata")'
@@ -79,7 +79,7 @@ describe('ml conditional links', () => {
 
   it('sets the KQL from a multiple host names with a value for query', () => {
     loginAndWaitForPage(mlHostMultiHostKqlQuery);
-    cy.get(KQL_INPUT, { timeout: 5000 }).should(
+    cy.get(KQL_INPUT, { timeout: DEFAULT_TIMEOUT }).should(
       'have.attr',
       'value',
       '(host.name: "siem-windows" or host.name: "siem-suricata") and ((process.name: "conhost.exe" or process.name: "sc.exe"))'
@@ -88,7 +88,7 @@ describe('ml conditional links', () => {
 
   it('sets the KQL from a undefined/null host name but with a value for query', () => {
     loginAndWaitForPage(mlHostVariableHostKqlQuery);
-    cy.get(KQL_INPUT, { timeout: 5000 }).should(
+    cy.get(KQL_INPUT, { timeout: DEFAULT_TIMEOUT }).should(
       'have.attr',
       'value',
       '(process.name: "conhost.exe" or process.name: "sc.exe")'
diff --git a/x-pack/legacy/plugins/siem/cypress/screens/header.ts b/x-pack/legacy/plugins/siem/cypress/screens/header.ts
new file mode 100644
index 0000000000000..cb018cda8f68d
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/cypress/screens/header.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export const KQL_INPUT = '[data-test-subj="queryInput"]';
diff --git a/x-pack/legacy/plugins/siem/cypress/screens/inspect.ts b/x-pack/legacy/plugins/siem/cypress/screens/inspect.ts
new file mode 100644
index 0000000000000..8f2ff4ef401e7
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/cypress/screens/inspect.ts
@@ -0,0 +1,87 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export const INSPECT_BUTTON_ICON = '[data-test-subj="inspect-icon-button"]';
+export const INSPECT_MODAL = '[data-test-subj="modal-inspect-euiModal"]';
+
+export interface InspectButtonMetadata {
+  altInspectId?: string;
+  id: string;
+  title: string;
+  tabId?: string;
+}
+
+export const INSPECT_HOSTS_BUTTONS_IN_SIEM: InspectButtonMetadata[] = [
+  {
+    id: '[data-test-subj="stat-hosts"]',
+    title: 'Hosts Stat',
+  },
+  {
+    id: '[data-test-subj="stat-authentication"]',
+    title: 'User Authentications Stat',
+  },
+  {
+    id: '[data-test-subj="stat-uniqueIps"]',
+    title: 'Unique IPs Stat',
+  },
+  {
+    id: '[data-test-subj="table-allHosts-loading-false"]',
+    title: 'All Hosts Table',
+    tabId: '[data-test-subj="navigation-allHosts"]',
+  },
+  {
+    id: '[data-test-subj="table-authentications-loading-false"]',
+    title: 'Authentications Table',
+    tabId: '[data-test-subj="navigation-authentications"]',
+  },
+  {
+    id: '[data-test-subj="table-uncommonProcesses-loading-false"]',
+    title: 'Uncommon processes Table',
+    tabId: '[data-test-subj="navigation-uncommonProcesses"]',
+  },
+  {
+    altInspectId: `[data-test-subj="events-viewer-panel"] ${INSPECT_BUTTON_ICON}`,
+    id: '[data-test-subj="events-container-loading-false"]',
+    title: 'Events Table',
+    tabId: '[data-test-subj="navigation-events"]',
+  },
+];
+
+export const INSPECT_NETWORK_BUTTONS_IN_SIEM: InspectButtonMetadata[] = [
+  {
+    id: '[data-test-subj="stat-networkEvents"]',
+    title: 'Network events Stat',
+  },
+  {
+    id: '[data-test-subj="stat-dnsQueries"]',
+    title: 'DNS queries Stat',
+  },
+  {
+    id: '[data-test-subj="stat-uniqueFlowId"]',
+    title: 'Unique flow IDs Stat',
+  },
+  {
+    id: '[data-test-subj="stat-tlsHandshakes"]',
+    title: 'TLS handshakes Stat',
+  },
+  {
+    id: '[data-test-subj="stat-UniqueIps"]',
+    title: 'Unique private IPs Stat',
+  },
+  {
+    id: '[data-test-subj="table-topNFlowSource-loading-false"]',
+    title: 'Source IPs Table',
+  },
+  {
+    id: '[data-test-subj="table-topNFlowDestination-loading-false"]',
+    title: 'Destination IPs Table',
+  },
+  {
+    id: '[data-test-subj="table-dns-loading-false"]',
+    title: 'Top DNS Domains Table',
+    tabId: '[data-test-subj="navigation-dns"]',
+  },
+];
diff --git a/x-pack/legacy/plugins/siem/cypress/screens/timeline/main.ts b/x-pack/legacy/plugins/siem/cypress/screens/timeline/main.ts
index cf3267d2b650e..ca11f48932263 100644
--- a/x-pack/legacy/plugins/siem/cypress/screens/timeline/main.ts
+++ b/x-pack/legacy/plugins/siem/cypress/screens/timeline/main.ts
@@ -16,3 +16,7 @@ export const TIMELINE_FIELDS_BUTTON =
 
 /** The total server-side count of the events matching the timeline's search criteria */
 export const SERVER_SIDE_EVENT_COUNT = '[data-test-subj="server-side-event-count"]';
+
+export const TIMELINE_SETTINGS_ICON = '[data-test-subj="settings-gear"]';
+
+export const TIMELINE_INSPECT_BUTTON = '[data-test-subj="inspect-empty-button"]';
diff --git a/x-pack/legacy/plugins/siem/cypress/tasks/inspect.ts b/x-pack/legacy/plugins/siem/cypress/tasks/inspect.ts
new file mode 100644
index 0000000000000..26b1c0f7e4e39
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/cypress/tasks/inspect.ts
@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { INSPECT_BUTTON_ICON, InspectButtonMetadata } from '../screens/inspect';
+
+import { DEFAULT_TIMEOUT } from '../tasks/login';
+
+export const closesModal = () => {
+  cy.get('[data-test-subj="modal-inspect-close"]', { timeout: DEFAULT_TIMEOUT }).click();
+};
+
+export const openStatsAndTables = (table: InspectButtonMetadata) => {
+  if (table.tabId) {
+    cy.get(table.tabId).click({ force: true });
+  }
+  cy.get(table.id, { timeout: DEFAULT_TIMEOUT });
+  if (table.altInspectId) {
+    cy.get(table.altInspectId, { timeout: DEFAULT_TIMEOUT }).trigger('click', {
+      force: true,
+    });
+  } else {
+    cy.get(`${table.id} ${INSPECT_BUTTON_ICON}`, {
+      timeout: DEFAULT_TIMEOUT,
+    }).trigger('click', { force: true });
+  }
+};
diff --git a/x-pack/legacy/plugins/siem/cypress/tasks/timeline/main.ts b/x-pack/legacy/plugins/siem/cypress/tasks/timeline/main.ts
index 51026fef757d8..ae2a863092907 100644
--- a/x-pack/legacy/plugins/siem/cypress/tasks/timeline/main.ts
+++ b/x-pack/legacy/plugins/siem/cypress/tasks/timeline/main.ts
@@ -11,6 +11,8 @@ import {
   SEARCH_OR_FILTER_CONTAINER,
   TIMELINE_FIELDS_BUTTON,
   SERVER_SIDE_EVENT_COUNT,
+  TIMELINE_SETTINGS_ICON,
+  TIMELINE_INSPECT_BUTTON,
 } from '../../screens/timeline/main';
 
 export const hostExistsQuery = 'host.name: *';
@@ -29,3 +31,16 @@ export const populateTimeline = () => {
 export const openTimelineFieldsBrowser = () => {
   cy.get(TIMELINE_FIELDS_BUTTON).click({ force: true });
 };
+
+export const executeTimelineKQL = (query: string) => {
+  cy.get(`${SEARCH_OR_FILTER_CONTAINER} input`).type(`${query} {enter}`);
+};
+
+export const openTimelineSettings = () => {
+  cy.get(TIMELINE_SETTINGS_ICON).trigger('click', { force: true });
+};
+
+export const openTimelineInspectButton = () => {
+  cy.get(TIMELINE_INSPECT_BUTTON, { timeout: DEFAULT_TIMEOUT }).should('not.be.disabled');
+  cy.get(TIMELINE_INSPECT_BUTTON).trigger('click', { force: true });
+};
diff --git a/x-pack/legacy/plugins/siem/cypress/urls/ml_conditional_links.ts b/x-pack/legacy/plugins/siem/cypress/urls/ml_conditional_links.ts
new file mode 100644
index 0000000000000..655418fc98bf8
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/cypress/urls/ml_conditional_links.ts
@@ -0,0 +1,76 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+/*
+ * These links are for different test scenarios that try and capture different drill downs into
+ * ml-network and ml-hosts and are of the flavor of testing:
+ * A filter being null: (query:!n)
+ * A filter being set with single values: query=(query:%27process.name%20:%20%22conhost.exe%22%27,language:kuery)
+ * A filter being set with multiple values:  query=(query:%27process.name%20:%20%22conhost.exe,sc.exe%22%27,language:kuery)
+ * A filter containing variables not replaced:  query=(query:%27process.name%20:%20%$process.name$%22%27,language:kuery)
+ *
+ * In different combination with:
+ * network not being set: $ip$
+ * host not being set: $host.name$
+ * ...or...
+ * network being set normally: 127.0.0.1
+ * host being set normally: suricata-iowa
+ * ...or...
+ * network having multiple values: 127.0.0.1,127.0.0.2
+ * host having multiple values: suricata-iowa,siem-windows
+ */
+
+// Single IP with a null for the Query:
+export const mlNetworkSingleIpNullKqlQuery =
+  "/app/siem#/ml-network/ip/127.0.0.1?query=!n&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')))";
+
+// Single IP with a value for the Query:
+export const mlNetworkSingleIpKqlQuery =
+  "/app/siem#/ml-network/ip/127.0.0.1?query=(language:kuery,query:'process.name%20:%20%22conhost.exe,sc.exe%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')))";
+
+// Multiple IPs with a null for the Query:
+export const mlNetworkMultipleIpNullKqlQuery =
+  "/app/siem#/ml-network/ip/127.0.0.1,127.0.0.2?query=!n&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')))";
+
+// Multiple IPs with a value for the Query:
+export const mlNetworkMultipleIpKqlQuery =
+  "/app/siem#/ml-network/ip/127.0.0.1,127.0.0.2?query=(language:kuery,query:'process.name%20:%20%22conhost.exe,sc.exe%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')))";
+
+// $ip$ with a null Query:
+export const mlNetworkNullKqlQuery =
+  "/app/siem#/ml-network/ip/$ip$?query=!n&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')))";
+
+// $ip$ with a value for the Query:
+export const mlNetworkKqlQuery =
+  "/app/siem#/ml-network/ip/$ip$?query=(language:kuery,query:'process.name%20:%20%22conhost.exe,sc.exe%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')))";
+
+// Single host name with a null for the Query:
+export const mlHostSingleHostNullKqlQuery =
+  "/app/siem#/ml-hosts/siem-windows?query=!n&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')))";
+
+// Single host name with a variable in the Query:
+export const mlHostSingleHostKqlQueryVariable =
+  "/app/siem#/ml-hosts/siem-windows?query=(language:kuery,query:'process.name%20:%20%22$process.name$%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')))";
+
+// Single host name with a value for Query:
+export const mlHostSingleHostKqlQuery =
+  "/app/siem#/ml-hosts/siem-windows?query=(language:kuery,query:'process.name%20:%20%22conhost.exe,sc.exe%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')))";
+
+// Multiple host names with null for Query:
+export const mlHostMultiHostNullKqlQuery =
+  "/app/siem#/ml-hosts/siem-windows,siem-suricata?query=!n&&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')))";
+
+// Multiple host names with a value for Query:
+export const mlHostMultiHostKqlQuery =
+  "/app/siem#/ml-hosts/siem-windows,siem-suricata?query=(language:kuery,query:'process.name%20:%20%22conhost.exe,sc.exe%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')))";
+
+// Undefined/null host name with a null for the KQL:
+export const mlHostVariableHostNullKqlQuery =
+  "/app/siem#/ml-hosts/$host.name$?query=!n&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')))";
+
+// Undefined/null host name but with a value for Query:
+export const mlHostVariableHostKqlQuery =
+  "/app/siem#/ml-hosts/$host.name$?query=(language:kuery,query:'process.name%20:%20%22conhost.exe,sc.exe%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')))";
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_alert_types/threshold/visualization.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_alert_types/threshold/visualization.tsx
index 8433c585ef3e5..9ba79bba8fef6 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_alert_types/threshold/visualization.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_alert_types/threshold/visualization.tsx
@@ -100,7 +100,7 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({ alert }
   const [error, setError] = useState<undefined | any>(undefined);
   const [visualizationData, setVisualizationData] = useState<Record<string, any>>([]);
 
-  const chartsTheme = npStart.plugins.eui_utils.useChartsTheme();
+  const chartsTheme = npStart.plugins.charts.theme.useChartsTheme();
   const {
     index,
     timeField,
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index ce6126e79a82b..408845449adc8 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -506,12 +506,12 @@
     "common.ui.vis.editors.sidebar.tabs.optionsLabel": "オプション",
     "common.ui.vis.kibanaMap.leaflet.fitDataBoundsAriaLabel": "データバウンドを合わせる",
     "common.ui.vis.kibanaMap.zoomWarning": "ズームレベルが最大に達しました。完全にズームインするには、Elasticsearch と Kibana の {defaultDistribution} にアップグレードしてください。{ems} でより多くのズームレベルが利用できます。または、独自のマップサーバーを構成できます。詳細は { wms } または { configSettings} をご覧ください。",
-    "common.ui.vislib.colormaps.bluesText": "青",
-    "common.ui.vislib.colormaps.greensText": "緑",
-    "common.ui.vislib.colormaps.greenToRedText": "緑から赤",
-    "common.ui.vislib.colormaps.greysText": "グレー",
-    "common.ui.vislib.colormaps.redsText": "赤",
-    "common.ui.vislib.colormaps.yellowToRedText": "黄色から赤",
+    "charts.colormaps.bluesText": "青",
+    "charts.colormaps.greensText": "緑",
+    "charts.colormaps.greenToRedText": "緑から赤",
+    "charts.colormaps.greysText": "グレー",
+    "charts.colormaps.redsText": "赤",
+    "charts.colormaps.yellowToRedText": "黄色から赤",
     "common.ui.visualize.queryGeohashBounds.unableToGetBoundErrorTitle": "バウンドを取得できませんでした",
     "console.autocomplete.addMethodMetaText": "メソド",
     "console.consoleDisplayName": "コンソール",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index a5b2bafaded88..58b6a96793ccb 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -506,12 +506,12 @@
     "common.ui.vis.editors.sidebar.tabs.optionsLabel": "选项",
     "common.ui.vis.kibanaMap.leaflet.fitDataBoundsAriaLabel": "适应数据边界",
     "common.ui.vis.kibanaMap.zoomWarning": "已达到缩放级别最大数目。要一直放大，请升级到 Elasticsearch 和 Kibana 的 {defaultDistribution}。您可以通过 {ems} 免费使用其他缩放级别。或者，您可以配置自己的地图服务器。请前往 { wms } 或 { configSettings} 以获取详细信息。",
-    "common.ui.vislib.colormaps.bluesText": "蓝色",
-    "common.ui.vislib.colormaps.greensText": "绿色",
-    "common.ui.vislib.colormaps.greenToRedText": "绿到红",
-    "common.ui.vislib.colormaps.greysText": "灰色",
-    "common.ui.vislib.colormaps.redsText": "红色",
-    "common.ui.vislib.colormaps.yellowToRedText": "黄到红",
+    "charts.colormaps.bluesText": "蓝色",
+    "charts.colormaps.greensText": "绿色",
+    "charts.colormaps.greenToRedText": "绿到红",
+    "charts.colormaps.greysText": "灰色",
+    "charts.colormaps.redsText": "红色",
+    "charts.colormaps.yellowToRedText": "黄到红",
     "common.ui.visualize.queryGeohashBounds.unableToGetBoundErrorTitle": "无法获取边界",
     "console.autocomplete.addMethodMetaText": "方法",
     "console.consoleDisplayName": "控制台",
diff --git a/x-pack/plugins/watcher/__jest__/client_integration/helpers/app_context.mock.tsx b/x-pack/plugins/watcher/__jest__/client_integration/helpers/app_context.mock.tsx
index f0a2816dd57b1..ecb284352b98c 100644
--- a/x-pack/plugins/watcher/__jest__/client_integration/helpers/app_context.mock.tsx
+++ b/x-pack/plugins/watcher/__jest__/client_integration/helpers/app_context.mock.tsx
@@ -36,9 +36,9 @@ export const mockContextValue = {
   createTimeBuckets: () => new MockTimeBuckets(),
   uiSettings: uiSettingsServiceMock.createSetupContract(),
   toasts: notificationServiceMock.createSetupContract().toasts,
-  euiUtils: {
+  theme: {
     useChartsTheme: jest.fn(),
-  },
+  } as any,
   // For our test harness, we don't use this mocked out http service
   http: httpServiceMock.createSetupContract(),
 };
diff --git a/x-pack/plugins/watcher/kibana.json b/x-pack/plugins/watcher/kibana.json
index 93a28f8f59ed5..7c02118c58d7a 100644
--- a/x-pack/plugins/watcher/kibana.json
+++ b/x-pack/plugins/watcher/kibana.json
@@ -5,7 +5,7 @@
     "home",
     "licensing",
     "management",
-    "eui_utils",
+    "charts",
     "data"
   ],
   "server": true,
diff --git a/x-pack/plugins/watcher/public/application/app.tsx b/x-pack/plugins/watcher/public/application/app.tsx
index 1f418e4475ed0..7ca79bb558baa 100644
--- a/x-pack/plugins/watcher/public/application/app.tsx
+++ b/x-pack/plugins/watcher/public/application/app.tsx
@@ -34,6 +34,7 @@ import { WatchList } from './sections/watch_list/components/watch_list';
 import { registerRouter } from './lib/navigation';
 import { BASE_PATH } from './constants';
 import { AppContextProvider } from './app_context';
+import { ChartsPluginSetup } from '../../../../../src/plugins/charts/public';
 
 const ShareRouter = withRouter(({ children, history }: RouteComponentProps & { children: any }) => {
   registerRouter({ history });
@@ -46,7 +47,7 @@ export interface AppDeps {
   toasts: ToastsSetup;
   http: HttpSetup;
   uiSettings: IUiSettingsClient;
-  euiUtils: any;
+  theme: ChartsPluginSetup['theme'];
   createTimeBuckets: () => any;
   licenseStatus$: Observable<LicenseStatus>;
   MANAGEMENT_BREADCRUMB: any;
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/watch_visualization.tsx b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/watch_visualization.tsx
index 35d9efd36ad0f..b2627e1c58aff 100644
--- a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/watch_visualization.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/watch_visualization.tsx
@@ -86,9 +86,9 @@ const getTimeBuckets = (watch: any, timeBuckets: any) => {
 };
 
 export const WatchVisualization = () => {
-  const { createTimeBuckets, euiUtils, uiSettings } = useAppContext();
+  const { createTimeBuckets, theme, uiSettings } = useAppContext();
   const { watch } = useContext(WatchContext);
-  const chartsTheme = euiUtils.useChartsTheme();
+  const chartsTheme = theme.useChartsTheme();
   const {
     index,
     timeField,
diff --git a/x-pack/plugins/watcher/public/plugin.ts b/x-pack/plugins/watcher/public/plugin.ts
index 7bb422f9a6eb1..a2a0d3cf1c978 100644
--- a/x-pack/plugins/watcher/public/plugin.ts
+++ b/x-pack/plugins/watcher/public/plugin.ts
@@ -26,8 +26,8 @@ const licenseToLicenseStatus = (license: ILicense): LicenseStatus => {
 
 export class WatcherUIPlugin implements Plugin<void, void, Dependencies, any> {
   setup(
-    { application, notifications, http, uiSettings, getStartServices }: CoreSetup,
-    { licensing, management, data, home }: Dependencies
+    { notifications, http, uiSettings, getStartServices }: CoreSetup,
+    { licensing, management, data, home, charts }: Dependencies
   ) {
     const esSection = management.sections.getSection('elasticsearch');
 
@@ -38,9 +38,8 @@ export class WatcherUIPlugin implements Plugin<void, void, Dependencies, any> {
         { defaultMessage: 'Watcher' }
       ),
       mount: async ({ element }) => {
-        const [core, plugins] = await getStartServices();
+        const [core] = await getStartServices();
         const { chrome, i18n: i18nDep, docLinks, savedObjects } = core;
-        const { eui_utils } = plugins as any;
         const { boot } = await import('./application/boot');
 
         return boot({
@@ -53,7 +52,7 @@ export class WatcherUIPlugin implements Plugin<void, void, Dependencies, any> {
           uiSettings,
           docLinks,
           chrome,
-          euiUtils: eui_utils,
+          theme: charts.theme,
           savedObjects: savedObjects.client,
           I18nContext: i18nDep.Context,
           createTimeBuckets: () => new TimeBuckets(uiSettings, data),
diff --git a/x-pack/plugins/watcher/public/types.ts b/x-pack/plugins/watcher/public/types.ts
index 930185051514a..82eb3a3d12da9 100644
--- a/x-pack/plugins/watcher/public/types.ts
+++ b/x-pack/plugins/watcher/public/types.ts
@@ -5,7 +5,7 @@
  */
 
 import { ManagementSetup } from 'src/plugins/management/public';
-import { EuiUtilsStart } from 'src/plugins/eui_utils/public';
+import { ChartsPluginStart } from 'src/plugins/charts/public';
 import { LicensingPluginSetup } from '../../licensing/public';
 import { DataPublicPluginSetup } from '../../../../src/plugins/data/public';
 import { HomePublicPluginSetup } from '../../../../src/plugins/home/public';
@@ -14,6 +14,6 @@ export interface Dependencies {
   home: HomePublicPluginSetup;
   management: ManagementSetup;
   licensing: LicensingPluginSetup;
-  eui_utils: EuiUtilsStart;
+  charts: ChartsPluginStart;
   data: DataPublicPluginSetup;
 }
diff --git a/x-pack/test/functional/apps/uptime/overview.ts b/x-pack/test/functional/apps/uptime/overview.ts
index 2ef6a381a6a30..73b91a61196bf 100644
--- a/x-pack/test/functional/apps/uptime/overview.ts
+++ b/x-pack/test/functional/apps/uptime/overview.ts
@@ -7,9 +7,9 @@
 import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
-export default ({ getPageObjects }: FtrProviderContext) => {
-  // TODO: add UI functional tests
+export default ({ getPageObjects, getService }: FtrProviderContext) => {
   const pageObjects = getPageObjects(['uptime']);
+  const retry = getService('retry');
 
   describe('overview page', function() {
     const DEFAULT_DATE_START = 'Sep 10, 2019 @ 12:40:08.078';
@@ -84,16 +84,18 @@ export default ({ getPageObjects }: FtrProviderContext) => {
       ]);
     });
 
-    // Flakey, see https://github.com/elastic/kibana/issues/54541
-    describe.skip('snapshot counts', () => {
+    describe('snapshot counts', () => {
       it('updates the snapshot count when status filter is set to down', async () => {
         await pageObjects.uptime.goToUptimePageAndSetDateRange(
           DEFAULT_DATE_START,
           DEFAULT_DATE_END
         );
         await pageObjects.uptime.setStatusFilter('down');
-        const counts = await pageObjects.uptime.getSnapshotCount();
-        expect(counts).to.eql({ up: '0', down: '7' });
+
+        await retry.tryForTime(12000, async () => {
+          const counts = await pageObjects.uptime.getSnapshotCount();
+          expect(counts).to.eql({ up: '0', down: '7' });
+        });
       });
 
       it('updates the snapshot count when status filter is set to up', async () => {
@@ -102,8 +104,10 @@ export default ({ getPageObjects }: FtrProviderContext) => {
           DEFAULT_DATE_END
         );
         await pageObjects.uptime.setStatusFilter('up');
-        const counts = await pageObjects.uptime.getSnapshotCount();
-        expect(counts).to.eql({ up: '93', down: '0' });
+        await retry.tryForTime(12000, async () => {
+          const counts = await pageObjects.uptime.getSnapshotCount();
+          expect(counts).to.eql({ up: '93', down: '0' });
+        });
       });
     });
   });