diff --git a/src/legacy/core_plugins/region_map/public/components/region_map_options.tsx b/src/legacy/core_plugins/region_map/public/components/region_map_options.tsx
index 61cfbf00ded9e..187b27953830d 100644
--- a/src/legacy/core_plugins/region_map/public/components/region_map_options.tsx
+++ b/src/legacy/core_plugins/region_map/public/components/region_map_options.tsx
@@ -24,7 +24,11 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 import { FileLayerField, VectorLayer, ServiceSettings } from 'ui/vis/map/service_settings';
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-import { NumberInputOption, SelectOption, SwitchOption } from '../../../vis_type_vislib/public';
+import {
+  NumberInputOption,
+  SelectOption,
+  SwitchOption,
+} from '../../../../../plugins/charts/public';
 import { WmsOptions } from '../../../tile_map/public/components/wms_options';
 import { RegionMapVisParams } from '../types';
 
diff --git a/src/legacy/core_plugins/tile_map/public/components/tile_map_options.tsx b/src/legacy/core_plugins/tile_map/public/components/tile_map_options.tsx
index 9169647aa2aef..9ca42fe3e4074 100644
--- a/src/legacy/core_plugins/tile_map/public/components/tile_map_options.tsx
+++ b/src/legacy/core_plugins/tile_map/public/components/tile_map_options.tsx
@@ -27,7 +27,7 @@ import {
   RangeOption,
   SelectOption,
   SwitchOption,
-} from '../../../vis_type_vislib/public';
+} from '../../../../../plugins/charts/public';
 import { WmsOptions } from './wms_options';
 import { TileMapVisParams } from '../types';
 import { MapTypes } from '../map_types';
diff --git a/src/legacy/core_plugins/tile_map/public/components/wms_internal_options.tsx b/src/legacy/core_plugins/tile_map/public/components/wms_internal_options.tsx
index b81667400303d..47f5b8f31e62b 100644
--- a/src/legacy/core_plugins/tile_map/public/components/wms_internal_options.tsx
+++ b/src/legacy/core_plugins/tile_map/public/components/wms_internal_options.tsx
@@ -21,7 +21,7 @@ import React from 'react';
 import { EuiLink, EuiSpacer, EuiText, EuiScreenReaderOnly } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { TextInputOption } from '../../../vis_type_vislib/public';
