diff --git a/packages/osd-charts/.eslintignore b/packages/osd-charts/.eslintignore
index 98f44490524a..13ca9d8266b5 100644
--- a/packages/osd-charts/.eslintignore
+++ b/packages/osd-charts/.eslintignore
@@ -1,7 +1,4 @@
 # Force include
-!.storybook
-!.storybook-docs
-!.playground
 !.*.js
 
 # Ignore
diff --git a/packages/osd-charts/.eslintrc.js b/packages/osd-charts/.eslintrc.js
index b1b552b3f26e..b465a0cce9a1 100644
--- a/packages/osd-charts/.eslintrc.js
+++ b/packages/osd-charts/.eslintrc.js
@@ -423,7 +423,7 @@ module.exports = {
       },
     },
     {
-      files: ['.playground/**/*.ts?(x)'],
+      files: ['playground/**/*.ts?(x)'],
       rules: {
         'react/prefer-stateless-function': 0,
       },
diff --git a/packages/osd-charts/.storybook-docs/tsconfig.json b/packages/osd-charts/.storybook-docs/tsconfig.json
deleted file mode 100644
index 19e4ef33e95d..000000000000
--- a/packages/osd-charts/.storybook-docs/tsconfig.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  //   "compilerOptions": {
-  //     "outDir": "build/lib",
-  //     "module": "commonjs",
-  //     "target": "es5",
-  //     "lib": ["es5", "es6", "es7", "es2017", "dom"],
-  //     "sourceMap": true,
-  //     "allowJs": false,
-  //     "jsx": "react",
-  //     "moduleResolution": "node",
-  //     "rootDirs": ["src", "docs"],
-  //     "baseUrl": "src",
-  //     "forceConsistentCasingInFileNames": true,
-  //     "noImplicitReturns": true,
-  //     "noImplicitThis": true,
-  //     "noImplicitAny": true,
-  //     "strictNullChecks": true,
-  //     "suppressImplicitAnyIndexErrors": true,
-  //     "noUnusedLocals": true,
-  //     "declaration": true,
-  //     "allowSyntheticDefaultImports": true,
-  //     "experimentalDecorators": true,
-  //     "emitDecoratorMetadata": true
-  //   },
-  "extends": "../tsconfig",
-  "include": ["../src/**/*", "../stories/**/*", "./**/*", "../.storybook-docs/config.ts"],
-  "exclude": ["../**/*.test.*"]
-}
diff --git a/packages/osd-charts/.storybook/tsconfig.json b/packages/osd-charts/.storybook/tsconfig.json
deleted file mode 100644
index d1c81f10040a..000000000000
--- a/packages/osd-charts/.storybook/tsconfig.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "extends": "../tsconfig",
-  "include": ["../src/**/*", "../stories/**/*", "./**/*", "../.storybook-docs/config.docs.ts"],
-  "exclude": ["../**/*.test.*"]
-}
diff --git a/packages/osd-charts/global.d.ts b/packages/osd-charts/global.d.ts
index d41127d0e7ba..4a3ea5038738 100644
--- a/packages/osd-charts/global.d.ts
+++ b/packages/osd-charts/global.d.ts
@@ -18,3 +18,43 @@
  */
 
 import 'jest-extended'; // https://github.com/jest-community/jest-extended