+import { TextInputOption } from '../../../../../plugins/charts/public';
 import { WMSOptions } from '../types';
 
 interface WmsInternalOptions {
diff --git a/src/legacy/core_plugins/tile_map/public/components/wms_options.tsx b/src/legacy/core_plugins/tile_map/public/components/wms_options.tsx
index 27127b781cd4d..b8535e72e8818 100644
--- a/src/legacy/core_plugins/tile_map/public/components/wms_options.tsx
+++ b/src/legacy/core_plugins/tile_map/public/components/wms_options.tsx
@@ -25,7 +25,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { TmsLayer } from 'ui/vis/map/service_settings';
 import { Vis } from '../../../../../plugins/visualizations/public';
 import { RegionMapVisParams } from '../../../region_map/public/types';
-import { SelectOption, SwitchOption } from '../../../vis_type_vislib/public';
+import { SelectOption, SwitchOption } from '../../../../../plugins/charts/public';
 import { WmsInternalOptions } from './wms_internal_options';
 import { WMSOptions, TileMapVisParams } from '../types';
 
diff --git a/src/legacy/core_plugins/vis_type_markdown/public/settings_options.tsx b/src/legacy/core_plugins/vis_type_markdown/public/settings_options.tsx
index 552fd63373554..16b2749c34e10 100644
--- a/src/legacy/core_plugins/vis_type_markdown/public/settings_options.tsx
+++ b/src/legacy/core_plugins/vis_type_markdown/public/settings_options.tsx
@@ -22,7 +22,7 @@ import { EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-import { RangeOption, SwitchOption } from '../../vis_type_vislib/public';
+import { RangeOption, SwitchOption } from '../../../../plugins/charts/public';
 import { MarkdownVisParams } from './types';
 
 function SettingsOptions({ stateParams, setValue }: VisOptionsProps<MarkdownVisParams>) {
diff --git a/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_options.tsx b/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_options.tsx
index 5c3032511f09a..56af0ee91878f 100644
--- a/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_options.tsx
+++ b/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_options.tsx
@@ -37,9 +37,9 @@ import {
   SwitchOption,
   RangeOption,
   SetColorSchemaOptionsValue,
-} from '../../../vis_type_vislib/public';
+  SetColorRangeValue,
+} from '../../../../../plugins/charts/public';
 import { MetricVisParam, VisParams } from '../types';
-import { SetColorRangeValue } from '../../../vis_type_vislib/public/components/common/color_ranges';
 
 function MetricVisOptions({
   stateParams,
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 03b412c6fff15..52784da1bd73b 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
@@ -26,9 +26,8 @@ import {
   Render,
   Style,
 } from '../../../../plugins/expressions/public';
-import { ColorModes } from '../../vis_type_vislib/public';
 import { visType, DimensionsVisParam, VisParams } from './types';
-import { ColorSchemas, vislibColorMaps } from '../../../../plugins/charts/public';
+import { ColorSchemas, vislibColorMaps, ColorModes } from '../../../../plugins/charts/public';
 
 export type Input = KibanaDatatable;
 
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 3bbb8964122e5..ab31c56921412 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
@@ -21,8 +21,7 @@ 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 { ColorSchemas, colorSchemas } from '../../../../plugins/charts/public';
+import { ColorSchemas, colorSchemas, ColorModes } from '../../../../plugins/charts/public';
 import { AggGroupNames } from '../../../../plugins/data/public';
 import { Schemas } from '../../../../plugins/vis_default_editor/public';
 
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 cae18dd8a2ab1..cdf62cba934d7 100644
--- a/src/legacy/core_plugins/vis_type_metric/public/types.ts
+++ b/src/legacy/core_plugins/vis_type_metric/public/types.ts
@@ -19,8 +19,7 @@
 
 import { Range } from '../../../../plugins/expressions/public';
 import { SchemaConfig } from '../../../../plugins/visualizations/public';
-import { ColorModes, Labels, Style } from '../../vis_type_vislib/public';
-import { ColorSchemas } from '../../../../plugins/charts/public';
+import { ColorModes, ColorSchemas, Labels, Style } from '../../../../plugins/charts/public';
 
 export const visType = 'metric';
 
diff --git a/src/legacy/core_plugins/vis_type_table/public/components/table_vis_options.tsx b/src/legacy/core_plugins/vis_type_table/public/components/table_vis_options.tsx
index d01ab31e0a843..265528f33f9cd 100644
--- a/src/legacy/core_plugins/vis_type_table/public/components/table_vis_options.tsx
+++ b/src/legacy/core_plugins/vis_type_table/public/components/table_vis_options.tsx
@@ -25,7 +25,11 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { search } from '../../../../../plugins/data/public';
-import { NumberInputOption, SwitchOption, SelectOption } from '../../../vis_type_vislib/public';
+import {
+  SwitchOption,
+  SelectOption,
+  NumberInputOption,
+} from '../../../../../plugins/charts/public';
 import { TableVisParams } from '../types';
 import { totalAggregations } from './utils';
 
diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_options.tsx b/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_options.tsx
index 80e4e1de7ddab..7a64549edd747 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_options.tsx
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_options.tsx
@@ -22,7 +22,7 @@ import { EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { ValidatedDualRange } from '../../../../../../src/plugins/kibana_react/public';
-import { SelectOption, SwitchOption } from '../../../vis_type_vislib/public';
+import { SelectOption, SwitchOption } from '../../../../../plugins/charts/public';
 import { TagCloudVisParams } from '../types';
 
 function TagCloudOptions({ stateParams, setValue, vis }: VisOptionsProps<TagCloudVisParams>) {
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 68decacaaa040..8a196da64fc4b 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/area.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/area.ts
@@ -33,13 +33,13 @@ import {
   AxisTypes,
   ScaleTypes,
   AxisModes,
-  Rotates,
   ThresholdLineStyles,
   getConfigCollections,
 } from './utils/collections';
 import { getAreaOptionTabs, countLabel } from './utils/common_config';
 import { createVislibVisController } from './vis_controller';
 import { VisTypeVislibDependencies } from './plugin';
+import { Rotates } from '../../../../plugins/charts/public';
 
 export const createAreaVisTypeDefinition = (deps: VisTypeVislibDependencies) => ({
   name: 'area',
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/common/index.ts b/src/legacy/core_plugins/vis_type_vislib/public/components/common/index.ts
index 05972d101f576..f0bec3167cb7c 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/common/index.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/components/common/index.ts
@@ -17,13 +17,5 @@
  * under the License.
  */
 
-export { BasicOptions } from './basic_options';
-export { ColorRanges } from './color_ranges';
-export { ColorSchemaOptions, SetColorSchemaOptionsValue } from './color_schema';
-export { NumberInputOption } from './number_input';
-export { RangeOption } from './range';
-export { SelectOption } from './select';
-export { SwitchOption } from './switch';
-export { TextInputOption } from './text_input';
 export { TruncateLabelsOption } from './truncate_labels';
 export { ValidationWrapper, ValidationVisOptionsProps } from './validation_wrapper';
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/gauge/labels_panel.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/gauge/labels_panel.tsx
index b9bae1cad35e7..3fca9dc8adc08 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/gauge/labels_panel.tsx
+++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/gauge/labels_panel.tsx
@@ -22,7 +22,7 @@ import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { SwitchOption, TextInputOption } from '../../common';
+import { SwitchOption, TextInputOption } from '../../../../../../../plugins/charts/public';
 import { GaugeOptionsInternalProps } from '.';
 
 function LabelsPanel({ stateParams, setValue, setGaugeValue }: GaugeOptionsInternalProps) {
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 7de64e5888096..433cc4edeb47b 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,16 @@ import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { ColorRanges, ColorSchemaOptions, SwitchOption } from '../../common';
+import {
+  ColorRanges,
+  ColorSchemaOptions,
+  ColorSchemaParams,
+  SetColorRangeValue,
+  SwitchOption,
+  ColorSchemas,
+} from '../../../../../../../plugins/charts/public';
 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,
@@ -39,7 +43,7 @@ function RangesPanel({
   vis,
 }: GaugeOptionsInternalProps) {
   const setColorSchemaOptions = useCallback(
-    <T extends keyof ColorSchemaVislibParams>(paramName: T, value: ColorSchemaVislibParams[T]) => {
+    <T extends keyof ColorSchemaParams>(paramName: T, value: ColorSchemaParams[T]) => {
       setGaugeValue(paramName, value as Gauge[T]);
       // set outline if color schema is changed to greys
       // if outline wasn't set explicitly yet
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/gauge/style_panel.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/gauge/style_panel.tsx
index 9254c3c18347c..48711de7d171a 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/gauge/style_panel.tsx
+++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/gauge/style_panel.tsx
@@ -22,7 +22,7 @@ import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { SelectOption } from '../../common';
+import { SelectOption } from '../../../../../../../plugins/charts/public';
 import { GaugeOptionsInternalProps } from '.';
 import { AggGroupNames } from '../../../../../../../plugins/data/public';
 
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/heatmap/index.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/heatmap/index.tsx
index 715b5902b69da..dc207ad89286f 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/heatmap/index.tsx
+++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/heatmap/index.tsx
@@ -31,12 +31,12 @@ import {
   NumberInputOption,
   SelectOption,
   SwitchOption,
-} from '../../common';
-import { SetColorSchemaOptionsValue } from '../../common/color_schema';
+  SetColorSchemaOptionsValue,
+  SetColorRangeValue,
+} from '../../../../../../../plugins/charts/public';
 import { HeatmapVisParams } from '../../../heatmap';
 import { ValueAxis } from '../../../types';
 import { LabelsPanel } from './labels_panel';
-import { SetColorRangeValue } from '../../common/color_ranges';
 
 function HeatmapOptions(props: VisOptionsProps<HeatmapVisParams>) {
   const { stateParams, vis, uiState, setValue, setValidity, setTouched } = props;
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/heatmap/labels_panel.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/heatmap/labels_panel.tsx
index 38811bd836459..3d1629740df2c 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/heatmap/labels_panel.tsx
+++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/heatmap/labels_panel.tsx
@@ -26,7 +26,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { ValueAxis } from '../../../types';
 import { HeatmapVisParams } from '../../../heatmap';
-import { SwitchOption } from '../../common';
+import { SwitchOption } from '../../../../../../../plugins/charts/public';
 
 const VERTICAL_ROTATION = 270;
 
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/category_axis_panel.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/category_axis_panel.tsx
index 915885388640c..246c20a14807c 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/category_axis_panel.tsx
+++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/category_axis_panel.tsx
@@ -25,7 +25,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { Axis } from '../../../types';
-import { SelectOption, SwitchOption } from '../../common';
+import { SelectOption, SwitchOption } from '../../../../../../../plugins/charts/public';
 import { LabelOptions, SetAxisLabel } from './label_options';
 import { Positions } from '../../../utils/collections';
 
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/chart_options.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/chart_options.tsx
index ec7a325ba43d1..89aab3a19c589 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/chart_options.tsx
+++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/chart_options.tsx
@@ -25,7 +25,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { Vis } from '../../../../../../../plugins/visualizations/public';
 import { SeriesParam, ValueAxis } from '../../../types';
 import { ChartTypes } from '../../../utils/collections';
-import { SelectOption } from '../../common';
+import { SelectOption } from '../../../../../../../plugins/charts/public';
 import { LineOptions } from './line_options';
 import { SetParamByIndex, ChangeValueAxis } from './';
 
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/custom_extents_options.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/custom_extents_options.tsx
index 53b2ffa55a941..a3a97df9e35ae 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/custom_extents_options.tsx
+++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/custom_extents_options.tsx
@@ -21,7 +21,7 @@ import React, { useCallback, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 
 import { ValueAxis } from '../../../types';
-import { NumberInputOption, SwitchOption } from '../../common';
+import { NumberInputOption, SwitchOption } from '../../../../../../../plugins/charts/public';
 import { YExtents } from './y_extents';
 import { SetScale } from './value_axis_options';
 
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/label_options.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/label_options.tsx
index b6b54193e9f4a..bc687e56646f6 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/label_options.tsx
+++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/label_options.tsx
@@ -24,8 +24,9 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { Axis } from '../../../types';
-import { SelectOption, SwitchOption, TruncateLabelsOption } from '../../common';
+import { TruncateLabelsOption } from '../../common';
 import { getRotateOptions } from '../../../utils/collections';
+import { SelectOption, SwitchOption } from '../../../../../../../plugins/charts/public';
 
 export type SetAxisLabel = <T extends keyof Axis['labels']>(
   paramName: T,
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/line_options.test.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/line_options.test.tsx
index 1d29d39bfcb7f..5354bc9c033e6 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/line_options.test.tsx
+++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/line_options.test.tsx
@@ -20,7 +20,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { LineOptions, LineOptionsParams } from './line_options';
-import { NumberInputOption } from '../../common';
+import { NumberInputOption } from '../../../../../../../plugins/charts/public';
 import { seriesParam, vis } from './mocks';
 
 jest.mock('ui/new_platform');
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/line_options.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/line_options.tsx
index 01a69a6fac70b..76f95bd93caf8 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/line_options.tsx
+++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/line_options.tsx
@@ -24,7 +24,11 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
 import { Vis } from '../../../../../../../plugins/visualizations/public';
 import { SeriesParam } from '../../../types';
-import { NumberInputOption, SelectOption, SwitchOption } from '../../common';
+import {
+  NumberInputOption,
+  SelectOption,
+  SwitchOption,
+} from '../../../../../../../plugins/charts/public';
 import { SetChart } from './chart_options';
 
 export interface LineOptionsParams {
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/mocks.ts b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/mocks.ts
index 0d9fa8c25a4f7..a296281375dac 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/mocks.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/mocks.ts
@@ -18,7 +18,7 @@
  */
 
 import { Vis } from '../../../../../../../plugins/visualizations/public';
-import { Axis, ValueAxis, SeriesParam, Style } from '../../../types';
+import { Axis, ValueAxis, SeriesParam } from '../../../types';
 import {
   ChartTypes,
   ChartModes,
@@ -31,6 +31,7 @@ import {
   getPositions,
   getInterpolationModes,
 } from '../../../utils/collections';
+import { Style } from '../../../../../../../plugins/charts/public';
 
 const defaultValueAxisId = 'ValueAxis-1';
 
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.test.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.test.tsx
index 955867e66d09f..876a6917ee0b4 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.test.tsx
+++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.test.tsx
@@ -21,7 +21,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { ValueAxisOptions, ValueAxisOptionsParams } from './value_axis_options';
 import { ValueAxis } from '../../../types';
-import { TextInputOption } from '../../common';
+import { TextInputOption } from '../../../../../../../plugins/charts/public';
 import { LabelOptions } from './label_options';
 import { ScaleTypes, Positions } from '../../../utils/collections';
 import { valueAxis, vis } from './mocks';
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.tsx
index 8f0327e78c7ab..1b89a766d0591 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.tsx
+++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.tsx
@@ -24,7 +24,11 @@ import { EuiSpacer, EuiAccordion, EuiHorizontalRule } from '@elastic/eui';
 import { Vis } from '../../../../../../../plugins/visualizations/public';
 import { ValueAxis } from '../../../types';
 import { Positions } from '../../../utils/collections';
-import { SelectOption, SwitchOption, TextInputOption } from '../../common';
+import {
+  SelectOption,
+  SwitchOption,
+  TextInputOption,
+} from '../../../../../../../plugins/charts/public';
 import { LabelOptions, SetAxisLabel } from './label_options';
 import { CustomExtentsOptions } from './custom_extents_options';
 import { isAxisHorizontal } from './utils';
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/y_extents.test.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/y_extents.test.tsx
index 17c47b35b20dc..b5ed475ca8e31 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/y_extents.test.tsx
+++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/y_extents.test.tsx
@@ -21,7 +21,7 @@ import React from 'react';
 import { mount, shallow } from 'enzyme';
 import { YExtents, YExtentsProps } from './y_extents';
 import { ScaleTypes } from '../../../utils/collections';
-import { NumberInputOption } from '../../common';
+import { NumberInputOption } from '../../../../../../../plugins/charts/public';
 
 jest.mock('ui/new_platform');
 
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/y_extents.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/y_extents.tsx
index c0db58a612e71..faeb6069b5126 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/y_extents.tsx
+++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/metrics_axes/y_extents.tsx
@@ -23,7 +23,7 @@ import { i18n } from '@kbn/i18n';
 
 import { Scale } from '../../../types';
 import { ScaleTypes } from '../../../utils/collections';
-import { NumberInputOption } from '../../common';
+import { NumberInputOption } from '../../../../../../../plugins/charts/public';
 import { SetScale } from './value_axis_options';
 
 const rangeError = i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.minErrorMessage', {
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/pie.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/pie.tsx
index 4c0be456aad64..f6be9cd0bd8fe 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/pie.tsx
+++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/pie.tsx
@@ -23,7 +23,8 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-import { BasicOptions, TruncateLabelsOption, SwitchOption } from '../common';
+import { TruncateLabelsOption } from '../common';
+import { BasicOptions, SwitchOption } from '../../../../../../plugins/charts/public';
 import { PieVisParams } from '../../pie';
 
 function PieOptions(props: VisOptionsProps<PieVisParams>) {
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/point_series/grid_panel.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/point_series/grid_panel.tsx
index bb2b3f8fddb49..392d180d2c5f2 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/point_series/grid_panel.tsx
+++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/point_series/grid_panel.tsx
@@ -23,7 +23,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-import { SelectOption, SwitchOption } from '../../common';
+import { SelectOption, SwitchOption } from '../../../../../../../plugins/charts/public';
 import { BasicVislibParams, ValueAxis } from '../../../types';
 
 function GridPanel({ stateParams, setValue, hasHistogramAgg }: VisOptionsProps<BasicVislibParams>) {
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/point_series/point_series.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/point_series/point_series.tsx
index b9872ab94bd0b..903c1917751d9 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/point_series/point_series.tsx
+++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/point_series/point_series.tsx
@@ -21,7 +21,8 @@ import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { BasicOptions, SwitchOption, ValidationVisOptionsProps } from '../../common';
+import { ValidationVisOptionsProps } from '../../common';
+import { BasicOptions, SwitchOption } from '../../../../../../../plugins/charts/public';
 import { GridPanel } from './grid_panel';
 import { ThresholdPanel } from './threshold_panel';
 import { BasicVislibParams } from '../../../types';
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/point_series/threshold_panel.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/point_series/threshold_panel.tsx
index 7866ad74ede7f..12f058ec7dd1f 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/point_series/threshold_panel.tsx
+++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/point_series/threshold_panel.tsx
@@ -21,8 +21,12 @@ import { EuiPanel, EuiTitle, EuiColorPicker, EuiFormRow, EuiSpacer } from '@elas
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { SelectOption, SwitchOption, ValidationVisOptionsProps } from '../../common';
-import { NumberInputOption } from '../../common/required_number_input';
+import { ValidationVisOptionsProps } from '../../common';
+import {
+  SelectOption,
+  SwitchOption,
+  RequiredNumberInputOption,
+} from '../../../../../../../plugins/charts/public';
 import { BasicVislibParams } from '../../../types';
 
 function ThresholdPanel({
@@ -73,7 +77,7 @@ function ThresholdPanel({
 
       {stateParams.thresholdLine.show && (
         <>
-          <NumberInputOption
+          <RequiredNumberInputOption
             label={i18n.translate('visTypeVislib.editors.pointSeries.thresholdLine.valueLabel', {
               defaultMessage: 'Threshold value',
             })}
@@ -83,7 +87,7 @@ function ThresholdPanel({
             setValidity={setThresholdLineValidity}
           />
 
-          <NumberInputOption
+          <RequiredNumberInputOption
             label={i18n.translate('visTypeVislib.editors.pointSeries.thresholdLine.widthLabel', {
               defaultMessage: 'Line width',
             })}
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 7ad821dbf2f30..5e0b2b8fbd36c 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/gauge.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/gauge.ts
@@ -22,13 +22,18 @@ import { i18n } from '@kbn/i18n';
 import { RangeValues, Schemas } from '../../../../plugins/vis_default_editor/public';
 import { AggGroupNames } from '../../../../plugins/data/public';
 import { GaugeOptions } from './components/options';
-import { getGaugeCollections, Alignments, ColorModes, GaugeTypes } from './utils/collections';
+import { getGaugeCollections, Alignments, GaugeTypes } from './utils/collections';
+import {
+  ColorModes,
+  ColorSchemas,
+  ColorSchemaParams,
+  Labels,
+  Style,
+} from '../../../../plugins/charts/public';
 import { createVislibVisController } from './vis_controller';
-import { ColorSchemaVislibParams, Labels, Style } from './types';
 import { VisTypeVislibDependencies } from './plugin';
-import { ColorSchemas } from '../../../../plugins/charts/public';
 
-export interface Gauge extends ColorSchemaVislibParams {
+export interface Gauge extends ColorSchemaParams {
   backStyle: 'Full';
   gaugeStyle: 'Full';
   orientation: 'vertical';
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 6c311bebe0717..0f70dca69728d 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/goal.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/goal.ts
@@ -20,10 +20,10 @@
 import { i18n } from '@kbn/i18n';
 
 import { GaugeOptions } from './components/options';
-import { getGaugeCollections, GaugeTypes, ColorModes } from './utils/collections';
+import { getGaugeCollections, GaugeTypes } from './utils/collections';
 import { createVislibVisController } from './vis_controller';
 import { VisTypeVislibDependencies } from './plugin';
-import { ColorSchemas } from '../../../../plugins/charts/public';
+import { ColorModes, ColorSchemas } from '../../../../plugins/charts/public';
 import { AggGroupNames } from '../../../../plugins/data/public';
 import { Schemas } from '../../../../plugins/vis_default_editor/public';
 
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 88b4f0fcaf87e..9feed60b984ba 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/heatmap.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/heatmap.ts
@@ -25,11 +25,11 @@ import { AxisTypes, getHeatmapCollections, Positions, ScaleTypes } from './utils
 import { HeatmapOptions } from './components/options';
 import { createVislibVisController } from './vis_controller';
 import { TimeMarker } from './vislib/visualizations/time_marker';
-import { CommonVislibParams, ColorSchemaVislibParams, ValueAxis } from './types';
+import { CommonVislibParams, ValueAxis } from './types';
 import { VisTypeVislibDependencies } from './plugin';
-import { ColorSchemas } from '../../../../plugins/charts/public';
+import { ColorSchemas, ColorSchemaParams } from '../../../../plugins/charts/public';
 
-export interface HeatmapVisParams extends CommonVislibParams, ColorSchemaVislibParams {
+export interface HeatmapVisParams extends CommonVislibParams, ColorSchemaParams {
   type: 'heatmap';
   addLegend: boolean;
   enableHover: boolean;
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 54ec8f98203e2..54ccf66f362ca 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/histogram.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/histogram.ts
@@ -32,13 +32,13 @@ import {
   AxisTypes,
   ScaleTypes,
   AxisModes,
-  Rotates,
   ThresholdLineStyles,
   getConfigCollections,
 } from './utils/collections';
 import { getAreaOptionTabs, countLabel } from './utils/common_config';
 import { createVislibVisController } from './vis_controller';
 import { VisTypeVislibDependencies } from './plugin';
+import { Rotates } from '../../../../plugins/charts/public';
 
 export const createHistogramVisTypeDefinition = (deps: VisTypeVislibDependencies) => ({
   name: 'histogram',
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 dc47252ccd44f..6f73271726660 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
@@ -32,13 +32,13 @@ import {
   AxisTypes,
   ScaleTypes,
   AxisModes,
-  Rotates,
   ThresholdLineStyles,
   getConfigCollections,
 } from './utils/collections';
 import { getAreaOptionTabs, countLabel } from './utils/common_config';
 import { createVislibVisController } from './vis_controller';
 import { VisTypeVislibDependencies } from './plugin';
+import { Rotates } from '../../../../plugins/charts/public';
 
 export const createHorizontalBarVisTypeDefinition = (deps: VisTypeVislibDependencies) => ({
   name: '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 1f773c4efcb02..4d7091ffb204b 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/index.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/index.ts
@@ -24,18 +24,4 @@ export function plugin(initializerContext: PluginInitializerContext) {
   return new Plugin(initializerContext);
 }
 
-export {
-  BasicOptions,
-  RangeOption,
-  ColorRanges,
-  SelectOption,
-  SetColorSchemaOptionsValue,
-  ColorSchemaOptions,
-  NumberInputOption,
-  SwitchOption,
-  TextInputOption,
-} from './components';
-
-export { ColorModes } from './utils/collections';
-
 export * from './types';
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 885ab295d11e1..1f9a8d77398e6 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/line.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/line.ts
@@ -32,7 +32,6 @@ import {
   AxisTypes,
   ScaleTypes,
   AxisModes,
-  Rotates,
   ThresholdLineStyles,
   InterpolationModes,
   getConfigCollections,
@@ -40,6 +39,7 @@ import {
 import { getAreaOptionTabs, countLabel } from './utils/common_config';
 import { createVislibVisController } from './vis_controller';
 import { VisTypeVislibDependencies } from './plugin';
+import { Rotates } from '../../../../plugins/charts/public';
 
 export const createLineVisTypeDefinition = (deps: VisTypeVislibDependencies) => ({
   name: 'line',
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 f33b42483c53e..25c6ae5439fe8 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/types.ts
+++ b/src/legacy/core_plugins/vis_type_vislib/public/types.ts
@@ -25,39 +25,16 @@ import {
   AxisModes,
   AxisTypes,
   InterpolationModes,
-  Rotates,
   ScaleTypes,
   ThresholdLineStyles,
 } from './utils/collections';
-import { ColorSchemas } from '../../../../plugins/charts/public';
+import { Labels, Style } from '../../../../plugins/charts/public';
 
 export interface CommonVislibParams {
   addTooltip: boolean;
   legendPosition: Positions;
 }
 
-export interface ColorSchemaVislibParams {
-  colorSchema: ColorSchemas;
-  invertColors: boolean;
-}
-
-export interface Labels {
-  color?: string;
-  filter?: boolean;
-  overwriteColor?: boolean;
-  rotate?: Rotates;
-  show: boolean;
-  truncate?: number | null;
-}
-
-export interface Style {
-  bgFill: string;
-  bgColor: boolean;
-  labelColor: boolean;
-  subText: string;
-  fontSize: number;
-}
-
 export interface Scale {
   boundsMargin?: number | '';
   defaultYExtents?: 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 f32b765cd6e57..2024c43dd1c8b 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
@@ -20,7 +20,7 @@
 import { i18n } from '@kbn/i18n';
 import { $Values } from '@kbn/utility-types';
 
-import { colorSchemas } from '../../../../../plugins/charts/public';
+import { colorSchemas, Rotates } from '../../../../../plugins/charts/public';
 
 export const Positions = Object.freeze({
   RIGHT: 'right' as 'right',
@@ -203,13 +203,6 @@ const getAxisModes = () => [
   },
 ];
 
-export const Rotates = Object.freeze({
-  HORIZONTAL: 0,
-  VERTICAL: 90,
-  ANGLED: 75,
-});
-export type Rotates = $Values<typeof Rotates>;
-
 export const ThresholdLineStyles = Object.freeze({
   FULL: 'full' as 'full',
   DASHED: 'dashed' as 'dashed',
@@ -265,13 +258,6 @@ export const GaugeTypes = Object.freeze({
 });
 export type GaugeTypes = $Values<typeof GaugeTypes>;
 
-export const ColorModes = Object.freeze({
-  BACKGROUND: 'Background' as 'Background',
-  LABELS: 'Labels' as 'Labels',
-  NONE: 'None' as 'None',
-});
-export type ColorModes = $Values<typeof ColorModes>;
-
 const getGaugeTypes = () => [
   {
     text: i18n.translate('visTypeVislib.gauge.gaugeTypes.arcText', {
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/common/basic_options.tsx b/src/plugins/charts/public/static/components/basic_options.tsx
similarity index 90%
rename from src/legacy/core_plugins/vis_type_vislib/public/components/common/basic_options.tsx
rename to src/plugins/charts/public/static/components/basic_options.tsx
index baf3e8ecd1b28..cac4c8d70d796 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/common/basic_options.tsx
+++ b/src/plugins/charts/public/static/components/basic_options.tsx
@@ -37,7 +37,7 @@ function BasicOptions<VisParams extends BasicOptionsParams>({
   return (
     <>
       <SelectOption
-        label={i18n.translate('visTypeVislib.controls.vislibBasicOptions.legendPositionLabel', {
+        label={i18n.translate('charts.controls.vislibBasicOptions.legendPositionLabel', {
           defaultMessage: 'Legend position',
         })}
         options={vis.type.editorConfig.collections.legendPositions}
@@ -46,7 +46,7 @@ function BasicOptions<VisParams extends BasicOptionsParams>({
         setValue={setValue}
       />
       <SwitchOption
-        label={i18n.translate('visTypeVislib.controls.vislibBasicOptions.showTooltipLabel', {
+        label={i18n.translate('charts.controls.vislibBasicOptions.showTooltipLabel', {
           defaultMessage: 'Show tooltip',
         })}
         paramName="addTooltip"
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/common/utils.ts b/src/plugins/charts/public/static/components/collections.ts
similarity index 67%
rename from src/legacy/core_plugins/vis_type_vislib/public/components/common/utils.ts
rename to src/plugins/charts/public/static/components/collections.ts
index d51631106dda7..9dde50f2b44c9 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/common/utils.ts
+++ b/src/plugins/charts/public/static/components/collections.ts
@@ -17,18 +17,18 @@
  * under the License.
  */
 
-import { useEffect } from 'react';
+import { $Values } from '@kbn/utility-types';
 
-function useValidation<ParamName extends string>(
-  setValidity: (paramName: ParamName, isValid: boolean) => void,
-  paramName: ParamName,
-  isValid: boolean
-) {
-  useEffect(() => {
-    setValidity(paramName, isValid);
+export const ColorModes = Object.freeze({
+  BACKGROUND: 'Background' as 'Background',
+  LABELS: 'Labels' as 'Labels',
+  NONE: 'None' as 'None',
+});
+export type ColorModes = $Values<typeof ColorModes>;
 
-    return () => setValidity(paramName, true);
-  }, [isValid, paramName, setValidity]);
-}
-
-export { useValidation };
+export const Rotates = Object.freeze({
+  HORIZONTAL: 0,
+  VERTICAL: 90,
+  ANGLED: 75,
+});
+export type Rotates = $Values<typeof Rotates>;
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/common/color_ranges.tsx b/src/plugins/charts/public/static/components/color_ranges.tsx
similarity index 93%
rename from src/legacy/core_plugins/vis_type_vislib/public/components/common/color_ranges.tsx
rename to src/plugins/charts/public/static/components/color_ranges.tsx
index 84c70f10b12da..a9b05d7d91c7c 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/common/color_ranges.tsx
+++ b/src/plugins/charts/public/static/components/color_ranges.tsx
@@ -22,10 +22,7 @@ import { last } from 'lodash';
 
 import { i18n } from '@kbn/i18n';
 
-import {
-  RangeValues,
-  RangesParamEditor,
-} from '../../../../../../plugins/vis_default_editor/public';
+import { RangeValues, RangesParamEditor } from '../../../../vis_default_editor/public';
 
 export type SetColorRangeValue = (paramName: string, value: RangeValues[]) => void;
 
@@ -74,7 +71,7 @@ function ColorRanges({
   return (
     <RangesParamEditor
       data-test-subj={dataTestSubj}
-      error={i18n.translate('visTypeVislib.controls.colorRanges.errorText', {
+      error={i18n.translate('charts.controls.colorRanges.errorText', {
         defaultMessage: 'Each range should be greater than previous.',
       })}
       hidePlaceholders={true}
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/common/color_schema.tsx b/src/plugins/charts/public/static/components/color_schema.tsx
similarity index 82%
rename from src/legacy/core_plugins/vis_type_vislib/public/components/common/color_schema.tsx
rename to src/plugins/charts/public/static/components/color_schema.tsx
index 35d7f7b13235e..62fe3143f0481 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/common/color_schema.tsx
+++ b/src/plugins/charts/public/static/components/color_schema.tsx
@@ -25,15 +25,15 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { SelectOption } from './select';
 import { SwitchOption } from './switch';
-import { ColorSchemaVislibParams } from '../../types';
-import { ColorSchema } from '../../../../../../plugins/charts/public';
+import { ColorSchemaParams } from './types';
+import { ColorSchema } from '../color_maps';
 
-export type SetColorSchemaOptionsValue = <T extends keyof ColorSchemaVislibParams>(
+export type SetColorSchemaOptionsValue = <T extends keyof ColorSchemaParams>(
   paramName: T,
-  value: ColorSchemaVislibParams[T]
+  value: ColorSchemaParams[T]
 ) => void;
 
-interface ColorSchemaOptionsProps extends ColorSchemaVislibParams {
+interface ColorSchemaOptionsProps extends ColorSchemaParams {
   disabled?: boolean;
   colorSchemas: ColorSchema[];
   uiState: VisOptionsProps['uiState'];
@@ -67,7 +67,7 @@ function ColorSchemaOptions({
         }}
       >
         <FormattedMessage
-          id="visTypeVislib.controls.colorSchema.resetColorsButtonLabel"
+          id="charts.controls.colorSchema.resetColorsButtonLabel"
           defaultMessage="Reset colors"
         />
       </EuiLink>
@@ -80,11 +80,11 @@ function ColorSchemaOptions({
         disabled={disabled}
         helpText={
           showHelpText &&
-          i18n.translate('visTypeVislib.controls.colorSchema.howToChangeColorsDescription', {
+          i18n.translate('charts.controls.colorSchema.howToChangeColorsDescription', {
             defaultMessage: 'Individual colors can be changed in the legend.',
           })
         }
-        label={i18n.translate('visTypeVislib.controls.colorSchema.colorSchemaLabel', {
+        label={i18n.translate('charts.controls.colorSchema.colorSchemaLabel', {
           defaultMessage: 'Color schema',
         })}
         labelAppend={isCustomColors && resetColorsButton}
@@ -96,7 +96,7 @@ function ColorSchemaOptions({
 
       <SwitchOption
         disabled={disabled}
-        label={i18n.translate('visTypeVislib.controls.colorSchema.reverseColorSchemaLabel', {
+        label={i18n.translate('charts.controls.colorSchema.reverseColorSchemaLabel', {
           defaultMessage: 'Reverse schema',
         })}
         paramName="invertColors"
diff --git a/src/plugins/charts/public/static/components/index.ts b/src/plugins/charts/public/static/components/index.ts
new file mode 100644
index 0000000000000..48c9e40145481
--- /dev/null
+++ b/src/plugins/charts/public/static/components/index.ts
@@ -0,0 +1,30 @@
+/*
+ * 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 { BasicOptions } from './basic_options';
+export { ColorModes, Rotates } from './collections';
+export { ColorRanges, SetColorRangeValue } from './color_ranges';
+export { ColorSchemaOptions, SetColorSchemaOptionsValue } from './color_schema';
+export { ColorSchemaParams, Labels, Style } from './types';
+export { NumberInputOption } from './number_input';
+export { RangeOption } from './range';
+export { RequiredNumberInputOption } from './required_number_input';
+export { SelectOption } from './select';
+export { SwitchOption } from './switch';
+export { TextInputOption } from './text_input';
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/common/number_input.tsx b/src/plugins/charts/public/static/components/number_input.tsx
similarity index 100%
rename from src/legacy/core_plugins/vis_type_vislib/public/components/common/number_input.tsx
rename to src/plugins/charts/public/static/components/number_input.tsx
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/common/range.tsx b/src/plugins/charts/public/static/components/range.tsx
similarity index 96%
rename from src/legacy/core_plugins/vis_type_vislib/public/components/common/range.tsx
rename to src/plugins/charts/public/static/components/range.tsx
index 56774f8898bb7..5c713180924df 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/common/range.tsx
+++ b/src/plugins/charts/public/static/components/range.tsx
@@ -49,7 +49,7 @@ function RangeOption<ParamName extends string>({
   const [stateValue, setStateValue] = useState(value);
   const [isValidState, setIsValidState] = useState(true);
 
-  const error = i18n.translate('visTypeVislib.controls.rangeErrorMessage', {
+  const error = i18n.translate('charts.controls.rangeErrorMessage', {
     defaultMessage: 'Values must be on or between {min} and {max}',
     values: { min, max },
   });
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/common/required_number_input.tsx b/src/plugins/charts/public/static/components/required_number_input.tsx
similarity index 87%
rename from src/legacy/core_plugins/vis_type_vislib/public/components/common/required_number_input.tsx
rename to src/plugins/charts/public/static/components/required_number_input.tsx
index 7b62016c4e502..7594c775b07ad 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/common/required_number_input.tsx
+++ b/src/plugins/charts/public/static/components/required_number_input.tsx
@@ -17,9 +17,8 @@
  * under the License.
  */
 
-import React, { ReactNode, useCallback, ChangeEvent } from 'react';
+import React, { ReactNode, useCallback, ChangeEvent, useEffect } from 'react';
 import { EuiFormRow, EuiFieldNumber } from '@elastic/eui';
-import { useValidation } from './utils';
 
 interface NumberInputOptionProps<ParamName extends string> {
   disabled?: boolean;
@@ -42,7 +41,7 @@ interface NumberInputOptionProps<ParamName extends string> {
  *
  * @param {number} props.value Should be numeric only
  */
-function NumberInputOption<ParamName extends string>({
+function RequiredNumberInputOption<ParamName extends string>({
   disabled,
   error,
   isInvalid,
@@ -57,7 +56,12 @@ function NumberInputOption<ParamName extends string>({
   'data-test-subj': dataTestSubj,
 }: NumberInputOptionProps<ParamName>) {
   const isValid = value !== null;
-  useValidation(setValidity, paramName, isValid);
+
+  useEffect(() => {
+    setValidity(paramName, isValid);
+
+    return () => setValidity(paramName, true);
+  }, [isValid, paramName, setValidity]);
 
   const onChange = useCallback(
     (ev: ChangeEvent<HTMLInputElement>) =>
@@ -84,4 +88,4 @@ function NumberInputOption<ParamName extends string>({
   );
 }
 
-export { NumberInputOption };
+export { RequiredNumberInputOption };
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/common/select.tsx b/src/plugins/charts/public/static/components/select.tsx
similarity index 100%
rename from src/legacy/core_plugins/vis_type_vislib/public/components/common/select.tsx
rename to src/plugins/charts/public/static/components/select.tsx
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/common/switch.tsx b/src/plugins/charts/public/static/components/switch.tsx
similarity index 100%
rename from src/legacy/core_plugins/vis_type_vislib/public/components/common/switch.tsx
rename to src/plugins/charts/public/static/components/switch.tsx
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/common/text_input.tsx b/src/plugins/charts/public/static/components/text_input.tsx
similarity index 100%
rename from src/legacy/core_plugins/vis_type_vislib/public/components/common/text_input.tsx
rename to src/plugins/charts/public/static/components/text_input.tsx
diff --git a/src/plugins/charts/public/static/components/types.ts b/src/plugins/charts/public/static/components/types.ts
new file mode 100644
index 0000000000000..196eb60b06aec
--- /dev/null
+++ b/src/plugins/charts/public/static/components/types.ts
@@ -0,0 +1,43 @@
+/*
+ * 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 } from '../color_maps';
+import { Rotates } from './collections';
+
+export interface ColorSchemaParams {
+  colorSchema: ColorSchemas;
+  invertColors: boolean;
+}
+
+export interface Labels {
+  color?: string;
+  filter?: boolean;
+  overwriteColor?: boolean;
+  rotate?: Rotates;
+  show: boolean;
+  truncate?: number | null;
+}
+
+export interface Style {
+  bgFill: string;
+  bgColor: boolean;
+  labelColor: boolean;
+  subText: string;
+  fontSize: number;
+}
diff --git a/src/plugins/charts/public/static/index.ts b/src/plugins/charts/public/static/index.ts
index bee58e4f1e3e1..6fc097d05467f 100644
--- a/src/plugins/charts/public/static/index.ts
+++ b/src/plugins/charts/public/static/index.ts
@@ -18,3 +18,4 @@
  */
 
 export * from './color_maps';
+export * from './components';
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index a0f90730a8b95..fbca466cb02c4 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -130,6 +130,14 @@
     "charts.colormaps.greysText": "グレー",
     "charts.colormaps.redsText": "赤",
     "charts.colormaps.yellowToRedText": "黄色から赤",
+    "charts.controls.colorRanges.errorText": "各範囲は前の範囲よりも大きくなければなりません。",
+    "charts.controls.colorSchema.colorSchemaLabel": "配色",
+    "charts.controls.colorSchema.howToChangeColorsDescription": "それぞれの色は凡例で変更できます。",
+    "charts.controls.colorSchema.resetColorsButtonLabel": "色をリセット",
+    "charts.controls.colorSchema.reverseColorSchemaLabel": "図表を反転",
+    "charts.controls.rangeErrorMessage": "値は {min} と {max} の間でなければなりません",
+    "charts.controls.vislibBasicOptions.legendPositionLabel": "凡例位置",
+    "charts.controls.vislibBasicOptions.showTooltipLabel": "ツールヒントを表示",
     "common.ui.errorAutoCreateIndex.breadcrumbs.errorText": "エラー",
     "common.ui.errorAutoCreateIndex.errorDescription": "Elasticsearch クラスターの {autoCreateIndexActionConfig} 設定が原因で、Kibana が保存されたオブジェクトを格納するインデックスを自動的に作成できないようです。Kibana は、保存されたオブジェクトインデックスが適切なマッピング/スキーマを使用し Kibana から Elasticsearch へのポーリングの回数を減らすための最適な手段であるため、この Elasticsearch の機能を使用します。",
     "common.ui.errorAutoCreateIndex.errorDisclaimer": "申し訳ございませんが、この問題が解決されるまで Kibana で何も保存することができません。",
@@ -3838,11 +3846,6 @@
     "visTypeVislib.chartTypes.areaText": "エリア",
     "visTypeVislib.chartTypes.barText": "バー",
     "visTypeVislib.chartTypes.lineText": "折れ線",
-    "visTypeVislib.controls.colorRanges.errorText": "各範囲は前の範囲よりも大きくなければなりません。",
-    "visTypeVislib.controls.colorSchema.colorSchemaLabel": "配色",
-    "visTypeVislib.controls.colorSchema.howToChangeColorsDescription": "それぞれの色は凡例で変更できます。",
-    "visTypeVislib.controls.colorSchema.resetColorsButtonLabel": "色をリセット",
-    "visTypeVislib.controls.colorSchema.reverseColorSchemaLabel": "図表を反転",
     "visTypeVislib.controls.gaugeOptions.alignmentLabel": "アラインメント",
     "visTypeVislib.controls.gaugeOptions.autoExtendRangeLabel": "範囲を自動拡張",
     "visTypeVislib.controls.gaugeOptions.displayWarningsLabel": "警告を表示",
@@ -3909,10 +3912,7 @@
     "visTypeVislib.controls.pointSeries.valueAxes.toggleCustomExtendsAriaLabel": "カスタム範囲を切り替える",
     "visTypeVislib.controls.pointSeries.valueAxes.toggleOptionsAriaLabel": "{axisName} オプションを切り替える",
     "visTypeVislib.controls.pointSeries.valueAxes.yAxisTitle": "Y 軸",
-    "visTypeVislib.controls.rangeErrorMessage": "値は {min} と {max} の間でなければなりません",
     "visTypeVislib.controls.truncateLabel": "切り捨て",
-    "visTypeVislib.controls.vislibBasicOptions.legendPositionLabel": "凡例位置",
-    "visTypeVislib.controls.vislibBasicOptions.showTooltipLabel": "ツールヒントを表示",
     "visTypeVislib.editors.heatmap.basicSettingsTitle": "基本設定",
     "visTypeVislib.editors.heatmap.heatmapSettingsTitle": "ヒートマップ設定",
     "visTypeVislib.editors.heatmap.highlightLabel": "ハイライト範囲",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index c098c902d59c9..24c7553f86f4e 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -130,6 +130,14 @@
     "charts.colormaps.greysText": "灰色",
     "charts.colormaps.redsText": "红色",
     "charts.colormaps.yellowToRedText": "黄到红",
+    "charts.controls.colorRanges.errorText": "每个范围应大于前一范围。",
+    "charts.controls.colorSchema.colorSchemaLabel": "颜色模式",
+    "charts.controls.colorSchema.howToChangeColorsDescription": "可以更改图例中的各个颜色。",
+    "charts.controls.colorSchema.resetColorsButtonLabel": "重置颜色",
+    "charts.controls.colorSchema.reverseColorSchemaLabel": "反转模式",
+    "charts.controls.rangeErrorMessage": "值必须是在 {min} 到 {max} 的范围内",
+    "charts.controls.vislibBasicOptions.legendPositionLabel": "图例位置",
+    "charts.controls.vislibBasicOptions.showTooltipLabel": "显示工具提示",
     "common.ui.errorAutoCreateIndex.breadcrumbs.errorText": "错误",
     "common.ui.errorAutoCreateIndex.errorDescription": "似乎 Elasticsearch 集群的 {autoCreateIndexActionConfig} 设置使 Kibana 无法自动创建用于存储已保存对象的索引。Kibana 将使用此 Elasticsearch 功能，因为这是确保已保存对象索引使用正确映射/架构的最好方式，而且其允许 Kibana 较少地轮询 Elasticsearch。",
     "common.ui.errorAutoCreateIndex.errorDisclaimer": "但是，只有解决了此问题后，您才能在 Kibana 保存内容。",
@@ -3839,11 +3847,6 @@
     "visTypeVislib.chartTypes.areaText": "面积图",
     "visTypeVislib.chartTypes.barText": "条形图",
     "visTypeVislib.chartTypes.lineText": "折线图",
-    "visTypeVislib.controls.colorRanges.errorText": "每个范围应大于前一范围。",
-    "visTypeVislib.controls.colorSchema.colorSchemaLabel": "颜色模式",
-    "visTypeVislib.controls.colorSchema.howToChangeColorsDescription": "可以更改图例中的各个颜色。",
-    "visTypeVislib.controls.colorSchema.resetColorsButtonLabel": "重置颜色",
-    "visTypeVislib.controls.colorSchema.reverseColorSchemaLabel": "反转模式",
     "visTypeVislib.controls.gaugeOptions.alignmentLabel": "对齐方式",
     "visTypeVislib.controls.gaugeOptions.autoExtendRangeLabel": "自动扩展范围",
     "visTypeVislib.controls.gaugeOptions.displayWarningsLabel": "显示警告",
@@ -3910,10 +3913,7 @@
     "visTypeVislib.controls.pointSeries.valueAxes.toggleCustomExtendsAriaLabel": "切换定制范围",
     "visTypeVislib.controls.pointSeries.valueAxes.toggleOptionsAriaLabel": "切换 {axisName} 选项",
     "visTypeVislib.controls.pointSeries.valueAxes.yAxisTitle": "Y 轴",
-    "visTypeVislib.controls.rangeErrorMessage": "值必须是在 {min} 到 {max} 的范围内",
     "visTypeVislib.controls.truncateLabel": "截断",
-    "visTypeVislib.controls.vislibBasicOptions.legendPositionLabel": "图例位置",
-    "visTypeVislib.controls.vislibBasicOptions.showTooltipLabel": "显示工具提示",
     "visTypeVislib.editors.heatmap.basicSettingsTitle": "基本设置",
     "visTypeVislib.editors.heatmap.heatmapSettingsTitle": "热图设置",
     "visTypeVislib.editors.heatmap.highlightLabel": "高亮范围",