+
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      /**
+       * Node enviroment
+       */
+      NODE_ENV: 'development' | 'production' | 'test';
+      /**
+       * Port used for dev servers including:
+       *  - storybook
+       *  - playground
+       */
+      PORT?: string;
+      /**
+       * Timezone flag used on jest.ts.config.js
+       */
+      TZ: string;
+      /**
+       * Flag used to enable a more suitable version of storybook for visual regression tests.
+       *
+       * Including:
+       * - disabling animations
+       * - preloading icons
+       */
+      STORYBOOK_VRT: string;
+      /**
+       * Flag used to enable debug state on visual regression test runnner
+       */
+      DEBUG: string;
+      /**
+       * String used for seeding a random number generator used in storybook and test files
+       *
+       * When seeded all rng use a deterministic random set of numbers.
+       * When no see is provided a truely _random_ number set will be used.
+       */
+      RNG_SEED: string;
+    }
+  }
+}
diff --git a/packages/osd-charts/integration/helpers.ts b/packages/osd-charts/integration/helpers.ts
index 73e3fc44f295..059cff770180 100644
--- a/packages/osd-charts/integration/helpers.ts
+++ b/packages/osd-charts/integration/helpers.ts
@@ -73,7 +73,6 @@ function encodeString(string: string) {
  */
 const storiesToSkip: Record<string, string[]> = {
   // Interactions: ['Some story name'],
-  Legend: ['Actions'],
   'Test Cases': ['No Series'],
 };
 
diff --git a/packages/osd-charts/integration/page_objects/common.ts b/packages/osd-charts/integration/page_objects/common.ts
index 8db68687b78f..f90335b86a06 100644
--- a/packages/osd-charts/integration/page_objects/common.ts
+++ b/packages/osd-charts/integration/page_objects/common.ts
@@ -388,7 +388,6 @@ class CommonPage {
     options?: Omit<ScreenshotElementAtUrlOptions, 'action'>,
   ) {
     const action = async () => {
-      await this.disableAnimations();
       // click to focus within the chart
       await this.clickMouseRelativeToDOMElement({ top: 0, left: 0 }, this.chartSelector);
       // eslint-disable-next-line no-restricted-syntax
@@ -446,12 +445,6 @@ class CommonPage {
     });
   }
 
-  async disableAnimations() {
-    await page.evaluate(() => {
-      document.querySelector('#story-root')!.classList.add('disable-animations');
-    });
-  }
-
   /**
    * Wait for an element to be on the DOM
    *
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-actions-visually-looks-correct-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-actions-visually-looks-correct-1-snap.png
new file mode 100644
index 000000000000..c8361832fa63
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-actions-visually-looks-correct-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png
index 80564887bf56..44f19badd39b 100644
Binary files a/packages/osd-charts/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png and b/packages/osd-charts/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/all.test.ts b/packages/osd-charts/integration/tests/all.test.ts
index 8a9658003d0e..3ed9cc0b4668 100644
--- a/packages/osd-charts/integration/tests/all.test.ts
+++ b/packages/osd-charts/integration/tests/all.test.ts
@@ -21,7 +21,7 @@ import { getStorybookInfo } from '../helpers';
 import { common } from '../page_objects';
 
 // mock required for importing trick, otherwise .scss files will throw an error
-jest.mock('../../.storybook/theme_service.ts', () => ({
+jest.mock('../../storybook/theme_service.ts', () => ({
   switchTheme: () => undefined,
 }));
 
@@ -29,10 +29,10 @@ const storyGroups = getStorybookInfo();
 
 describe('Baseline Visual tests for all stories', () => {
   describe.each(storyGroups)('%s', (_group, encodedGroup, stories) => {
-    describe.each(stories)('%s', (_title, encodedTitle, delay) => {
+    describe.each(stories)('%s', (_title, encodedTitle) => {
       it('visually looks correct', async () => {
         const url = `http://localhost:9001?id=${encodedGroup}--${encodedTitle}`;
-        await common.expectChartAtUrlToMatchScreenshot(url, { delay });
+        await common.expectChartAtUrlToMatchScreenshot(url);
       });
     });
   });
diff --git a/packages/osd-charts/integration/tests/area_stories.test.ts b/packages/osd-charts/integration/tests/area_stories.test.ts
index 66a9eada2702..1f3492b532c4 100644
--- a/packages/osd-charts/integration/tests/area_stories.test.ts
+++ b/packages/osd-charts/integration/tests/area_stories.test.ts
@@ -89,7 +89,6 @@ describe('Area series stories', () => {
 
     it('shows only positive values when hiding negative one', async () => {
       const action = async () => {
-        await common.disableAnimations();
         await page.click('.echLegendItem:nth-child(2) .echLegendItem__label');
       };
       await common.expectChartAtUrlToMatchScreenshot(
@@ -100,7 +99,6 @@ describe('Area series stories', () => {
 
     it('shows only negative values when hiding positive one', async () => {
       const action = async () => {
-        await common.disableAnimations();
         await page.click('.echLegendItem:nth-child(1) .echLegendItem__label');
       };
       await common.expectChartAtUrlToMatchScreenshot(
diff --git a/packages/osd-charts/integration/tests/legend_stories.test.ts b/packages/osd-charts/integration/tests/legend_stories.test.ts
index b0afea39adce..4e22ed8fdc07 100644
--- a/packages/osd-charts/integration/tests/legend_stories.test.ts
+++ b/packages/osd-charts/integration/tests/legend_stories.test.ts
@@ -49,7 +49,6 @@ describe('Legend stories', () => {
 
   it('should render color picker on mouse click', async () => {
     const action = async () => {
-      await common.disableAnimations();
       await common.clickMouseRelativeToDOMElement({ left: 0, top: 0 }, '.echLegendItem__color');
     };
     await common.expectElementAtUrlToMatchScreenshot(
@@ -58,19 +57,16 @@ describe('Legend stories', () => {
       {
         action,
         waitSelector: common.chartWaitSelector,
-        delay: 500, // needed for popover animation to complete
       },
     );
   });
 
   it('should render legend action on mouse hover', async () => {
     const action = async () => {
-      await common.disableAnimations();
       await common.moveMouseRelativeToDOMElement({ left: 30, top: 10 }, '.echLegendItem');
     };
     await common.expectChartAtUrlToMatchScreenshot('http://localhost:9001/?path=/story/legend--actions', {
       action,
-      delay: 500, // needed for icon to load
     });
   });
 
diff --git a/packages/osd-charts/integration/tests/test_cases_stories.test.ts b/packages/osd-charts/integration/tests/test_cases_stories.test.ts
index f2123c48970d..a84abb2d0243 100644
--- a/packages/osd-charts/integration/tests/test_cases_stories.test.ts
+++ b/packages/osd-charts/integration/tests/test_cases_stories.test.ts
@@ -25,7 +25,6 @@ describe('Test cases stories', () => {
       'http://localhost:9001/?path=/story/test-cases--no-series&knob-Show custom no results=true',
       {
         waitSelector: '.echReactiveChart_noResults .euiIcon:not(.euiIcon-isLoading)',
-        delay: 500, // wait for icon to load
       },
     );
   });
diff --git a/packages/osd-charts/package.json b/packages/osd-charts/package.json
index edf24a85210d..492e283da432 100644
--- a/packages/osd-charts/package.json
+++ b/packages/osd-charts/package.json
@@ -33,14 +33,14 @@
     "lint": "NODE_ENV=production eslint --quiet --ext .tsx,.ts,.js .",
     "lint:fix": "yarn lint --fix",
     "prettier:check": "prettier --check \"**/*.{json,html,css,scss}\"",
-    "playground": "cd .playground && webpack-dev-server",
-    "playground:ie": "cd .playground && webpack-dev-server --host=0.0.0.0 --disable-host-check --useLocalIp",
+    "playground": "cd playground && webpack-dev-server",
+    "playground:ie": "cd playground && webpack-dev-server --host=0.0.0.0 --disable-host-check --useLocalIp",
     "pq": "pretty-quick",
     "semantic-release": "semantic-release",
     "start": "yarn storybook",
-    "start-docs": "start-storybook -p 8001 -c .storybook-docs --ci",
-    "storybook": "RNG_SEED='elastic-charts' start-storybook -s ./public -p 9001 -c .storybook --ci --no-version-updates",
-    "storybook:build": "rm -rf .out && build-storybook -s ./public -c .storybook -o .out",
+    "start-docs": "start-storybook -p 8001 -c storybook-docs --ci",
+    "storybook": "STORYBOOK_VRT='true' start-storybook -s ./public -p 9001 -c storybook --ci --no-version-updates",
+    "storybook:build": "rm -rf .out && build-storybook -s ./public -c storybook -o .out",
     "test": "jest --verbose --config jest.config.js",
     "test:tz": "yarn test:tz-utc && yarn test:tz-ny && yarn test:tz-jp",
     "test:tz-utc": "TZ=UTC jest --verbose --config=jest.tz.config.js",
diff --git a/packages/osd-charts/.playground/index.html b/packages/osd-charts/playground/index.html
similarity index 100%
rename from packages/osd-charts/.playground/index.html
rename to packages/osd-charts/playground/index.html
diff --git a/packages/osd-charts/.playground/index.tsx b/packages/osd-charts/playground/index.tsx
similarity index 100%
rename from packages/osd-charts/.playground/index.tsx
rename to packages/osd-charts/playground/index.tsx
diff --git a/packages/osd-charts/.playground/playground.tsx b/packages/osd-charts/playground/playground.tsx
similarity index 100%
rename from packages/osd-charts/.playground/playground.tsx
rename to packages/osd-charts/playground/playground.tsx
diff --git a/packages/osd-charts/.playground/tsconfig.json b/packages/osd-charts/playground/tsconfig.json
similarity index 100%
rename from packages/osd-charts/.playground/tsconfig.json
rename to packages/osd-charts/playground/tsconfig.json
diff --git a/packages/osd-charts/.playground/webpack.config.js b/packages/osd-charts/playground/webpack.config.js
similarity index 100%
rename from packages/osd-charts/.playground/webpack.config.js
rename to packages/osd-charts/playground/webpack.config.js
diff --git a/packages/osd-charts/src/mocks/utils.ts b/packages/osd-charts/src/mocks/utils.ts
index a9892041b6c7..88c7c1b8c5d4 100644
--- a/packages/osd-charts/src/mocks/utils.ts
+++ b/packages/osd-charts/src/mocks/utils.ts
@@ -32,12 +32,19 @@ import { DataGenerator, RandomNumberGenerator } from '../utils/data_generators/d
 export const forcedType = <T extends Record<string, unknown>>(obj: Partial<T>): T => obj as T;
 
 /**
- * Return rng function with optional `min`, `max` and `fractionDigits` params
+ * Returns rng seed from `process.env`
+ * @internal
+ */
+export const getRNGSeed = (fallback?: string): string | undefined =>
+  process.env.RNG_SEED ?? (process.env.STORYBOOK_VRT ? 'elastic-charts' : fallback);
+
+/**
+ * Returns rng function with optional `min`, `max` and `fractionDigits` params
  *
- * @param string process.env.RNG_SEED
+ * @param string seed for deterministic algorithm
  * @internal
  */
-export const getRandomNumberGenerator = (seed = process.env.RNG_SEED): RandomNumberGenerator => {
+export const getRandomNumberGenerator = (seed = getRNGSeed()): RandomNumberGenerator => {
   const rng = seedrandom(seed);
 
   /**
diff --git a/packages/osd-charts/stories/interactions/14_crosshair_time.tsx b/packages/osd-charts/stories/interactions/14_crosshair_time.tsx
index 77ad86b7f271..6665df15e73c 100644
--- a/packages/osd-charts/stories/interactions/14_crosshair_time.tsx
+++ b/packages/osd-charts/stories/interactions/14_crosshair_time.tsx
@@ -20,7 +20,6 @@
 import { boolean, select } from '@storybook/addon-knobs';
 import React from 'react';
 
-import { switchTheme } from '../../.storybook/theme_service';
 import {
   Axis,
   BarSeries,
@@ -36,6 +35,7 @@ import {
   TooltipType,
 } from '../../src';
 import { KIBANA_METRICS } from '../../src/utils/data_samples/test_dataset_kibana';
+import { switchTheme } from '../../storybook/theme_service';
 import { getChartRotationKnob } from '../utils/knobs';
 import { SB_KNOBS_PANEL } from '../utils/storybook';
 
diff --git a/packages/osd-charts/stories/legend/13_inside_chart.tsx b/packages/osd-charts/stories/legend/13_inside_chart.tsx
index 1f21dd9c5807..52c3d5ea3b9c 100644
--- a/packages/osd-charts/stories/legend/13_inside_chart.tsx
+++ b/packages/osd-charts/stories/legend/13_inside_chart.tsx
@@ -20,7 +20,6 @@
 import { select, boolean, number } from '@storybook/addon-knobs';
 import React from 'react';
 
-import { switchTheme } from '../../.storybook/theme_service';
 import {
   AreaSeries,
   Axis,
@@ -37,6 +36,7 @@ import {
 } from '../../src';
 import { SeededDataGenerator } from '../../src/mocks/utils';
 import { KIBANA_METRICS } from '../../src/utils/data_samples/test_dataset_kibana';
+import { switchTheme } from '../../storybook/theme_service';
 import { SB_KNOBS_PANEL } from '../utils/storybook';
 
 const dg = new SeededDataGenerator();
diff --git a/packages/osd-charts/stories/mixed/6_fitting_stacked.tsx b/packages/osd-charts/stories/mixed/6_fitting_stacked.tsx
index e18f2f9ba764..123082ddc835 100644
--- a/packages/osd-charts/stories/mixed/6_fitting_stacked.tsx
+++ b/packages/osd-charts/stories/mixed/6_fitting_stacked.tsx
@@ -22,11 +22,11 @@ import numeral from 'numeral';
 import React from 'react';
 
 import { AreaSeries, Axis, Chart, CurveType, Position, ScaleType, Settings, Fit, StackMode } from '../../src';
-import { getRandomNumberGenerator } from '../../src/mocks/utils';
+import { getRandomNumberGenerator, getRNGSeed } from '../../src/mocks/utils';
 import { SB_KNOBS_PANEL } from '../utils/storybook';
 
 export const Example = () => {
-  const randomizeBoundingData = process.env.RNG_SEED !== null ? false : boolean('randomize bounding data', false);
+  const randomizeBoundingData = getRNGSeed() ? false : boolean('randomize bounding data', false);
   const dataTypes: Record<string, Array<{ x: number | string; y: number | null }>> = {
     isolated: [
       { x: 0, y: 3 },
@@ -159,7 +159,7 @@ export const Example = () => {
   const parsedEndValue: number | 'nearest' = Number.isNaN(Number(endValue)) ? 'nearest' : Number(endValue);
   const value = number('Explicit value (using Fit.Explicit)', 5);
   const xScaleType = dataKey === 'ordinal' ? ScaleType.Ordinal : ScaleType.Linear;
-  const rngSeed = randomizeBoundingData ? undefined : process.env.RNG_SEED ?? '__seed__';
+  const rngSeed = randomizeBoundingData ? undefined : getRNGSeed('__seed__');
   const rng = getRandomNumberGenerator(rngSeed);
   const tickFormat = stackMode === 'percentage' ? (d: any) => numeral(d).format('0[.]00%') : undefined;
   return (
diff --git a/packages/osd-charts/stories/stylings/22_dark_theme.tsx b/packages/osd-charts/stories/stylings/22_dark_theme.tsx
index 30c8f225641e..58184922d784 100644
--- a/packages/osd-charts/stories/stylings/22_dark_theme.tsx
+++ b/packages/osd-charts/stories/stylings/22_dark_theme.tsx
@@ -20,7 +20,6 @@
 import { boolean } from '@storybook/addon-knobs';
 import React from 'react';
 
-import { switchTheme } from '../../.storybook/theme_service';
 import {
   AreaSeries,
   Axis,
@@ -36,6 +35,7 @@ import {
   TooltipType,
 } from '../../src';
 import { SeededDataGenerator } from '../../src/mocks/utils';
+import { switchTheme } from '../../storybook/theme_service';
 
 const dg = new SeededDataGenerator();
 const data1 = dg.generateGroupedSeries(40, 4);
diff --git a/packages/osd-charts/stories/stylings/4_theme_styling.tsx b/packages/osd-charts/stories/stylings/4_theme_styling.tsx
index 494bc1755c05..2f41de45a620 100644
--- a/packages/osd-charts/stories/stylings/4_theme_styling.tsx
+++ b/packages/osd-charts/stories/stylings/4_theme_styling.tsx
@@ -20,7 +20,6 @@
 import { boolean, color, number, select } from '@storybook/addon-knobs';
 import React from 'react';
 
-import { switchTheme } from '../../.storybook/theme_service';
 import {
   AreaSeries,
   Axis,
@@ -38,6 +37,7 @@ import {
 } from '../../src';
 import { SeededDataGenerator } from '../../src/mocks/utils';
 import { palettes } from '../../src/utils/themes/colors';
+import { switchTheme } from '../../storybook/theme_service';
 
 function range(title: string, min: number, max: number, value: number, groupId?: string, step = 1) {
   return number(
diff --git a/packages/osd-charts/.storybook-docs/addons.ts b/packages/osd-charts/storybook-docs/addons.ts
similarity index 100%
rename from packages/osd-charts/.storybook-docs/addons.ts
rename to packages/osd-charts/storybook-docs/addons.ts
diff --git a/packages/osd-charts/.storybook-docs/config.ts b/packages/osd-charts/storybook-docs/config.ts
similarity index 100%
rename from packages/osd-charts/.storybook-docs/config.ts
rename to packages/osd-charts/storybook-docs/config.ts
diff --git a/packages/osd-charts/.storybook-docs/preview-head.html b/packages/osd-charts/storybook-docs/preview-head.html
similarity index 100%
rename from packages/osd-charts/.storybook-docs/preview-head.html
rename to packages/osd-charts/storybook-docs/preview-head.html
diff --git a/packages/osd-charts/.storybook-docs/style.scss b/packages/osd-charts/storybook-docs/style.scss
similarity index 100%
rename from packages/osd-charts/.storybook-docs/style.scss
rename to packages/osd-charts/storybook-docs/style.scss
diff --git a/packages/osd-charts/.storybook-docs/theme_service.ts b/packages/osd-charts/storybook-docs/theme_service.ts
similarity index 100%
rename from packages/osd-charts/.storybook-docs/theme_service.ts
rename to packages/osd-charts/storybook-docs/theme_service.ts
diff --git a/packages/osd-charts/storybook-docs/tsconfig.json b/packages/osd-charts/storybook-docs/tsconfig.json
new file mode 100644
index 000000000000..d165383705ba
--- /dev/null
+++ b/packages/osd-charts/storybook-docs/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "../tsconfig",
+  "include": ["../src/**/*", "../stories/**/*", "./**/*", "config.ts"],
+  "exclude": ["../**/*.test.*"]
+}
diff --git a/packages/osd-charts/.storybook-docs/webpack.config.js b/packages/osd-charts/storybook-docs/webpack.config.js
similarity index 94%
rename from packages/osd-charts/.storybook-docs/webpack.config.js
rename to packages/osd-charts/storybook-docs/webpack.config.js
index 353dd2e190d3..84676457ab49 100644
--- a/packages/osd-charts/.storybook-docs/webpack.config.js
+++ b/packages/osd-charts/storybook-docs/webpack.config.js
@@ -37,8 +37,6 @@ const scssLoaders = [
 ];
 
 module.exports = async ({ config }) => {
-  // config.plugins.push(new webpack.EnvironmentPlugin({ RNG_SEED: null }));
-
   // Replace default css rules with nonce
   config.module.rules = config.module.rules.filter(({ test }) => !test.test('.css'));
   config.module.rules.push({
@@ -61,7 +59,7 @@ module.exports = async ({ config }) => {
 
   config.module.rules.push({
     test: /\.scss$/,
-    include: [path.resolve(__dirname, '../.storybook'), path.resolve(__dirname, '../node_modules/@elastic')],
+    include: [path.resolve(__dirname, '../storybook'), path.resolve(__dirname, '../node_modules/@elastic')],
     use: [
       {
         loader: 'style-loader',
diff --git a/packages/osd-charts/.storybook/addons.ts b/packages/osd-charts/storybook/addons.ts
similarity index 100%
rename from packages/osd-charts/.storybook/addons.ts
rename to packages/osd-charts/storybook/addons.ts
diff --git a/packages/osd-charts/.storybook/config.ts b/packages/osd-charts/storybook/config.ts
similarity index 90%
rename from packages/osd-charts/.storybook/config.ts
rename to packages/osd-charts/storybook/config.ts
index 6ebf39a7c579..feb51113e849 100644
--- a/packages/osd-charts/.storybook/config.ts
+++ b/packages/osd-charts/storybook/config.ts
@@ -22,11 +22,17 @@ import { withKnobs } from '@storybook/addon-knobs';
 import { addDecorator, configure, addParameters } from '@storybook/react';
 import { create } from '@storybook/theming';
 
+import { preloadIcons } from './preload_icons';
 import { switchTheme } from './theme_service';
 import './style.scss';
 
 switchTheme('light');
 
+if (process.env.STORYBOOK_VRT) {
+  preloadIcons();
+  document.querySelector('html')?.classList.add('disable-animations');
+}
+
 addParameters({
   options: {
     theme: create({
diff --git a/packages/osd-charts/storybook/preload_icons.ts b/packages/osd-charts/storybook/preload_icons.ts
new file mode 100644
index 000000000000..add678be4782
--- /dev/null
+++ b/packages/osd-charts/storybook/preload_icons.ts
@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+
+// @ts-ignore
+import { appendIconComponentCache } from '../node_modules/@elastic/eui/es/components/icon/icon';
+
+/**
+ * Loads nessecery icons to prevent loading vrt diff
+ *
+ * https://github.com/elastic/eui/blob/b2ffddee61913202224f2967599436ca95265879/src-docs/src/views/guidelines/getting_started.md#failing-icon-imports
+ */
+export const preloadIcons = () => {
+  /* eslint-disable global-require, @typescript-eslint/no-var-requires */
+
+  /*
+   * See icon file name/path map
+   * https://github.com/elastic/eui/blob/b2ffddee61913202224f2967599436ca95265879/src/components/icon/icon.tsx#L39
+   */
+  appendIconComponentCache({
+    arrowUp: require('@elastic/eui/es/components/icon/assets/arrow_up').icon,
+    arrowLeft: require('@elastic/eui/es/components/icon/assets/arrow_left').icon,
+    arrowDown: require('@elastic/eui/es/components/icon/assets/arrow_down').icon,
+    arrowRight: require('@elastic/eui/es/components/icon/assets/arrow_right').icon,
+    iInCircle: require('@elastic/eui/es/components/icon/assets/iInCircle').icon,
+    tokenKey: require('@elastic/eui/es/components/icon/assets/tokens/tokenKey').icon,
+    filter: require('@elastic/eui/es/components/icon/assets/filter').icon,
+    starFilled: require('@elastic/eui/es/components/icon/assets/star_filled').icon,
+    pencil: require('@elastic/eui/es/components/icon/assets/pencil').icon,
+    visualizeApp: require('@elastic/eui/es/components/icon/assets/app_visualize').icon,
+  });
+
+  /* eslint-enable global-require, @typescript-eslint/no-var-requires */
+};
diff --git a/packages/osd-charts/.storybook/preview-head.html b/packages/osd-charts/storybook/preview-head.html
similarity index 100%
rename from packages/osd-charts/.storybook/preview-head.html
rename to packages/osd-charts/storybook/preview-head.html
diff --git a/packages/osd-charts/.storybook/style.scss b/packages/osd-charts/storybook/style.scss
similarity index 64%
rename from packages/osd-charts/.storybook/style.scss
rename to packages/osd-charts/storybook/style.scss
index 7e0bf21bca58..cbfdf5ecfcce 100644
--- a/packages/osd-charts/.storybook/style.scss
+++ b/packages/osd-charts/storybook/style.scss
@@ -31,18 +31,26 @@ html {
   z-index: 500;
   box-sizing: border-box;
   background-color: blanchedalmond;
+}
+
+html.disable-animations {
+  *,
+  *::after,
+  *::before {
+    transition-delay: 0s !important;
+    transition-duration: 0s !important;
+    animation-delay: -0.0001s !important;
+    animation-duration: 0s !important;
+    animation-play-state: paused !important;
+    caret-color: transparent !important;
+  }
+
+  .echLegend .echLegendListContainer :focus {
+    animation-duration: 0s !important; // remove focus animation but keep border
+  }
 
-  &.disable-animations {
-    *,
-    *::after,
-    *::before {
-      transition-delay: 0s !important;
-      transition-duration: 0s !important;
-      animation-delay: -0.0001s !important;
-      animation-duration: 0s !important;
-      animation-play-state: paused !important;
-      caret-color: transparent !important;
-    }
+  .euiSaturation:focus .euiSaturation__indicator {
+    animation: none !important; // fix color picker dot
   }
 }
 
diff --git a/packages/osd-charts/.storybook/theme_service.ts b/packages/osd-charts/storybook/theme_service.ts
similarity index 100%
rename from packages/osd-charts/.storybook/theme_service.ts
rename to packages/osd-charts/storybook/theme_service.ts
diff --git a/packages/osd-charts/storybook/tsconfig.json b/packages/osd-charts/storybook/tsconfig.json
new file mode 100644
index 000000000000..c1d5890418a4
--- /dev/null
+++ b/packages/osd-charts/storybook/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "../tsconfig",
+  "include": ["../src/**/*", "../stories/**/*", "./**/*", "../storybook-docs/config.docs.ts"],
+  "exclude": ["../**/*.test.*"]
+}
diff --git a/packages/osd-charts/.storybook/webpack.config.js b/packages/osd-charts/storybook/webpack.config.js
similarity index 97%
rename from packages/osd-charts/.storybook/webpack.config.js
rename to packages/osd-charts/storybook/webpack.config.js
index 024719f3fe04..be92df8e1cf7 100644
--- a/packages/osd-charts/.storybook/webpack.config.js
+++ b/packages/osd-charts/storybook/webpack.config.js
@@ -108,7 +108,7 @@ module.exports = async ({ config }) => {
 
   config.module.rules.push({
     test: /\.scss$/,
-    include: [path.resolve(__dirname, '../.storybook'), path.resolve(__dirname, '../node_modules/@elastic')],
+    include: [path.resolve(__dirname, '../storybook'), path.resolve(__dirname, '../node_modules/@elastic')],
     use: [
       {
         loader: 'style-loader',
diff --git a/packages/osd-charts/tsconfig.json b/packages/osd-charts/tsconfig.json
index 5daff1d1f24d..82aa8fa15518 100644
--- a/packages/osd-charts/tsconfig.json
+++ b/packages/osd-charts/tsconfig.json
@@ -17,8 +17,9 @@
     "allowJs": false,
     "skipLibCheck": true,
     "downlevelIteration": true,
-    "typeRoots": ["./node_modules/@types/", "./global.d.ts"],
     "stripInternal": true,
-    "resolveJsonModule": true
-  }
+    "resolveJsonModule": true,
+    "typeRoots": ["./node_modules/@types", "./global.d.ts"]
+  },
+  "files": ["./global.d.ts", "./scripts/custom_matchers.ts"]
 }
diff --git a/packages/osd-charts/tsconfig.lib-check.json b/packages/osd-charts/tsconfig.lib-check.json
index 75d4a3ecd511..2a9f6bd4e4ee 100644
--- a/packages/osd-charts/tsconfig.lib-check.json
+++ b/packages/osd-charts/tsconfig.lib-check.json
@@ -7,5 +7,6 @@
     "skipLibCheck": false,
     "rootDir": "dist"
   },
+  "files": [],
   "include": ["dist"]
 }
diff --git a/packages/osd-charts/tsconfig.lib-nocomments.json b/packages/osd-charts/tsconfig.lib-nocomments.json
index 220f6c9ad290..f2480c7c3cf5 100644
--- a/packages/osd-charts/tsconfig.lib-nocomments.json
+++ b/packages/osd-charts/tsconfig.lib-nocomments.json
@@ -4,5 +4,6 @@
     "declaration": false,
     "declarationMap": false
   },
+  "files": [],
   "extends": "./tsconfig.lib"
 }
diff --git a/packages/osd-charts/tsconfig.lib.json b/packages/osd-charts/tsconfig.lib.json
index 1b7c6ac707e4..87e0d270bf51 100644
--- a/packages/osd-charts/tsconfig.lib.json
+++ b/packages/osd-charts/tsconfig.lib.json
@@ -4,6 +4,7 @@
     "removeComments": false
   },
   "extends": "./tsconfig",
+  "files": [],
   "include": ["src/**/*"],
   "exclude": ["**/*.test.*", "**/__mocks__", "src/mocks/**/*", "src/utils/data_samples/**/*"]
 }
diff --git a/packages/osd-charts/tsconfig.lint.json b/packages/osd-charts/tsconfig.lint.json
index 14ae921ce531..92b72f371834 100644
--- a/packages/osd-charts/tsconfig.lint.json
+++ b/packages/osd-charts/tsconfig.lint.json
@@ -3,5 +3,5 @@
   "compilerOptions": {
     "allowJs": true
   },
-  "include": ["./**/*", "./.*.js", "./.playground/**/*", "./.storybook/**/*", "./.storybook-docs/**/*"]
+  "include": ["./**/*", "./.*.js"]
 }