diff --git a/docs/developer/plugin-list.asciidoc b/docs/developer/plugin-list.asciidoc
index e32984f911d97..d4d2b229eeba7 100644
--- a/docs/developer/plugin-list.asciidoc
+++ b/docs/developer/plugin-list.asciidoc
@@ -272,7 +272,7 @@ heatmap charts.
 
 |{kib-repo}blob/{branch}/src/plugins/vis_type_xy/README.md[visTypeXy]
 |Contains the new xy-axis chart using the elastic-charts library, which will eventually
-replace the vislib xy-axis (bar, area, line) charts.
+replace the vislib xy-axis charts including bar, area, and line.
 
 
 |{kib-repo}blob/{branch}/src/plugins/visualizations/README.md[visualizations]
diff --git a/docs/management/advanced-options.asciidoc b/docs/management/advanced-options.asciidoc
index 6244a43b54f72..9a87d4c9d886a 100644
--- a/docs/management/advanced-options.asciidoc
+++ b/docs/management/advanced-options.asciidoc
@@ -453,6 +453,9 @@ of buckets to try to represent.
 ==== Visualization
 
 [horizontal]
+[[visualization-visualize-chartslibrary]]`visualization:visualize:chartsLibrary`::
+Enables the new charts library for area, line, and bar charts in visualization panels. Does *not* support the split chart aggregation.
+
 [[visualization-colormapping]]`visualization:colorMapping`::
 **This setting is deprecated and will not be supported as of 8.0.**
 Maps values to specific colors in *Visualize* charts and *TSVB*. This setting does not apply to *Lens*.
diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml
index c58d010a1f317..08d883a7cbb4d 100644
--- a/packages/kbn-optimizer/limits.yml
+++ b/packages/kbn-optimizer/limits.yml
@@ -6,7 +6,7 @@ pageLoadAssetSize:
   beatsManagement: 188135
   bfetch: 41874
   canvas: 1066647
-  charts: 159211
+  charts: 195358
   cloud: 21076
   console: 46091
   core: 692106
@@ -98,7 +98,7 @@ pageLoadAssetSize:
   visTypeTimeseries: 155203
   visTypeVega: 153573
   visTypeVislib: 242838
-  visTypeXy: 20255
+  visTypeXy: 113478
   visualizations: 295025
   visualize: 57431
   watcher: 43598
diff --git a/src/plugins/charts/public/services/legacy_colors/colors.test.ts b/src/plugins/charts/public/services/legacy_colors/colors.test.ts
index 89cf7a4817377..b94918426c525 100644
--- a/src/plugins/charts/public/services/legacy_colors/colors.test.ts
+++ b/src/plugins/charts/public/services/legacy_colors/colors.test.ts
@@ -62,14 +62,17 @@ describe('Vislib Color Service', () => {
 
   it('should throw an error if input is not an array', () => {
     expect(() => {
+      // @ts-expect-error
       colors.createColorLookupFunction(200);
     }).toThrowError();
 
     expect(() => {
+      // @ts-expect-error
       colors.createColorLookupFunction('help');
     }).toThrowError();
 
     expect(() => {
+      // @ts-expect-error
       colors.createColorLookupFunction(true);
     }).toThrowError();
 
@@ -78,10 +81,12 @@ describe('Vislib Color Service', () => {
     }).toThrowError();
 
     expect(() => {
+      // @ts-expect-error
       colors.createColorLookupFunction(nullValue);
     }).toThrowError();
 
     expect(() => {
+      // @ts-expect-error
       colors.createColorLookupFunction(emptyObject);
     }).toThrowError();
   });
@@ -89,14 +94,17 @@ describe('Vislib Color Service', () => {
   describe('when array is not composed of numbers, strings, or undefined values', () => {
     it('should throw an error', () => {
       expect(() => {
+        // @ts-expect-error
         colors.createColorLookupFunction(arrayOfObjects);
       }).toThrowError();
 
       expect(() => {
+        // @ts-expect-error
         colors.createColorLookupFunction(arrayOfBooleans);
       }).toThrowError();
 
       expect(() => {
+        // @ts-expect-error
         colors.createColorLookupFunction(arrayOfNullValues);
       }).toThrowError();
     });
@@ -113,6 +121,7 @@ describe('Vislib Color Service', () => {
       }).not.toThrowError();
 
       expect(() => {
+        // @ts-expect-error
         colors.createColorLookupFunction(arrayOfUndefinedValues);
       }).not.toThrowError();
     });
diff --git a/src/plugins/charts/public/services/legacy_colors/colors.ts b/src/plugins/charts/public/services/legacy_colors/colors.ts
index e1342a114f8df..e367a780fb292 100644
--- a/src/plugins/charts/public/services/legacy_colors/colors.ts
+++ b/src/plugins/charts/public/services/legacy_colors/colors.ts
@@ -48,7 +48,7 @@ export class LegacyColorsService {
   }
 
   createColorLookupFunction(
-    arrayOfStringsOrNumbers?: any,
+    arrayOfStringsOrNumbers?: Array<string | number>,
     colorMapping: Partial<Record<string, string>> = {}
   ) {
     if (!Array.isArray(arrayOfStringsOrNumbers)) {
@@ -67,7 +67,7 @@ export class LegacyColorsService {
 
     this.mappedColors.mapKeys(arrayOfStringsOrNumbers);
 
-    return (value: string) => {
+    return (value: string | number) => {
       return colorMapping[value] || this.mappedColors.get(value);
     };
   }
diff --git a/src/plugins/charts/public/static/components/basic_options.tsx b/src/plugins/charts/public/static/components/basic_options.tsx
index cac4c8d70d796..9c5a22543df99 100644
--- a/src/plugins/charts/public/static/components/basic_options.tsx
+++ b/src/plugins/charts/public/static/components/basic_options.tsx
@@ -18,9 +18,11 @@
  */
 
 import React from 'react';
+
 import { i18n } from '@kbn/i18n';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
+import { VisOptionsProps } from '../../../../vis_default_editor/public';
+
 import { SwitchOption } from './switch';
 import { SelectOption } from './select';
 
diff --git a/src/plugins/charts/public/static/components/collections.ts b/src/plugins/charts/public/static/components/collections.ts
index 9dde50f2b44c9..16d875836a202 100644
--- a/src/plugins/charts/public/static/components/collections.ts
+++ b/src/plugins/charts/public/static/components/collections.ts
@@ -18,17 +18,22 @@
  */
 
 import { $Values } from '@kbn/utility-types';
+import { i18n } from '@kbn/i18n';
 
-export const ColorModes = Object.freeze({
-  BACKGROUND: 'Background' as 'Background',
-  LABELS: 'Labels' as 'Labels',
-  NONE: 'None' as 'None',
+export const ColorMode = Object.freeze({
+  Background: 'Background' as 'Background',
+  Labels: 'Labels' as 'Labels',
+  None: 'None' as 'None',
 });
-export type ColorModes = $Values<typeof ColorModes>;
+export type ColorMode = $Values<typeof ColorMode>;
 
-export const Rotates = Object.freeze({
-  HORIZONTAL: 0,
-  VERTICAL: 90,
-  ANGLED: 75,
+export const LabelRotation = Object.freeze({
+  Horizontal: 0,
+  Vertical: 90,
+  Angled: 75,
+});
+export type LabelRotation = $Values<typeof LabelRotation>;
+
+export const defaultCountLabel = i18n.translate('charts.countText', {
+  defaultMessage: 'Count',
 });
-export type Rotates = $Values<typeof Rotates>;
diff --git a/src/plugins/charts/public/static/components/color_picker.scss b/src/plugins/charts/public/static/components/color_picker.scss
new file mode 100644
index 0000000000000..85bfefca41a09
--- /dev/null
+++ b/src/plugins/charts/public/static/components/color_picker.scss
@@ -0,0 +1,18 @@
+$visColorPickerWidth: $euiSizeL * 8; // 8 columns
+
+.visColorPicker__value {
+  width: $visColorPickerWidth;
+}
+
+.visColorPicker__valueDot {
+  cursor: pointer;
+
+  &:hover {
+    transform: scale(1.4);
+  }
+
+  &-isSelected {
+    border: $euiSizeXS solid;
+    border-radius: 100%;
+  }
+}
diff --git a/src/plugins/charts/public/static/components/color_picker.tsx b/src/plugins/charts/public/static/components/color_picker.tsx
new file mode 100644
index 0000000000000..d785a9c9ad4b7
--- /dev/null
+++ b/src/plugins/charts/public/static/components/color_picker.tsx
@@ -0,0 +1,138 @@
+/*
+ * 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 classNames from 'classnames';
+import React, { BaseSyntheticEvent } from 'react';
+
+import { EuiButtonEmpty, EuiFlexItem, EuiIcon } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import './color_picker.scss';
+
+export const legendColors: string[] = [
+  '#3F6833',
+  '#967302',
+  '#2F575E',
+  '#99440A',
+  '#58140C',
+  '#052B51',
+  '#511749',
+  '#3F2B5B',
+  '#508642',
+  '#CCA300',
+  '#447EBC',
+  '#C15C17',
+  '#890F02',
+  '#0A437C',
+  '#6D1F62',
+  '#584477',
+  '#629E51',
+  '#E5AC0E',
+  '#64B0C8',
+  '#E0752D',
+  '#BF1B00',
+  '#0A50A1',
+  '#962D82',
+  '#614D93',
+  '#7EB26D',
+  '#EAB839',
+  '#6ED0E0',
+  '#EF843C',
+  '#E24D42',
+  '#1F78C1',
+  '#BA43A9',
+  '#705DA0',
+  '#9AC48A',
+  '#F2C96D',
+  '#65C5DB',
+  '#F9934E',
+  '#EA6460',
+  '#5195CE',
+  '#D683CE',
+  '#806EB7',
+  '#B7DBAB',
+  '#F4D598',
+  '#70DBED',
+  '#F9BA8F',
+  '#F29191',
+  '#82B5D8',
+  '#E5A8E2',
+  '#AEA2E0',
+  '#E0F9D7',
+  '#FCEACA',
+  '#CFFAFF',
+  '#F9E2D2',
+  '#FCE2DE',
+  '#BADFF4',
+  '#F9D9F9',
+  '#DEDAF7',
+];
+
+interface ColorPickerProps {
+  id?: string;
+  label: string | number | null;
+  onChange: (color: string | null, event: BaseSyntheticEvent) => void;
+  color: string;
+}
+
+export const ColorPicker = ({ onChange, color: selectedColor, id, label }: ColorPickerProps) => (
+  <div className="visColorPicker">
+    <span id={`${id}ColorPickerDesc`} className="euiScreenReaderOnly">
+      <FormattedMessage
+        id="charts.colorPicker.setColor.screenReaderDescription"
+        defaultMessage="Set color for value {legendDataLabel}"
+        values={{ legendDataLabel: label }}
+      />
+    </span>
+    <div className="visColorPicker__value" role="listbox">
+      {legendColors.map((color) => (
+        <EuiIcon
+          role="option"
+          tabIndex={0}
+          type="dot"
+          size="l"
+          color={selectedColor}
+          key={color}
+          aria-label={color}
+          aria-describedby={`${id}ColorPickerDesc`}
+          aria-selected={color === selectedColor}
+          onClick={(e) => onChange(color, e)}
+          onKeyPress={(e) => onChange(color, e)}
+          className={classNames('visColorPicker__valueDot', {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            'visColorPicker__valueDot-isSelected': color === selectedColor,
+          })}
+          style={{ color }}
+          data-test-subj={`visColorPickerColor-${color}`}
+        />
+      ))}
+    </div>
+    {legendColors.some((c) => c === selectedColor) && (
+      <EuiFlexItem grow={false}>
+        <EuiButtonEmpty
+          size="s"
+          onClick={(e: any) => onChange(null, e)}
+          onKeyPress={(e: any) => onChange(null, e)}
+        >
+          <FormattedMessage id="charts.colorPicker.clearColor" defaultMessage="Clear color" />
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+    )}
+  </div>
+);
diff --git a/src/plugins/charts/public/static/components/current_time.tsx b/src/plugins/charts/public/static/components/current_time.tsx
new file mode 100644
index 0000000000000..00c1a74a7bfd8
--- /dev/null
+++ b/src/plugins/charts/public/static/components/current_time.tsx
@@ -0,0 +1,64 @@
+/*
+ * 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 moment, { Moment } from 'moment';
+import React, { FC } from 'react';
+
+import { LineAnnotation, AnnotationDomainTypes, LineAnnotationStyle } from '@elastic/charts';
+import lightEuiTheme from '@elastic/eui/dist/eui_theme_light.json';
+import darkEuiTheme from '@elastic/eui/dist/eui_theme_dark.json';
+
+interface CurrentTimeProps {
+  isDarkMode: boolean;
+  domainEnd?: number | Moment;
+}
+
+/**
+ * Render current time line annotation on @elastic/charts `Chart`
+ */
+export const CurrentTime: FC<CurrentTimeProps> = ({ isDarkMode, domainEnd }) => {
+  const lineAnnotationStyle: Partial<LineAnnotationStyle> = {
+    line: {
+      strokeWidth: 2,
+      stroke: isDarkMode ? darkEuiTheme.euiColorDanger : lightEuiTheme.euiColorDanger,
+      opacity: 0.7,
+    },
+  };
+
+  // Domain end of 'now' will be milliseconds behind current time, so we extend time by 1 minute and check if
+  // the annotation is within this range; if so, the line annotation uses the domainEnd as its value
+  const now = moment();
+  const isAnnotationAtEdge = domainEnd
+    ? moment(domainEnd).add(1, 'm').isAfter(now) && now.isAfter(domainEnd)
+    : false;
+  const lineAnnotationData = [
+    {
+      dataValue: isAnnotationAtEdge ? domainEnd : now.valueOf(),
+    },
+  ];
+
+  return (
+    <LineAnnotation
+      id="__current-time__"
+      hideTooltips
+      domainType={AnnotationDomainTypes.XDomain}
+      dataValues={lineAnnotationData}
+      style={lineAnnotationStyle}
+    />
+  );
+};
diff --git a/src/plugins/charts/public/static/components/endzones.tsx b/src/plugins/charts/public/static/components/endzones.tsx
new file mode 100644
index 0000000000000..db68f72c18c05
--- /dev/null
+++ b/src/plugins/charts/public/static/components/endzones.tsx
@@ -0,0 +1,197 @@
+/*
+ * 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 React, { FC } from 'react';
+import moment, { unitOfTime } from 'moment';
+
+import {
+  TooltipValue,
+  RectAnnotation,
+  RectAnnotationDatum,
+  RectAnnotationStyle,
+} from '@elastic/charts';
+import { i18n } from '@kbn/i18n';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer } from '@elastic/eui';
+import lightEuiTheme from '@elastic/eui/dist/eui_theme_light.json';
+import darkEuiTheme from '@elastic/eui/dist/eui_theme_dark.json';
+
+interface EndzonesProps {
+  isDarkMode: boolean;
+  domainStart: number;
+  domainEnd: number;
+  interval: number;
+  domainMin: number;
+  domainMax: number;
+  hideTooltips?: boolean;
+  /**
+   * used to toggle full bin endzones for multiple non-stacked bars
+   */
+  isFullBin?: boolean;
+}
+
+export const Endzones: FC<EndzonesProps> = ({
+  isDarkMode,
+  domainStart,
+  domainEnd,
+  interval,
+  domainMin,
+  domainMax,
+  hideTooltips = true,
+  isFullBin = false,
+}) => {
+  const rectAnnotationStyle: Partial<RectAnnotationStyle> = {
+    stroke: isDarkMode ? darkEuiTheme.euiColorLightShade : lightEuiTheme.euiColorDarkShade,
+    strokeWidth: 0,
+    opacity: isDarkMode ? 0.6 : 0.2,
+    fill: isDarkMode ? darkEuiTheme.euiColorLightShade : lightEuiTheme.euiColorDarkShade,
+  };
+
+  const rectAnnotations: RectAnnotationDatum[] = [];
+
+  if (domainStart > domainMin) {
+    rectAnnotations.push({
+      coordinates: {
+        x1: isFullBin ? domainMin : domainStart,
+      },
+    });
+  }
+
+  if (domainEnd - interval < domainMax) {
+    rectAnnotations.push({
+      coordinates: {
+        x0: isFullBin ? domainMax : domainEnd,
+      },
+    });
+  }
+
+  return (
+    <RectAnnotation
+      id="__endzones__"
+      hideTooltips={hideTooltips}
+      customTooltipDetails={Prompt}
+      zIndex={2}
+      dataValues={rectAnnotations}
+      style={rectAnnotationStyle}
+    />
+  );
+};
+
+const findIntervalFromDuration = (
+  dateValue: number,
+  esValue: number,
+  esUnit: unitOfTime.Base,
+  timeZone: string
+) => {
+  const date = moment.tz(dateValue, timeZone);
+  const startOfDate = moment.tz(date, timeZone).startOf(esUnit);
+  const endOfDate = moment.tz(date, timeZone).startOf(esUnit).add(esValue, esUnit);
+  return endOfDate.valueOf() - startOfDate.valueOf();
+};
+
+const getIntervalInMs = (
+  value: number,
+  esValue: number,
+  esUnit: unitOfTime.Base,
+  timeZone: string
+): number => {
+  switch (esUnit) {
+    case 's':
+      return 1000 * esValue;
+    case 'ms':
+      return 1 * esValue;
+    default:
+      return findIntervalFromDuration(value, esValue, esUnit, timeZone);
+  }
+};
+
+/**
+ * Returns the adjusted interval based on the data
+ *
+ * @param xValues sorted and unquie x values
+ * @param esValue
+ * @param esUnit
+ * @param timeZone
+ */
+export const getAdjustedInterval = (
+  xValues: number[],
+  esValue: number,
+  esUnit: unitOfTime.Base,
+  timeZone: string
+): number => {
+  const newInterval = xValues.reduce((minInterval, currentXvalue, index) => {
+    let currentDiff = minInterval;
+
+    if (index > 0) {
+      currentDiff = Math.abs(xValues[index - 1] - currentXvalue);
+    }
+
+    const singleUnitInterval = getIntervalInMs(currentXvalue, esValue, esUnit, timeZone);
+    return Math.min(minInterval, singleUnitInterval, currentDiff);
+  }, Number.MAX_SAFE_INTEGER);
+
+  return newInterval > 0 ? newInterval : moment.duration(esValue, esUnit).asMilliseconds();
+};
+
+const partialDataText = i18n.translate('charts.partialData.bucketTooltipText', {
+  defaultMessage:
+    'The selected time range does not include this entire bucket. It might contain partial data.',
+});
+
+const Prompt = () => (
+  <EuiFlexGroup
+    alignItems="center"
+    className="dscHistogram__header--partial"
+    responsive={false}
+    gutterSize="xs"
+  >
+    <EuiFlexItem grow={false}>
+      <EuiIcon type="iInCircle" />
+    </EuiFlexItem>
+    <EuiFlexItem>{partialDataText}</EuiFlexItem>
+  </EuiFlexGroup>
+);
+
+export const renderEndzoneTooltip = (
+  xInterval?: number,
+  domainStart?: number,
+  domainEnd?: number,
+  formatter?: (v: any) => string,
+  renderValue = true
+) => (headerData: TooltipValue): JSX.Element | string => {
+  const headerDataValue = headerData.value;
+  const formattedValue = formatter ? formatter(headerDataValue) : headerDataValue;
+
+  if (
+    (domainStart !== undefined && domainStart > headerDataValue) ||
+    (domainEnd !== undefined && xInterval !== undefined && domainEnd - xInterval < headerDataValue)
+  ) {
+    return (
+      <>
+        <Prompt />
+        {renderValue && (
+          <>
+            <EuiSpacer size="xs" />
+            <p>{formattedValue}</p>
+          </>
+        )}
+      </>
+    );
+  }
+
+  return renderValue ? formattedValue : null;
+};
diff --git a/src/plugins/charts/public/static/components/index.ts b/src/plugins/charts/public/static/components/index.ts
index 48c9e40145481..c044d361bed18 100644
--- a/src/plugins/charts/public/static/components/index.ts
+++ b/src/plugins/charts/public/static/components/index.ts
@@ -18,7 +18,7 @@
  */
 
 export { BasicOptions } from './basic_options';
-export { ColorModes, Rotates } from './collections';
+export { ColorMode, LabelRotation, defaultCountLabel } from './collections';
 export { ColorRanges, SetColorRangeValue } from './color_ranges';
 export { ColorSchemaOptions, SetColorSchemaOptionsValue } from './color_schema';
 export { ColorSchemaParams, Labels, Style } from './types';
@@ -28,3 +28,7 @@ export { RequiredNumberInputOption } from './required_number_input';
 export { SelectOption } from './select';
 export { SwitchOption } from './switch';
 export { TextInputOption } from './text_input';
+export { LegendToggle } from './legend_toggle';
+export { ColorPicker } from './color_picker';
+export { CurrentTime } from './current_time';
+export * from './endzones';
diff --git a/src/plugins/charts/public/static/components/legend_toggle.scss b/src/plugins/charts/public/static/components/legend_toggle.scss
new file mode 100644
index 0000000000000..7eb85a5e08ec0
--- /dev/null
+++ b/src/plugins/charts/public/static/components/legend_toggle.scss
@@ -0,0 +1,20 @@
+.echLegend__toggle {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  margin: $euiSizeXS;
+
+  &--isOpen {
+    background-color: $euiColorLightestShade;
+  }
+
+  &--position-left,
+  &--position-bottom {
+    left: auto;
+    bottom: auto;
+    right: 0;
+    top: 0;
+  }
+}
+
diff --git a/src/plugins/charts/public/static/components/legend_toggle.tsx b/src/plugins/charts/public/static/components/legend_toggle.tsx
new file mode 100644
index 0000000000000..12742b6da6e6b
--- /dev/null
+++ b/src/plugins/charts/public/static/components/legend_toggle.tsx
@@ -0,0 +1,62 @@
+/*
+ * 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 React, { memo, useMemo } from 'react';
+import classNames from 'classnames';
+
+import { i18n } from '@kbn/i18n';
+import { htmlIdGenerator, EuiButtonIcon } from '@elastic/eui';
+import { Position } from '@elastic/charts';
+
+import './legend_toggle.scss';
+
+interface LegendToggleProps {
+  onClick: () => void;
+  showLegend: boolean;
+  legendPosition: Position;
+}
+
+const LegendToggleComponent = ({ onClick, showLegend, legendPosition }: LegendToggleProps) => {
+  const legendId = useMemo(() => htmlIdGenerator()('legend'), []);
+
+  return (
+    <EuiButtonIcon
+      type="button"
+      iconType="list"
+      color="subdued"
+      onClick={onClick}
+      className={classNames('echLegend__toggle', `echLegend__toggle--position-${legendPosition}`, {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        'echLegend__toggle--isOpen': showLegend,
+      })}
+      aria-label={i18n.translate('charts.legend.toggleLegendButtonAriaLabel', {
+        defaultMessage: 'Toggle legend',
+      })}
+      aria-expanded={showLegend}
+      aria-controls={legendId}
+      isSelected={showLegend}
+      data-test-subj="vislibToggleLegend"
+      title={i18n.translate('charts.legend.toggleLegendButtonTitle', {
+        defaultMessage: 'Toggle legend',
+      })}
+    />
+  );
+};
+
+export const LegendToggle = memo(LegendToggleComponent);
diff --git a/src/plugins/charts/public/static/components/types.ts b/src/plugins/charts/public/static/components/types.ts
index 196eb60b06aec..a4c384141dafb 100644
--- a/src/plugins/charts/public/static/components/types.ts
+++ b/src/plugins/charts/public/static/components/types.ts
@@ -18,7 +18,7 @@
  */
 
 import { ColorSchemas } from '../color_maps';
-import { Rotates } from './collections';
+import { LabelRotation } from './collections';
 
 export interface ColorSchemaParams {
   colorSchema: ColorSchemas;
@@ -29,8 +29,8 @@ export interface Labels {
   color?: string;
   filter?: boolean;
   overwriteColor?: boolean;
-  rotate?: Rotates;
-  show: boolean;
+  rotate?: LabelRotation;
+  show?: boolean;
   truncate?: number | null;
 }
 
diff --git a/src/plugins/charts/public/static/index.ts b/src/plugins/charts/public/static/index.ts
index b8a8406c375dd..638e119d8be49 100644
--- a/src/plugins/charts/public/static/index.ts
+++ b/src/plugins/charts/public/static/index.ts
@@ -20,3 +20,4 @@
 export * from './color_maps';
 export * from './colors';
 export * from './components';
+export * from './utils';
diff --git a/src/plugins/charts/public/static/utils/index.ts b/src/plugins/charts/public/static/utils/index.ts
new file mode 100644
index 0000000000000..777deb326125e
--- /dev/null
+++ b/src/plugins/charts/public/static/utils/index.ts
@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from './transform_click_event';
diff --git a/src/plugins/charts/public/static/utils/transform_click_event.ts b/src/plugins/charts/public/static/utils/transform_click_event.ts
new file mode 100644
index 0000000000000..21460eb51e3fb
--- /dev/null
+++ b/src/plugins/charts/public/static/utils/transform_click_event.ts
@@ -0,0 +1,238 @@
+/*
+ * 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 {
+  XYChartSeriesIdentifier,
+  GeometryValue,
+  XYBrushArea,
+  Accessor,
+  AccessorFn,
+  Datum,
+} from '@elastic/charts';
+
+import { RangeSelectContext, ValueClickContext } from '../../../../embeddable/public';
+import { Datatable } from '../../../../expressions/public';
+
+export interface ClickTriggerEvent {
+  name: 'filterBucket';
+  data: ValueClickContext['data'];
+}
+
+export interface BrushTriggerEvent {
+  name: 'brush';
+  data: RangeSelectContext['data'];
+}
+
+type AllSeriesAccessors = Array<[accessor: Accessor | AccessorFn, value: string | number]>;
+
+/**
+ * returns accessor value from string or function accessor
+ * @param datum
+ * @param accessor
+ */
+function getAccessorValue(datum: Datum, accessor: Accessor | AccessorFn) {
+  if (typeof accessor === 'function') {
+    return accessor(datum);
+  }
+
+  return datum[accessor];
+}
+
+/**
+ * This is a little unorthodox, but using functional accessors makes it
+ * difficult to match the correct column. This creates a test object to throw
+ * an error when the target id is accessed, thus matcing the target column.
+ */
+function validateAccessorId(id: string, accessor: Accessor | AccessorFn) {
+  if (typeof accessor !== 'function') {
+    return id === accessor;
+  }
+
+  const matchedMessage = 'validateAccessorId matched';
+
+  try {
+    accessor({
+      get [id]() {
+        throw new Error(matchedMessage);
+      },
+    });
+    return false;
+  } catch ({ message }) {
+    return message === matchedMessage;
+  }
+}
+
+/**
+ * Groups split accessors by their accessor string or function and related value
+ *
+ * @param splitAccessors
+ * @param splitSeriesAccessorFnMap
+ */
+const getAllSplitAccessors = (
+  splitAccessors: Map<string | number, string | number>,
+  splitSeriesAccessorFnMap?: Map<string | number, AccessorFn>
+): Array<[accessor: Accessor | AccessorFn, value: string | number]> =>
+  [...splitAccessors.entries()].map(([key, value]) => [
+    splitSeriesAccessorFnMap?.get?.(key) ?? key,
+    value,
+  ]);
+
+/**
+ * Reduces matching column indexes
+ *
+ * @param xAccessor
+ * @param yAccessor
+ * @param splitAccessors
+ */
+const columnReducer = (
+  xAccessor: Accessor | AccessorFn | null,
+  yAccessor: Accessor | AccessorFn | null,
+  splitAccessors: AllSeriesAccessors
+) => (
+  acc: Array<[index: number, id: string]>,
+  { id }: Datatable['columns'][number],
+  index: number
+): Array<[index: number, id: string]> => {
+  if (
+    (xAccessor !== null && validateAccessorId(id, xAccessor)) ||
+    (yAccessor !== null && validateAccessorId(id, yAccessor)) ||
+    splitAccessors.some(([accessor]) => validateAccessorId(id, accessor))
+  ) {
+    acc.push([index, id]);
+  }
+
+  return acc;
+};
+
+/**
+ * Finds matching row index for given accessors and geometry values
+ *
+ * @param geometry
+ * @param xAccessor
+ * @param yAccessor
+ * @param splitAccessors
+ */
+const rowFindPredicate = (
+  geometry: GeometryValue | null,
+  xAccessor: Accessor | AccessorFn | null,
+  yAccessor: Accessor | AccessorFn | null,
+  splitAccessors: AllSeriesAccessors
+) => (row: Datatable['rows'][number]): boolean =>
+  (geometry === null ||
+    (xAccessor !== null &&
+      getAccessorValue(row, xAccessor) === geometry.x &&
+      yAccessor !== null &&
+      getAccessorValue(row, yAccessor) === geometry.y)) &&
+  [...splitAccessors].every(([accessor, value]) => getAccessorValue(row, accessor) === value);
+
+/**
+ * Helper function to transform `@elastic/charts` click event into filter action event
+ *
+ * @param table
+ * @param xAccessor
+ * @param splitSeriesAccessorFnMap needed when using `splitSeriesAccessors` as `AccessorFn`
+ * @param negate
+ */
+export const getFilterFromChartClickEventFn = (
+  table: Datatable,
+  xAccessor: Accessor | AccessorFn,
+  splitSeriesAccessorFnMap?: Map<string | number, AccessorFn>,
+  negate: boolean = false
+) => (points: Array<[GeometryValue, XYChartSeriesIdentifier]>): ClickTriggerEvent => {
+  const data: ValueClickContext['data']['data'] = [];
+
+  points.forEach((point) => {
+    const [geometry, { yAccessor, splitAccessors }] = point;
+    const allSplitAccessors = getAllSplitAccessors(splitAccessors, splitSeriesAccessorFnMap);
+    const columns = table.columns.reduce<Array<[index: number, id: string]>>(
+      columnReducer(xAccessor, yAccessor, allSplitAccessors),
+      []
+    );
+    const row = table.rows.findIndex(
+      rowFindPredicate(geometry, xAccessor, yAccessor, allSplitAccessors)
+    );
+    const newData = columns.map(([column, id]) => ({
+      table,
+      column,
+      row,
+      value: table.rows?.[row]?.[id] ?? null,
+    }));
+
+    data.push(...newData);
+  });
+
+  return {
+    name: 'filterBucket',
+    data: {
+      negate,
+      data,
+    },
+  };
+};
+
+/**
+ * Helper function to get filter action event from series
+ */
+export const getFilterFromSeriesFn = (table: Datatable) => (
+  { splitAccessors }: XYChartSeriesIdentifier,
+  splitSeriesAccessorFnMap?: Map<string | number, AccessorFn>,
+  negate = false
+): ClickTriggerEvent => {
+  const allSplitAccessors = getAllSplitAccessors(splitAccessors, splitSeriesAccessorFnMap);
+  const columns = table.columns.reduce<Array<[index: number, id: string]>>(
+    columnReducer(null, null, allSplitAccessors),
+    []
+  );
+  const row = table.rows.findIndex(rowFindPredicate(null, null, null, allSplitAccessors));
+  const data: ValueClickContext['data']['data'] = columns.map(([column, id]) => ({
+    table,
+    column,
+    row,
+    value: table.rows?.[row]?.[id] ?? null,
+  }));
+
+  return {
+    name: 'filterBucket',
+    data: {
+      negate,
+      data,
+    },
+  };
+};
+
+/**
+ * Helper function to transform `@elastic/charts` brush event into brush action event
+ */
+export const getBrushFromChartBrushEventFn = (
+  table: Datatable,
+  xAccessor: Accessor | AccessorFn
+) => ({ x: selectedRange }: XYBrushArea): BrushTriggerEvent => {
+  const [start, end] = selectedRange ?? [0, 0];
+  const range: [number, number] = [start, end];
+  const column = table.columns.findIndex(({ id }) => validateAccessorId(id, xAccessor));
+
+  return {
+    data: {
+      table,
+      column,
+      range,
+    },
+    name: 'brush',
+  };
+};
diff --git a/src/plugins/discover/public/application/angular/directives/histogram.tsx b/src/plugins/discover/public/application/angular/directives/histogram.tsx
index 4c39c8bb25542..5a0bd5cca6109 100644
--- a/src/plugins/discover/public/application/angular/directives/histogram.tsx
+++ b/src/plugins/discover/public/application/angular/directives/histogram.tsx
@@ -17,25 +17,17 @@
  * under the License.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer } from '@elastic/eui';
-import moment from 'moment-timezone';
-import { unitOfTime } from 'moment';
+import moment, { unitOfTime } from 'moment-timezone';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import lightEuiTheme from '@elastic/eui/dist/eui_theme_light.json';
-import darkEuiTheme from '@elastic/eui/dist/eui_theme_dark.json';
 
 import {
-  AnnotationDomainTypes,
   Axis,
   Chart,
   HistogramBarSeries,
-  LineAnnotation,
   Position,
   ScaleType,
   Settings,
-  RectAnnotation,
-  TooltipValue,
   TooltipType,
   ElementClickListener,
   XYChartElementEvent,
@@ -43,12 +35,17 @@ import {
   Theme,
 } from '@elastic/charts';
 
-import { i18n } from '@kbn/i18n';
 import { IUiSettingsClient } from 'kibana/public';
 import { EuiChartThemeType } from '@elastic/eui/dist/eui_charts_theme';
 import { Subscription, combineLatest } from 'rxjs';
 import { getServices } from '../../../kibana_services';
 import { Chart as IChart } from '../helpers/point_series';
+import {
+  CurrentTime,
+  Endzones,
+  getAdjustedInterval,
+  renderEndzoneTooltip,
+} from '../../../../../charts/public';
 
 export interface DiscoverHistogramProps {
   chartData: IChart;
@@ -60,34 +57,6 @@ interface DiscoverHistogramState {
   chartsBaseTheme: Theme;
 }
 
-function findIntervalFromDuration(
-  dateValue: number,
-  esValue: number,
-  esUnit: unitOfTime.Base,
-  timeZone: string
-) {
-  const date = moment.tz(dateValue, timeZone);
-  const startOfDate = moment.tz(date, timeZone).startOf(esUnit);
-  const endOfDate = moment.tz(date, timeZone).startOf(esUnit).add(esValue, esUnit);
-  return endOfDate.valueOf() - startOfDate.valueOf();
-}
-
-function getIntervalInMs(
-  value: number,
-  esValue: number,
-  esUnit: unitOfTime.Base,
-  timeZone: string
-): number {
-  switch (esUnit) {
-    case 's':
-      return 1000 * esValue;
-    case 'ms':
-      return 1 * esValue;
-    default:
-      return findIntervalFromDuration(value, esValue, esUnit, timeZone);
-  }
-}
-
 function getTimezone(uiSettings: IUiSettingsClient) {
   if (uiSettings.isDefault('dateFormat:tz')) {
     const detectedTimezone = moment.tz.guess();
@@ -98,27 +67,6 @@ function getTimezone(uiSettings: IUiSettingsClient) {
   }
 }
 
-export function findMinInterval(
-  xValues: number[],
-  esValue: number,
-  esUnit: string,
-  timeZone: string
-): number {
-  return xValues.reduce((minInterval, currentXvalue, index) => {
-    let currentDiff = minInterval;
-    if (index > 0) {
-      currentDiff = Math.abs(xValues[index - 1] - currentXvalue);
-    }
-    const singleUnitInterval = getIntervalInMs(
-      currentXvalue,
-      esValue,
-      esUnit as unitOfTime.Base,
-      timeZone
-    );
-    return Math.min(minInterval, singleUnitInterval, currentDiff);
-  }, Number.MAX_SAFE_INTEGER);
-}
-
 export class DiscoverHistogram extends Component<DiscoverHistogramProps, DiscoverHistogramState> {
   public static propTypes = {
     chartData: PropTypes.object,
@@ -132,10 +80,10 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
   };
 
   componentDidMount() {
-    this.subscription = combineLatest(
+    this.subscription = combineLatest([
       getServices().theme.chartsTheme$,
-      getServices().theme.chartsBaseTheme$
-    ).subscribe(([chartsTheme, chartsBaseTheme]) =>
+      getServices().theme.chartsBaseTheme$,
+    ]).subscribe(([chartsTheme, chartsBaseTheme]) =>
       this.setState({ chartsTheme, chartsBaseTheme })
     );
   }
@@ -171,40 +119,6 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
     return moment(val).format(xAxisFormat);
   };
 
-  public renderBarTooltip = (xInterval: number, domainStart: number, domainEnd: number) => (
-    headerData: TooltipValue
-  ): JSX.Element | string => {
-    const headerDataValue = headerData.value;
-    const formattedValue = this.formatXValue(headerDataValue);
-
-    const partialDataText = i18n.translate('discover.histogram.partialData.bucketTooltipText', {
-      defaultMessage:
-        'The selected time range does not include this entire bucket, it may contain partial data.',
-    });
-
-    if (headerDataValue < domainStart || headerDataValue + xInterval > domainEnd) {
-      return (
-        <React.Fragment>
-          <EuiFlexGroup
-            alignItems="center"
-            className="dscHistogram__header--partial"
-            responsive={false}
-            gutterSize="xs"
-          >
-            <EuiFlexItem grow={false}>
-              <EuiIcon type="iInCircle" />
-            </EuiFlexItem>
-            <EuiFlexItem>{partialDataText}</EuiFlexItem>
-          </EuiFlexGroup>
-          <EuiSpacer size="xs" />
-          <p>{formattedValue}</p>
-        </React.Fragment>
-      );
-    }
-
-    return formattedValue;
-  };
-
   public render() {
     const uiSettings = getServices().uiSettings;
     const timeZone = getTimezone(uiSettings);
@@ -216,8 +130,9 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
     }
 
     const data = chartData.values;
+    const isDarkMode = uiSettings.get('theme:darkMode');
 
-    /**
+    /*
      * Deprecation: [interval] on [date_histogram] is deprecated, use [fixed_interval] or [calendar_interval].
      * see https://github.com/elastic/kibana/issues/27410
      * TODO: Once the Discover query has been update, we should change the below to use the new field
@@ -232,61 +147,21 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
     const domainStart = domain.min.valueOf();
     const domainEnd = domain.max.valueOf();
 
-    const domainMin = data[0]?.x > domainStart ? domainStart : data[0]?.x;
-    const domainMax = domainEnd - xInterval > lastXValue ? domainEnd - xInterval : lastXValue;
+    const domainMin = Math.min(data[0]?.x, domainStart);
+    const domainMax = Math.max(domainEnd - xInterval, lastXValue);
 
     const xDomain = {
       min: domainMin,
       max: domainMax,
-      minInterval: findMinInterval(xValues, intervalESValue, intervalESUnit, timeZone),
-    };
-
-    // Domain end of 'now' will be milliseconds behind current time, so we extend time by 1 minute and check if
-    // the annotation is within this range; if so, the line annotation uses the domainEnd as its value
-    const now = moment();
-    const isAnnotationAtEdge = moment(domainEnd).add(60000).isAfter(now) && now.isAfter(domainEnd);
-    const lineAnnotationValue = isAnnotationAtEdge ? domainEnd : now;
-
-    const lineAnnotationData = [
-      {
-        dataValue: lineAnnotationValue,
-      },
-    ];
-    const isDarkMode = uiSettings.get('theme:darkMode');
-
-    const lineAnnotationStyle = {
-      line: {
-        strokeWidth: 2,
-        stroke: isDarkMode ? darkEuiTheme.euiColorDanger : lightEuiTheme.euiColorDanger,
-        opacity: 0.7,
-      },
+      minInterval: getAdjustedInterval(
+        xValues,
+        intervalESValue,
+        intervalESUnit as unitOfTime.Base,
+        timeZone
+      ),
     };
-
-    const rectAnnotations = [];
-    if (domainStart !== domainMin) {
-      rectAnnotations.push({
-        coordinates: {
-          x1: domainStart,
-        },
-      });
-    }
-    if (domainEnd !== domainMax) {
-      rectAnnotations.push({
-        coordinates: {
-          x0: domainEnd,
-        },
-      });
-    }
-
-    const rectAnnotationStyle = {
-      stroke: isDarkMode ? darkEuiTheme.euiColorLightShade : lightEuiTheme.euiColorDarkShade,
-      strokeWidth: 0,
-      opacity: isDarkMode ? 0.6 : 0.2,
-      fill: isDarkMode ? darkEuiTheme.euiColorLightShade : lightEuiTheme.euiColorDarkShade,
-    };
-
     const tooltipProps = {
-      headerFormatter: this.renderBarTooltip(xInterval, domainStart, domainEnd),
+      headerFormatter: renderEndzoneTooltip(xInterval, domainStart, domainEnd, this.formatXValue),
       type: TooltipType.VerticalCursor,
     };
 
@@ -313,19 +188,14 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
           tickFormat={this.formatXValue}
           ticks={10}
         />
-        <LineAnnotation
-          id="line-annotation"
-          domainType={AnnotationDomainTypes.XDomain}
-          dataValues={lineAnnotationData}
-          hideTooltips={true}
-          style={lineAnnotationStyle}
-        />
-        <RectAnnotation
-          dataValues={rectAnnotations}
-          id="rect-annotation"
-          zIndex={2}
-          style={rectAnnotationStyle}
-          hideTooltips={true}
+        <CurrentTime isDarkMode={isDarkMode} domainEnd={domainEnd} />
+        <Endzones
+          isDarkMode={isDarkMode}
+          domainStart={domainStart}
+          domainEnd={domainEnd}
+          interval={xDomain.minInterval}
+          domainMin={xDomain.min}
+          domainMax={xDomain.max}
         />
         <HistogramBarSeries
           id="discover-histogram"
diff --git a/src/plugins/home/server/services/sample_data/data_sets/ecommerce/saved_objects.ts b/src/plugins/home/server/services/sample_data/data_sets/ecommerce/saved_objects.ts
index 60d05890028d1..5cb837f816ff2 100644
--- a/src/plugins/home/server/services/sample_data/data_sets/ecommerce/saved_objects.ts
+++ b/src/plugins/home/server/services/sample_data/data_sets/ecommerce/saved_objects.ts
@@ -34,7 +34,7 @@ export const getSavedObjects = (): SavedObject[] => [
         defaultMessage: '[eCommerce] Sales by Category',
       }),
       visState:
-        '{"title":"[eCommerce] Sales by Category","type":"area","params":{"type":"area","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"bottom","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"LeftAxis-1","type":"value","position":"left","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Sum of total_quantity"}}],"seriesParams":[{"show":"true","type":"area","mode":"stacked","data":{"label":"Sum of total_quantity","id":"1"},"drawLinesBetweenPoints":true,"showCircles":true,"interpolate":"linear","valueAxis":"ValueAxis-1"}],"addTooltip":true,"addLegend":true,"legendPosition":"top","times":[],"addTimeMarker":false},"aggs":[{"id":"1","enabled":true,"type":"sum","schema":"metric","params":{"field":"total_quantity"}},{"id":"2","enabled":true,"type":"date_histogram","schema":"segment","params":{"field":"order_date","interval":"auto","time_zone":"America/New_York","drop_partials":false,"customInterval":"2h","min_doc_count":1,"extended_bounds":{}}},{"id":"3","enabled":true,"type":"terms","schema":"group","params":{"field":"category.keyword","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing"}}]}',
+        '{"title":"[eCommerce] Sales by Category","type":"area","params":{"type":"area","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"bottom","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100,"filter":true},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"LeftAxis-1","type":"value","position":"left","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Sum of total_quantity"}}],"seriesParams":[{"show":"true","type":"area","mode":"stacked","data":{"label":"Sum of total_quantity","id":"1"},"drawLinesBetweenPoints":true,"showCircles":true,"interpolate":"linear","valueAxis":"ValueAxis-1"}],"addTooltip":true,"addLegend":true,"legendPosition":"top","times":[],"addTimeMarker":false,"detailedTooltip":true},"aggs":[{"id":"1","enabled":true,"type":"sum","schema":"metric","params":{"field":"total_quantity"}},{"id":"2","enabled":true,"type":"date_histogram","schema":"segment","params":{"field":"order_date","interval":"auto","drop_partials":false,"min_doc_count":1,"extended_bounds":{}}},{"id":"3","enabled":true,"type":"terms","schema":"group","params":{"field":"category.keyword","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing"}}]}',
       uiStateJSON: '{}',
       description: '',
       version: 1,
diff --git a/src/plugins/home/server/services/sample_data/data_sets/flights/saved_objects.ts b/src/plugins/home/server/services/sample_data/data_sets/flights/saved_objects.ts
index e65b6ad40651b..6b06a526a1239 100644
--- a/src/plugins/home/server/services/sample_data/data_sets/flights/saved_objects.ts
+++ b/src/plugins/home/server/services/sample_data/data_sets/flights/saved_objects.ts
@@ -56,7 +56,7 @@ export const getSavedObjects = (): SavedObject[] => [
         defaultMessage: '[Flights] Flight Count and Average Ticket Price',
       }),
       visState:
-        '{"title":"[Flights] Flight Count and Average Ticket Price","type":"area","params":{"type":"area","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"bottom","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"LeftAxis-1","type":"value","position":"left","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Average Ticket Price"}},{"id":"ValueAxis-2","name":"RightAxis-1","type":"value","position":"right","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Flight Count"}}],"seriesParams":[{"show":true,"mode":"stacked","type":"area","drawLinesBetweenPoints":true,"showCircles":false,"interpolate":"linear","lineWidth":2,"data":{"id":"5","label":"Flight Count"},"valueAxis":"ValueAxis-2"},{"show":true,"mode":"stacked","type":"line","drawLinesBetweenPoints":false,"showCircles":true,"interpolate":"linear","data":{"id":"4","label":"Average Ticket Price"},"valueAxis":"ValueAxis-1","lineWidth":2}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false,"radiusRatio":13},"aggs":[{"id":"3","enabled":true,"type":"date_histogram","schema":"segment","params":{"field":"timestamp","interval":"auto","customInterval":"2h","min_doc_count":1,"extended_bounds":{}}},{"id":"5","enabled":true,"type":"count","schema":"metric","params":{"customLabel":"Flight Count"}},{"id":"4","enabled":true,"type":"avg","schema":"metric","params":{"field":"AvgTicketPrice","customLabel":"Average Ticket Price"}},{"id":"2","enabled":true,"type":"avg","schema":"radius","params":{"field":"AvgTicketPrice"}}]}',
+        '{"title":"[Flights] Flight Count and Average Ticket Price","type":"area","params":{"type":"area","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"bottom","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100,"filter":true},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"LeftAxis-1","type":"value","position":"left","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Average Ticket Price"}},{"id":"ValueAxis-2","name":"RightAxis-1","type":"value","position":"right","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Flight Count"}}],"seriesParams":[{"show":true,"mode":"stacked","type":"area","drawLinesBetweenPoints":true,"showCircles":false,"interpolate":"linear","lineWidth":2,"data":{"id":"5","label":"Flight Count"},"valueAxis":"ValueAxis-2"},{"show":true,"mode":"stacked","type":"line","drawLinesBetweenPoints":false,"showCircles":true,"interpolate":"linear","data":{"id":"4","label":"Average Ticket Price"},"valueAxis":"ValueAxis-1","lineWidth":2}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false,"radiusRatio":13,"detailedTooltip":true},"aggs":[{"id":"3","enabled":true,"type":"date_histogram","schema":"segment","params":{"field":"timestamp","interval":"auto","min_doc_count":1,"extended_bounds":{}}},{"id":"5","enabled":true,"type":"count","schema":"metric","params":{"customLabel":"Flight Count"}},{"id":"4","enabled":true,"type":"avg","schema":"metric","params":{"field":"AvgTicketPrice","customLabel":"Average Ticket Price"}},{"id":"2","enabled":true,"type":"avg","schema":"radius","params":{"field":"AvgTicketPrice"}}]}',
       uiStateJSON:
         '{"vis":{"legendOpen":true,"colors":{"Average Ticket Price":"#629E51","Flight Count":"#AEA2E0"}}}',
       description: '',
@@ -133,7 +133,7 @@ export const getSavedObjects = (): SavedObject[] => [
         defaultMessage: '[Flights] Delay Type',
       }),
       visState:
-        '{"title":"[Flights] Delay Type","type":"area","params":{"type":"area","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"bottom","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"LeftAxis-1","type":"value","position":"left","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Count"}}],"seriesParams":[{"show":"true","type":"histogram","mode":"stacked","data":{"label":"Count","id":"1"},"drawLinesBetweenPoints":true,"showCircles":true,"interpolate":"cardinal","valueAxis":"ValueAxis-1"}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{}},{"id":"2","enabled":true,"type":"date_histogram","schema":"segment","params":{"field":"timestamp","interval":"auto","customInterval":"2h","min_doc_count":1,"extended_bounds":{}}},{"id":"3","enabled":true,"type":"terms","schema":"group","params":{"field":"FlightDelayType","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing"}}]}',
+        '{"title":"[Flights] Delay Type","type":"area","params":{"type":"area","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"bottom","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100,"filter":true},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"LeftAxis-1","type":"value","position":"left","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Count"}}],"seriesParams":[{"show":"true","type":"histogram","mode":"stacked","data":{"label":"Count","id":"1"},"drawLinesBetweenPoints":true,"showCircles":true,"interpolate":"cardinal","valueAxis":"ValueAxis-1"}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false,"detailedTooltip":true},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{}},{"id":"2","enabled":true,"type":"date_histogram","schema":"segment","params":{"field":"timestamp","interval":"auto","min_doc_count":1,"extended_bounds":{}}},{"id":"3","enabled":true,"type":"terms","schema":"group","params":{"field":"FlightDelayType","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing"}}]}',
       uiStateJSON: '{}',
       description: '',
       version: 1,
@@ -176,7 +176,7 @@ export const getSavedObjects = (): SavedObject[] => [
         defaultMessage: '[Flights] Delay Buckets',
       }),
       visState:
-        '{"title":"[Flights] Delay Buckets","type":"histogram","params":{"type":"histogram","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"bottom","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"LeftAxis-1","type":"value","position":"left","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Count"}}],"seriesParams":[{"show":"true","type":"histogram","mode":"stacked","data":{"label":"Count","id":"1"},"valueAxis":"ValueAxis-1","drawLinesBetweenPoints":true,"showCircles":true}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{}},{"id":"2","enabled":true,"type":"histogram","schema":"segment","params":{"field":"FlightDelayMin","interval":30,"extended_bounds":{},"customLabel":"Flight Delay Minutes"}}]}',
+        '{"title":"[Flights] Delay Buckets","type":"histogram","params":{"type":"histogram","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"bottom","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100,"filter":true},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"LeftAxis-1","type":"value","position":"left","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Count"}}],"seriesParams":[{"show":"true","type":"histogram","mode":"stacked","data":{"label":"Count","id":"1"},"valueAxis":"ValueAxis-1","drawLinesBetweenPoints":true,"showCircles":true}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false,"detailedTooltip":true},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{}},{"id":"2","enabled":true,"type":"histogram","schema":"segment","params":{"field":"FlightDelayMin","interval":30,"extended_bounds":{},"customLabel":"Flight Delay Minutes"}}]}',
       uiStateJSON: '{"vis":{"legendOpen":false}}',
       description: '',
       version: 1,
@@ -198,7 +198,7 @@ export const getSavedObjects = (): SavedObject[] => [
         defaultMessage: '[Flights] Flight Delays',
       }),
       visState:
-        '{"title":"[Flights] Flight Delays","type":"histogram","params":{"type":"histogram","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"left","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"BottomAxis-1","type":"value","position":"bottom","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Count"}}],"seriesParams":[{"show":"true","type":"histogram","mode":"stacked","data":{"label":"Count","id":"1"},"valueAxis":"ValueAxis-1","drawLinesBetweenPoints":true,"showCircles":true}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{"customLabel":""}},{"id":"2","enabled":true,"type":"terms","schema":"segment","params":{"field":"FlightDelay","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing","customLabel":"Flight Delays"}}]}',
+        '{"title":"[Flights] Flight Delays","type":"histogram","params":{"type":"histogram","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"left","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100,"filter":true},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"BottomAxis-1","type":"value","position":"bottom","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Count"}}],"seriesParams":[{"show":"true","type":"histogram","mode":"stacked","data":{"label":"Count","id":"1"},"valueAxis":"ValueAxis-1","drawLinesBetweenPoints":true,"showCircles":true}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false,"detailedTooltip":true},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{"customLabel":""}},{"id":"2","enabled":true,"type":"terms","schema":"segment","params":{"field":"FlightDelay","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing","customLabel":"Flight Delays"}}]}',
       uiStateJSON: '{}',
       description: '',
       version: 1,
@@ -220,7 +220,7 @@ export const getSavedObjects = (): SavedObject[] => [
         defaultMessage: '[Flights] Flight Cancellations',
       }),
       visState:
-        '{"title":"[Flights] Flight Cancellations","type":"histogram","params":{"type":"histogram","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"left","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"BottomAxis-1","type":"value","position":"bottom","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Count"}}],"seriesParams":[{"show":"true","type":"histogram","mode":"stacked","data":{"label":"Count","id":"1"},"valueAxis":"ValueAxis-1","drawLinesBetweenPoints":true,"showCircles":true}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{"customLabel":""}},{"id":"2","enabled":true,"type":"terms","schema":"segment","params":{"field":"Cancelled","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing","customLabel":"Flight Cancellations"}}]}',
+        '{"title":"[Flights] Flight Cancellations","type":"histogram","params":{"type":"histogram","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"left","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100,"filter":true},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"BottomAxis-1","type":"value","position":"bottom","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Count"}}],"seriesParams":[{"show":"true","type":"histogram","mode":"stacked","data":{"label":"Count","id":"1"},"valueAxis":"ValueAxis-1","drawLinesBetweenPoints":true,"showCircles":true}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false,"detailedTooltip":true},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{"customLabel":""}},{"id":"2","enabled":true,"type":"terms","schema":"segment","params":{"field":"Cancelled","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing","customLabel":"Flight Cancellations"}}]}',
       uiStateJSON: '{}',
       description: '',
       version: 1,
diff --git a/src/plugins/home/server/services/sample_data/data_sets/logs/saved_objects.ts b/src/plugins/home/server/services/sample_data/data_sets/logs/saved_objects.ts
index 068ba66c4b0de..7b891107cdfb0 100644
--- a/src/plugins/home/server/services/sample_data/data_sets/logs/saved_objects.ts
+++ b/src/plugins/home/server/services/sample_data/data_sets/logs/saved_objects.ts
@@ -33,7 +33,7 @@ export const getSavedObjects = (): SavedObject[] => [
         defaultMessage: '[Logs] Unique Visitors vs. Average Bytes',
       }),
       visState:
-        '{"title":"[Logs] Unique Visitors vs. Average Bytes","type":"area","params":{"type":"area","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"bottom","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"LeftAxis-1","type":"value","position":"left","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Avg. Bytes"}},{"id":"ValueAxis-2","name":"RightAxis-1","type":"value","position":"right","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Unique Visitors"}}],"seriesParams":[{"show":"true","type":"histogram","mode":"stacked","data":{"label":"Avg. Bytes","id":"1"},"drawLinesBetweenPoints":true,"showCircles":true,"interpolate":"linear","valueAxis":"ValueAxis-1"},{"show":true,"mode":"stacked","type":"line","drawLinesBetweenPoints":false,"showCircles":true,"interpolate":"linear","data":{"id":"2","label":"Unique Visitors"},"valueAxis":"ValueAxis-2"}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false,"radiusRatio":17},"aggs":[{"id":"1","enabled":true,"type":"avg","schema":"metric","params":{"field":"bytes","customLabel":"Avg. Bytes"}},{"id":"2","enabled":true,"type":"cardinality","schema":"metric","params":{"field":"clientip","customLabel":"Unique Visitors"}},{"id":"3","enabled":true,"type":"date_histogram","schema":"segment","params":{"field":"timestamp","interval":"auto","time_zone":"America/Los_Angeles","customInterval":"2h","min_doc_count":1,"extended_bounds":{}}},{"id":"4","enabled":true,"type":"count","schema":"radius","params":{}}]}',
+        '{"title":"[Logs] Unique Visitors vs. Average Bytes","type":"area","params":{"type":"area","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"bottom","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":100,"filter":true},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"LeftAxis-1","type":"value","position":"left","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Avg. Bytes"}},{"id":"ValueAxis-2","name":"RightAxis-1","type":"value","position":"right","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":100},"title":{"text":"Unique Visitors"}}],"seriesParams":[{"show":"true","type":"histogram","mode":"stacked","data":{"label":"Avg. Bytes","id":"1"},"drawLinesBetweenPoints":true,"showCircles":true,"interpolate":"linear","valueAxis":"ValueAxis-1"},{"show":true,"mode":"stacked","type":"line","drawLinesBetweenPoints":false,"showCircles":true,"interpolate":"linear","data":{"id":"2","label":"Unique Visitors"},"valueAxis":"ValueAxis-2"}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false,"radiusRatio":17,"detailedTooltip":true},"aggs":[{"id":"1","enabled":true,"type":"avg","schema":"metric","params":{"field":"bytes","customLabel":"Avg. Bytes"}},{"id":"2","enabled":true,"type":"cardinality","schema":"metric","params":{"field":"clientip","customLabel":"Unique Visitors"}},{"id":"3","enabled":true,"type":"date_histogram","schema":"segment","params":{"field":"timestamp","interval":"auto","min_doc_count":1,"extended_bounds":{}}},{"id":"4","enabled":true,"type":"count","schema":"radius","params":{}}]}',
       uiStateJSON: '{"vis":{"colors":{"Avg. Bytes":"#70DBED","Unique Visitors":"#0A437C"}}}',
       description: '',
       version: 1,
diff --git a/src/plugins/vis_default_editor/public/components/agg_add.tsx b/src/plugins/vis_default_editor/public/components/agg_add.tsx
index e78f2fcc4453c..2da7b33139a8e 100644
--- a/src/plugins/vis_default_editor/public/components/agg_add.tsx
+++ b/src/plugins/vis_default_editor/public/components/agg_add.tsx
@@ -76,10 +76,17 @@ function DefaultEditorAggAdd({
     </EuiButtonEmpty>
   );
 
-  const isSchemaDisabled = (schema: Schema): boolean => {
+  const isMaxedCount = (schema: Schema): boolean => {
     const count = group.filter((agg) => agg.schema === schema.name).length;
     return count >= schema.max;
   };
+  const isSchemaDisabled = (schema: Schema, maxedCount: boolean): boolean => {
+    return schema.disabled ?? maxedCount;
+  };
+  const maxTooltipText = i18n.translate('visDefaultEditor.aggAdd.maxBuckets', {
+    defaultMessage: 'Max {groupNameLabel} count reached',
+    values: { groupNameLabel },
+  });
 
   return (
     <EuiFlexGroup justifyContent="center" responsive={false}>
@@ -109,16 +116,21 @@ function DefaultEditorAggAdd({
             )}
           </EuiPopoverTitle>
           <EuiContextMenuPanel
-            items={schemas.map((schema) => (
-              <EuiContextMenuItem
-                key={`${schema.name}_${schema.title}`}
-                data-test-subj={`visEditorAdd_${groupName}_${schema.title}`}
-                disabled={isPopoverOpen && isSchemaDisabled(schema)}
-                onClick={() => onSelectSchema(schema)}
-              >
-                {schema.title}
-              </EuiContextMenuItem>
-            ))}
+            items={schemas.map((schema) => {
+              const maxedCount = isMaxedCount(schema);
+
+              return (
+                <EuiContextMenuItem
+                  key={`${schema.name}_${schema.title}`}
+                  data-test-subj={`visEditorAdd_${groupName}_${schema.title}`}
+                  disabled={isPopoverOpen && isSchemaDisabled(schema, maxedCount)}
+                  onClick={() => onSelectSchema(schema)}
+                  toolTipContent={schema.tooltip ?? (maxedCount ? maxTooltipText : undefined)}
+                >
+                  {schema.title}
+                </EuiContextMenuItem>
+              );
+            })}
           />
         </EuiPopover>
       </EuiFlexItem>
diff --git a/src/plugins/vis_default_editor/public/components/sidebar/use_option_tabs.ts b/src/plugins/vis_default_editor/public/components/sidebar/use_option_tabs.ts
index 337533df50fad..90e2d792d3597 100644
--- a/src/plugins/vis_default_editor/public/components/sidebar/use_option_tabs.ts
+++ b/src/plugins/vis_default_editor/public/components/sidebar/use_option_tabs.ts
@@ -20,9 +20,10 @@
 import { useCallback, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 
-import { Vis } from 'src/plugins/visualizations/public';
-import { DefaultEditorDataTab, DefaultEditorDataTabProps } from './data_tab';
+import { Vis } from '../../../../visualizations/public';
+
 import { VisOptionsProps } from '../../vis_options_props';
+import { DefaultEditorDataTab, DefaultEditorDataTabProps } from './data_tab';
 
 export interface OptionTab {
   editor: React.ComponentType<VisOptionsProps | DefaultEditorDataTabProps>;
diff --git a/src/plugins/vis_default_editor/public/default_editor_controller.tsx b/src/plugins/vis_default_editor/public/default_editor_controller.tsx
index 707b14c23ea75..f44ea3e203b05 100644
--- a/src/plugins/vis_default_editor/public/default_editor_controller.tsx
+++ b/src/plugins/vis_default_editor/public/default_editor_controller.tsx
@@ -25,6 +25,7 @@ import { EuiErrorBoundary, EuiLoadingChart } from '@elastic/eui';
 import { EditorRenderProps, IEditorController } from 'src/plugins/visualize/public';
 import { Vis, VisualizeEmbeddableContract } from 'src/plugins/visualizations/public';
 
+// @ts-ignore
 const DefaultEditor = lazy(() => import('./default_editor'));
 
 class DefaultEditorController implements IEditorController {
diff --git a/src/plugins/vis_default_editor/public/schemas.ts b/src/plugins/vis_default_editor/public/schemas.ts
index d95a6252331bf..7ecb4e54726b8 100644
--- a/src/plugins/vis_default_editor/public/schemas.ts
+++ b/src/plugins/vis_default_editor/public/schemas.ts
@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import { ReactNode } from 'react';
 import _, { defaults } from 'lodash';
 
 import { Optional } from '@kbn/utility-types';
@@ -42,6 +43,8 @@ export interface Schema {
   hideCustomLabel?: boolean;
   mustBeFirst?: boolean;
   aggSettings?: any;
+  disabled?: boolean;
+  tooltip?: ReactNode;
 }
 
 export class Schemas implements ISchemas {
diff --git a/src/plugins/vis_type_markdown/public/to_ast.test.ts b/src/plugins/vis_type_markdown/public/to_ast.test.ts
index 1ad1fa0ee2517..4c7b570aef05d 100644
--- a/src/plugins/vis_type_markdown/public/to_ast.test.ts
+++ b/src/plugins/vis_type_markdown/public/to_ast.test.ts
@@ -42,12 +42,14 @@ describe('markdown vis toExpressionAst function', () => {
 
   it('without params', () => {
     vis.params = {};
+    // @ts-expect-error
     const actual = toExpressionAst(vis);
     expect(actual).toMatchSnapshot();
   });
 
   it('with params', () => {
     vis.params = { markdown: '### my markdown', fontSize: 15, openLinksInNewTab: true };
+    // @ts-expect-error
     const actual = toExpressionAst(vis);
     expect(actual).toMatchSnapshot();
   });
diff --git a/src/plugins/vis_type_markdown/public/to_ast.ts b/src/plugins/vis_type_markdown/public/to_ast.ts
index 9b481218b42ea..dc61acf722ad4 100644
--- a/src/plugins/vis_type_markdown/public/to_ast.ts
+++ b/src/plugins/vis_type_markdown/public/to_ast.ts
@@ -17,11 +17,11 @@
  * under the License.
  */
 
-import { Vis } from '../../visualizations/public';
+import { VisToExpressionAst } from '../../visualizations/public';
 import { buildExpression, buildExpressionFunction } from '../../expressions/public';
 import { MarkdownVisExpressionFunctionDefinition } from './markdown_fn';
 
-export const toExpressionAst = (vis: Vis) => {
+export const toExpressionAst: VisToExpressionAst = (vis) => {
   const { markdown, fontSize, openLinksInNewTab } = vis.params;
 
   const markdownVis = buildExpressionFunction<MarkdownVisExpressionFunctionDefinition>(
diff --git a/src/plugins/vis_type_metric/public/components/metric_vis_options.tsx b/src/plugins/vis_type_metric/public/components/metric_vis_options.tsx
index d0a7412238871..d87a0da740d75 100644
--- a/src/plugins/vis_type_metric/public/components/metric_vis_options.tsx
+++ b/src/plugins/vis_type_metric/public/components/metric_vis_options.tsx
@@ -31,7 +31,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import {
-  ColorModes,
+  ColorMode,
   ColorRanges,
   ColorSchemaOptions,
   SwitchOption,
@@ -86,7 +86,7 @@ function MetricVisOptions({
   );
 
   const setColorMode: EuiButtonGroupProps['onChange'] = useCallback(
-    (id: string) => setMetricValue('metricColorMode', id as ColorModes),
+    (id: string) => setMetricValue('metricColorMode', id as ColorMode),
     [setMetricValue]
   );
 
@@ -158,7 +158,7 @@ function MetricVisOptions({
           colorSchemas={vis.type.editorConfig.collections.colorSchemas}
           disabled={
             stateParams.metric.colorsRange.length === 1 ||
-            stateParams.metric.metricColorMode === ColorModes.NONE
+            stateParams.metric.metricColorMode === ColorMode.None
           }
           invertColors={stateParams.metric.invertColors}
           setValue={setMetricValue as SetColorSchemaOptionsValue}
diff --git a/src/plugins/vis_type_metric/public/metric_vis_fn.ts b/src/plugins/vis_type_metric/public/metric_vis_fn.ts
index ae6dc6683852e..783ca3d3906ea 100644
--- a/src/plugins/vis_type_metric/public/metric_vis_fn.ts
+++ b/src/plugins/vis_type_metric/public/metric_vis_fn.ts
@@ -27,14 +27,14 @@ import {
   Style,
 } from '../../expressions/public';
 import { visType, DimensionsVisParam, VisParams } from './types';
-import { ColorSchemas, vislibColorMaps, ColorModes } from '../../charts/public';
+import { ColorSchemas, vislibColorMaps, ColorMode } from '../../charts/public';
 
 export type Input = Datatable;
 
 interface Arguments {
   percentageMode: boolean;
   colorSchema: ColorSchemas;
-  colorMode: ColorModes;
+  colorMode: ColorMode;
   useRanges: boolean;
   invertColors: boolean;
   showLabels: boolean;
@@ -86,7 +86,7 @@ export const createMetricVisFn = (): MetricVisExpressionFunctionDefinition => ({
     colorMode: {
       types: ['string'],
       default: '"None"',
-      options: [ColorModes.NONE, ColorModes.LABELS, ColorModes.BACKGROUND],
+      options: [ColorMode.None, ColorMode.Labels, ColorMode.Background],
       help: i18n.translate('visTypeMetric.function.colorMode.help', {
         defaultMessage: 'Which part of metric to color',
       }),
@@ -197,8 +197,8 @@ export const createMetricVisFn = (): MetricVisExpressionFunctionDefinition => ({
             invertColors: args.invertColors,
             style: {
               bgFill: args.bgFill,
-              bgColor: args.colorMode === ColorModes.BACKGROUND,
-              labelColor: args.colorMode === ColorModes.LABELS,
+              bgColor: args.colorMode === ColorMode.Background,
+              labelColor: args.colorMode === ColorMode.Labels,
               subText: args.subText,
               fontSize,
             },
diff --git a/src/plugins/vis_type_metric/public/metric_vis_type.ts b/src/plugins/vis_type_metric/public/metric_vis_type.ts
index f7c74e324053e..ba8f27b9412a2 100644
--- a/src/plugins/vis_type_metric/public/metric_vis_type.ts
+++ b/src/plugins/vis_type_metric/public/metric_vis_type.ts
@@ -20,7 +20,7 @@
 import { i18n } from '@kbn/i18n';
 import { BaseVisTypeOptions } from 'src/plugins/visualizations/public';
 import { MetricVisOptions } from './components/metric_vis_options';
-import { ColorSchemas, colorSchemas, ColorModes } from '../../charts/public';
+import { ColorSchemas, colorSchemas, ColorMode } from '../../charts/public';
 import { AggGroupNames } from '../../data/public';
 import { Schemas } from '../../vis_default_editor/public';
 import { toExpressionAst } from './to_ast';
@@ -42,7 +42,7 @@ export const createMetricVisTypeDefinition = (): BaseVisTypeOptions => ({
         percentageMode: false,
         useRanges: false,
         colorSchema: ColorSchemas.GreenToRed,
-        metricColorMode: ColorModes.NONE,
+        metricColorMode: ColorMode.None,
         colorsRange: [{ from: 0, to: 10000 }],
         labels: {
           show: true,
@@ -62,19 +62,19 @@ export const createMetricVisTypeDefinition = (): BaseVisTypeOptions => ({
     collections: {
       metricColorMode: [
         {
-          id: ColorModes.NONE,
+          id: ColorMode.None,
           label: i18n.translate('visTypeMetric.colorModes.noneOptionLabel', {
             defaultMessage: 'None',
           }),
         },
         {
-          id: ColorModes.LABELS,
+          id: ColorMode.Labels,
           label: i18n.translate('visTypeMetric.colorModes.labelsOptionLabel', {
             defaultMessage: 'Labels',
           }),
         },
         {
-          id: ColorModes.BACKGROUND,
+          id: ColorMode.Background,
           label: i18n.translate('visTypeMetric.colorModes.backgroundOptionLabel', {
             defaultMessage: 'Background',
           }),
diff --git a/src/plugins/vis_type_metric/public/types.ts b/src/plugins/vis_type_metric/public/types.ts
index e1f2c7721a426..e0ebfb36fa37d 100644
--- a/src/plugins/vis_type_metric/public/types.ts
+++ b/src/plugins/vis_type_metric/public/types.ts
@@ -19,7 +19,7 @@
 
 import { Range } from '../../expressions/public';
 import { SchemaConfig } from '../../visualizations/public';
-import { ColorModes, Labels, Style, ColorSchemas } from '../../charts/public';
+import { ColorMode, Labels, Style, ColorSchemas } from '../../charts/public';
 
 export const visType = 'metric';
 
@@ -32,7 +32,7 @@ export interface MetricVisParam {
   percentageMode: boolean;
   useRanges: boolean;
   colorSchema: ColorSchemas;
-  metricColorMode: ColorModes;
+  metricColorMode: ColorMode;
   colorsRange: Range[];
   labels: Labels;
   invertColors: boolean;
diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/__snapshots__/area_decorator.test.js.snap b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/__snapshots__/area_decorator.test.js.snap
index 7ded8e2254aa9..fceb9c3fdb819 100644
--- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/__snapshots__/area_decorator.test.js.snap
+++ b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/__snapshots__/area_decorator.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`src/legacy/core_plugins/metrics/public/visualizations/views/timeseries/decorators/area_decorator.js <AreaSeriesDecorator /> should render and match a snapshot 1`] = `
-<AreaSeries
+<Connect(SpecInstance)
   areaSeriesStyle={
     Object {
       "area": Object {
diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/__snapshots__/bar_decorator.test.js.snap b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/__snapshots__/bar_decorator.test.js.snap
index 02c7fd811e583..a3929e2d3d7d5 100644
--- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/__snapshots__/bar_decorator.test.js.snap
+++ b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/decorators/__snapshots__/bar_decorator.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`src/legacy/core_plugins/metrics/public/visualizations/views/timeseries/decorators/bar_decorator.js <BarSeriesDecorator /> should render and match a snapshot 1`] = `
-<BarSeries
+<Connect(SpecInstance)
   barSeriesStyle={
     Object {
       "rect": Object {
diff --git a/src/plugins/vis_type_vislib/kibana.json b/src/plugins/vis_type_vislib/kibana.json
index 720abff16b7c7..175c21f47c182 100644
--- a/src/plugins/vis_type_vislib/kibana.json
+++ b/src/plugins/vis_type_vislib/kibana.json
@@ -4,6 +4,5 @@
   "server": true,
   "ui": true,
   "requiredPlugins": ["charts", "data", "expressions", "visualizations", "kibanaLegacy"],
-  "optionalPlugins": ["visTypeXy"],
-  "requiredBundles": ["kibanaUtils", "visDefaultEditor"]
+  "requiredBundles": ["kibanaUtils", "visDefaultEditor", "visTypeXy"]
 }
diff --git a/src/plugins/vis_type_vislib/public/area.ts b/src/plugins/vis_type_vislib/public/area.ts
index ec7bce254f586..389daca6d1776 100644
--- a/src/plugins/vis_type_vislib/public/area.ts
+++ b/src/plugins/vis_type_vislib/public/area.ts
@@ -17,172 +17,14 @@
  * under the License.
  */
 
-import { i18n } from '@kbn/i18n';
-// @ts-ignore
-import { palettes } from '@elastic/eui/lib/services';
-// @ts-ignore
-import { euiPaletteColorBlind } from '@elastic/eui/lib/services';
+import { xyVisTypes } from '../../vis_type_xy/public';
+import { BaseVisTypeOptions } from '../../visualizations/public';
 
-import { AggGroupNames } from '../../data/public';
-import { Schemas } from '../../vis_default_editor/public';
-import {
-  Positions,
-  ChartTypes,
-  ChartModes,
-  InterpolationModes,
-  AxisTypes,
-  ScaleTypes,
-  AxisModes,
-  ThresholdLineStyles,
-  getConfigCollections,
-} from './utils/collections';
-import { getAreaOptionTabs, countLabel } from './utils/common_config';
-import { Rotates } from '../../charts/public';
-import { BaseVisTypeOptions, VIS_EVENT_TO_TRIGGER } from '../../../plugins/visualizations/public';
 import { toExpressionAst } from './to_ast';
 import { BasicVislibParams } from './types';
 
 export const areaVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
-  name: 'area',
-  title: i18n.translate('visTypeVislib.area.areaTitle', { defaultMessage: 'Area' }),
-  icon: 'visArea',
-  description: i18n.translate('visTypeVislib.area.areaDescription', {
-    defaultMessage: 'Emphasize the data between an axis and a line.',
-  }),
-  getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush],
+  ...(xyVisTypes.area() as BaseVisTypeOptions<BasicVislibParams>),
   toExpressionAst,
-  visConfig: {
-    defaults: {
-      type: 'area',
-      grid: {
-        categoryLines: false,
-      },
-      categoryAxes: [
-        {
-          id: 'CategoryAxis-1',
-          type: AxisTypes.CATEGORY,
-          position: Positions.BOTTOM,
-          show: true,
-          style: {},
-          scale: {
-            type: ScaleTypes.LINEAR,
-          },
-          labels: {
-            show: true,
-            filter: true,
-            truncate: 100,
-          },
-          title: {},
-        },
-      ],
-      valueAxes: [
-        {
-          id: 'ValueAxis-1',
-          name: 'LeftAxis-1',
-          type: AxisTypes.VALUE,
-          position: Positions.LEFT,
-          show: true,
-          style: {},
-          scale: {
-            type: ScaleTypes.LINEAR,
-            mode: AxisModes.NORMAL,
-          },
-          labels: {
-            show: true,
-            rotate: Rotates.HORIZONTAL,
-            filter: false,
-            truncate: 100,
-          },
-          title: {
-            text: countLabel,
-          },
-        },
-      ],
-      seriesParams: [
-        {
-          show: true,
-          type: ChartTypes.AREA,
-          mode: ChartModes.STACKED,
-          data: {
-            label: countLabel,
-            id: '1',
-          },
-          drawLinesBetweenPoints: true,
-          lineWidth: 2,
-          showCircles: true,
-          interpolate: InterpolationModes.LINEAR,
-          valueAxis: 'ValueAxis-1',
-        },
-      ],
-      addTooltip: true,
-      addLegend: true,
-      legendPosition: Positions.RIGHT,
-      times: [],
-      addTimeMarker: false,
-      thresholdLine: {
-        show: false,
-        value: 10,
-        width: 1,
-        style: ThresholdLineStyles.FULL,
-        color: euiPaletteColorBlind()[9],
-      },
-      labels: {},
-    },
-  },
-  editorConfig: {
-    collections: getConfigCollections(),
-    optionTabs: getAreaOptionTabs(),
-    schemas: new Schemas([
-      {
-        group: AggGroupNames.Metrics,
-        name: 'metric',
-        title: i18n.translate('visTypeVislib.area.metricsTitle', {
-          defaultMessage: 'Y-axis',
-        }),
-        aggFilter: ['!geo_centroid', '!geo_bounds'],
-        min: 1,
-        defaults: [{ schema: 'metric', type: 'count' }],
-      },
-      {
-        group: AggGroupNames.Metrics,
-        name: 'radius',
-        title: i18n.translate('visTypeVislib.area.radiusTitle', {
-          defaultMessage: 'Dot size',
-        }),
-        min: 0,
-        max: 1,
-        aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'segment',
-        title: i18n.translate('visTypeVislib.area.segmentTitle', {
-          defaultMessage: 'X-axis',
-        }),
-        min: 0,
-        max: 1,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'group',
-        title: i18n.translate('visTypeVislib.area.groupTitle', {
-          defaultMessage: 'Split series',
-        }),
-        min: 0,
-        max: 3,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'split',
-        title: i18n.translate('visTypeVislib.area.splitTitle', {
-          defaultMessage: 'Split chart',
-        }),
-        min: 0,
-        max: 1,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-    ]),
-  },
+  visualization: undefined,
 };
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/index.test.tsx b/src/plugins/vis_type_vislib/public/components/options/metrics_axes/index.test.tsx
deleted file mode 100644
index 63881fea1ad88..0000000000000
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/index.test.tsx
+++ /dev/null
@@ -1,248 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-
-import { IAggConfig, IAggType } from 'src/plugins/data/public';
-import MetricsAxisOptions from './index';
-import { BasicVislibParams, SeriesParam, ValueAxis } from '../../../types';
-import { ValidationVisOptionsProps } from '../../common';
-import { Positions } from '../../../utils/collections';
-import { ValueAxesPanel } from './value_axes_panel';
-import { CategoryAxisPanel } from './category_axis_panel';
-import { ChartTypes } from '../../../utils/collections';
-import { defaultValueAxisId, valueAxis, seriesParam, categoryAxis } from './mocks';
-
-jest.mock('./series_panel', () => ({
-  SeriesPanel: () => 'SeriesPanel',
-}));
-jest.mock('./category_axis_panel', () => ({
-  CategoryAxisPanel: () => 'CategoryAxisPanel',
-}));
-jest.mock('./value_axes_panel', () => ({
-  ValueAxesPanel: () => 'ValueAxesPanel',
-}));
-
-const SERIES_PARAMS = 'seriesParams';
-const VALUE_AXES = 'valueAxes';
-
-const aggCount: IAggConfig = {
-  id: '1',
-  type: { name: 'count' },
-  makeLabel: () => 'Count',
-} as IAggConfig;
-
-const aggAverage: IAggConfig = {
-  id: '2',
-  type: { name: 'average' } as IAggType,
-  makeLabel: () => 'Average',
-} as IAggConfig;
-
-const createAggs = (aggs: any[]) => ({
-  aggs,
-  bySchemaName: () => aggs,
-});
-
-describe('MetricsAxisOptions component', () => {
-  let setValue: jest.Mock;
-  let defaultProps: ValidationVisOptionsProps<BasicVislibParams>;
-  let axis: ValueAxis;
-  let axisRight: ValueAxis;
-  let chart: SeriesParam;
-
-  beforeEach(() => {
-    setValue = jest.fn();
-
-    axis = {
-      ...valueAxis,
-      name: 'LeftAxis-1',
-      position: Positions.LEFT,
-    };
-    axisRight = {
-      ...valueAxis,
-      id: 'ValueAxis-2',
-      name: 'RightAxis-1',
-      position: Positions.RIGHT,
-    };
-    chart = {
-      ...seriesParam,
-      type: ChartTypes.AREA,
-    };
-
-    defaultProps = {
-      aggs: createAggs([aggCount]),
-      isTabSelected: true,
-      vis: {
-        type: {
-          type: ChartTypes.AREA,
-          schemas: { metrics: [{ name: 'metric' }] },
-        },
-        setState: jest.fn(),
-        serialize: jest.fn(),
-      },
-      stateParams: {
-        valueAxes: [axis],
-        seriesParams: [chart],
-        categoryAxes: [categoryAxis],
-        grid: { valueAxis: defaultValueAxisId },
-      },
-      setValue,
-    } as any;
-  });
-
-  it('should init with the default set of props', () => {
-    const comp = shallow(<MetricsAxisOptions {...defaultProps} />);
-
-    expect(comp).toMatchSnapshot();
-  });
-
-  describe('useEffect', () => {
-    it('should update series when new agg is added', () => {
-      const comp = mount(<MetricsAxisOptions {...defaultProps} />);
-      comp.setProps({
-        aggs: createAggs([aggCount, aggAverage]),
-      });
-
-      const updatedSeries = [chart, { ...chart, data: { id: '2', label: aggAverage.makeLabel() } }];
-      expect(setValue).toHaveBeenLastCalledWith(SERIES_PARAMS, updatedSeries);
-    });
-
-    it('should update series when new agg label is changed', () => {
-      const comp = mount(<MetricsAxisOptions {...defaultProps} />);
-      const agg = { id: aggCount.id, makeLabel: () => 'New label' };
-      comp.setProps({
-        aggs: createAggs([agg]),
-      });
-
-      const updatedSeries = [{ ...chart, data: { id: agg.id, label: agg.makeLabel() } }];
-      expect(setValue).toHaveBeenCalledWith(SERIES_PARAMS, updatedSeries);
-    });
-  });
-
-  describe('updateAxisTitle', () => {
-    it('should not update the value axis title if custom title was set', () => {
-      defaultProps.stateParams.valueAxes[0].title.text = 'Custom title';
-      const comp = mount(<MetricsAxisOptions {...defaultProps} />);
-      const newAgg = {
-        ...aggCount,
-        makeLabel: () => 'Custom label',
-      };
-      comp.setProps({
-        aggs: createAggs([newAgg]),
-      });
-      const updatedValues = [{ ...axis, title: { text: newAgg.makeLabel() } }];
-      expect(setValue).not.toHaveBeenCalledWith(VALUE_AXES, updatedValues);
-    });
-
-    it('should set the custom title to match the value axis label when only one agg exists for that axis', () => {
-      const comp = mount(<MetricsAxisOptions {...defaultProps} />);
-      const agg = {
-        id: aggCount.id,
-        params: { customLabel: 'Custom label' },
-        makeLabel: () => 'Custom label',
-      };
-      comp.setProps({
-        aggs: createAggs([agg]),
-      });
-
-      const updatedSeriesParams = [{ ...chart, data: { ...chart.data, label: agg.makeLabel() } }];
-      const updatedValues = [{ ...axis, title: { text: agg.makeLabel() } }];
-
-      expect(setValue).toHaveBeenCalledTimes(5);
-      expect(setValue).toHaveBeenNthCalledWith(3, SERIES_PARAMS, updatedSeriesParams);
-      expect(setValue).toHaveBeenNthCalledWith(5, SERIES_PARAMS, updatedSeriesParams);
-      expect(setValue).toHaveBeenNthCalledWith(4, VALUE_AXES, updatedValues);
-    });
-
-    it('should not set the custom title to match the value axis label when more than one agg exists for that axis', () => {
-      const comp = mount(<MetricsAxisOptions {...defaultProps} />);
-      const agg = { id: aggCount.id, makeLabel: () => 'Custom label' };
-      comp.setProps({
-        aggs: createAggs([agg, aggAverage]),
-        stateParams: {
-          ...defaultProps.stateParams,
-          seriesParams: [chart, chart],
-        },
-      });
-
-      expect(setValue).not.toHaveBeenCalledWith(VALUE_AXES);
-    });
-
-    it('should not overwrite the custom title with the value axis label if the custom title has been changed', () => {
-      defaultProps.stateParams.valueAxes[0].title.text = 'Custom title';
-      const comp = mount(<MetricsAxisOptions {...defaultProps} />);
-      const agg = {
-        id: aggCount.id,
-        params: { customLabel: 'Custom label' },
-        makeLabel: () => 'Custom label',
-      };
-      comp.setProps({
-        aggs: createAggs([agg]),
-      });
-
-      expect(setValue).not.toHaveBeenCalledWith(VALUE_AXES);
-    });
-  });
-
-  it('should add value axis', () => {
-    const comp = shallow(<MetricsAxisOptions {...defaultProps} />);
-    comp.find(ValueAxesPanel).prop('addValueAxis')();
-
-    expect(setValue).toHaveBeenCalledWith(VALUE_AXES, [axis, axisRight]);
-  });
-
-  describe('removeValueAxis', () => {
-    beforeEach(() => {
-      defaultProps.stateParams.valueAxes = [axis, axisRight];
-    });
-
-    it('should remove value axis', () => {
-      const comp = shallow(<MetricsAxisOptions {...defaultProps} />);
-      comp.find(ValueAxesPanel).prop('removeValueAxis')(axis);
-
-      expect(setValue).toHaveBeenCalledWith(VALUE_AXES, [axisRight]);
-    });
-
-    it('should update seriesParams "valueAxis" prop', () => {
-      const updatedSeriesParam = { ...chart, valueAxis: 'ValueAxis-2' };
-      const comp = shallow(<MetricsAxisOptions {...defaultProps} />);
-      comp.find(ValueAxesPanel).prop('removeValueAxis')(axis);
-
-      expect(setValue).toHaveBeenCalledWith(SERIES_PARAMS, [updatedSeriesParam]);
-    });
-
-    it('should reset grid "valueAxis" prop', () => {
-      const updatedGrid = { valueAxis: undefined };
-      defaultProps.stateParams.seriesParams[0].valueAxis = 'ValueAxis-2';
-      const comp = shallow(<MetricsAxisOptions {...defaultProps} />);
-      comp.find(ValueAxesPanel).prop('removeValueAxis')(axis);
-
-      expect(setValue).toHaveBeenCalledWith('grid', updatedGrid);
-    });
-  });
-
-  it('should update axis value when when category position chnaged', () => {
-    const comp = shallow(<MetricsAxisOptions {...defaultProps} />);
-    comp.find(CategoryAxisPanel).prop('onPositionChanged')(Positions.LEFT);
-
-    const updatedValues = [{ ...axis, name: 'BottomAxis-1', position: Positions.BOTTOM }];
-    expect(setValue).toHaveBeenCalledWith(VALUE_AXES, updatedValues);
-  });
-});
diff --git a/src/plugins/vis_type_vislib/public/editor/collections.ts b/src/plugins/vis_type_vislib/public/editor/collections.ts
new file mode 100644
index 0000000000000..f1caa0754b0b3
--- /dev/null
+++ b/src/plugins/vis_type_vislib/public/editor/collections.ts
@@ -0,0 +1,73 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+import { colorSchemas } from '../../../charts/public';
+import { getPositions, getScaleTypes } from '../../../vis_type_xy/public';
+
+import { Alignment, GaugeType } from '../types';
+
+export const getGaugeTypes = () => [
+  {
+    text: i18n.translate('visTypeVislib.gauge.gaugeTypes.arcText', {
+      defaultMessage: 'Arc',
+    }),
+    value: GaugeType.Arc,
+  },
+  {
+    text: i18n.translate('visTypeVislib.gauge.gaugeTypes.circleText', {
+      defaultMessage: 'Circle',
+    }),
+    value: GaugeType.Circle,
+  },
+];
+
+export const getAlignments = () => [
+  {
+    text: i18n.translate('visTypeVislib.gauge.alignmentAutomaticTitle', {
+      defaultMessage: 'Automatic',
+    }),
+    value: Alignment.Automatic,
+  },
+  {
+    text: i18n.translate('visTypeVislib.gauge.alignmentHorizontalTitle', {
+      defaultMessage: 'Horizontal',
+    }),
+    value: Alignment.Horizontal,
+  },
+  {
+    text: i18n.translate('visTypeVislib.gauge.alignmentVerticalTitle', {
+      defaultMessage: 'Vertical',
+    }),
+    value: Alignment.Vertical,
+  },
+];
+
+export const getGaugeCollections = () => ({
+  gaugeTypes: getGaugeTypes(),
+  alignments: getAlignments(),
+  colorSchemas,
+});
+
+export const getHeatmapCollections = () => ({
+  legendPositions: getPositions(),
+  scales: getScaleTypes(),
+  colorSchemas,
+});
diff --git a/src/plugins/vis_type_vislib/public/components/options/gauge/index.tsx b/src/plugins/vis_type_vislib/public/editor/components/gauge/index.tsx
similarity index 100%
rename from src/plugins/vis_type_vislib/public/components/options/gauge/index.tsx
rename to src/plugins/vis_type_vislib/public/editor/components/gauge/index.tsx
diff --git a/src/plugins/vis_type_vislib/public/components/options/gauge/labels_panel.tsx b/src/plugins/vis_type_vislib/public/editor/components/gauge/labels_panel.tsx
similarity index 100%
rename from src/plugins/vis_type_vislib/public/components/options/gauge/labels_panel.tsx
rename to src/plugins/vis_type_vislib/public/editor/components/gauge/labels_panel.tsx
diff --git a/src/plugins/vis_type_vislib/public/components/options/gauge/ranges_panel.tsx b/src/plugins/vis_type_vislib/public/editor/components/gauge/ranges_panel.tsx
similarity index 100%
rename from src/plugins/vis_type_vislib/public/components/options/gauge/ranges_panel.tsx
rename to src/plugins/vis_type_vislib/public/editor/components/gauge/ranges_panel.tsx
diff --git a/src/plugins/vis_type_vislib/public/components/options/gauge/style_panel.tsx b/src/plugins/vis_type_vislib/public/editor/components/gauge/style_panel.tsx
similarity index 100%
rename from src/plugins/vis_type_vislib/public/components/options/gauge/style_panel.tsx
rename to src/plugins/vis_type_vislib/public/editor/components/gauge/style_panel.tsx
diff --git a/src/plugins/vis_type_vislib/public/components/options/heatmap/index.tsx b/src/plugins/vis_type_vislib/public/editor/components/heatmap/index.tsx
similarity index 97%
rename from src/plugins/vis_type_vislib/public/components/options/heatmap/index.tsx
rename to src/plugins/vis_type_vislib/public/editor/components/heatmap/index.tsx
index 312cf60fda6b0..f5b853accb08e 100644
--- a/src/plugins/vis_type_vislib/public/components/options/heatmap/index.tsx
+++ b/src/plugins/vis_type_vislib/public/editor/components/heatmap/index.tsx
@@ -23,7 +23,8 @@ import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
+import { VisOptionsProps } from '../../../../../vis_default_editor/public';
+import { ValueAxis } from '../../../../../vis_type_xy/public';
 import {
   BasicOptions,
   ColorRanges,
@@ -34,8 +35,8 @@ import {
   SetColorSchemaOptionsValue,
   SetColorRangeValue,
 } from '../../../../../charts/public';
+
 import { HeatmapVisParams } from '../../../heatmap';
-import { ValueAxis } from '../../../types';
 import { LabelsPanel } from './labels_panel';
 
 function HeatmapOptions(props: VisOptionsProps<HeatmapVisParams>) {
diff --git a/src/plugins/vis_type_vislib/public/components/options/heatmap/labels_panel.tsx b/src/plugins/vis_type_vislib/public/editor/components/heatmap/labels_panel.tsx
similarity index 96%
rename from src/plugins/vis_type_vislib/public/components/options/heatmap/labels_panel.tsx
rename to src/plugins/vis_type_vislib/public/editor/components/heatmap/labels_panel.tsx
index 4998a8fd02521..8ec06ea50ec12 100644
--- a/src/plugins/vis_type_vislib/public/components/options/heatmap/labels_panel.tsx
+++ b/src/plugins/vis_type_vislib/public/editor/components/heatmap/labels_panel.tsx
@@ -23,10 +23,11 @@ import { EuiColorPicker, EuiFormRow, EuiPanel, EuiSpacer, EuiTitle } from '@elas
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-import { ValueAxis } from '../../../types';
-import { HeatmapVisParams } from '../../../heatmap';
+import { VisOptionsProps } from '../../../../../vis_default_editor/public';
 import { SwitchOption } from '../../../../../charts/public';
+import { ValueAxis } from '../../../../../vis_type_xy/public';
+
+import { HeatmapVisParams } from '../../../heatmap';
 
 const VERTICAL_ROTATION = 270;
 
diff --git a/src/plugins/vis_type_vislib/public/components/options/index.tsx b/src/plugins/vis_type_vislib/public/editor/components/index.tsx
similarity index 71%
rename from src/plugins/vis_type_vislib/public/components/options/index.tsx
rename to src/plugins/vis_type_vislib/public/editor/components/index.tsx
index 18c41bf289b11..ed8c8239a07b6 100644
--- a/src/plugins/vis_type_vislib/public/components/options/index.tsx
+++ b/src/plugins/vis_type_vislib/public/editor/components/index.tsx
@@ -19,18 +19,15 @@
 
 import React, { lazy } from 'react';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-import { ValidationVisOptionsProps } from '../common';
+import { VisOptionsProps } from '../../../../vis_default_editor/public';
+
 import { GaugeVisParams } from '../../gauge';
 import { PieVisParams } from '../../pie';
-import { BasicVislibParams } from '../../types';
 import { HeatmapVisParams } from '../../heatmap';
 
 const GaugeOptionsLazy = lazy(() => import('./gauge'));
 const PieOptionsLazy = lazy(() => import('./pie'));
-const PointSeriesOptionsLazy = lazy(() => import('./point_series'));
 const HeatmapOptionsLazy = lazy(() => import('./heatmap'));
-const MetricsAxisOptionsLazy = lazy(() => import('./metrics_axes'));
 
 export const GaugeOptions = (props: VisOptionsProps<GaugeVisParams>) => (
   <GaugeOptionsLazy {...props} />
@@ -38,14 +35,6 @@ export const GaugeOptions = (props: VisOptionsProps<GaugeVisParams>) => (
 
 export const PieOptions = (props: VisOptionsProps<PieVisParams>) => <PieOptionsLazy {...props} />;
 
-export const PointSeriesOptions = (props: ValidationVisOptionsProps<BasicVislibParams>) => (
-  <PointSeriesOptionsLazy {...props} />
-);
-
 export const HeatmapOptions = (props: VisOptionsProps<HeatmapVisParams>) => (
   <HeatmapOptionsLazy {...props} />
 );
-
-export const MetricsAxisOptions = (props: ValidationVisOptionsProps<BasicVislibParams>) => (
-  <MetricsAxisOptionsLazy {...props} />
-);
diff --git a/src/plugins/vis_type_vislib/public/components/options/pie.tsx b/src/plugins/vis_type_vislib/public/editor/components/pie.tsx
similarity index 96%
rename from src/plugins/vis_type_vislib/public/components/options/pie.tsx
rename to src/plugins/vis_type_vislib/public/editor/components/pie.tsx
index 30828bfc6a3ea..1c3aa501b4d00 100644
--- a/src/plugins/vis_type_vislib/public/components/options/pie.tsx
+++ b/src/plugins/vis_type_vislib/public/editor/components/pie.tsx
@@ -22,9 +22,10 @@ import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-import { TruncateLabelsOption } from '../common';
+import { VisOptionsProps } from '../../../../vis_default_editor/public';
 import { BasicOptions, SwitchOption } from '../../../../charts/public';
+import { TruncateLabelsOption } from '../../../../vis_type_xy/public';
+
 import { PieVisParams } from '../../pie';
 
 function PieOptions(props: VisOptionsProps<PieVisParams>) {
diff --git a/src/plugins/vis_type_vislib/public/editor/index.ts b/src/plugins/vis_type_vislib/public/editor/index.ts
new file mode 100644
index 0000000000000..2a73b1ad8fa68
--- /dev/null
+++ b/src/plugins/vis_type_vislib/public/editor/index.ts
@@ -0,0 +1,21 @@
+/*
+ * 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 * from './collections';
+export * from './components';
diff --git a/src/plugins/vis_type_vislib/public/gauge.ts b/src/plugins/vis_type_vislib/public/gauge.ts
index 7cc8e03c9e4c2..de32ee17a21bf 100644
--- a/src/plugins/vis_type_vislib/public/gauge.ts
+++ b/src/plugins/vis_type_vislib/public/gauge.ts
@@ -19,24 +19,25 @@
 
 import { i18n } from '@kbn/i18n';
 
+import { ColorMode, ColorSchemas, ColorSchemaParams, Labels, Style } from '../../charts/public';
 import { RangeValues, Schemas } from '../../vis_default_editor/public';
 import { AggGroupNames } from '../../data/public';
-import { GaugeOptions } from './components/options';
-import { getGaugeCollections, Alignments, GaugeTypes } from './utils/collections';
-import { ColorModes, ColorSchemas, ColorSchemaParams, Labels, Style } from '../../charts/public';
-import { toExpressionAst } from './to_ast';
 import { BaseVisTypeOptions, VIS_EVENT_TO_TRIGGER } from '../../visualizations/public';
-import { BasicVislibParams } from './types';
+
+import { Alignment, GaugeType, BasicVislibParams, VislibChartType } from './types';
+import { getGaugeCollections } from './editor';
+import { toExpressionAst } from './to_ast';
+import { GaugeOptions } from './editor/components';
 
 export interface Gauge extends ColorSchemaParams {
   backStyle: 'Full';
   gaugeStyle: 'Full';
   orientation: 'vertical';
   type: 'meter';
-  alignment: Alignments;
+  alignment: Alignment;
   colorsRange: RangeValues[];
   extendRange: boolean;
-  gaugeType: GaugeTypes;
+  gaugeType: GaugeType;
   labels: Labels;
   percentageMode: boolean;
   outline?: boolean;
@@ -67,20 +68,20 @@ export const gaugeVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
   toExpressionAst,
   visConfig: {
     defaults: {
-      type: 'gauge',
+      type: VislibChartType.Gauge,
       addTooltip: true,
       addLegend: true,
       isDisplayWarning: false,
       gauge: {
-        alignment: Alignments.AUTOMATIC,
+        alignment: Alignment.Automatic,
         extendRange: true,
         percentageMode: false,
-        gaugeType: GaugeTypes.ARC,
+        gaugeType: GaugeType.Arc,
         gaugeStyle: 'Full',
         backStyle: 'Full',
         orientation: 'vertical',
         colorSchema: ColorSchemas.GreenToRed,
-        gaugeColorMode: ColorModes.LABELS,
+        gaugeColorMode: ColorMode.Labels,
         colorsRange: [
           { from: 0, to: 50 },
           { from: 50, to: 75 },
diff --git a/src/plugins/vis_type_vislib/public/goal.ts b/src/plugins/vis_type_vislib/public/goal.ts
index 46878ca82e45a..56361421261fc 100644
--- a/src/plugins/vis_type_vislib/public/goal.ts
+++ b/src/plugins/vis_type_vislib/public/goal.ts
@@ -19,14 +19,14 @@
 
 import { i18n } from '@kbn/i18n';
 
-import { GaugeOptions } from './components/options';
-import { getGaugeCollections, GaugeTypes } from './utils/collections';
-import { ColorModes, ColorSchemas } from '../../charts/public';
 import { AggGroupNames } from '../../data/public';
 import { Schemas } from '../../vis_default_editor/public';
-import { toExpressionAst } from './to_ast';
+import { ColorMode, ColorSchemas } from '../../charts/public';
 import { BaseVisTypeOptions } from '../../visualizations/public';
-import { BasicVislibParams } from './types';
+
+import { getGaugeCollections, GaugeOptions } from './editor';
+import { toExpressionAst } from './to_ast';
+import { GaugeType, BasicVislibParams } from './types';
 
 export const goalVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
   name: 'goal',
@@ -46,13 +46,13 @@ export const goalVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
         verticalSplit: false,
         autoExtend: false,
         percentageMode: true,
-        gaugeType: GaugeTypes.ARC,
+        gaugeType: GaugeType.Arc,
         gaugeStyle: 'Full',
         backStyle: 'Full',
         orientation: 'vertical',
         useRanges: false,
         colorSchema: ColorSchemas.GreenToRed,
-        gaugeColorMode: ColorModes.NONE,
+        gaugeColorMode: ColorMode.None,
         colorsRange: [{ from: 0, to: 10000 }],
         invertColors: false,
         labels: {
diff --git a/src/plugins/vis_type_vislib/public/heatmap.ts b/src/plugins/vis_type_vislib/public/heatmap.ts
index c408ac140dd46..4a815fd8b2c73 100644
--- a/src/plugins/vis_type_vislib/public/heatmap.ts
+++ b/src/plugins/vis_type_vislib/public/heatmap.ts
@@ -18,15 +18,17 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { Position } from '@elastic/charts';
 
 import { RangeValues, Schemas } from '../../vis_default_editor/public';
 import { AggGroupNames } from '../../data/public';
-import { AxisTypes, getHeatmapCollections, Positions, ScaleTypes } from './utils/collections';
-import { HeatmapOptions } from './components/options';
-import { TimeMarker } from './vislib/visualizations/time_marker';
-import { BasicVislibParams, CommonVislibParams, ValueAxis } from './types';
 import { ColorSchemas, ColorSchemaParams } from '../../charts/public';
-import { BaseVisTypeOptions, VIS_EVENT_TO_TRIGGER } from '../../../plugins/visualizations/public';
+import { VIS_EVENT_TO_TRIGGER, BaseVisTypeOptions } from '../../visualizations/public';
+import { ValueAxis, ScaleType, AxisType } from '../../vis_type_xy/public';
+
+import { HeatmapOptions, getHeatmapCollections } from './editor';
+import { TimeMarker } from './vislib/visualizations/time_marker';
+import { CommonVislibParams, BasicVislibParams, VislibChartType } from './types';
 import { toExpressionAst } from './to_ast';
 
 export interface HeatmapVisParams extends CommonVislibParams, ColorSchemaParams {
@@ -48,15 +50,15 @@ export const heatmapVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
   description: i18n.translate('visTypeVislib.heatmap.heatmapDescription', {
     defaultMessage: 'Shade data in cells in a matrix.',
   }),
-  getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter],
   toExpressionAst,
+  getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter],
   visConfig: {
     defaults: {
-      type: 'heatmap',
+      type: VislibChartType.Heatmap,
       addTooltip: true,
       addLegend: true,
       enableHover: false,
-      legendPosition: Positions.RIGHT,
+      legendPosition: Position.Right,
       times: [],
       colorsNumber: 4,
       colorSchema: ColorSchemas.Greens,
@@ -68,9 +70,9 @@ export const heatmapVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
         {
           show: false,
           id: 'ValueAxis-1',
-          type: AxisTypes.VALUE,
+          type: AxisType.Value,
           scale: {
-            type: ScaleTypes.LINEAR,
+            type: ScaleType.Linear,
             defaultYExtents: false,
           },
           labels: {
diff --git a/src/plugins/vis_type_vislib/public/histogram.ts b/src/plugins/vis_type_vislib/public/histogram.ts
index de4855ba9aa2b..7424ef5c4df27 100644
--- a/src/plugins/vis_type_vislib/public/histogram.ts
+++ b/src/plugins/vis_type_vislib/public/histogram.ts
@@ -17,174 +17,14 @@
  * under the License.
  */
 
-import { i18n } from '@kbn/i18n';
-// @ts-ignore
-import { palettes } from '@elastic/eui/lib/services';
-// @ts-ignore
-import { euiPaletteColorBlind } from '@elastic/eui/lib/services';
+import { xyVisTypes } from '../../vis_type_xy/public';
+import { BaseVisTypeOptions } from '../../visualizations/public';
 
-import { AggGroupNames } from '../../data/public';
-import { Schemas } from '../../vis_default_editor/public';
-import {
-  Positions,
-  ChartTypes,
-  ChartModes,
-  AxisTypes,
-  ScaleTypes,
-  AxisModes,
-  ThresholdLineStyles,
-  getConfigCollections,
-} from './utils/collections';
-import { getAreaOptionTabs, countLabel } from './utils/common_config';
-import { Rotates } from '../../charts/public';
-import { BaseVisTypeOptions, VIS_EVENT_TO_TRIGGER } from '../../../plugins/visualizations/public';
-import { BasicVislibParams } from './types';
 import { toExpressionAst } from './to_ast';
+import { BasicVislibParams } from './types';
 
 export const histogramVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
-  name: 'histogram',
-  title: i18n.translate('visTypeVislib.histogram.histogramTitle', {
-    defaultMessage: 'Vertical bar',
-  }),
-  icon: 'visBarVertical',
-  description: i18n.translate('visTypeVislib.histogram.histogramDescription', {
-    defaultMessage: 'Present data in vertical bars on an axis.',
-  }),
-  getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush],
+  ...(xyVisTypes.histogram() as BaseVisTypeOptions<BasicVislibParams>),
   toExpressionAst,
-  visConfig: {
-    defaults: {
-      type: 'histogram',
-      grid: {
-        categoryLines: false,
-      },
-      categoryAxes: [
-        {
-          id: 'CategoryAxis-1',
-          type: AxisTypes.CATEGORY,
-          position: Positions.BOTTOM,
-          show: true,
-          style: {},
-          scale: {
-            type: ScaleTypes.LINEAR,
-          },
-          labels: {
-            show: true,
-            filter: true,
-            truncate: 100,
-          },
-          title: {},
-        },
-      ],
-      valueAxes: [
-        {
-          id: 'ValueAxis-1',
-          name: 'LeftAxis-1',
-          type: AxisTypes.VALUE,
-          position: Positions.LEFT,
-          show: true,
-          style: {},
-          scale: {
-            type: ScaleTypes.LINEAR,
-            mode: AxisModes.NORMAL,
-          },
-          labels: {
-            show: true,
-            rotate: Rotates.HORIZONTAL,
-            filter: false,
-            truncate: 100,
-          },
-          title: {
-            text: countLabel,
-          },
-        },
-      ],
-      seriesParams: [
-        {
-          show: true,
-          type: ChartTypes.HISTOGRAM,
-          mode: ChartModes.STACKED,
-          data: {
-            label: countLabel,
-            id: '1',
-          },
-          valueAxis: 'ValueAxis-1',
-          drawLinesBetweenPoints: true,
-          lineWidth: 2,
-          showCircles: true,
-        },
-      ],
-      addTooltip: true,
-      addLegend: true,
-      legendPosition: Positions.RIGHT,
-      times: [],
-      addTimeMarker: false,
-      labels: {
-        show: false,
-      },
-      thresholdLine: {
-        show: false,
-        value: 10,
-        width: 1,
-        style: ThresholdLineStyles.FULL,
-        color: euiPaletteColorBlind()[9],
-      },
-    },
-  },
-  editorConfig: {
-    collections: getConfigCollections(),
-    optionTabs: getAreaOptionTabs(),
-    schemas: new Schemas([
-      {
-        group: AggGroupNames.Metrics,
-        name: 'metric',
-        title: i18n.translate('visTypeVislib.histogram.metricTitle', {
-          defaultMessage: 'Y-axis',
-        }),
-        min: 1,
-        aggFilter: ['!geo_centroid', '!geo_bounds'],
-        defaults: [{ schema: 'metric', type: 'count' }],
-      },
-      {
-        group: AggGroupNames.Metrics,
-        name: 'radius',
-        title: i18n.translate('visTypeVislib.histogram.radiusTitle', {
-          defaultMessage: 'Dot size',
-        }),
-        min: 0,
-        max: 1,
-        aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'segment',
-        title: i18n.translate('visTypeVislib.histogram.segmentTitle', {
-          defaultMessage: 'X-axis',
-        }),
-        min: 0,
-        max: 1,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'group',
-        title: i18n.translate('visTypeVislib.histogram.groupTitle', {
-          defaultMessage: 'Split series',
-        }),
-        min: 0,
-        max: 3,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'split',
-        title: i18n.translate('visTypeVislib.histogram.splitTitle', {
-          defaultMessage: 'Split chart',
-        }),
-        min: 0,
-        max: 1,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-    ]),
-  },
+  visualization: undefined,
 };
diff --git a/src/plugins/vis_type_vislib/public/horizontal_bar.ts b/src/plugins/vis_type_vislib/public/horizontal_bar.ts
index 144e63224533b..9e919c66cb365 100644
--- a/src/plugins/vis_type_vislib/public/horizontal_bar.ts
+++ b/src/plugins/vis_type_vislib/public/horizontal_bar.ts
@@ -17,171 +17,14 @@
  * under the License.
  */
 
-import { i18n } from '@kbn/i18n';
-// @ts-ignore
-import { palettes, euiPaletteColorBlind } from '@elastic/eui/lib/services';
+import { xyVisTypes } from '../../vis_type_xy/public';
+import { BaseVisTypeOptions } from '../../visualizations/public';
 
-import { AggGroupNames } from '../../data/public';
-import { Schemas } from '../../vis_default_editor/public';
-import {
-  Positions,
-  ChartTypes,
-  ChartModes,
-  AxisTypes,
-  ScaleTypes,
-  AxisModes,
-  ThresholdLineStyles,
-  getConfigCollections,
-} from './utils/collections';
-import { getAreaOptionTabs, countLabel } from './utils/common_config';
-import { Rotates } from '../../charts/public';
-import { BaseVisTypeOptions, VIS_EVENT_TO_TRIGGER } from '../../../plugins/visualizations/public';
-import { BasicVislibParams } from './types';
 import { toExpressionAst } from './to_ast';
+import { BasicVislibParams } from './types';
 
 export const horizontalBarVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
-  name: 'horizontal_bar',
-  title: i18n.translate('visTypeVislib.horizontalBar.horizontalBarTitle', {
-    defaultMessage: 'Horizontal bar',
-  }),
-  icon: 'visBarHorizontal',
-  description: i18n.translate('visTypeVislib.horizontalBar.horizontalBarDescription', {
-    defaultMessage: 'Present data in horizontal bars on an axis.',
-  }),
-  getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush],
+  ...(xyVisTypes.horizontalBar() as BaseVisTypeOptions<BasicVislibParams>),
   toExpressionAst,
-  visConfig: {
-    defaults: {
-      type: 'histogram',
-      grid: {
-        categoryLines: false,
-      },
-      categoryAxes: [
-        {
-          id: 'CategoryAxis-1',
-          type: AxisTypes.CATEGORY,
-          position: Positions.LEFT,
-          show: true,
-          style: {},
-          scale: {
-            type: ScaleTypes.LINEAR,
-          },
-          labels: {
-            show: true,
-            rotate: Rotates.HORIZONTAL,
-            filter: false,
-            truncate: 200,
-          },
-          title: {},
-        },
-      ],
-      valueAxes: [
-        {
-          id: 'ValueAxis-1',
-          name: 'LeftAxis-1',
-          type: AxisTypes.VALUE,
-          position: Positions.BOTTOM,
-          show: true,
-          style: {},
-          scale: {
-            type: ScaleTypes.LINEAR,
-            mode: AxisModes.NORMAL,
-          },
-          labels: {
-            show: true,
-            rotate: Rotates.ANGLED,
-            filter: true,
-            truncate: 100,
-          },
-          title: {
-            text: countLabel,
-          },
-        },
-      ],
-      seriesParams: [
-        {
-          show: true,
-          type: ChartTypes.HISTOGRAM,
-          mode: ChartModes.NORMAL,
-          data: {
-            label: countLabel,
-            id: '1',
-          },
-          valueAxis: 'ValueAxis-1',
-          drawLinesBetweenPoints: true,
-          lineWidth: 2,
-          showCircles: true,
-        },
-      ],
-      addTooltip: true,
-      addLegend: true,
-      legendPosition: Positions.RIGHT,
-      times: [],
-      addTimeMarker: false,
-      labels: {},
-      thresholdLine: {
-        show: false,
-        value: 10,
-        width: 1,
-        style: ThresholdLineStyles.FULL,
-        color: euiPaletteColorBlind()[9],
-      },
-    },
-  },
-  editorConfig: {
-    collections: getConfigCollections(),
-    optionTabs: getAreaOptionTabs(),
-    schemas: new Schemas([
-      {
-        group: AggGroupNames.Metrics,
-        name: 'metric',
-        title: i18n.translate('visTypeVislib.horizontalBar.metricTitle', {
-          defaultMessage: 'Y-axis',
-        }),
-        min: 1,
-        aggFilter: ['!geo_centroid', '!geo_bounds'],
-        defaults: [{ schema: 'metric', type: 'count' }],
-      },
-      {
-        group: AggGroupNames.Metrics,
-        name: 'radius',
-        title: i18n.translate('visTypeVislib.horizontalBar.radiusTitle', {
-          defaultMessage: 'Dot size',
-        }),
-        min: 0,
-        max: 1,
-        aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'segment',
-        title: i18n.translate('visTypeVislib.horizontalBar.segmentTitle', {
-          defaultMessage: 'X-axis',
-        }),
-        min: 0,
-        max: 1,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'group',
-        title: i18n.translate('visTypeVislib.horizontalBar.groupTitle', {
-          defaultMessage: 'Split series',
-        }),
-        min: 0,
-        max: 3,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'split',
-        title: i18n.translate('visTypeVislib.horizontalBar.splitTitle', {
-          defaultMessage: 'Split chart',
-        }),
-        min: 0,
-        max: 1,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-    ]),
-  },
+  visualization: undefined,
 };
diff --git a/src/plugins/vis_type_vislib/public/line.ts b/src/plugins/vis_type_vislib/public/line.ts
index ffa40c8c29980..15f20edd359dd 100644
--- a/src/plugins/vis_type_vislib/public/line.ts
+++ b/src/plugins/vis_type_vislib/public/line.ts
@@ -17,164 +17,14 @@
  * under the License.
  */
 
-import { i18n } from '@kbn/i18n';
-// @ts-ignore
-import { palettes, euiPaletteColorBlind } from '@elastic/eui/lib/services';
+import { xyVisTypes } from '../../vis_type_xy/public';
+import { BaseVisTypeOptions } from '../../visualizations/public';
 
-import { AggGroupNames } from '../../data/public';
-import { Schemas } from '../../vis_default_editor/public';
-import {
-  Positions,
-  ChartTypes,
-  ChartModes,
-  AxisTypes,
-  ScaleTypes,
-  AxisModes,
-  ThresholdLineStyles,
-  InterpolationModes,
-  getConfigCollections,
-} from './utils/collections';
-import { getAreaOptionTabs, countLabel } from './utils/common_config';
-import { Rotates } from '../../charts/public';
-import { BaseVisTypeOptions, VIS_EVENT_TO_TRIGGER } from '../../../plugins/visualizations/public';
 import { toExpressionAst } from './to_ast';
 import { BasicVislibParams } from './types';
 
 export const lineVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
-  name: 'line',
-  title: i18n.translate('visTypeVislib.line.lineTitle', { defaultMessage: 'Line' }),
-  icon: 'visLine',
-  description: i18n.translate('visTypeVislib.line.lineDescription', {
-    defaultMessage: 'Display data as a series of points.',
-  }),
-  getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush],
+  ...(xyVisTypes.line() as BaseVisTypeOptions<BasicVislibParams>),
   toExpressionAst,
-  visConfig: {
-    defaults: {
-      type: 'line',
-      grid: {
-        categoryLines: false,
-      },
-      categoryAxes: [
-        {
-          id: 'CategoryAxis-1',
-          type: AxisTypes.CATEGORY,
-          position: Positions.BOTTOM,
-          show: true,
-          style: {},
-          scale: {
-            type: ScaleTypes.LINEAR,
-          },
-          labels: {
-            show: true,
-            filter: true,
-            truncate: 100,
-          },
-          title: {},
-        },
-      ],
-      valueAxes: [
-        {
-          id: 'ValueAxis-1',
-          name: 'LeftAxis-1',
-          type: AxisTypes.VALUE,
-          position: Positions.LEFT,
-          show: true,
-          style: {},
-          scale: {
-            type: ScaleTypes.LINEAR,
-            mode: AxisModes.NORMAL,
-          },
-          labels: {
-            show: true,
-            rotate: Rotates.HORIZONTAL,
-            filter: false,
-            truncate: 100,
-          },
-          title: {
-            text: countLabel,
-          },
-        },
-      ],
-      seriesParams: [
-        {
-          show: true,
-          type: ChartTypes.LINE,
-          mode: ChartModes.NORMAL,
-          data: {
-            label: countLabel,
-            id: '1',
-          },
-          valueAxis: 'ValueAxis-1',
-          drawLinesBetweenPoints: true,
-          lineWidth: 2,
-          interpolate: InterpolationModes.LINEAR,
-          showCircles: true,
-        },
-      ],
-      addTooltip: true,
-      addLegend: true,
-      legendPosition: Positions.RIGHT,
-      times: [],
-      addTimeMarker: false,
-      labels: {},
-      thresholdLine: {
-        show: false,
-        value: 10,
-        width: 1,
-        style: ThresholdLineStyles.FULL,
-        color: euiPaletteColorBlind()[9],
-      },
-    },
-  },
-  editorConfig: {
-    collections: getConfigCollections(),
-    optionTabs: getAreaOptionTabs(),
-    schemas: new Schemas([
-      {
-        group: AggGroupNames.Metrics,
-        name: 'metric',
-        title: i18n.translate('visTypeVislib.line.metricTitle', { defaultMessage: 'Y-axis' }),
-        min: 1,
-        aggFilter: ['!geo_centroid', '!geo_bounds'],
-        defaults: [{ schema: 'metric', type: 'count' }],
-      },
-      {
-        group: AggGroupNames.Metrics,
-        name: 'radius',
-        title: i18n.translate('visTypeVislib.line.radiusTitle', { defaultMessage: 'Dot size' }),
-        min: 0,
-        max: 1,
-        aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality', 'top_hits'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'segment',
-        title: i18n.translate('visTypeVislib.line.segmentTitle', { defaultMessage: 'X-axis' }),
-        min: 0,
-        max: 1,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'group',
-        title: i18n.translate('visTypeVislib.line.groupTitle', {
-          defaultMessage: 'Split series',
-        }),
-        min: 0,
-        max: 3,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-      {
-        group: AggGroupNames.Buckets,
-        name: 'split',
-        title: i18n.translate('visTypeVislib.line.splitTitle', {
-          defaultMessage: 'Split chart',
-        }),
-        min: 0,
-        max: 1,
-        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-      },
-    ]),
-  },
+  visualization: undefined,
 };
diff --git a/src/plugins/vis_type_vislib/public/pie.ts b/src/plugins/vis_type_vislib/public/pie.ts
index 41b271054d59f..aa5a3ceaaba98 100644
--- a/src/plugins/vis_type_vislib/public/pie.ts
+++ b/src/plugins/vis_type_vislib/public/pie.ts
@@ -18,13 +18,15 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { Position } from '@elastic/charts';
 
 import { AggGroupNames } from '../../data/public';
 import { Schemas } from '../../vis_default_editor/public';
-import { PieOptions } from './components/options';
-import { getPositions, Positions } from './utils/collections';
+import { BaseVisTypeOptions, VIS_EVENT_TO_TRIGGER } from '../../visualizations/public';
+import { getPositions } from '../../vis_type_xy/public';
+
 import { CommonVislibParams } from './types';
-import { BaseVisTypeOptions, VIS_EVENT_TO_TRIGGER } from '../../../plugins/visualizations/public';
+import { PieOptions } from './editor';
 import { toExpressionAst } from './to_ast_pie';
 
 export interface PieVisParams extends CommonVislibParams {
@@ -52,7 +54,7 @@ export const pieVisTypeDefinition: BaseVisTypeOptions<PieVisParams> = {
       type: 'pie',
       addTooltip: true,
       addLegend: true,
-      legendPosition: Positions.RIGHT,
+      legendPosition: Position.Right,
       isDonut: true,
       labels: {
         show: false,
diff --git a/src/plugins/vis_type_vislib/public/pie_fn.ts b/src/plugins/vis_type_vislib/public/pie_fn.ts
index 00aa73128c349..8b16d8eb0982f 100644
--- a/src/plugins/vis_type_vislib/public/pie_fn.ts
+++ b/src/plugins/vis_type_vislib/public/pie_fn.ts
@@ -24,6 +24,7 @@ import { ExpressionFunctionDefinition, Datatable, Render } from '../../expressio
 // @ts-ignore
 import { vislibSlicesResponseHandler } from './vislib/response_handler';
 import { PieVisParams } from './pie';
+import { VislibChartType } from './types';
 import { vislibVisName } from './vis_type_vislib_vis_fn';
 
 export const vislibPieName = 'vislib_pie_vis';
@@ -32,9 +33,9 @@ interface Arguments {
   visConfig: string;
 }
 
-interface RenderValue {
+export interface PieRenderValue {
+  visType: Extract<VislibChartType, 'pie'>;
   visData: unknown;
-  visType: string;
   visConfig: PieVisParams;
 }
 
@@ -42,7 +43,7 @@ export type VisTypeVislibPieExpressionFunctionDefinition = ExpressionFunctionDef
   typeof vislibPieName,
   Datatable,
   Arguments,
-  Render<RenderValue>
+  Render<PieRenderValue>
 >;
 
 export const createPieVisFn = (): VisTypeVislibPieExpressionFunctionDefinition => ({
@@ -73,7 +74,7 @@ export const createPieVisFn = (): VisTypeVislibPieExpressionFunctionDefinition =
       value: {
         visData,
         visConfig,
-        visType: 'pie',
+        visType: VislibChartType.Pie,
       },
     };
   },
diff --git a/src/plugins/vis_type_vislib/public/plugin.ts b/src/plugins/vis_type_vislib/public/plugin.ts
index f183042fd5201..bef8ad26fb12c 100644
--- a/src/plugins/vis_type_vislib/public/plugin.ts
+++ b/src/plugins/vis_type_vislib/public/plugin.ts
@@ -19,25 +19,28 @@
 
 import { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from 'kibana/public';
 
-import { VisTypeXyPluginSetup } from 'src/plugins/vis_type_xy/public';
 import { Plugin as ExpressionsPublicPlugin } from '../../expressions/public';
-import { BaseVisTypeOptions, VisualizationsSetup } from '../../visualizations/public';
-import { createVisTypeVislibVisFn } from './vis_type_vislib_vis_fn';
-import { createPieVisFn } from './pie_fn';
-import { visLibVisTypeDefinitions, pieVisTypeDefinition } from './vis_type_vislib_vis_types';
+import { VisualizationsSetup } from '../../visualizations/public';
 import { ChartsPluginSetup } from '../../charts/public';
 import { DataPublicPluginStart } from '../../data/public';
 import { KibanaLegacyStart } from '../../kibana_legacy/public';
+import { CHARTS_LIBRARY } from '../../vis_type_xy/public';
+
+import { createVisTypeVislibVisFn } from './vis_type_vislib_vis_fn';
+import { createPieVisFn } from './pie_fn';
+import {
+  convertedTypeDefinitions,
+  pieVisTypeDefinition,
+  visLibVisTypeDefinitions,
+} from './vis_type_vislib_vis_types';
 import { setFormatService, setDataActions } from './services';
 import { getVislibVisRenderer } from './vis_renderer';
-import { BasicVislibParams } from './types';
 
 /** @internal */
 export interface VisTypeVislibPluginSetupDependencies {
   expressions: ReturnType<ExpressionsPublicPlugin['setup']>;
   visualizations: VisualizationsSetup;
   charts: ChartsPluginSetup;
-  visTypeXy?: VisTypeXyPluginSetup;
 }
 
 /** @internal */
@@ -56,23 +59,21 @@ export class VisTypeVislibPlugin
 
   public async setup(
     core: VisTypeVislibCoreSetup,
-    { expressions, visualizations, charts, visTypeXy }: VisTypeVislibPluginSetupDependencies
+    { expressions, visualizations, charts }: VisTypeVislibPluginSetupDependencies
   ) {
-    // if visTypeXy plugin is disabled it's config will be undefined
-    if (!visTypeXy) {
-      const convertedTypes: Array<BaseVisTypeOptions<BasicVislibParams>> = [];
-      const convertedFns: any[] = [];
-
-      // Register legacy vislib types that have been converted
-      convertedFns.forEach(expressions.registerFunction);
-      convertedTypes.forEach(visualizations.createBaseVisualization);
+    if (core.uiSettings.get(CHARTS_LIBRARY)) {
+      // Register only non-replaced vis types
+      convertedTypeDefinitions.forEach(visualizations.createBaseVisualization);
+      visualizations.createBaseVisualization(pieVisTypeDefinition);
+      expressions.registerRenderer(getVislibVisRenderer(core, charts));
+      [createVisTypeVislibVisFn(), createPieVisFn()].forEach(expressions.registerFunction);
+    } else {
+      // Register all vis types
+      visLibVisTypeDefinitions.forEach(visualizations.createBaseVisualization);
+      visualizations.createBaseVisualization(pieVisTypeDefinition);
       expressions.registerRenderer(getVislibVisRenderer(core, charts));
+      [createVisTypeVislibVisFn(), createPieVisFn()].forEach(expressions.registerFunction);
     }
-    // Register non-converted types
-    visLibVisTypeDefinitions.forEach(visualizations.createBaseVisualization);
-    visualizations.createBaseVisualization(pieVisTypeDefinition);
-    expressions.registerRenderer(getVislibVisRenderer(core, charts));
-    [createVisTypeVislibVisFn(), createPieVisFn()].forEach(expressions.registerFunction);
   }
 
   public start(core: CoreStart, { data }: VisTypeVislibPluginStartDependencies) {
diff --git a/src/plugins/vis_type_vislib/public/to_ast.ts b/src/plugins/vis_type_vislib/public/to_ast.ts
index 3a05410ff006b..30ed2e4ca1bb4 100644
--- a/src/plugins/vis_type_vislib/public/to_ast.ts
+++ b/src/plugins/vis_type_vislib/public/to_ast.ts
@@ -21,14 +21,11 @@ import moment from 'moment';
 
 import { VisToExpressionAst, getVisSchemas } from '../../visualizations/public';
 import { buildExpression, buildExpressionFunction } from '../../expressions/public';
+import type { Dimensions, DateHistogramParams, HistogramParams } from '../../vis_type_xy/public';
+import { BUCKET_TYPES } from '../../data/public';
 
 import { vislibVisName, VisTypeVislibExpressionFunctionDefinition } from './vis_type_vislib_vis_fn';
-import { BasicVislibParams } from './types';
-import {
-  DateHistogramParams,
-  Dimensions,
-  HistogramParams,
-} from './vislib/helpers/point_series/point_series';
+import { BasicVislibParams, VislibChartType } from './types';
 import { getEsaggsFn } from './to_ast_esaggs';
 
 export const toExpressionAst: VisToExpressionAst<BasicVislibParams> = async (vis, params) => {
@@ -47,7 +44,7 @@ export const toExpressionAst: VisToExpressionAst<BasicVislibParams> = async (vis
 
   if (dimensions.x) {
     const xAgg = responseAggs[dimensions.x.accessor] as any;
-    if (xAgg.type.name === 'date_histogram') {
+    if (xAgg.type.name === BUCKET_TYPES.DATE_HISTOGRAM) {
       (dimensions.x.params as DateHistogramParams).date = true;
       const { esUnit, esValue } = xAgg.buckets.getInterval();
       (dimensions.x.params as DateHistogramParams).intervalESUnit = esUnit;
@@ -57,7 +54,7 @@ export const toExpressionAst: VisToExpressionAst<BasicVislibParams> = async (vis
         .asMilliseconds();
       (dimensions.x.params as DateHistogramParams).format = xAgg.buckets.getScaledDateFormat();
       (dimensions.x.params as DateHistogramParams).bounds = xAgg.buckets.getBounds();
-    } else if (xAgg.type.name === 'histogram') {
+    } else if (xAgg.type.name === BUCKET_TYPES.HISTOGRAM) {
       const intervalParam = xAgg.type.paramByName('interval');
       const output = { params: {} as any };
       await intervalParam.modifyAggConfigOnSearchRequestStart(xAgg, vis.data.searchSource, {
@@ -88,15 +85,15 @@ export const toExpressionAst: VisToExpressionAst<BasicVislibParams> = async (vis
 
   visConfig.dimensions = dimensions;
 
-  const visTypeXy = buildExpressionFunction<VisTypeVislibExpressionFunctionDefinition>(
+  const visTypeVislib = buildExpressionFunction<VisTypeVislibExpressionFunctionDefinition>(
     vislibVisName,
     {
-      type: vis.type.name,
+      type: vis.type.name as Exclude<VislibChartType, 'pie'>,
       visConfig: JSON.stringify(visConfig),
     }
   );
 
-  const ast = buildExpression([getEsaggsFn(vis), visTypeXy]);
+  const ast = buildExpression([getEsaggsFn(vis), visTypeVislib]);
 
   return ast.toAst();
 };
diff --git a/src/plugins/vis_type_vislib/public/to_ast_esaggs.ts b/src/plugins/vis_type_vislib/public/to_ast_esaggs.ts
index 2835e5cc1c255..d23f1ab3626d3 100644
--- a/src/plugins/vis_type_vislib/public/to_ast_esaggs.ts
+++ b/src/plugins/vis_type_vislib/public/to_ast_esaggs.ts
@@ -29,6 +29,8 @@ import { BasicVislibParams } from './types';
 
 /**
  * Get esaggs expressions function
+ * TODO: replace this with vis.data.aggs!.toExpressionAst();
+ * https://github.com/elastic/kibana/issues/61768
  * @param vis
  */
 export function getEsaggsFn(vis: Vis<PieVisParams> | Vis<BasicVislibParams>) {
diff --git a/src/plugins/vis_type_vislib/public/types.ts b/src/plugins/vis_type_vislib/public/types.ts
index c0311edf76154..4f6c427669324 100644
--- a/src/plugins/vis_type_vislib/public/types.ts
+++ b/src/plugins/vis_type_vislib/public/types.ts
@@ -17,87 +17,71 @@
  * under the License.
  */
 
-import { TimeMarker } from './vislib/visualizations/time_marker';
+import { $Values } from '@kbn/utility-types';
+import { Position } from '@elastic/charts';
+
+import { Labels } from '../../charts/public';
 import {
-  Positions,
-  ChartModes,
-  ChartTypes,
-  AxisModes,
-  AxisTypes,
-  InterpolationModes,
-  ScaleTypes,
-  ThresholdLineStyles,
-} from './utils/collections';
-import { Labels, Style } from '../../charts/public';
-import { Dimensions } from './vislib/helpers/point_series/point_series';
+  CategoryAxis,
+  Dimensions,
+  Grid,
+  SeriesParam,
+  ThresholdLine,
+  ValueAxis,
+} from '../../vis_type_xy/public';
+import { TimeMarker } from './vislib/visualizations/time_marker';
+
+/**
+ * Gauge title alignment
+ */
+export const Alignment = Object.freeze({
+  Automatic: 'automatic' as const,
+  Horizontal: 'horizontal' as const,
+  Vertical: 'vertical' as const,
+});
+export type Alignment = $Values<typeof Alignment>;
+
+export const GaugeType = Object.freeze({
+  Arc: 'Arc' as const,
+  Circle: 'Circle' as const,
+});
+export type GaugeType = $Values<typeof GaugeType>;
+
+export const VislibChartType = Object.freeze({
+  Histogram: 'histogram' as const,
+  HorizontalBar: 'horizontal_bar' as const,
+  Line: 'line' as const,
+  Pie: 'pie' as const,
+  Area: 'area' as const,
+  PointSeries: 'point_series' as const,
+  Heatmap: 'heatmap' as const,
+  Gauge: 'gauge' as const,
+  Goal: 'goal' as const,
+  Metric: 'metric' as const,
+});
+export type VislibChartType = $Values<typeof VislibChartType>;
 
 export interface CommonVislibParams {
   addTooltip: boolean;
   addLegend: boolean;
-  legendPosition: Positions;
+  legendPosition: Position;
   dimensions: Dimensions;
 }
 
-export interface Scale {
-  boundsMargin?: number | '';
-  defaultYExtents?: boolean;
-  max?: number | null;
-  min?: number | null;
-  mode?: AxisModes;
-  setYExtents?: boolean;
-  type: ScaleTypes;
-}
-
-interface ThresholdLine {
-  show: boolean;
-  value: number | null;
-  width: number | null;
-  style: ThresholdLineStyles;
-  color: string;
-}
-
-export interface Axis {
-  id: string;
-  labels: Labels;
-  position: Positions;
-  scale: Scale;
-  show: boolean;
-  style: Style;
-  title: { text: string };
-  type: AxisTypes;
-}
-
-export interface ValueAxis extends Axis {
-  name: string;
-}
-
-export interface SeriesParam {
-  data: { label: string; id: string };
-  drawLinesBetweenPoints: boolean;
-  interpolate: InterpolationModes;
-  lineWidth?: number;
-  mode: ChartModes;
-  show: boolean;
-  showCircles: boolean;
-  type: ChartTypes;
-  valueAxis: string;
-}
-
 export interface BasicVislibParams extends CommonVislibParams {
+  type: VislibChartType;
+  addLegend: boolean;
   addTimeMarker: boolean;
-  categoryAxes: Axis[];
+  categoryAxes: CategoryAxis[];
   orderBucketsBySum?: boolean;
   labels: Labels;
   thresholdLine: ThresholdLine;
   valueAxes: ValueAxis[];
+  grid: Grid;
   gauge?: {
     percentageMode: boolean;
   };
-  grid: {
-    categoryLines: boolean;
-    valueAxis?: string;
-  };
   seriesParams: SeriesParam[];
   times: TimeMarker[];
-  type: string;
+  radiusRatio: number;
 }
diff --git a/src/plugins/vis_type_vislib/public/utils/collections.ts b/src/plugins/vis_type_vislib/public/utils/collections.ts
deleted file mode 100644
index 44df4864bfd68..0000000000000
--- a/src/plugins/vis_type_vislib/public/utils/collections.ts
+++ /dev/null
@@ -1,338 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { i18n } from '@kbn/i18n';
-import { $Values } from '@kbn/utility-types';
-
-import { colorSchemas, Rotates } from '../../../charts/public';
-
-export const Positions = Object.freeze({
-  RIGHT: 'right' as 'right',
-  LEFT: 'left' as 'left',
-  TOP: 'top' as 'top',
-  BOTTOM: 'bottom' as 'bottom',
-});
-export type Positions = $Values<typeof Positions>;
-
-const getPositions = () => [
-  {
-    text: i18n.translate('visTypeVislib.legendPositions.topText', {
-      defaultMessage: 'Top',
-    }),
-    value: Positions.TOP,
-  },
-  {
-    text: i18n.translate('visTypeVislib.legendPositions.leftText', {
-      defaultMessage: 'Left',
-    }),
-    value: Positions.LEFT,
-  },
-  {
-    text: i18n.translate('visTypeVislib.legendPositions.rightText', {
-      defaultMessage: 'Right',
-    }),
-    value: Positions.RIGHT,
-  },
-  {
-    text: i18n.translate('visTypeVislib.legendPositions.bottomText', {
-      defaultMessage: 'Bottom',
-    }),
-    value: Positions.BOTTOM,
-  },
-];
-
-export const ChartTypes = Object.freeze({
-  LINE: 'line' as 'line',
-  AREA: 'area' as 'area',
-  HISTOGRAM: 'histogram' as 'histogram',
-});
-export type ChartTypes = $Values<typeof ChartTypes>;
-
-const getChartTypes = () => [
-  {
-    text: i18n.translate('visTypeVislib.chartTypes.lineText', {
-      defaultMessage: 'Line',
-    }),
-    value: ChartTypes.LINE,
-  },
-  {
-    text: i18n.translate('visTypeVislib.chartTypes.areaText', {
-      defaultMessage: 'Area',
-    }),
-    value: ChartTypes.AREA,
-  },
-  {
-    text: i18n.translate('visTypeVislib.chartTypes.barText', {
-      defaultMessage: 'Bar',
-    }),
-    value: ChartTypes.HISTOGRAM,
-  },
-];
-
-export const ChartModes = Object.freeze({
-  NORMAL: 'normal' as 'normal',
-  STACKED: 'stacked' as 'stacked',
-});
-export type ChartModes = $Values<typeof ChartModes>;
-
-const getChartModes = () => [
-  {
-    text: i18n.translate('visTypeVislib.chartModes.normalText', {
-      defaultMessage: 'Normal',
-    }),
-    value: ChartModes.NORMAL,
-  },
-  {
-    text: i18n.translate('visTypeVislib.chartModes.stackedText', {
-      defaultMessage: 'Stacked',
-    }),
-    value: ChartModes.STACKED,
-  },
-];
-
-export const InterpolationModes = Object.freeze({
-  LINEAR: 'linear' as 'linear',
-  CARDINAL: 'cardinal' as 'cardinal',
-  STEP_AFTER: 'step-after' as 'step-after',
-});
-export type InterpolationModes = $Values<typeof InterpolationModes>;
-
-const getInterpolationModes = () => [
-  {
-    text: i18n.translate('visTypeVislib.interpolationModes.straightText', {
-      defaultMessage: 'Straight',
-    }),
-    value: InterpolationModes.LINEAR,
-  },
-  {
-    text: i18n.translate('visTypeVislib.interpolationModes.smoothedText', {
-      defaultMessage: 'Smoothed',
-    }),
-    value: InterpolationModes.CARDINAL,
-  },
-  {
-    text: i18n.translate('visTypeVislib.interpolationModes.steppedText', {
-      defaultMessage: 'Stepped',
-    }),
-    value: InterpolationModes.STEP_AFTER,
-  },
-];
-
-export const AxisTypes = Object.freeze({
-  CATEGORY: 'category' as 'category',
-  VALUE: 'value' as 'value',
-});
-export type AxisTypes = $Values<typeof AxisTypes>;
-
-export const ScaleTypes = Object.freeze({
-  LINEAR: 'linear' as 'linear',
-  LOG: 'log' as 'log',
-  SQUARE_ROOT: 'square root' as 'square root',
-});
-export type ScaleTypes = $Values<typeof ScaleTypes>;
-
-const getScaleTypes = () => [
-  {
-    text: i18n.translate('visTypeVislib.scaleTypes.linearText', {
-      defaultMessage: 'Linear',
-    }),
-    value: ScaleTypes.LINEAR,
-  },
-  {
-    text: i18n.translate('visTypeVislib.scaleTypes.logText', {
-      defaultMessage: 'Log',
-    }),
-    value: ScaleTypes.LOG,
-  },
-  {
-    text: i18n.translate('visTypeVislib.scaleTypes.squareRootText', {
-      defaultMessage: 'Square root',
-    }),
-    value: ScaleTypes.SQUARE_ROOT,
-  },
-];
-
-export const AxisModes = Object.freeze({
-  NORMAL: 'normal' as 'normal',
-  PERCENTAGE: 'percentage' as 'percentage',
-  WIGGLE: 'wiggle' as 'wiggle',
-  SILHOUETTE: 'silhouette' as 'silhouette',
-});
-export type AxisModes = $Values<typeof AxisModes>;
-
-const getAxisModes = () => [
-  {
-    text: i18n.translate('visTypeVislib.axisModes.normalText', {
-      defaultMessage: 'Normal',
-    }),
-    value: AxisModes.NORMAL,
-  },
-  {
-    text: i18n.translate('visTypeVislib.axisModes.percentageText', {
-      defaultMessage: 'Percentage',
-    }),
-    value: AxisModes.PERCENTAGE,
-  },
-  {
-    text: i18n.translate('visTypeVislib.axisModes.wiggleText', {
-      defaultMessage: 'Wiggle',
-    }),
-    value: AxisModes.WIGGLE,
-  },
-  {
-    text: i18n.translate('visTypeVislib.axisModes.silhouetteText', {
-      defaultMessage: 'Silhouette',
-    }),
-    value: AxisModes.SILHOUETTE,
-  },
-];
-
-export const ThresholdLineStyles = Object.freeze({
-  FULL: 'full' as 'full',
-  DASHED: 'dashed' as 'dashed',
-  DOT_DASHED: 'dot-dashed' as 'dot-dashed',
-});
-export type ThresholdLineStyles = $Values<typeof ThresholdLineStyles>;
-
-const getThresholdLineStyles = () => [
-  {
-    value: ThresholdLineStyles.FULL,
-    text: i18n.translate('visTypeVislib.thresholdLine.style.fullText', {
-      defaultMessage: 'Full',
-    }),
-  },
-  {
-    value: ThresholdLineStyles.DASHED,
-    text: i18n.translate('visTypeVislib.thresholdLine.style.dashedText', {
-      defaultMessage: 'Dashed',
-    }),
-  },
-  {
-    value: ThresholdLineStyles.DOT_DASHED,
-    text: i18n.translate('visTypeVislib.thresholdLine.style.dotdashedText', {
-      defaultMessage: 'Dot-dashed',
-    }),
-  },
-];
-
-const getRotateOptions = () => [
-  {
-    text: i18n.translate('visTypeVislib.categoryAxis.rotate.horizontalText', {
-      defaultMessage: 'Horizontal',
-    }),
-    value: Rotates.HORIZONTAL,
-  },
-  {
-    text: i18n.translate('visTypeVislib.categoryAxis.rotate.verticalText', {
-      defaultMessage: 'Vertical',
-    }),
-    value: Rotates.VERTICAL,
-  },
-  {
-    text: i18n.translate('visTypeVislib.categoryAxis.rotate.angledText', {
-      defaultMessage: 'Angled',
-    }),
-    value: Rotates.ANGLED,
-  },
-];
-
-export const GaugeTypes = Object.freeze({
-  ARC: 'Arc' as 'Arc',
-  CIRCLE: 'Circle' as 'Circle',
-});
-export type GaugeTypes = $Values<typeof GaugeTypes>;
-
-const getGaugeTypes = () => [
-  {
-    text: i18n.translate('visTypeVislib.gauge.gaugeTypes.arcText', {
-      defaultMessage: 'Arc',
-    }),
-    value: GaugeTypes.ARC,
-  },
-  {
-    text: i18n.translate('visTypeVislib.gauge.gaugeTypes.circleText', {
-      defaultMessage: 'Circle',
-    }),
-    value: GaugeTypes.CIRCLE,
-  },
-];
-
-export const Alignments = Object.freeze({
-  AUTOMATIC: 'automatic' as 'automatic',
-  HORIZONTAL: 'horizontal' as 'horizontal',
-  VERTICAL: 'vertical' as 'vertical',
-});
-export type Alignments = $Values<typeof Alignments>;
-
-const getAlignments = () => [
-  {
-    text: i18n.translate('visTypeVislib.gauge.alignmentAutomaticTitle', {
-      defaultMessage: 'Automatic',
-    }),
-    value: Alignments.AUTOMATIC,
-  },
-  {
-    text: i18n.translate('visTypeVislib.gauge.alignmentHorizontalTitle', {
-      defaultMessage: 'Horizontal',
-    }),
-    value: Alignments.HORIZONTAL,
-  },
-  {
-    text: i18n.translate('visTypeVislib.gauge.alignmentVerticalTitle', {
-      defaultMessage: 'Vertical',
-    }),
-    value: Alignments.VERTICAL,
-  },
-];
-
-const getConfigCollections = () => ({
-  legendPositions: getPositions(),
-  positions: getPositions(),
-  chartTypes: getChartTypes(),
-  axisModes: getAxisModes(),
-  scaleTypes: getScaleTypes(),
-  chartModes: getChartModes(),
-  interpolationModes: getInterpolationModes(),
-  thresholdLineStyles: getThresholdLineStyles(),
-});
-
-const getGaugeCollections = () => ({
-  gaugeTypes: getGaugeTypes(),
-  alignments: getAlignments(),
-  colorSchemas,
-});
-
-const getHeatmapCollections = () => ({
-  legendPositions: getPositions(),
-  scales: getScaleTypes(),
-  colorSchemas,
-});
-
-export {
-  getConfigCollections,
-  getGaugeCollections,
-  getHeatmapCollections,
-  getPositions,
-  getRotateOptions,
-  getScaleTypes,
-  getInterpolationModes,
-  getChartTypes,
-  getChartModes,
-  getAxisModes,
-};
diff --git a/src/plugins/vis_type_vislib/public/vis_renderer.tsx b/src/plugins/vis_type_vislib/public/vis_renderer.tsx
index 9c697f481e63e..205c22092ac61 100644
--- a/src/plugins/vis_type_vislib/public/vis_renderer.tsx
+++ b/src/plugins/vis_type_vislib/public/vis_renderer.tsx
@@ -26,9 +26,13 @@ import { ChartsPluginSetup } from '../../charts/public';
 
 import { VisTypeVislibCoreSetup } from './plugin';
 import { VislibRenderValue, vislibVisName } from './vis_type_vislib_vis_fn';
+import { VislibChartType } from './types';
+import { PieRenderValue } from './pie_fn';
 
-function shouldShowNoResultsMessage(visData: any, visType: string): boolean {
-  if (['goal', 'gauge'].includes(visType)) {
+const VislibWrapper = lazy(() => import('./vis_wrapper'));
+
+function shouldShowNoResultsMessage(visData: any, visType: VislibChartType): boolean {
+  if (['goal', 'gauge'].includes(visType as string)) {
     return false;
   }
 
@@ -38,13 +42,12 @@ function shouldShowNoResultsMessage(visData: any, visType: string): boolean {
   return Boolean(isZeroHits);
 }
 
-const VislibWrapper = lazy(() => import('./vis_wrapper'));
-
 export const getVislibVisRenderer: (
   core: VisTypeVislibCoreSetup,
   charts: ChartsPluginSetup
-) => ExpressionRenderDefinition<VislibRenderValue> = (core, charts) => ({
+) => ExpressionRenderDefinition<VislibRenderValue | PieRenderValue> = (core, charts) => ({
   name: vislibVisName,
+  displayName: 'Vislib visualization',
   reuseDomNode: true,
   render: async (domNode, config, handlers) => {
     const showNoResult = shouldShowNoResultsMessage(config.visData, config.visType);
diff --git a/src/plugins/vis_type_vislib/public/vis_type_vislib_vis_fn.ts b/src/plugins/vis_type_vislib/public/vis_type_vislib_vis_fn.ts
index dc4a6314fb013..d627b8587882a 100644
--- a/src/plugins/vis_type_vislib/public/vis_type_vislib_vis_fn.ts
+++ b/src/plugins/vis_type_vislib/public/vis_type_vislib_vis_fn.ts
@@ -23,18 +23,18 @@ import { ExpressionFunctionDefinition, Datatable, Render } from '../../expressio
 
 // @ts-ignore
 import { vislibSeriesResponseHandler } from './vislib/response_handler';
-import { BasicVislibParams } from './types';
+import { BasicVislibParams, VislibChartType } from './types';
 
 export const vislibVisName = 'vislib_vis';
 
 interface Arguments {
-  type: string;
+  type: Exclude<VislibChartType, 'pie'>;
   visConfig: string;
 }
 
 export interface VislibRenderValue {
-  visData: any;
-  visType: string;
+  visType: Exclude<VislibChartType, 'pie'>;
+  visData: unknown;
   visConfig: BasicVislibParams;
 }
 
@@ -65,7 +65,7 @@ export const createVisTypeVislibVisFn = (): VisTypeVislibExpressionFunctionDefin
     },
   },
   fn(context, args, handlers) {
-    const visType = args.type;
+    const visType = args.type as Exclude<VislibChartType, 'pie'>;
     const visConfig = JSON.parse(args.visConfig) as BasicVislibParams;
     const visData = vislibSeriesResponseHandler(context, visConfig.dimensions);
 
diff --git a/src/plugins/vis_type_vislib/public/vis_type_vislib_vis_types.ts b/src/plugins/vis_type_vislib/public/vis_type_vislib_vis_types.ts
index 1b43a213c618d..28415e3e2fa8c 100644
--- a/src/plugins/vis_type_vislib/public/vis_type_vislib_vis_types.ts
+++ b/src/plugins/vis_type_vislib/public/vis_type_vislib_vis_types.ts
@@ -36,3 +36,9 @@ export const visLibVisTypeDefinitions = [
   gaugeVisTypeDefinition,
   goalVisTypeDefinition,
 ];
+
+export const convertedTypeDefinitions = [
+  heatmapVisTypeDefinition,
+  gaugeVisTypeDefinition,
+  goalVisTypeDefinition,
+];
diff --git a/src/plugins/vis_type_vislib/public/vis_wrapper.tsx b/src/plugins/vis_type_vislib/public/vis_wrapper.tsx
index 980ba1c175885..280a957396c34 100644
--- a/src/plugins/vis_type_vislib/public/vis_wrapper.tsx
+++ b/src/plugins/vis_type_vislib/public/vis_wrapper.tsx
@@ -27,10 +27,11 @@ import { ChartsPluginSetup } from '../../charts/public';
 import { VislibRenderValue } from './vis_type_vislib_vis_fn';
 import { createVislibVisController, VislibVisController } from './vis_controller';
 import { VisTypeVislibCoreSetup } from './plugin';
+import { PieRenderValue } from './pie_fn';
 
 import './index.scss';
 
-type VislibWrapperProps = VislibRenderValue & {
+type VislibWrapperProps = (VislibRenderValue | PieRenderValue) & {
   core: VisTypeVislibCoreSetup;
   charts: ChartsPluginSetup;
   handlers: IInterpreterRenderHandlers;
diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss b/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss
index a06f0cb00787b..cb63811800c2d 100644
--- a/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss
+++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss
@@ -3,8 +3,6 @@
 // NOTE: Some of the styles attempt to align with the TSVB legend
 
 $visLegendWidth: 150px;
-$visColorPickerWidth: $euiSizeM * 10;
-$visLegendLineHeight: $euiSize;
 
 .visLegend__toggle {
   border-radius: $euiBorderRadius;
@@ -81,20 +79,3 @@ $visLegendLineHeight: $euiSize;
     visibility: hidden;
   }
 }
-
-.visLegend__valueColorPicker {
-  width: ($euiSizeL * 8); // 8 columns
-}
-
-.visLegend__valueColorPickerDot {
-  cursor: pointer;
-
-  &:hover {
-    transform: scale(1.4);
-  }
-
-  &-isSelected {
-    border: $euiSizeXS solid;
-    border-radius: 100%;
-  }
-}
diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.test.tsx b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.test.tsx
index 7acc97404c11c..5b1a2b3975367 100644
--- a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.test.tsx
+++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.test.tsx
@@ -243,7 +243,7 @@ describe('VisLegend Component', () => {
       const first = getLegendItems(wrapper).first();
       first.simulate('click');
 
-      expect(wrapper.exists('.visLegend__valueDetails')).toBe(true);
+      expect(wrapper.exists('.visColorPicker')).toBe(true);
     });
   });
 
@@ -256,8 +256,8 @@ describe('VisLegend Component', () => {
       const first = getLegendItems(wrapper).first();
       first.simulate('click');
 
-      const popover = wrapper.find('.visLegend__valueDetails').first();
-      const firstColor = popover.find('.visLegend__valueColorPickerDot').first();
+      const popover = wrapper.find('.visColorPicker').first();
+      const firstColor = popover.find('.visColorPicker__valueDot').first();
       firstColor.simulate('click');
 
       const colors = mockState.get('vis.colors');
diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.tsx b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.tsx
index cec97f0cadf11..5065642d88c6b 100644
--- a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.tsx
+++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend.tsx
@@ -78,18 +78,20 @@ export class VisLegend extends PureComponent<VisLegendProps, VisLegendState> {
     });
   };
 
-  setColor = (label: string, color: string) => (event: BaseSyntheticEvent) => {
+  setColor = (label: string | number, color: string | null, event: BaseSyntheticEvent) => {
     if ((event as KeyboardEvent).key && (event as KeyboardEvent).key !== keys.ENTER) {
       return;
     }
 
-    const colors = this.props.uiState?.get('vis.colors') || {};
-    if (colors[label] === color) delete colors[label];
-    else colors[label] = color;
-    this.props.uiState?.setSilent('vis.colors', null);
-    this.props.uiState?.set('vis.colors', colors);
-    this.props.uiState?.emit('colorChanged');
-    this.refresh();
+    this.setState({ selectedLabel: null }, () => {
+      const colors = this.props.uiState?.get('vis.colors') || {};
+      if (colors[label] === color || !color) delete colors[label];
+      else colors[label] = color;
+      this.props.uiState?.setSilent('vis.colors', null);
+      this.props.uiState?.set('vis.colors', colors);
+      this.props.uiState?.emit('colorChanged');
+      this.refresh();
+    });
   };
 
   filter = ({ values: data }: LegendItem, negate: boolean) => {
diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx
index 39e6fb2d2aff4..6c7e343a22d8f 100644
--- a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx
+++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx
@@ -18,10 +18,8 @@
  */
 
 import React, { memo, useState, BaseSyntheticEvent, KeyboardEvent } from 'react';
-import classNames from 'classnames';
 
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiPopover,
   keys,
@@ -33,7 +31,8 @@ import {
   EuiButtonGroupOptionProps,
 } from '@elastic/eui';
 
-import { legendColors, LegendItem } from './models';
+import { LegendItem } from './models';
+import { ColorPicker } from '../../../../../charts/public';
 
 interface Props {
   item: LegendItem;
@@ -45,7 +44,7 @@ interface Props {
   onSelect: (label: string | null) => (event?: BaseSyntheticEvent) => void;
   onHighlight: (event: BaseSyntheticEvent) => void;
   onUnhighlight: (event: BaseSyntheticEvent) => void;
-  setColor: (label: string, color: string) => (event: BaseSyntheticEvent) => void;
+  setColor: (label: string, color: string | null, event: BaseSyntheticEvent) => void;
   getColor: (label: string) => string;
 }
 
@@ -159,40 +158,14 @@ const VisLegendItemComponent = ({
       closePopover={onSelect(null)}
       panelPaddingSize="s"
     >
-      <div className="visLegend__valueDetails">
-        {canFilter && renderFilterBar()}
+      {canFilter && renderFilterBar()}
 
-        <div className="visLegend__valueColorPicker" role="listbox">
-          <span id={`${legendId}ColorPickerDesc`} className="euiScreenReaderOnly">
-            <FormattedMessage
-              id="visTypeVislib.vislib.legend.setColorScreenReaderDescription"
-              defaultMessage="Set color for value {legendDataLabel}"
-              values={{ legendDataLabel: item.label }}
-            />
-          </span>
-          {legendColors.map((color) => (
-            <EuiIcon
-              role="option"
-              tabIndex={0}
-              type="dot"
-              size="l"
-              color={getColor(item.label)}
-              key={color}
-              aria-label={color}
-              aria-describedby={`${legendId}ColorPickerDesc`}
-              aria-selected={color === getColor(item.label)}
-              onClick={setColor(item.label, color)}
-              onKeyPress={setColor(item.label, color)}
-              className={classNames('visLegend__valueColorPickerDot', {
-                // eslint-disable-next-line @typescript-eslint/naming-convention
-                'visLegend__valueColorPickerDot-isSelected': color === getColor(item.label),
-              })}
-              style={{ color }}
-              data-test-subj={`legendSelectColor-${color}`}
-            />
-          ))}
-        </div>
-      </div>
+      <ColorPicker
+        id={legendId}
+        label={item.label}
+        color={getColor(item.label)}
+        onChange={(c, e) => setColor(item.label, c, e)}
+      />
     </EuiPopover>
   );
 
diff --git a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_add_to_siri.test.ts b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_add_to_siri.test.ts
index ae6b365efc0cd..1b51fb8a53d11 100644
--- a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_add_to_siri.test.ts
+++ b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_add_to_siri.test.ts
@@ -17,9 +17,10 @@
  * under the License.
  */
 
+import type { Dimension } from '../../../../../vis_type_xy/public';
+
 import { addToSiri, Serie } from './_add_to_siri';
 import { Point } from './_get_point';
-import { Dimension } from './point_series';
 
 describe('addToSiri', function () {
   it('creates a new series the first time it sees an id', function () {
diff --git a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_add_to_siri.ts b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_add_to_siri.ts
index 5e5185d6c31ab..2e04e916e85f2 100644
--- a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_add_to_siri.ts
+++ b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_add_to_siri.ts
@@ -17,8 +17,10 @@
  * under the License.
  */
 
+import { getAggId } from '../../../../../vis_type_xy/public';
+import type { Dimension } from '../../../../../vis_type_xy/public';
+
 import { Point } from './_get_point';
-import { Dimension } from './point_series';
 
 export interface Serie {
   id: string;
@@ -48,7 +50,7 @@ export function addToSiri(
   }
 
   series.set(id, {
-    id: id.split('-').pop() as string,
+    id: getAggId(id),
     rawId: id,
     label: yLabel == null ? id : yLabel,
     count: 0,
diff --git a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_aspects.test.ts b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_aspects.test.ts
index fb14b04357f8f..5efde63427573 100644
--- a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_aspects.test.ts
+++ b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_aspects.test.ts
@@ -17,8 +17,10 @@
  * under the License.
  */
 
+import type { Dimension, Dimensions } from '../../../../../vis_type_xy/public';
+
 import { getAspects } from './_get_aspects';
-import { Dimension, Dimensions, Aspect } from './point_series';
+import { Aspect } from './point_series';
 import { Table, Row } from '../../types';
 
 describe('getAspects', function () {
diff --git a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_aspects.ts b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_aspects.ts
index 87819aa9b2a5c..e4094a4549841 100644
--- a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_aspects.ts
+++ b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_aspects.ts
@@ -17,8 +17,10 @@
  * under the License.
  */
 
+import type { Dimensions } from '../../../../../vis_type_xy/public';
+
 import { makeFakeXAspect } from './_fake_x_aspect';
-import { Dimensions, Aspects } from './point_series';
+import { Aspects } from './point_series';
 import { Table } from '../../types';
 
 /**
diff --git a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_point.test.ts b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_point.test.ts
index be44975bd4eb0..03d41096a8c6f 100644
--- a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_point.test.ts
+++ b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_get_point.test.ts
@@ -18,6 +18,7 @@
  */
 
 import { IFieldFormatsRegistry } from '../../../../../data/common';
+
 import { getPoint } from './_get_point';
 import { setFormatService } from '../../../services';
 import { Aspect } from './point_series';
@@ -94,7 +95,12 @@ describe('getPoint', function () {
 
     it('should call deserialize', function () {
       const seriesAspect = [
-        { accessor: '1', format: { id: 'number', params: { pattern: '$' } } } as Aspect,
+        {
+          title: 'series',
+          accessor: '1',
+          format: { id: 'number', params: { pattern: '$' } },
+          params: {},
+        } as Aspect,
       ];
       getPoint(table, xAspect, seriesAspect, row, 0, yAspect);
 
diff --git a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_init_x_axis.test.ts b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_init_x_axis.test.ts
index 3f0560c2c9f28..aa24530b025dc 100644
--- a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_init_x_axis.test.ts
+++ b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_init_x_axis.test.ts
@@ -18,16 +18,12 @@
  */
 
 import moment from 'moment';
+
+import type { DateHistogramParams, HistogramParams } from '../../../../../vis_type_xy/public';
+
 import { initXAxis } from './_init_x_axis';
 import { makeFakeXAspect } from './_fake_x_aspect';
-import {
-  Aspects,
-  Chart,
-  DateHistogramOrdered,
-  DateHistogramParams,
-  HistogramOrdered,
-  HistogramParams,
-} from './point_series';
+import { Aspects, Chart, DateHistogramOrdered, HistogramOrdered } from './point_series';
 import { Table, Column } from '../../types';
 
 describe('initXAxis', function () {
@@ -110,7 +106,7 @@ describe('initXAxis', function () {
 
   it('reads the date interval param from the x agg', function () {
     const dateHistogramParams = chart.aspects.x[0].params as DateHistogramParams;
-    dateHistogramParams.interval = 'P1D';
+    dateHistogramParams.interval = moment.duration(1, 'd').asMilliseconds();
     dateHistogramParams.intervalESValue = 1;
     dateHistogramParams.intervalESUnit = 'd';
     dateHistogramParams.date = true;
diff --git a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_ordered_date_axis.test.ts b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_ordered_date_axis.test.ts
index b2e4d6e4b40c9..7dd1dd259f785 100644
--- a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_ordered_date_axis.test.ts
+++ b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/_ordered_date_axis.test.ts
@@ -19,8 +19,11 @@
 
 import moment from 'moment';
 import _ from 'lodash';
+
+import type { DateHistogramParams } from '../../../../../vis_type_xy/public/types';
+
 import { orderedDateAxis } from './_ordered_date_axis';
-import { DateHistogramParams, OrderedChart } from './point_series';
+import { OrderedChart } from './point_series';
 
 describe('orderedDateAxis', function () {
   const baseArgs = {
diff --git a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/point_series.test.ts b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/point_series.test.ts
index 2a5ab197c9ab7..7c343af7840ee 100644
--- a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/point_series.test.ts
+++ b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/point_series.test.ts
@@ -18,7 +18,10 @@
  */
 
 import _ from 'lodash';
-import { buildPointSeriesData, Dimensions } from './point_series';
+
+import type { Dimensions } from '../../../../../vis_type_xy/public';
+
+import { buildPointSeriesData } from './point_series';
 import { Table, Column } from '../../types';
 import { setFormatService } from '../../../services';
 import { Serie } from './_add_to_siri';
diff --git a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/point_series.ts b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/point_series.ts
index f40d01e6a8123..2bc669e0b77a3 100644
--- a/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/point_series.ts
+++ b/src/plugins/vis_type_vislib/public/vislib/helpers/point_series/point_series.ts
@@ -18,6 +18,14 @@
  */
 
 import { Duration } from 'moment';
+
+import type {
+  Dimension,
+  Dimensions,
+  DateHistogramParams,
+  HistogramParams,
+} from '../../../../../vis_type_xy/public';
+
 import { getSeries } from './_get_series';
 import { getAspects } from './_get_aspects';
 import { initYAxis } from './_init_y_axis';
@@ -26,41 +34,6 @@ import { orderedDateAxis } from './_ordered_date_axis';
 import { Serie } from './_add_to_siri';
 import { Column, Table } from '../../types';
 
-export interface DateHistogramParams {
-  date: boolean;
-  interval: number | string;
-  intervalESValue: number;
-  intervalESUnit: string;
-  format: string;
-  bounds?: {
-    min: string | number;
-    max: string | number;
-  };
-}
-export interface HistogramParams {
-  interval: number;
-}
-export interface FakeParams {
-  defaultValue: string;
-}
-export interface Dimension {
-  accessor: number;
-  format: {
-    id?: string;
-    params?: { pattern?: string; [key: string]: any };
-  };
-  params: DateHistogramParams | HistogramParams | FakeParams | {};
-}
-
-export interface Dimensions {
-  x: Dimension | null;
-  y: Dimension[];
-  z?: Dimension[];
-  series?: Dimension | Dimension[];
-  width?: Dimension[];
-  splitRow?: Dimension[];
-  splitColumn?: Dimension[];
-}
 export interface Aspect {
   accessor: Column['id'];
   column?: Dimension['accessor'];
diff --git a/src/plugins/vis_type_vislib/public/vislib/lib/handler.js b/src/plugins/vis_type_vislib/public/vislib/lib/handler.js
index 938ea3adcb9b5..e1908a8483feb 100644
--- a/src/plugins/vis_type_vislib/public/vislib/lib/handler.js
+++ b/src/plugins/vis_type_vislib/public/vislib/lib/handler.js
@@ -21,15 +21,16 @@ import d3 from 'd3';
 import _ from 'lodash';
 import MarkdownIt from 'markdown-it';
 
+import { dispatchRenderComplete } from '../../../../kibana_utils/public';
+
+import { visTypes as chartTypes } from '../visualizations/vis_types';
 import { NoResults } from '../errors';
 import { Layout } from './layout/layout';
 import { ChartTitle } from './chart_title';
 import { Alerts } from './alerts';
 import { Axis } from './axis/axis';
 import { ChartGrid as Grid } from './chart_grid';
-import { visTypes as chartTypes } from '../visualizations/vis_types';
 import { Binder } from './binder';
-import { dispatchRenderComplete } from '../../../../kibana_utils/public';
 
 const markdownIt = new MarkdownIt({
   html: false,
diff --git a/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile.json b/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile.json
index d52cb18727c05..50d6eab03e3f7 100644
--- a/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile.json
+++ b/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile.json
@@ -31,7 +31,7 @@
         },
         "params": {
           "date": true,
-          "interval": "P1D",
+          "interval": 86400000,
           "format": "YYYY-MM-DD",
           "bounds": {
             "min": "2019-05-10T04:00:00.000Z",
@@ -128,7 +128,7 @@
       },
       "xAxisLabel": "timestamp per day",
       "ordered": {
-        "interval": "P1D",
+        "interval": 86400000,
         "date": true,
         "min": 1557460800000,
         "max": 1557656337342
diff --git a/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_float_value.json b/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_float_value.json
index 6e1a707229974..1987c59f6722b 100644
--- a/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_float_value.json
+++ b/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_float_value.json
@@ -31,7 +31,7 @@
         },
         "params": {
           "date": true,
-          "interval": "P1D",
+          "interval": 86400000,
           "format": "YYYY-MM-DD",
           "bounds": {
             "min": "2019-05-10T04:00:00.000Z",
@@ -128,7 +128,7 @@
       },
       "xAxisLabel": "timestamp per day",
       "ordered": {
-        "interval": "P1D",
+        "interval": 86400000,
         "date": true,
         "min": 1557460800000,
         "max": 1557656337342
@@ -460,4 +460,4 @@
       "50th percentile of AvgTicketPrice"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_float_value_result.json b/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_float_value_result.json
index f7dd18f5eb712..ae1f3cbf24c33 100644
--- a/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_float_value_result.json
+++ b/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_float_value_result.json
@@ -32,7 +32,7 @@
       },
       "params": {
         "date": true,
-        "interval": "P1D",
+        "interval": 86400000,
         "format": "YYYY-MM-DD",
         "bounds": {
           "min": "2019-05-10T04:00:00.000Z",
@@ -453,4 +453,4 @@
     }
   ],
   "enableHover": true
-}
\ No newline at end of file
+}
diff --git a/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_result.json b/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_result.json
index 02062c987564e..f2ee245a8431f 100644
--- a/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_result.json
+++ b/src/plugins/vis_type_vislib/public/vislib/lib/types/testdata_linechart_percentile_result.json
@@ -32,7 +32,7 @@
       },
       "params": {
         "date": true,
-        "interval": "P1D",
+        "interval": 86400000,
         "format": "YYYY-MM-DD",
         "bounds": {
           "min": "2019-05-10T04:00:00.000Z",
@@ -455,4 +455,4 @@
     }
   ],
   "enableHover": true
-}
\ No newline at end of file
+}
diff --git a/src/plugins/vis_type_vislib/public/vislib/visualizations/gauge_chart.js b/src/plugins/vis_type_vislib/public/vislib/visualizations/gauge_chart.js
index a2b830ffaa781..40d15733b418d 100644
--- a/src/plugins/vis_type_vislib/public/vislib/visualizations/gauge_chart.js
+++ b/src/plugins/vis_type_vislib/public/vislib/visualizations/gauge_chart.js
@@ -22,8 +22,8 @@ import { Chart } from './_chart';
 import { gaugeTypes } from './gauges/gauge_types';
 
 export class GaugeChart extends Chart {
-  constructor(handler, chartEl, chartData, deps) {
-    super(handler, chartEl, chartData, deps);
+  constructor(handler, chartEl, chartData, uiSettings) {
+    super(handler, chartEl, chartData, uiSettings);
     this.gaugeConfig = handler.visConfig.get('gauge', {});
     this.gauge = new gaugeTypes[this.gaugeConfig.type](this);
   }
diff --git a/src/plugins/vis_type_vislib/public/vislib/visualizations/point_series/heatmap_chart.js b/src/plugins/vis_type_vislib/public/vislib/visualizations/point_series/heatmap_chart.js
index 4564721464767..d725c29eef310 100644
--- a/src/plugins/vis_type_vislib/public/vislib/visualizations/point_series/heatmap_chart.js
+++ b/src/plugins/vis_type_vislib/public/vislib/visualizations/point_series/heatmap_chart.js
@@ -40,8 +40,8 @@ const defaults = {
  * @param chartData {Object} Elasticsearch query results for this specific chart
  */
 export class HeatmapChart extends PointSeries {
-  constructor(handler, chartEl, chartData, seriesConfigArgs, deps) {
-    super(handler, chartEl, chartData, seriesConfigArgs, deps);
+  constructor(handler, chartEl, chartData, seriesConfigArgs, core) {
+    super(handler, chartEl, chartData, seriesConfigArgs, core);
 
     this.seriesConfig = _.defaults(seriesConfigArgs || {}, defaults);
 
diff --git a/src/plugins/vis_type_vislib/server/ui_settings.ts b/src/plugins/vis_type_vislib/server/ui_settings.ts
index a48cbbae3d0ca..58564b4055daa 100644
--- a/src/plugins/vis_type_vislib/server/ui_settings.ts
+++ b/src/plugins/vis_type_vislib/server/ui_settings.ts
@@ -24,6 +24,8 @@ import { UiSettingsParams } from 'kibana/server';
 import { DIMMING_OPACITY_SETTING, HEATMAP_MAX_BUCKETS_SETTING } from '../common';
 
 export const uiSettings: Record<string, UiSettingsParams> = {
+  // TODO: move this to vis_type_xy when vislib is removed
+  // https://github.com/elastic/kibana/issues/56143
   [DIMMING_OPACITY_SETTING]: {
     name: i18n.translate('visTypeVislib.advancedSettings.visualization.dimmingOpacityTitle', {
       defaultMessage: 'Dimming opacity',
diff --git a/src/plugins/vis_type_xy/README.md b/src/plugins/vis_type_xy/README.md
index 70ddb21c1e9db..549fc4e3ea189 100644
--- a/src/plugins/vis_type_xy/README.md
+++ b/src/plugins/vis_type_xy/README.md
@@ -1,2 +1,2 @@
 Contains the new xy-axis chart using the elastic-charts library, which will eventually
-replace the vislib xy-axis (bar, area, line) charts.
\ No newline at end of file
+replace the vislib xy-axis charts including bar, area, and line.
diff --git a/src/plugins/vis_type_xy/common/index.ts b/src/plugins/vis_type_xy/common/index.ts
new file mode 100644
index 0000000000000..bf498229a1b54
--- /dev/null
+++ b/src/plugins/vis_type_xy/common/index.ts
@@ -0,0 +1,37 @@
+/*
+ * 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 { $Values } from '@kbn/utility-types';
+
+/**
+ * Type of charts able to render
+ */
+export const ChartType = Object.freeze({
+  Line: 'line' as const,
+  Area: 'area' as const,
+  Histogram: 'histogram' as const,
+});
+export type ChartType = $Values<typeof ChartType>;
+
+/**
+ * Type of xy visualizations
+ */
+export type XyVisType = ChartType | 'horizontal_bar';
+
+export const CHARTS_LIBRARY = 'visualization:visualize:chartsLibrary';
diff --git a/src/plugins/vis_type_xy/jest.config.js b/src/plugins/vis_type_xy/jest.config.js
new file mode 100644
index 0000000000000..556e518d4f4e1
--- /dev/null
+++ b/src/plugins/vis_type_xy/jest.config.js
@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../..',
+  roots: ['<rootDir>/src/plugins/vis_type_xy'],
+};
diff --git a/src/plugins/vis_type_xy/kibana.json b/src/plugins/vis_type_xy/kibana.json
index ca02da45e9112..14c3ce36bf375 100644
--- a/src/plugins/vis_type_xy/kibana.json
+++ b/src/plugins/vis_type_xy/kibana.json
@@ -3,5 +3,6 @@
   "version": "kibana",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["charts", "expressions", "visualizations"]
+  "requiredPlugins": ["charts", "data", "expressions", "visualizations"],
+  "requiredBundles": ["kibanaUtils", "visDefaultEditor"]
 }
diff --git a/src/plugins/vis_type_xy/public/__snapshots__/to_ast.test.ts.snap b/src/plugins/vis_type_xy/public/__snapshots__/to_ast.test.ts.snap
new file mode 100644
index 0000000000000..e6665c26a2815
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/__snapshots__/to_ast.test.ts.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`xy vis toExpressionAst function should match basic snapshot 1`] = `
+Object {
+  "addArgument": [Function],
+  "arguments": Object {
+    "type": Array [
+      "area",
+    ],
+    "visConfig": Array [
+      "{\\"type\\":\\"area\\",\\"grid\\":{\\"categoryLines\\":false,\\"style\\":{\\"color\\":\\"#eee\\"}},\\"categoryAxes\\":[{\\"id\\":\\"CategoryAxis-1\\",\\"type\\":\\"category\\",\\"position\\":\\"bottom\\",\\"show\\":true,\\"style\\":{},\\"scale\\":{\\"type\\":\\"linear\\"},\\"labels\\":{\\"show\\":true,\\"truncate\\":100},\\"title\\":{}}],\\"valueAxes\\":[{\\"id\\":\\"ValueAxis-1\\",\\"name\\":\\"LeftAxis-1\\",\\"type\\":\\"value\\",\\"position\\":\\"left\\",\\"show\\":true,\\"style\\":{},\\"scale\\":{\\"type\\":\\"linear\\",\\"mode\\":\\"normal\\"},\\"labels\\":{\\"show\\":true,\\"rotate\\":0,\\"filter\\":false,\\"truncate\\":100},\\"title\\":{\\"text\\":\\"Sum of total_quantity\\"}}],\\"seriesParams\\":[{\\"show\\":\\"true\\",\\"type\\":\\"area\\",\\"mode\\":\\"stacked\\",\\"data\\":{\\"label\\":\\"Sum of total_quantity\\",\\"id\\":\\"1\\"},\\"drawLinesBetweenPoints\\":true,\\"showCircles\\":true,\\"interpolate\\":\\"linear\\",\\"valueAxis\\":\\"ValueAxis-1\\"}],\\"addTooltip\\":true,\\"addLegend\\":true,\\"legendPosition\\":\\"top\\",\\"times\\":[],\\"addTimeMarker\\":false,\\"thresholdLine\\":{\\"show\\":false,\\"value\\":10,\\"width\\":1,\\"style\\":\\"full\\",\\"color\\":\\"#E7664C\\"},\\"labels\\":{},\\"dimensions\\":{\\"x\\":{\\"accessor\\":1,\\"format\\":{\\"id\\":\\"date\\",\\"params\\":{\\"pattern\\":\\"HH:mm:ss.SSS\\"}},\\"params\\":{}},\\"y\\":[{\\"accessor\\":0,\\"format\\":{\\"id\\":\\"number\\",\\"params\\":{\\"parsedUrl\\":{\\"origin\\":\\"http://localhost:5801\\",\\"pathname\\":\\"/app/visualize\\",\\"basePath\\":\\"\\"}}},\\"params\\":{}}],\\"series\\":[{\\"accessor\\":2,\\"format\\":{\\"id\\":\\"terms\\",\\"params\\":{\\"id\\":\\"string\\",\\"otherBucketLabel\\":\\"Other\\",\\"missingBucketLabel\\":\\"Missing\\",\\"parsedUrl\\":{\\"origin\\":\\"http://localhost:5801\\",\\"pathname\\":\\"/app/visualize\\",\\"basePath\\":\\"\\"}}},\\"params\\":{}}]}}",
+    ],
+  },
+  "getArgument": [Function],
+  "name": "xy_vis",
+  "removeArgument": [Function],
+  "replaceArgument": [Function],
+  "toAst": [Function],
+  "toString": [Function],
+  "type": "expression_function_builder",
+}
+`;
diff --git a/src/plugins/vis_type_xy/public/_chart.scss b/src/plugins/vis_type_xy/public/_chart.scss
new file mode 100644
index 0000000000000..ac9d4ed04aec4
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/_chart.scss
@@ -0,0 +1,7 @@
+.xyChart__container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
diff --git a/src/plugins/vis_type_xy/public/components/_detailed_tooltip.scss b/src/plugins/vis_type_xy/public/components/_detailed_tooltip.scss
new file mode 100644
index 0000000000000..91b0a8d023290
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/components/_detailed_tooltip.scss
@@ -0,0 +1,34 @@
+.detailedTooltip {
+  @include euiToolTipStyle('s');
+  pointer-events: none;
+  max-width: $euiSizeXL * 10;
+  overflow: hidden;
+  padding: $euiSizeS;
+
+  table {
+    td,
+    th {
+      text-align: left;
+      padding: $euiSizeXS;
+      overflow-wrap: break-word;
+      word-wrap: break-word;
+    }
+  }
+}
+
+.detailedTooltip__header {
+  > :last-child {
+    margin-bottom: $euiSizeS;
+  }
+}
+
+.detailedTooltip__labelContainer,
+.detailedTooltip__valueContainer {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+
+.detailedTooltip__label {
+  font-weight: $euiFontWeightMedium;
+  color: shade($euiColorGhost, 20%);
+}
diff --git a/src/plugins/vis_type_xy/public/components/detailed_tooltip.tsx b/src/plugins/vis_type_xy/public/components/detailed_tooltip.tsx
new file mode 100644
index 0000000000000..3427baed41b8d
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/components/detailed_tooltip.tsx
@@ -0,0 +1,142 @@
+/*
+ * 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 React from 'react';
+import { isNil } from 'lodash';
+
+import {
+  CustomTooltip,
+  TooltipValue,
+  TooltipValueFormatter,
+  XYChartSeriesIdentifier,
+} from '@elastic/charts';
+
+import { BUCKET_TYPES } from '../../../data/public';
+
+import { Aspects } from '../types';
+
+import './_detailed_tooltip.scss';
+import { fillEmptyValue } from '../utils/get_series_name_fn';
+import { COMPLEX_SPLIT_ACCESSOR } from '../utils/accessors';
+
+interface TooltipData {
+  label: string;
+  value: string;
+}
+
+const getTooltipData = (
+  aspects: Aspects,
+  header: TooltipValue | null,
+  value: TooltipValue
+): TooltipData[] => {
+  const data: TooltipData[] = [];
+
+  if (header) {
+    const xFormatter =
+      aspects.x.aggType === BUCKET_TYPES.DATE_RANGE || aspects.x.aggType === BUCKET_TYPES.RANGE
+        ? null
+        : aspects.x.formatter;
+    data.push({
+      label: aspects.x.title,
+      value: xFormatter ? xFormatter(header.value) : `${header.value}`,
+    });
+  }
+
+  const valueSeries = value.seriesIdentifier as XYChartSeriesIdentifier;
+  const yAccessor = aspects.y.find(({ accessor }) => accessor === valueSeries.yAccessor) ?? null;
+
+  if (yAccessor) {
+    data.push({
+      label: yAccessor.title,
+      value: yAccessor.formatter ? yAccessor.formatter(value.value) : `${value.value}`,
+    });
+  }
+
+  if (aspects.z && !isNil(value.markValue)) {
+    data.push({
+      label: aspects.z.title,
+      value: aspects.z.formatter ? aspects.z.formatter(value.markValue) : `${value.markValue}`,
+    });
+  }
+
+  valueSeries.splitAccessors.forEach((splitValue, key) => {
+    const split = (aspects.series ?? []).find(({ accessor }, i) => {
+      return accessor === key || key === `${COMPLEX_SPLIT_ACCESSOR}::${i}`;
+    });
+
+    if (split) {
+      data.push({
+        label: split?.title,
+        value:
+          split?.formatter && !key.toString().startsWith(COMPLEX_SPLIT_ACCESSOR)
+            ? split?.formatter(splitValue)
+            : `${splitValue}`,
+      });
+    }
+  });
+
+  return data;
+};
+
+const renderData = ({ label, value: rawValue }: TooltipData, index: number) => {
+  const value = fillEmptyValue(rawValue);
+  return label && value ? (
+    <tr key={label + value + index}>
+      <td className="detailedTooltip__label">
+        <div className="detailedTooltip__labelContainer">{label}</div>
+      </td>
+
+      <td className="detailedTooltip__value">
+        <div className="detailedTooltip__valueContainer">{value}</div>
+      </td>
+    </tr>
+  ) : null;
+};
+
+export const getDetailedTooltip = (aspects: Aspects) => (
+  headerFormatter?: TooltipValueFormatter
+): CustomTooltip => {
+  return function DetailedTooltip({ header, values }) {
+    // Note: first value is not necessarily the closest value
+    // To be fixed with https://github.com/elastic/elastic-charts/issues/835
+    // TODO: Allow multiple values to be displayed in tooltip
+    const highlightedValue = values.find(({ isHighlighted }) => isHighlighted);
+
+    if (!highlightedValue) {
+      return null;
+    }
+
+    const tooltipData = getTooltipData(aspects, header, highlightedValue);
+
+    if (tooltipData.length === 0) {
+      return null;
+    }
+
+    return (
+      <div className="detailedTooltip">
+        {headerFormatter && header && (
+          <div className="detailedTooltip__header">{headerFormatter(header)}</div>
+        )}
+        <table>
+          <tbody>{tooltipData.map(renderData)}</tbody>
+        </table>
+      </div>
+    );
+  };
+};
diff --git a/src/plugins/vis_type_xy/public/components/index.ts b/src/plugins/vis_type_xy/public/components/index.ts
new file mode 100644
index 0000000000000..d8d55c77b7a8a
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/components/index.ts
@@ -0,0 +1,25 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { XYAxis } from './xy_axis';
+export { XYEndzones } from './xy_endzones';
+export { XYCurrentTime } from './xy_current_time';
+export { XYSettings } from './xy_settings';
+export { XYThresholdLine } from './xy_threshold_line';
+export { SplitChartWarning } from './split_chart_warning';
diff --git a/src/plugins/vis_type_xy/public/components/split_chart_warning.tsx b/src/plugins/vis_type_xy/public/components/split_chart_warning.tsx
new file mode 100644
index 0000000000000..a9aa2bf24601b
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/components/split_chart_warning.tsx
@@ -0,0 +1,55 @@
+/*
+ * 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 React, { FC } from 'react';
+
+import { EuiLink, EuiCallOut } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import { getDocLinks } from '../services';
+
+export const SplitChartWarning: FC = () => {
+  const advancedSettingsLink = getDocLinks().links.management.visualizationSettings;
+
+  return (
+    <EuiCallOut
+      title={i18n.translate('visTypeXy.splitChartWarning.title', {
+        defaultMessage: 'Warning',
+      })}
+      color="warning"
+      iconType="help"
+    >
+      <FormattedMessage
+        id="visTypeXy.splitChartWarning.content"
+        defaultMessage="The new charts library does not support split chart aggregation. Please disable the {link} advanced setting to use split chart aggregation."
+        values={{
+          link: (
+            <EuiLink href={advancedSettingsLink} target="_blank" external>
+              <FormattedMessage
+                id="visTypeXy.splitChartWarning.link"
+                defaultMessage="Charts library"
+              />
+            </EuiLink>
+          ),
+        }}
+      />
+    </EuiCallOut>
+  );
+};
diff --git a/src/plugins/vis_type_xy/public/components/xy_axis.tsx b/src/plugins/vis_type_xy/public/components/xy_axis.tsx
new file mode 100644
index 0000000000000..b64f2bf1ec0ec
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/components/xy_axis.tsx
@@ -0,0 +1,55 @@
+/*
+ * 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 React, { FC } from 'react';
+
+import { Axis } from '@elastic/charts';
+
+import { AxisConfig } from '../types';
+
+type XYAxisPros = AxisConfig<any>;
+
+export const XYAxis: FC<XYAxisPros> = ({
+  id,
+  title,
+  show,
+  position,
+  groupId,
+  grid,
+  ticks,
+  domain,
+  style,
+  integersOnly,
+}) => (
+  <Axis
+    id={`${id}__axis`}
+    groupId={groupId}
+    hide={!show}
+    title={title}
+    style={style}
+    domain={domain}
+    position={position}
+    integersOnly={integersOnly}
+    showGridLines={grid?.show}
+    tickFormat={ticks?.formatter}
+    labelFormat={ticks?.labelFormatter}
+    showOverlappingLabels={ticks?.showOverlappingLabels}
+    showDuplicatedTicks={ticks?.showDuplicates}
+  />
+);
diff --git a/src/plugins/vis_type_xy/public/components/xy_current_time.tsx b/src/plugins/vis_type_xy/public/components/xy_current_time.tsx
new file mode 100644
index 0000000000000..66ad4fda3bec7
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/components/xy_current_time.tsx
@@ -0,0 +1,37 @@
+/*
+ * 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 React, { FC } from 'react';
+import { DomainRange } from '@elastic/charts';
+import { CurrentTime } from '../../../charts/public';
+
+interface XYCurrentTime {
+  enabled: boolean;
+  isDarkMode: boolean;
+  domain?: DomainRange;
+}
+
+export const XYCurrentTime: FC<XYCurrentTime> = ({ enabled, isDarkMode, domain }) => {
+  if (!enabled) {
+    return null;
+  }
+
+  const domainEnd = domain && 'max' in domain ? domain.max : undefined;
+  return <CurrentTime isDarkMode={isDarkMode} domainEnd={domainEnd} />;
+};
diff --git a/src/plugins/vis_type_xy/public/components/xy_endzones.tsx b/src/plugins/vis_type_xy/public/components/xy_endzones.tsx
new file mode 100644
index 0000000000000..33e1d1e18bb1d
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/components/xy_endzones.tsx
@@ -0,0 +1,68 @@
+/*
+ * 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 React, { FC } from 'react';
+
+import { DomainRange } from '@elastic/charts';
+
+import { Endzones } from '../../../charts/public';
+
+interface XYEndzones {
+  enabled: boolean;
+  isDarkMode: boolean;
+  isFullBin: boolean;
+  hideTooltips?: boolean;
+  domain?: DomainRange;
+  adjustedDomain?: DomainRange;
+}
+
+export const XYEndzones: FC<XYEndzones> = ({
+  enabled,
+  isDarkMode,
+  isFullBin,
+  hideTooltips,
+  domain,
+  adjustedDomain,
+}) => {
+  if (
+    enabled &&
+    domain &&
+    adjustedDomain &&
+    'min' in domain &&
+    'max' in domain &&
+    domain.minInterval !== undefined &&
+    'min' in adjustedDomain &&
+    'max' in adjustedDomain
+  ) {
+    return (
+      <Endzones
+        isFullBin={isFullBin}
+        isDarkMode={isDarkMode}
+        domainStart={domain.min}
+        domainEnd={domain.max}
+        interval={domain.minInterval}
+        domainMin={adjustedDomain.min}
+        domainMax={adjustedDomain.max}
+        hideTooltips={hideTooltips}
+      />
+    );
+  }
+
+  return null;
+};
diff --git a/src/plugins/vis_type_xy/public/components/xy_settings.tsx b/src/plugins/vis_type_xy/public/components/xy_settings.tsx
new file mode 100644
index 0000000000000..3682fdf3350b0
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/components/xy_settings.tsx
@@ -0,0 +1,182 @@
+/*
+ * 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 React, { FC } from 'react';
+
+import {
+  Direction,
+  Settings,
+  DomainRange,
+  Position,
+  PartialTheme,
+  ElementClickListener,
+  BrushEndListener,
+  RenderChangeListener,
+  LegendAction,
+  LegendColorPicker,
+  TooltipProps,
+  TickFormatter,
+} from '@elastic/charts';
+
+import { renderEndzoneTooltip } from '../../../charts/public';
+
+import { getThemeService, getUISettings } from '../services';
+import { VisConfig } from '../types';
+import { fillEmptyValue } from '../utils/get_series_name_fn';
+
+declare global {
+  interface Window {
+    /**
+     * Flag used to enable debugState on elastic charts
+     */
+    _echDebugStateFlag?: boolean;
+  }
+}
+
+type XYSettingsProps = Pick<
+  VisConfig,
+  | 'markSizeRatio'
+  | 'rotation'
+  | 'enableHistogramMode'
+  | 'tooltip'
+  | 'isTimeChart'
+  | 'xAxis'
+  | 'orderBucketsBySum'
+> & {
+  xDomain?: DomainRange;
+  adjustedXDomain?: DomainRange;
+  showLegend: boolean;
+  onElementClick: ElementClickListener;
+  onBrushEnd?: BrushEndListener;
+  onRenderChange: RenderChangeListener;
+  legendAction?: LegendAction;
+  legendColorPicker: LegendColorPicker;
+  legendPosition: Position;
+};
+
+export const XYSettings: FC<XYSettingsProps> = ({
+  markSizeRatio,
+  rotation,
+  enableHistogramMode,
+  tooltip,
+  isTimeChart,
+  xAxis,
+  orderBucketsBySum,
+  xDomain,
+  adjustedXDomain,
+  showLegend,
+  onElementClick,
+  onBrushEnd,
+  onRenderChange,
+  legendAction,
+  legendColorPicker,
+  legendPosition,
+}) => {
+  const themeService = getThemeService();
+  const theme = themeService.useChartsTheme();
+  const baseTheme = themeService.useChartsBaseTheme();
+  const dimmingOpacity = getUISettings().get<number | undefined>('visualization:dimmingOpacity');
+  const fontSize =
+    typeof theme.barSeriesStyle?.displayValue?.fontSize === 'number'
+      ? { min: theme.barSeriesStyle?.displayValue?.fontSize }
+      : theme.barSeriesStyle?.displayValue?.fontSize ?? { min: 8 };
+
+  const themeOverrides: PartialTheme = {
+    markSizeRatio,
+    sharedStyle: {
+      unhighlighted: {
+        opacity: dimmingOpacity,
+      },
+    },
+    barSeriesStyle: {
+      displayValue: {
+        fontSize,
+        alignment: {
+          horizontal: 'center',
+          vertical: 'middle',
+        },
+      },
+    },
+    axes: {
+      axisTitle: {
+        padding: {
+          outer: 10,
+        },
+      },
+    },
+    chartMargins:
+      legendPosition === Position.Top || legendPosition === Position.Right
+        ? {
+            bottom: (theme.chartMargins?.bottom ?? 0) + 10,
+          }
+        : {
+            right: (theme.chartMargins?.right ?? 0) + 10,
+          },
+  };
+
+  const headerValueFormatter: TickFormatter<any> | undefined = xAxis.ticks?.formatter
+    ? (value) => fillEmptyValue(xAxis.ticks?.formatter?.(value)) ?? ''
+    : undefined;
+  const headerFormatter =
+    isTimeChart && xDomain && adjustedXDomain
+      ? renderEndzoneTooltip(
+          xDomain.minInterval,
+          'min' in xDomain ? xDomain.min : undefined,
+          'max' in xDomain ? xDomain.max : undefined,
+          headerValueFormatter,
+          !tooltip.detailedTooltip
+        )
+      : headerValueFormatter &&
+        (tooltip.detailedTooltip ? undefined : ({ value }: any) => headerValueFormatter(value));
+
+  const tooltipProps: TooltipProps = tooltip.detailedTooltip
+    ? {
+        ...tooltip,
+        customTooltip: tooltip.detailedTooltip(headerFormatter),
+        headerFormatter: undefined,
+      }
+    : { ...tooltip, headerFormatter };
+
+  return (
+    <Settings
+      debugState={window._echDebugStateFlag ?? false}
+      xDomain={adjustedXDomain}
+      rotation={rotation}
+      theme={[themeOverrides, theme]}
+      baseTheme={baseTheme}
+      showLegend={showLegend}
+      legendPosition={legendPosition}
+      allowBrushingLastHistogramBucket={isTimeChart}
+      roundHistogramBrushValues={enableHistogramMode && !isTimeChart}
+      legendColorPicker={legendColorPicker}
+      onElementClick={onElementClick}
+      onBrushEnd={onBrushEnd}
+      onRenderChange={onRenderChange}
+      legendAction={legendAction}
+      tooltip={tooltipProps}
+      orderOrdinalBinsBy={
+        orderBucketsBySum
+          ? {
+              direction: Direction.Descending,
+            }
+          : undefined
+      }
+    />
+  );
+};
diff --git a/src/plugins/vis_type_xy/public/components/xy_threshold_line.tsx b/src/plugins/vis_type_xy/public/components/xy_threshold_line.tsx
new file mode 100644
index 0000000000000..46b0a009807a2
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/components/xy_threshold_line.tsx
@@ -0,0 +1,58 @@
+/*
+ * 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 React, { FC } from 'react';
+
+import { AnnotationDomainTypes, LineAnnotation } from '@elastic/charts';
+
+import { ThresholdLineConfig } from '../types';
+
+type XYThresholdLineProps = ThresholdLineConfig & {
+  groupId?: string;
+};
+
+export const XYThresholdLine: FC<XYThresholdLineProps> = ({
+  show,
+  value: dataValue,
+  color,
+  width,
+  groupId,
+  dash,
+}) => {
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <LineAnnotation
+      id="__threshold_line__"
+      groupId={groupId}
+      domainType={AnnotationDomainTypes.YDomain}
+      dataValues={[{ dataValue }]}
+      style={{
+        line: {
+          stroke: color,
+          strokeWidth: width ?? 2,
+          opacity: 1,
+          dash,
+        },
+      }}
+    />
+  );
+};
diff --git a/src/plugins/vis_type_xy/public/config/get_agg_id.ts b/src/plugins/vis_type_xy/public/config/get_agg_id.ts
new file mode 100644
index 0000000000000..7923145d83013
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/config/get_agg_id.ts
@@ -0,0 +1,25 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Get agg id from accessor
+ *
+ * For now this is determined by the esaggs column name. Could be cleaned up in the future.
+ */
+export const getAggId = (accessor: string) => (accessor ?? '').split('-').pop() ?? '';
diff --git a/src/plugins/vis_type_xy/public/config/get_aspects.ts b/src/plugins/vis_type_xy/public/config/get_aspects.ts
new file mode 100644
index 0000000000000..73096de0a5d51
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/config/get_aspects.ts
@@ -0,0 +1,95 @@
+/*
+ * 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 { compact } from 'lodash';
+
+import { i18n } from '@kbn/i18n';
+
+import { DatatableColumn } from '../../../expressions/public';
+
+import { Aspect, Dimension, Aspects, Dimensions } from '../types';
+import { getFormatService } from '../services';
+import { getAggId } from './get_agg_id';
+
+export function getEmptyAspect(): Aspect {
+  return {
+    accessor: null,
+    aggId: null,
+    aggType: null,
+    title: i18n.translate('visTypeXy.aggResponse.allDocsTitle', {
+      defaultMessage: 'All docs',
+    }),
+    params: {
+      defaultValue: '_all',
+    },
+  };
+}
+export function getAspects(columns: DatatableColumn[], { x, y, z, series }: Dimensions): Aspects {
+  const seriesDimensions = Array.isArray(series) || series === undefined ? series : [series];
+
+  return {
+    x: getAspectsFromDimension(columns, x) ?? getEmptyAspect(),
+    y: getAspectsFromDimension(columns, y) ?? [],
+    z: z && z?.length > 0 ? getAspectsFromDimension(columns, z[0]) : undefined,
+    series: getAspectsFromDimension(columns, seriesDimensions),
+  };
+}
+
+function getAspectsFromDimension(
+  columns: DatatableColumn[],
+  dimension?: Dimension | null
+): Aspect | undefined;
+function getAspectsFromDimension(
+  columns: DatatableColumn[],
+  dimensions?: Dimension[] | null
+): Aspect[] | undefined;
+function getAspectsFromDimension(
+  columns: DatatableColumn[],
+  dimensions?: Dimension | Dimension[] | null
+): Aspect[] | Aspect | undefined {
+  if (!dimensions) {
+    return;
+  }
+
+  if (Array.isArray(dimensions)) {
+    return compact(
+      dimensions.map((d) => {
+        const column = d && columns[d.accessor];
+        return column && getAspect(column, d);
+      })
+    );
+  }
+
+  const column = columns[dimensions.accessor];
+  return column && getAspect(column, dimensions);
+}
+
+const getAspect = (
+  { id: accessor, name: title }: DatatableColumn,
+  { accessor: column, format, params, aggType }: Dimension
+): Aspect => ({
+  accessor,
+  column,
+  title,
+  format,
+  aggType,
+  aggId: getAggId(accessor),
+  formatter: (value: any) => getFormatService().deserialize(format).convert(value),
+  params,
+});
diff --git a/src/plugins/vis_type_xy/public/config/get_axis.ts b/src/plugins/vis_type_xy/public/config/get_axis.ts
new file mode 100644
index 0000000000000..43a9e25e0e287
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/config/get_axis.ts
@@ -0,0 +1,198 @@
+/*
+ * 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 { identity, isNil } from 'lodash';
+
+import { AxisSpec, TickFormatter, YDomainRange, ScaleType as ECScaleType } from '@elastic/charts';
+
+import { LabelRotation } from '../../../charts/public';
+import { BUCKET_TYPES } from '../../../data/public';
+
+import {
+  Aspect,
+  CategoryAxis,
+  Grid,
+  AxisConfig,
+  TickOptions,
+  ScaleConfig,
+  Scale,
+  ScaleType,
+  AxisType,
+  XScaleType,
+  YScaleType,
+  SeriesParam,
+} from '../types';
+import { fillEmptyValue } from '../utils/get_series_name_fn';
+
+export function getAxis<S extends XScaleType | YScaleType>(
+  { type, title: axisTitle, labels, scale: axisScale, ...axis }: CategoryAxis,
+  { categoryLines, valueAxis }: Grid,
+  { params, format, formatter, title: fallbackTitle = '', aggType }: Aspect,
+  seriesParams: SeriesParam[],
+  isDateHistogram = false
+): AxisConfig<S> {
+  const isCategoryAxis = type === AxisType.Category;
+  // Hide unassigned axis, not supported in elastic charts
+  // TODO: refactor when disallowing unassigned axes
+  // https://github.com/elastic/kibana/issues/82752
+  const show =
+    (isCategoryAxis || seriesParams.some(({ valueAxis: id }) => id === axis.id)) && axis.show;
+  const groupId = axis.id;
+
+  const grid = isCategoryAxis
+    ? {
+        show: categoryLines,
+      }
+    : {
+        show: valueAxis === axis.id,
+      };
+  // Date range formatter applied on xAccessor
+  const tickFormatter =
+    aggType === BUCKET_TYPES.DATE_RANGE || aggType === BUCKET_TYPES.RANGE ? identity : formatter;
+  const ticks: TickOptions = {
+    formatter: tickFormatter,
+    labelFormatter: getLabelFormatter(labels.truncate, tickFormatter),
+    show: labels.show,
+    rotation: labels.rotate,
+    showOverlappingLabels: !labels.filter,
+    showDuplicates: !labels.filter,
+  };
+  const scale = getScale<S>(axisScale, params, format, isCategoryAxis);
+  const title = axisTitle.text || fallbackTitle;
+  const fallbackRotation =
+    isCategoryAxis && isDateHistogram ? LabelRotation.Horizontal : LabelRotation.Vertical;
+
+  return {
+    ...axis,
+    show,
+    groupId,
+    title,
+    ticks,
+    grid,
+    scale,
+    style: getAxisStyle(ticks, title, fallbackRotation),
+    domain: getAxisDomain(scale, isCategoryAxis),
+    integersOnly: aggType === 'count',
+  };
+}
+
+function getLabelFormatter(
+  truncate?: number | null,
+  formatter?: TickFormatter
+): TickFormatter | undefined {
+  if (truncate === null || truncate === undefined) {
+    return formatter;
+  }
+
+  return (value: any) => {
+    const formattedStringValue = `${formatter ? formatter(value) : value}`;
+    const finalValue = fillEmptyValue(formattedStringValue);
+
+    if (finalValue.length > truncate) {
+      return `${finalValue.slice(0, truncate)}...`;
+    }
+
+    return finalValue;
+  };
+}
+
+function getScaleType(
+  scale?: Scale,
+  isNumber?: boolean,
+  isTime = false,
+  isHistogram = false
+): ECScaleType | undefined {
+  if (isTime) return ECScaleType.Time;
+  if (isHistogram) return ECScaleType.Linear;
+
+  if (!isNumber) {
+    return ECScaleType.Ordinal;
+  }
+
+  const type = scale?.type;
+  if (type === ScaleType.SquareRoot) {
+    return ECScaleType.Sqrt;
+  }
+
+  return type;
+}
+
+function getScale<S extends XScaleType | YScaleType>(
+  scale: Scale,
+  params: Aspect['params'],
+  format: Aspect['format'],
+  isCategoryAxis: boolean
+): ScaleConfig<S> {
+  const type = (isCategoryAxis
+    ? getScaleType(
+        scale,
+        format?.id === 'number' || (format?.params?.id === 'number' && format?.id !== 'range'),
+        'date' in params,
+        'interval' in params
+      )
+    : getScaleType(scale, true)) as S;
+
+  return {
+    ...scale,
+    type,
+  };
+}
+
+function getAxisStyle(
+  ticks?: TickOptions,
+  title?: string,
+  rotationFallback: LabelRotation = LabelRotation.Vertical
+): AxisSpec['style'] {
+  return {
+    axisTitle: {
+      visible: (title ?? '').trim().length > 0,
+    },
+    tickLabel: {
+      visible: ticks?.show,
+      rotation: -(ticks?.rotation ?? rotationFallback),
+    },
+  };
+}
+
+function getAxisDomain<S extends XScaleType | YScaleType>(
+  scale: ScaleConfig<S>,
+  isCategoryAxis: boolean
+): YDomainRange | undefined {
+  if (isCategoryAxis || !scale) {
+    return;
+  }
+
+  const { min, max, defaultYExtents, boundsMargin } = scale;
+  const fit = defaultYExtents;
+  const padding = boundsMargin;
+
+  if (!isNil(min) && !isNil(max)) {
+    return { fit, padding, min, max };
+  }
+
+  if (!isNil(min)) {
+    return { fit, padding, min };
+  }
+
+  if (!isNil(max)) {
+    return { fit, padding, max };
+  }
+
+  return { fit, padding };
+}
diff --git a/src/plugins/vis_type_xy/public/config/get_config.ts b/src/plugins/vis_type_xy/public/config/get_config.ts
new file mode 100644
index 0000000000000..f0c5740b1307b
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/config/get_config.ts
@@ -0,0 +1,134 @@
+/*
+ * 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 { ScaleContinuousType } from '@elastic/charts/dist/scales';
+
+import { Datatable } from '../../../expressions/public';
+import { BUCKET_TYPES } from '../../../data/public';
+
+import {
+  Aspect,
+  AxisConfig,
+  DateHistogramParams,
+  SeriesParam,
+  VisConfig,
+  VisParams,
+  XScaleType,
+  YScaleType,
+} from '../types';
+import { getThresholdLine } from './get_threshold_line';
+import { getRotation } from './get_rotation';
+import { getTooltip } from './get_tooltip';
+import { getLegend } from './get_legend';
+import { getAxis } from './get_axis';
+import { getAspects } from './get_aspects';
+import { ChartType } from '../index';
+
+export function getConfig(table: Datatable, params: VisParams): VisConfig {
+  const {
+    thresholdLine,
+    orderBucketsBySum,
+    addTimeMarker,
+    radiusRatio,
+    labels,
+    fittingFunction,
+    detailedTooltip,
+    isVislibVis,
+  } = params;
+  const aspects = getAspects(table.columns, params.dimensions);
+  const xAxis = getAxis<XScaleType>(
+    params.categoryAxes[0],
+    params.grid,
+    aspects.x,
+    params.seriesParams,
+    params.dimensions.x?.aggType === BUCKET_TYPES.DATE_HISTOGRAM
+  );
+  const tooltip = getTooltip(aspects, params);
+  const yAxes = params.valueAxes.map((a) =>
+    // uses first y aspect in array for formatting axis
+    getAxis<YScaleType>(a, params.grid, aspects.y[0], params.seriesParams)
+  );
+  const enableHistogramMode =
+    (params.dimensions.x?.aggType === BUCKET_TYPES.DATE_HISTOGRAM ||
+      params.dimensions.x?.aggType === BUCKET_TYPES.HISTOGRAM) &&
+    shouldEnableHistogramMode(params.seriesParams, aspects.y, yAxes);
+  const isTimeChart = (aspects.x.params as DateHistogramParams).date ?? false;
+
+  return {
+    // NOTE: downscale ratio to match current vislib implementation
+    markSizeRatio: radiusRatio * 0.6,
+    fittingFunction,
+    detailedTooltip,
+    orderBucketsBySum,
+    isTimeChart,
+    isVislibVis,
+    showCurrentTime: addTimeMarker && isTimeChart,
+    showValueLabel: labels.show ?? false,
+    enableHistogramMode,
+    tooltip,
+    aspects,
+    xAxis,
+    yAxes,
+    legend: getLegend(params),
+    rotation: getRotation(params.categoryAxes[0]),
+    thresholdLine: getThresholdLine(thresholdLine, yAxes, params.seriesParams),
+  };
+}
+
+/**
+ * disables histogram mode for any config that has non-stacked clustered bars
+ *
+ * @param seriesParams
+ * @param yAspects
+ * @param yAxes
+ */
+const shouldEnableHistogramMode = (
+  seriesParams: SeriesParam[],
+  yAspects: Aspect[],
+  yAxes: Array<AxisConfig<ScaleContinuousType>>
+): boolean => {
+  const bars = seriesParams.filter(({ type, data: { id: paramId } }) => {
+    return (
+      type === ChartType.Histogram && yAspects.find(({ aggId }) => aggId === paramId) !== undefined
+    );
+  });
+
+  if (bars.length === 1) {
+    return true;
+  }
+
+  const groupIds = [
+    ...bars.reduce<Set<string>>((acc, { valueAxis: groupId, mode }) => {
+      acc.add(groupId);
+      return acc;
+    }, new Set()),
+  ];
+
+  if (groupIds.length > 1) {
+    return false;
+  }
+
+  const test = bars.every(({ valueAxis: groupId, mode }) => {
+    const yAxisScale = yAxes.find(({ groupId: axisGroupId }) => axisGroupId === groupId)?.scale;
+
+    return mode === 'stacked' || yAxisScale?.mode === 'percentage';
+  });
+
+  return test;
+};
diff --git a/src/plugins/vis_type_xy/public/config/get_legend.ts b/src/plugins/vis_type_xy/public/config/get_legend.ts
new file mode 100644
index 0000000000000..a376ec3c4fb96
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/config/get_legend.ts
@@ -0,0 +1,27 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { LegendOptions, VisParams } from '../types';
+
+export function getLegend({ addLegend, legendPosition }: VisParams): LegendOptions {
+  return {
+    show: addLegend,
+    position: legendPosition,
+  };
+}
diff --git a/test/functional/apps/getting_started/index.js b/src/plugins/vis_type_xy/public/config/get_rotation.ts
similarity index 66%
rename from test/functional/apps/getting_started/index.js
rename to src/plugins/vis_type_xy/public/config/get_rotation.ts
index 399d3fe87484b..3c1e9a8f9130a 100644
--- a/test/functional/apps/getting_started/index.js
+++ b/src/plugins/vis_type_xy/public/config/get_rotation.ts
@@ -17,16 +17,14 @@
  * under the License.
  */
 
-export default function ({ getService, loadTestFile }) {
-  const browser = getService('browser');
+import { Rotation } from '@elastic/charts';
 
-  describe('Getting Started ', function () {
-    this.tags(['ciGroup6']);
+import { CategoryAxis } from '../types';
 
-    before(async function () {
-      await browser.setWindowSize(1200, 800);
-    });
-    // https://www.elastic.co/guide/en/kibana/current/tutorial-load-dataset.html
-    loadTestFile(require.resolve('./_shakespeare'));
-  });
+export function getRotation({ position }: CategoryAxis): Rotation {
+  if (position === 'left' || position === 'right') {
+    return 90;
+  }
+
+  return 0;
 }
diff --git a/src/plugins/vis_type_xy/public/config/get_threshold_line.ts b/src/plugins/vis_type_xy/public/config/get_threshold_line.ts
new file mode 100644
index 0000000000000..861769f829074
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/config/get_threshold_line.ts
@@ -0,0 +1,54 @@
+/*
+ * 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 {
+  ThresholdLineConfig,
+  ThresholdLine,
+  ThresholdLineStyle,
+  AxisConfig,
+  SeriesParam,
+  YScaleType,
+} from '../types';
+
+export function getThresholdLine(
+  { style, ...rest }: ThresholdLine,
+  yAxes: Array<AxisConfig<YScaleType>>,
+  seriesParams: SeriesParam[]
+): ThresholdLineConfig {
+  const groupId = yAxes.find(({ id }) => seriesParams.some(({ valueAxis }) => id === valueAxis))
+    ?.groupId;
+
+  return {
+    ...rest,
+    dash: getDash(style),
+    groupId,
+  };
+}
+
+function getDash(style: ThresholdLineStyle): number[] | undefined {
+  switch (style) {
+    case ThresholdLineStyle.Dashed:
+      return [10, 5];
+    case ThresholdLineStyle.DotDashed:
+      return [20, 5, 5, 5];
+    case ThresholdLineStyle.Full:
+    default:
+      return;
+  }
+}
diff --git a/src/plugins/vis_type_xy/public/config/get_tooltip.ts b/src/plugins/vis_type_xy/public/config/get_tooltip.ts
new file mode 100644
index 0000000000000..87146eeca9155
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/config/get_tooltip.ts
@@ -0,0 +1,33 @@
+/*
+ * 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 { TooltipType } from '@elastic/charts';
+
+import { Aspects, VisParams, TooltipConfig } from '../types';
+import { getDetailedTooltip } from '../components/detailed_tooltip';
+
+export function getTooltip(
+  aspects: Aspects,
+  { addTooltip, detailedTooltip }: VisParams
+): TooltipConfig {
+  return {
+    type: addTooltip ? TooltipType.VerticalCursor : TooltipType.None,
+    detailedTooltip: detailedTooltip ? getDetailedTooltip(aspects) : undefined,
+  };
+}
diff --git a/src/plugins/vis_type_xy/public/config/index.ts b/src/plugins/vis_type_xy/public/config/index.ts
new file mode 100644
index 0000000000000..2b0e32f726a6c
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/config/index.ts
@@ -0,0 +1,21 @@
+/*
+ * 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 { getConfig } from './get_config';
+export { getAggId } from './get_agg_id';
diff --git a/src/plugins/vis_type_xy/public/editor/collections.ts b/src/plugins/vis_type_xy/public/editor/collections.ts
new file mode 100644
index 0000000000000..0149bc476f5c5
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/editor/collections.ts
@@ -0,0 +1,201 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { Fit } from '@elastic/charts';
+
+import { AxisMode, ChartMode, InterpolationMode, ThresholdLineStyle } from '../types';
+import { ChartType } from '../../common';
+import { LabelRotation } from '../../../charts/public';
+import { getScaleTypes } from './scale_types';
+import { getPositions } from './positions';
+
+export { getScaleTypes, getPositions };
+
+export const getChartTypes = () => [
+  {
+    text: i18n.translate('visTypeXy.chartTypes.lineText', {
+      defaultMessage: 'Line',
+    }),
+    value: ChartType.Line,
+  },
+  {
+    text: i18n.translate('visTypeXy.chartTypes.areaText', {
+      defaultMessage: 'Area',
+    }),
+    value: ChartType.Area,
+  },
+  {
+    text: i18n.translate('visTypeXy.chartTypes.barText', {
+      defaultMessage: 'Bar',
+    }),
+    value: ChartType.Histogram,
+  },
+];
+
+export const getChartModes = () => [
+  {
+    text: i18n.translate('visTypeXy.chartModes.normalText', {
+      defaultMessage: 'Normal',
+    }),
+    value: ChartMode.Normal,
+  },
+  {
+    text: i18n.translate('visTypeXy.chartModes.stackedText', {
+      defaultMessage: 'Stacked',
+    }),
+    value: ChartMode.Stacked,
+  },
+];
+
+export const getInterpolationModes = () => [
+  {
+    text: i18n.translate('visTypeXy.interpolationModes.straightText', {
+      defaultMessage: 'Straight',
+    }),
+    value: InterpolationMode.Linear,
+  },
+  {
+    text: i18n.translate('visTypeXy.interpolationModes.smoothedText', {
+      defaultMessage: 'Smoothed',
+    }),
+    value: InterpolationMode.Cardinal,
+  },
+  {
+    text: i18n.translate('visTypeXy.interpolationModes.steppedText', {
+      defaultMessage: 'Stepped',
+    }),
+    value: InterpolationMode.StepAfter,
+  },
+];
+
+export const getAxisModes = () => [
+  {
+    text: i18n.translate('visTypeXy.axisModes.normalText', {
+      defaultMessage: 'Normal',
+    }),
+    value: AxisMode.Normal,
+  },
+  {
+    text: i18n.translate('visTypeXy.axisModes.percentageText', {
+      defaultMessage: 'Percentage',
+    }),
+    value: AxisMode.Percentage,
+  },
+  {
+    text: i18n.translate('visTypeXy.axisModes.wiggleText', {
+      defaultMessage: 'Wiggle',
+    }),
+    value: AxisMode.Wiggle,
+  },
+  {
+    text: i18n.translate('visTypeXy.axisModes.silhouetteText', {
+      defaultMessage: 'Silhouette',
+    }),
+    value: AxisMode.Silhouette,
+  },
+];
+
+export const getThresholdLineStyles = () => [
+  {
+    value: ThresholdLineStyle.Full,
+    text: i18n.translate('visTypeXy.thresholdLine.style.fullText', {
+      defaultMessage: 'Full',
+    }),
+  },
+  {
+    value: ThresholdLineStyle.Dashed,
+    text: i18n.translate('visTypeXy.thresholdLine.style.dashedText', {
+      defaultMessage: 'Dashed',
+    }),
+  },
+  {
+    value: ThresholdLineStyle.DotDashed,
+    text: i18n.translate('visTypeXy.thresholdLine.style.dotdashedText', {
+      defaultMessage: 'Dot-dashed',
+    }),
+  },
+];
+
+export const getRotateOptions = () => [
+  {
+    text: i18n.translate('visTypeXy.categoryAxis.rotate.horizontalText', {
+      defaultMessage: 'Horizontal',
+    }),
+    value: LabelRotation.Horizontal,
+  },
+  {
+    text: i18n.translate('visTypeXy.categoryAxis.rotate.verticalText', {
+      defaultMessage: 'Vertical',
+    }),
+    value: LabelRotation.Vertical,
+  },
+  {
+    text: i18n.translate('visTypeXy.categoryAxis.rotate.angledText', {
+      defaultMessage: 'Angled',
+    }),
+    value: LabelRotation.Angled,
+  },
+];
+
+export const getFittingFunctions = () =>
+  [
+    {
+      value: Fit.None,
+      text: i18n.translate('visTypeXy.fittingFunctionsTitle.none', {
+        defaultMessage: 'Hide (Do not fill gaps)',
+      }),
+    },
+    {
+      value: Fit.Zero,
+      text: i18n.translate('visTypeXy.fittingFunctionsTitle.zero', {
+        defaultMessage: 'Zero (Fill gaps with zeros)',
+      }),
+    },
+    {
+      value: Fit.Linear,
+      text: i18n.translate('visTypeXy.fittingFunctionsTitle.linear', {
+        defaultMessage: 'Linear (Fill gaps with a line)',
+      }),
+    },
+    {
+      value: Fit.Carry,
+      text: i18n.translate('visTypeXy.fittingFunctionsTitle.carry', {
+        defaultMessage: 'Last (Fill gaps with the last value)',
+      }),
+    },
+    {
+      value: Fit.Lookahead,
+      text: i18n.translate('visTypeXy.fittingFunctionsTitle.lookahead', {
+        defaultMessage: 'Next (Fill gaps with the next value)',
+      }),
+    },
+  ] as const;
+
+export const getConfigCollections = () => ({
+  legendPositions: getPositions(),
+  positions: getPositions(),
+  chartTypes: getChartTypes(),
+  axisModes: getAxisModes(),
+  scaleTypes: getScaleTypes(),
+  chartModes: getChartModes(),
+  interpolationModes: getInterpolationModes(),
+  thresholdLineStyles: getThresholdLineStyles(),
+  fittingFunctions: getFittingFunctions(),
+});
diff --git a/src/plugins/vis_type_vislib/public/utils/common_config.tsx b/src/plugins/vis_type_xy/public/editor/common_config.tsx
similarity index 59%
rename from src/plugins/vis_type_vislib/public/utils/common_config.tsx
rename to src/plugins/vis_type_xy/public/editor/common_config.tsx
index de867dc72bba7..31d1a9d539621 100644
--- a/src/plugins/vis_type_vislib/public/utils/common_config.tsx
+++ b/src/plugins/vis_type_xy/public/editor/common_config.tsx
@@ -20,36 +20,37 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-import { PointSeriesOptions, MetricsAxisOptions } from '../components/options';
-import { ValidationWrapper } from '../components/common';
-import { BasicVislibParams } from '../types';
+import { VisOptionsProps } from '../../../vis_default_editor/public';
 
-function getAreaOptionTabs() {
+import { VisParams } from '../types';
+import { MetricsAxisOptions, PointSeriesOptions } from './components/options';
+import { ValidationWrapper } from './components/common';
+
+export function getOptionTabs(showElasticChartsOptions = false) {
   return [
     {
       name: 'advanced',
-      title: i18n.translate('visTypeVislib.area.tabs.metricsAxesTitle', {
+      title: i18n.translate('visTypeXy.area.tabs.metricsAxesTitle', {
         defaultMessage: 'Metrics & axes',
       }),
-      editor: (props: VisOptionsProps<BasicVislibParams>) => (
+      editor: (props: VisOptionsProps<VisParams>) => (
         <ValidationWrapper {...props} component={MetricsAxisOptions} />
       ),
     },
     {
       name: 'options',
-      title: i18n.translate('visTypeVislib.area.tabs.panelSettingsTitle', {
+      title: i18n.translate('visTypeXy.area.tabs.panelSettingsTitle', {
         defaultMessage: 'Panel settings',
       }),
-      editor: (props: VisOptionsProps<BasicVislibParams>) => (
-        <ValidationWrapper {...props} component={PointSeriesOptions} />
+      editor: (props: VisOptionsProps<VisParams>) => (
+        <ValidationWrapper
+          {...props}
+          extraProps={{
+            showElasticChartsOptions,
+          }}
+          component={PointSeriesOptions}
+        />
       ),
     },
   ];
 }
-
-const countLabel = i18n.translate('visTypeVislib.area.countText', {
-  defaultMessage: 'Count',
-});
-
-export { getAreaOptionTabs, countLabel };
diff --git a/src/plugins/vis_type_vislib/public/components/common/index.ts b/src/plugins/vis_type_xy/public/editor/components/common/index.ts
similarity index 100%
rename from src/plugins/vis_type_vislib/public/components/common/index.ts
rename to src/plugins/vis_type_xy/public/editor/components/common/index.ts
diff --git a/src/plugins/vis_type_vislib/public/components/common/truncate_labels.tsx b/src/plugins/vis_type_xy/public/editor/components/common/truncate_labels.tsx
similarity index 96%
rename from src/plugins/vis_type_vislib/public/components/common/truncate_labels.tsx
rename to src/plugins/vis_type_xy/public/editor/components/common/truncate_labels.tsx
index 6f55f6f070d00..ae1f34376bbf8 100644
--- a/src/plugins/vis_type_vislib/public/components/common/truncate_labels.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/common/truncate_labels.tsx
@@ -33,7 +33,7 @@ function TruncateLabelsOption({ disabled, value = null, setValue }: TruncateLabe
 
   return (
     <EuiFormRow
-      label={i18n.translate('visTypeVislib.controls.truncateLabel', {
+      label={i18n.translate('visTypeXy.controls.truncateLabel', {
         defaultMessage: 'Truncate',
       })}
       fullWidth
diff --git a/src/plugins/vis_type_vislib/public/components/common/validation_wrapper.tsx b/src/plugins/vis_type_xy/public/editor/components/common/validation_wrapper.tsx
similarity index 79%
rename from src/plugins/vis_type_vislib/public/components/common/validation_wrapper.tsx
rename to src/plugins/vis_type_xy/public/editor/components/common/validation_wrapper.tsx
index 1a54132a3156e..a063ec0821b89 100644
--- a/src/plugins/vis_type_vislib/public/components/common/validation_wrapper.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/common/validation_wrapper.tsx
@@ -19,24 +19,26 @@
 
 import React, { useEffect, useState, useCallback } from 'react';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
+import { VisOptionsProps } from '../../../../../vis_default_editor/public';
 
-export interface ValidationVisOptionsProps<T> extends VisOptionsProps<T> {
+export interface ValidationVisOptionsProps<T, E = unknown> extends VisOptionsProps<T> {
   setMultipleValidity(paramName: string, isValid: boolean): void;
+  extraProps?: E;
 }
 
-interface ValidationWrapperProps<T> extends VisOptionsProps<T> {
-  component: React.ComponentType<ValidationVisOptionsProps<T>>;
+interface ValidationWrapperProps<T, E> extends VisOptionsProps<T> {
+  component: React.ComponentType<ValidationVisOptionsProps<T, E>>;
+  extraProps?: E;
 }
 
 interface Item {
   isValid: boolean;
 }
 
-function ValidationWrapper<T = unknown>({
+function ValidationWrapper<T = unknown, E = unknown>({
   component: Component,
   ...rest
-}: ValidationWrapperProps<T>) {
+}: ValidationWrapperProps<T, E>) {
   const [panelState, setPanelState] = useState({} as { [key: string]: Item });
   const isPanelValid = Object.values(panelState).every((item) => item.isValid);
   const { setValidity } = rest;
diff --git a/src/plugins/vis_type_vislib/public/components/index.ts b/src/plugins/vis_type_xy/public/editor/components/index.ts
similarity index 100%
rename from src/plugins/vis_type_vislib/public/components/index.ts
rename to src/plugins/vis_type_xy/public/editor/components/index.ts
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/index.tsx b/src/plugins/vis_type_xy/public/editor/components/options/index.tsx
new file mode 100644
index 0000000000000..3eba7fa3ad818
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/editor/components/options/index.tsx
@@ -0,0 +1,39 @@
+/*
+ * 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 React, { lazy } from 'react';
+
+import { VisParams } from '../../../types';
+import { ValidationVisOptionsProps } from '../common';
+
+const PointSeriesOptionsLazy = lazy(() => import('./point_series'));
+const MetricsAxisOptionsLazy = lazy(() => import('./metrics_axes'));
+
+export const PointSeriesOptions = (
+  props: ValidationVisOptionsProps<
+    VisParams,
+    {
+      showElasticChartsOptions: boolean;
+    }
+  >
+) => <PointSeriesOptionsLazy {...props} />;
+
+export const MetricsAxisOptions = (props: ValidationVisOptionsProps<VisParams>) => (
+  <MetricsAxisOptionsLazy {...props} />
+);
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/category_axis_panel.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/category_axis_panel.test.tsx.snap
similarity index 94%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/category_axis_panel.test.tsx.snap
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/category_axis_panel.test.tsx.snap
index 2b7c03084ec65..bc66c1940ac72 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/category_axis_panel.test.tsx.snap
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/category_axis_panel.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`CategoryAxisPanel component should init with the default set of props 1
     <h3>
       <FormattedMessage
         defaultMessage="X-axis"
-        id="visTypeVislib.controls.pointSeries.categoryAxis.xAxisTitle"
+        id="visTypeXy.controls.pointSeries.categoryAxis.xAxisTitle"
         values={Object {}}
       />
     </h3>
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap
similarity index 100%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/custom_extents_options.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/custom_extents_options.test.tsx.snap
similarity index 100%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/custom_extents_options.test.tsx.snap
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/custom_extents_options.test.tsx.snap
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/index.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/index.test.tsx.snap
similarity index 99%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/index.test.tsx.snap
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/index.test.tsx.snap
index 09e0753d592e5..c5ce09d4d78af 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/index.test.tsx.snap
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/index.test.tsx.snap
@@ -74,7 +74,6 @@ exports[`MetricsAxisOptions component should init with the default set of props
   />
   <ValueAxesPanel
     addValueAxis={[Function]}
-    isCategoryAxisHorizontal={true}
     onValueAxisPositionChanged={[Function]}
     removeValueAxis={[Function]}
     seriesParams={
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/label_options.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/label_options.test.tsx.snap
similarity index 95%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/label_options.test.tsx.snap
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/label_options.test.tsx.snap
index dea1e27d05e2e..175ec043cdbea 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/label_options.test.tsx.snap
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/label_options.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`LabelOptions component should init with the default set of props 1`] =
     <h3>
       <FormattedMessage
         defaultMessage="Labels"
-        id="visTypeVislib.controls.pointSeries.categoryAxis.labelsTitle"
+        id="visTypeXy.controls.pointSeries.categoryAxis.labelsTitle"
         values={Object {}}
       />
     </h3>
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/line_options.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/line_options.test.tsx.snap
similarity index 100%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/line_options.test.tsx.snap
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/line_options.test.tsx.snap
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap
similarity index 98%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap
index ed7ae45eed3a5..594511010b745 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`ValueAxesPanel component should init with the default set of props 1`]
         <h3>
           <FormattedMessage
             defaultMessage="Y-axes"
-            id="visTypeVislib.controls.pointSeries.valueAxes.yAxisTitle"
+            id="visTypeXy.controls.pointSeries.valueAxes.yAxisTitle"
             values={Object {}}
           />
         </h3>
@@ -120,7 +120,6 @@ exports[`ValueAxesPanel component should init with the default set of props 1`]
         }
       }
       index={0}
-      isCategoryAxisHorizontal={false}
       onValueAxisPositionChanged={[MockFunction]}
       setMultipleValidity={[MockFunction]}
       setParamByIndex={[MockFunction]}
@@ -303,7 +302,6 @@ exports[`ValueAxesPanel component should init with the default set of props 1`]
         }
       }
       index={1}
-      isCategoryAxisHorizontal={false}
       onValueAxisPositionChanged={[MockFunction]}
       setMultipleValidity={[MockFunction]}
       setParamByIndex={[MockFunction]}
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap
similarity index 96%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap
index c4142fb487b6a..3f3ee66a85924 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap
@@ -7,22 +7,18 @@ exports[`ValueAxisOptions component should init with the default set of props 1`
     options={
       Array [
         Object {
-          "disabled": false,
           "text": "Top",
           "value": "top",
         },
         Object {
-          "disabled": true,
           "text": "Left",
           "value": "left",
         },
         Object {
-          "disabled": true,
           "text": "Right",
           "value": "right",
         },
         Object {
-          "disabled": false,
           "text": "Bottom",
           "value": "bottom",
         },
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/y_extents.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/y_extents.test.tsx.snap
similarity index 100%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/y_extents.test.tsx.snap
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/y_extents.test.tsx.snap
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/category_axis_panel.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/category_axis_panel.test.tsx
similarity index 93%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/category_axis_panel.test.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/category_axis_panel.test.tsx
index 44ed0d5aeddab..3bf844618720b 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/category_axis_panel.test.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/category_axis_panel.test.tsx
@@ -20,16 +20,16 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { CategoryAxisPanel, CategoryAxisPanelProps } from './category_axis_panel';
-import { Axis } from '../../../types';
-import { Positions } from '../../../utils/collections';
+import { CategoryAxis } from '../../../../types';
 import { LabelOptions } from './label_options';
 import { categoryAxis, vis } from './mocks';
+import { Position } from '@elastic/charts';
 
 describe('CategoryAxisPanel component', () => {
   let setCategoryAxis: jest.Mock;
   let onPositionChanged: jest.Mock;
   let defaultProps: CategoryAxisPanelProps;
-  let axis: Axis;
+  let axis: CategoryAxis;
 
   beforeEach(() => {
     setCategoryAxis = jest.fn();
@@ -60,7 +60,7 @@ describe('CategoryAxisPanel component', () => {
   });
 
   it('should call onPositionChanged when position is changed', () => {
-    const value = Positions.RIGHT;
+    const value = Position.Right;
     const comp = shallow(<CategoryAxisPanel {...defaultProps} />);
     comp.find({ paramName: 'position' }).prop('setValue')('position', value);
 
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/category_axis_panel.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/category_axis_panel.tsx
similarity index 78%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/category_axis_panel.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/category_axis_panel.tsx
index 468fb1f8c315a..a551163747526 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/category_axis_panel.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/category_axis_panel.tsx
@@ -19,20 +19,21 @@
 
 import React, { useCallback } from 'react';
 
-import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
+import { Position } from '@elastic/charts';
+
+import { SelectOption, SwitchOption } from '../../../../../../charts/public';
+import { VisOptionsProps } from '../../../../../../vis_default_editor/public';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-import { Axis } from '../../../types';
-import { SelectOption, SwitchOption } from '../../../../../charts/public';
 import { LabelOptions, SetAxisLabel } from './label_options';
-import { Positions } from '../../../utils/collections';
+import { CategoryAxis } from '../../../../types';
 
 export interface CategoryAxisPanelProps {
-  axis: Axis;
-  onPositionChanged: (position: Positions) => void;
-  setCategoryAxis: (value: Axis) => void;
+  axis: CategoryAxis;
+  onPositionChanged: (position: Position) => void;
+  setCategoryAxis: (value: CategoryAxis) => void;
   vis: VisOptionsProps['vis'];
 }
 
@@ -43,7 +44,7 @@ function CategoryAxisPanel({
   setCategoryAxis,
 }: CategoryAxisPanelProps) {
   const setAxis = useCallback(
-    <T extends keyof Axis>(paramName: T, value: Axis[T]) => {
+    <T extends keyof CategoryAxis>(paramName: T, value: CategoryAxis[T]) => {
       const updatedAxis = {
         ...axis,
         [paramName]: value,
@@ -54,7 +55,7 @@ function CategoryAxisPanel({
   );
 
   const setPosition = useCallback(
-    (paramName: 'position', value: Axis['position']) => {
+    (paramName: 'position', value: CategoryAxis['position']) => {
       setAxis(paramName, value);
       onPositionChanged(value);
     },
@@ -77,7 +78,7 @@ function CategoryAxisPanel({
       <EuiTitle size="xs">
         <h3>
           <FormattedMessage
-            id="visTypeVislib.controls.pointSeries.categoryAxis.xAxisTitle"
+            id="visTypeXy.controls.pointSeries.categoryAxis.xAxisTitle"
             defaultMessage="X-axis"
           />
         </h3>
@@ -85,7 +86,7 @@ function CategoryAxisPanel({
       <EuiSpacer size="s" />
 
       <SelectOption
-        label={i18n.translate('visTypeVislib.controls.pointSeries.categoryAxis.positionLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.categoryAxis.positionLabel', {
           defaultMessage: 'Position',
         })}
         options={vis.type.editorConfig.collections.positions}
@@ -96,7 +97,7 @@ function CategoryAxisPanel({
       />
 
       <SwitchOption
-        label={i18n.translate('visTypeVislib.controls.pointSeries.categoryAxis.showLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.categoryAxis.showLabel', {
           defaultMessage: 'Show axis lines and labels',
         })}
         paramName="show"
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/chart_options.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.test.tsx
similarity index 92%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/chart_options.test.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.test.tsx
index e2d4a0db9f1f9..832b19b9575d5 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/chart_options.test.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.test.tsx
@@ -19,11 +19,12 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
+
 import { ChartOptions, ChartOptionsParams } from './chart_options';
-import { SeriesParam } from '../../../types';
+import { SeriesParam, ChartMode } from '../../../../types';
 import { LineOptions } from './line_options';
-import { ChartTypes, ChartModes } from '../../../utils/collections';
 import { valueAxis, seriesParam, vis } from './mocks';
+import { ChartType } from '../../../../../common';
 
 describe('ChartOptions component', () => {
   let setParamByIndex: jest.Mock;
@@ -53,14 +54,14 @@ describe('ChartOptions component', () => {
   });
 
   it('should show LineOptions when type is line', () => {
-    chart.type = ChartTypes.LINE;
+    chart.type = ChartType.Line;
     const comp = shallow(<ChartOptions {...defaultProps} />);
 
     expect(comp.find(LineOptions).exists()).toBeTruthy();
   });
 
   it('should show line mode when type is area', () => {
-    chart.type = ChartTypes.AREA;
+    chart.type = ChartType.Area;
     const comp = shallow(<ChartOptions {...defaultProps} />);
 
     expect(comp.find({ paramName: 'interpolate' }).exists()).toBeTruthy();
@@ -78,8 +79,8 @@ describe('ChartOptions component', () => {
   it('should call setParamByIndex when mode is changed', () => {
     const comp = shallow(<ChartOptions {...defaultProps} />);
     const paramName = 'mode';
-    comp.find({ paramName }).prop('setValue')(paramName, ChartModes.NORMAL);
+    comp.find({ paramName }).prop('setValue')(paramName, ChartMode.Normal);
 
-    expect(setParamByIndex).toBeCalledWith('seriesParams', 0, paramName, ChartModes.NORMAL);
+    expect(setParamByIndex).toBeCalledWith('seriesParams', 0, paramName, ChartMode.Normal);
   });
 });
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/chart_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.tsx
similarity index 80%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/chart_options.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.tsx
index 623a8d1f348e9..c379fa30b49b8 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/chart_options.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.tsx
@@ -22,12 +22,13 @@ import React, { useMemo, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
-import { Vis } from '../../../../../visualizations/public';
-import { SeriesParam, ValueAxis } from '../../../types';
-import { ChartTypes } from '../../../utils/collections';
-import { SelectOption } from '../../../../../charts/public';
+import { Vis } from '../../../../../../visualizations/public';
+import { SelectOption } from '../../../../../../charts/public';
+
+import { SeriesParam, ValueAxis } from '../../../../types';
 import { LineOptions } from './line_options';
 import { SetParamByIndex, ChangeValueAxis } from '.';
+import { ChartType } from '../../../../../common';
 
 export type SetChart = <T extends keyof SeriesParam>(paramName: T, value: SeriesParam[T]) => void;
 
@@ -69,7 +70,7 @@ function ChartOptions({
         value: id,
       })),
       {
-        text: i18n.translate('visTypeVislib.controls.pointSeries.series.newAxisLabel', {
+        text: i18n.translate('visTypeXy.controls.pointSeries.series.newAxisLabel', {
           defaultMessage: 'New axis…',
         }),
         value: 'new',
@@ -82,7 +83,7 @@ function ChartOptions({
     <>
       <SelectOption
         id={`seriesValueAxis${index}`}
-        label={i18n.translate('visTypeVislib.controls.pointSeries.series.valueAxisLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.series.valueAxisLabel', {
           defaultMessage: 'Value axis',
         })}
         options={valueAxesOptions}
@@ -97,7 +98,7 @@ function ChartOptions({
         <EuiFlexItem>
           <SelectOption
             id={`seriesType${index}`}
-            label={i18n.translate('visTypeVislib.controls.pointSeries.series.chartTypeLabel', {
+            label={i18n.translate('visTypeXy.controls.pointSeries.series.chartTypeLabel', {
               defaultMessage: 'Chart type',
             })}
             options={vis.type.editorConfig.collections.chartTypes}
@@ -109,7 +110,7 @@ function ChartOptions({
         <EuiFlexItem>
           <SelectOption
             id={`seriesMode${index}`}
-            label={i18n.translate('visTypeVislib.controls.pointSeries.series.modeLabel', {
+            label={i18n.translate('visTypeXy.controls.pointSeries.series.modeLabel', {
               defaultMessage: 'Mode',
             })}
             options={vis.type.editorConfig.collections.chartModes}
@@ -120,12 +121,12 @@ function ChartOptions({
         </EuiFlexItem>
       </EuiFlexGroup>
 
-      {chart.type === ChartTypes.AREA && (
+      {chart.type === ChartType.Area && (
         <>
           <EuiSpacer size="m" />
 
           <SelectOption
-            label={i18n.translate('visTypeVislib.controls.pointSeries.series.lineModeLabel', {
+            label={i18n.translate('visTypeXy.controls.pointSeries.series.lineModeLabel', {
               defaultMessage: 'Line mode',
             })}
             options={vis.type.editorConfig.collections.interpolationModes}
@@ -136,9 +137,7 @@ function ChartOptions({
         </>
       )}
 
-      {chart.type === ChartTypes.LINE && (
-        <LineOptions chart={chart} vis={vis} setChart={setChart} />
-      )}
+      {chart.type === ChartType.Line && <LineOptions chart={chart} vis={vis} setChart={setChart} />}
     </>
   );
 }
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/custom_extents_options.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/custom_extents_options.test.tsx
similarity index 99%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/custom_extents_options.test.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/custom_extents_options.test.tsx
index 4798c67928f7f..82097271f8814 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/custom_extents_options.test.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/custom_extents_options.test.tsx
@@ -19,6 +19,7 @@
 
 import React from 'react';
 import { shallow, mount } from 'enzyme';
+
 import { CustomExtentsOptions, CustomExtentsOptionsProps } from './custom_extents_options';
 import { YExtents } from './y_extents';
 import { valueAxis } from './mocks';
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/custom_extents_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/custom_extents_options.tsx
similarity index 87%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/custom_extents_options.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/custom_extents_options.tsx
index 634d6b3f0641c..86a0c56e46942 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/custom_extents_options.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/custom_extents_options.tsx
@@ -18,10 +18,12 @@
  */
 
 import React, { useCallback, useEffect } from 'react';
+
 import { i18n } from '@kbn/i18n';
 
-import { ValueAxis } from '../../../types';
-import { NumberInputOption, SwitchOption } from '../../../../../charts/public';
+import { NumberInputOption, SwitchOption } from '../../../../../../charts/public';
+
+import { ValueAxis } from '../../../../types';
 import { YExtents } from './y_extents';
 import { SetScale } from './value_axis_options';
 
@@ -39,7 +41,7 @@ function CustomExtentsOptions({
   setValueAxisScale,
 }: CustomExtentsOptionsProps) {
   const invalidBoundsMarginMessage = i18n.translate(
-    'visTypeVislib.controls.pointSeries.valueAxes.scaleToDataBounds.minNeededBoundsMargin',
+    'visTypeXy.controls.pointSeries.valueAxes.scaleToDataBounds.minNeededBoundsMargin',
     { defaultMessage: 'Bounds margin must be greater than or equal to 0.' }
   );
 
@@ -84,12 +86,9 @@ function CustomExtentsOptions({
   return (
     <>
       <SwitchOption
-        label={i18n.translate(
-          'visTypeVislib.controls.pointSeries.valueAxes.scaleToDataBoundsLabel',
-          {
-            defaultMessage: 'Scale to data bounds',
-          }
-        )}
+        label={i18n.translate('visTypeXy.controls.pointSeries.valueAxes.scaleToDataBoundsLabel', {
+          defaultMessage: 'Scale to data bounds',
+        })}
         paramName="defaultYExtents"
         value={axisScale.defaultYExtents}
         setValue={onDefaultYExtentsChange}
@@ -101,7 +100,7 @@ function CustomExtentsOptions({
             error={!isBoundsMarginValid && invalidBoundsMarginMessage}
             isInvalid={!isBoundsMarginValid}
             label={i18n.translate(
-              'visTypeVislib.controls.pointSeries.valueAxes.scaleToDataBounds.boundsMargin',
+              'visTypeXy.controls.pointSeries.valueAxes.scaleToDataBounds.boundsMargin',
               {
                 defaultMessage: 'Bounds margin',
               }
@@ -117,7 +116,7 @@ function CustomExtentsOptions({
 
       <SwitchOption
         data-test-subj="yAxisSetYExtents"
-        label={i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.setAxisExtentsLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.valueAxes.setAxisExtentsLabel', {
           defaultMessage: 'Set axis extents',
         })}
         paramName="setYExtents"
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.test.tsx
new file mode 100644
index 0000000000000..a6b6e8b096403
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.test.tsx
@@ -0,0 +1,476 @@
+/*
+ * 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 React from 'react';
+import { mount, shallow } from 'enzyme';
+
+import { Position } from '@elastic/charts';
+
+import { IAggConfig, IAggType } from 'src/plugins/data/public';
+
+import { ChartType } from '../../../../../common';
+import { VisParams, SeriesParam, ValueAxis } from '../../../../types';
+import MetricsAxisOptions from './index';
+import { ValidationVisOptionsProps } from '../../common';
+import { ValueAxesPanel } from './value_axes_panel';
+import { CategoryAxisPanel } from './category_axis_panel';
+import { defaultValueAxisId, valueAxis, seriesParam, categoryAxis } from './mocks';
+import { mapPosition, mapPositionOpposite } from './utils';
+
+jest.mock('./series_panel', () => ({
+  SeriesPanel: () => 'SeriesPanel',
+}));
+jest.mock('./category_axis_panel', () => ({
+  CategoryAxisPanel: () => 'CategoryAxisPanel',
+}));
+jest.mock('./value_axes_panel', () => ({
+  ValueAxesPanel: () => 'ValueAxesPanel',
+}));
+
+const SERIES_PARAMS = 'seriesParams';
+const VALUE_AXES = 'valueAxes';
+
+const aggCount: IAggConfig = {
+  id: '1',
+  type: { name: 'count' },
+  makeLabel: () => 'Count',
+} as IAggConfig;
+
+const aggAverage: IAggConfig = {
+  id: '2',
+  type: { name: 'average' } as IAggType,
+  makeLabel: () => 'Average',
+} as IAggConfig;
+
+const createAggs = (aggs: any[]) => ({
+  aggs,
+  bySchemaName: () => aggs,
+});
+
+describe('MetricsAxisOptions component', () => {
+  let setValue: jest.Mock;
+  let defaultProps: ValidationVisOptionsProps<VisParams>;
+  let axis: ValueAxis;
+  let axisRight: ValueAxis;
+  let chart: SeriesParam;
+
+  beforeEach(() => {
+    setValue = jest.fn();
+
+    axis = {
+      ...valueAxis,
+      name: 'LeftAxis-1',
+      position: Position.Left,
+    };
+    axisRight = {
+      ...valueAxis,
+      id: 'ValueAxis-2',
+      name: 'RightAxis-1',
+      position: Position.Right,
+    };
+    chart = {
+      ...seriesParam,
+      type: ChartType.Area,
+    };
+
+    defaultProps = {
+      aggs: createAggs([aggCount]),
+      isTabSelected: true,
+      vis: {
+        type: {
+          type: ChartType.Area,
+          schemas: { metrics: [{ name: 'metric' }] },
+        },
+        setState: jest.fn(),
+        serialize: jest.fn(),
+      },
+      stateParams: {
+        valueAxes: [axis],
+        seriesParams: [chart],
+        categoryAxes: [categoryAxis],
+        grid: {
+          valueAxis: defaultValueAxisId,
+        },
+      },
+      setValue,
+    } as any;
+  });
+
+  it('should init with the default set of props', () => {
+    const component = shallow(<MetricsAxisOptions {...defaultProps} />);
+
+    expect(component).toMatchSnapshot();
+  });
+
+  describe('useEffect', () => {
+    it('should update series when new agg is added', () => {
+      const component = mount(<MetricsAxisOptions {...defaultProps} />);
+      component.setProps({
+        aggs: createAggs([aggCount, aggAverage]),
+      });
+
+      const updatedSeries = [chart, { ...chart, data: { id: '2', label: aggAverage.makeLabel() } }];
+      expect(setValue).toHaveBeenLastCalledWith(SERIES_PARAMS, updatedSeries);
+    });
+
+    it('should update series when new agg label is changed', () => {
+      const component = mount(<MetricsAxisOptions {...defaultProps} />);
+      const agg = { id: aggCount.id, makeLabel: () => 'New label' };
+      component.setProps({
+        aggs: createAggs([agg]),
+      });
+
+      const updatedSeries = [{ ...chart, data: { id: agg.id, label: agg.makeLabel() } }];
+      expect(setValue).toHaveBeenCalledWith(SERIES_PARAMS, updatedSeries);
+    });
+  });
+
+  describe('updateAxisTitle', () => {
+    it('should not update the value axis title if custom title was set', () => {
+      defaultProps.stateParams.valueAxes[0].title.text = 'Custom title';
+      const component = mount(<MetricsAxisOptions {...defaultProps} />);
+      const newAgg = {
+        ...aggCount,
+        makeLabel: () => 'Custom label',
+      };
+      component.setProps({
+        aggs: createAggs([newAgg]),
+      });
+      const updatedValues = [{ ...axis, title: { text: newAgg.makeLabel() } }];
+      expect(setValue).not.toHaveBeenCalledWith(VALUE_AXES, updatedValues);
+    });
+
+    it('should set the custom title to match the value axis label when only one agg exists for that axis', () => {
+      const component = mount(<MetricsAxisOptions {...defaultProps} />);
+      const agg = {
+        id: aggCount.id,
+        params: { customLabel: 'Custom label' },
+        makeLabel: () => 'Custom label',
+      };
+      component.setProps({
+        aggs: createAggs([agg]),
+      });
+
+      const updatedSeriesParams = [{ ...chart, data: { ...chart.data, label: agg.makeLabel() } }];
+      const updatedValues = [{ ...axis, title: { text: agg.makeLabel() } }];
+
+      expect(setValue).toHaveBeenCalledTimes(5);
+      expect(setValue).toHaveBeenNthCalledWith(3, SERIES_PARAMS, updatedSeriesParams);
+      expect(setValue).toHaveBeenNthCalledWith(5, SERIES_PARAMS, updatedSeriesParams);
+      expect(setValue).toHaveBeenNthCalledWith(4, VALUE_AXES, updatedValues);
+    });
+
+    it('should not set the custom title to match the value axis label when more than one agg exists for that axis', () => {
+      const component = mount(<MetricsAxisOptions {...defaultProps} />);
+      const agg = { id: aggCount.id, makeLabel: () => 'Custom label' };
+      component.setProps({
+        aggs: createAggs([agg, aggAverage]),
+        stateParams: {
+          ...defaultProps.stateParams,
+          seriesParams: [chart, chart],
+        },
+      });
+
+      expect(setValue).not.toHaveBeenCalledWith(VALUE_AXES);
+    });
+
+    it('should not overwrite the custom title with the value axis label if the custom title has been changed', () => {
+      defaultProps.stateParams.valueAxes[0].title.text = 'Custom title';
+      const component = mount(<MetricsAxisOptions {...defaultProps} />);
+      const agg = {
+        id: aggCount.id,
+        params: { customLabel: 'Custom label' },
+        makeLabel: () => 'Custom label',
+      };
+      component.setProps({
+        aggs: createAggs([agg]),
+      });
+
+      expect(setValue).not.toHaveBeenCalledWith(VALUE_AXES);
+    });
+  });
+
+  it('should add value axis', () => {
+    const component = shallow(<MetricsAxisOptions {...defaultProps} />);
+    component.find(ValueAxesPanel).prop('addValueAxis')();
+
+    expect(setValue).toHaveBeenCalledWith(VALUE_AXES, [axis, axisRight]);
+  });
+
+  describe('removeValueAxis', () => {
+    beforeEach(() => {
+      defaultProps.stateParams.valueAxes = [axis, axisRight];
+    });
+
+    it('should remove value axis', () => {
+      const component = shallow(<MetricsAxisOptions {...defaultProps} />);
+      component.find(ValueAxesPanel).prop('removeValueAxis')(axis);
+
+      expect(setValue).toHaveBeenCalledWith(VALUE_AXES, [axisRight]);
+    });
+
+    it('should update seriesParams "valueAxis" prop', () => {
+      const updatedSeriesParam = { ...chart, valueAxis: 'ValueAxis-2' };
+      const component = shallow(<MetricsAxisOptions {...defaultProps} />);
+      component.find(ValueAxesPanel).prop('removeValueAxis')(axis);
+
+      expect(setValue).toHaveBeenCalledWith(SERIES_PARAMS, [updatedSeriesParam]);
+    });
+
+    it('should reset grid "valueAxis" prop', () => {
+      const updatedGrid = { valueAxis: undefined };
+      defaultProps.stateParams.seriesParams[0].valueAxis = 'ValueAxis-2';
+      const component = shallow(<MetricsAxisOptions {...defaultProps} />);
+      component.find(ValueAxesPanel).prop('removeValueAxis')(axis);
+
+      expect(setValue).toHaveBeenCalledWith('grid', updatedGrid);
+    });
+  });
+
+  describe('onValueAxisPositionChanged', () => {
+    const getProps = (
+      valuePosition1: Position = Position.Right,
+      valuePosition2: Position = Position.Left
+    ): ValidationVisOptionsProps<VisParams> => ({
+      ...defaultProps,
+      stateParams: {
+        ...defaultProps.stateParams,
+        valueAxes: [
+          {
+            ...valueAxis,
+            id: 'ValueAxis-1',
+            position: valuePosition1,
+          },
+          {
+            ...valueAxis,
+            id: 'ValueAxis-2',
+            position: valuePosition2,
+          },
+          {
+            ...valueAxis,
+            id: 'ValueAxis-3',
+            position: valuePosition2,
+          },
+        ],
+        categoryAxes: [
+          {
+            ...categoryAxis,
+            position: mapPosition(valuePosition1),
+          },
+        ],
+      },
+    });
+
+    it('should update all value axes if another value axis changes from horizontal to vertical', () => {
+      const component = mount(<MetricsAxisOptions {...getProps()} />);
+      setValue.mockClear();
+      const onValueAxisPositionChanged = component
+        .find(ValueAxesPanel)
+        .prop('onValueAxisPositionChanged');
+      onValueAxisPositionChanged(0, Position.Bottom);
+      expect(setValue).nthCalledWith(1, 'categoryAxes', [
+        expect.objectContaining({
+          id: 'CategoryAxis-1',
+          position: Position.Right,
+        }),
+      ]);
+      expect(setValue).nthCalledWith(2, 'valueAxes', [
+        expect.objectContaining({
+          id: 'ValueAxis-1',
+          position: Position.Bottom,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-2',
+          position: Position.Top,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-3',
+          position: Position.Top,
+        }),
+      ]);
+    });
+
+    it('should update all value axes if another value axis changes from vertical to horizontal', () => {
+      const component = mount(<MetricsAxisOptions {...getProps(Position.Top, Position.Bottom)} />);
+      setValue.mockClear();
+      const onValueAxisPositionChanged = component
+        .find(ValueAxesPanel)
+        .prop('onValueAxisPositionChanged');
+      onValueAxisPositionChanged(1, Position.Left);
+      expect(setValue).nthCalledWith(1, 'categoryAxes', [
+        expect.objectContaining({
+          id: 'CategoryAxis-1',
+          position: Position.Top,
+        }),
+      ]);
+      expect(setValue).nthCalledWith(2, 'valueAxes', [
+        expect.objectContaining({
+          id: 'ValueAxis-1',
+          position: Position.Right,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-2',
+          position: Position.Left,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-3',
+          position: Position.Left,
+        }),
+      ]);
+    });
+
+    it('should update only changed value axis if value axis stays horizontal', () => {
+      const component = mount(<MetricsAxisOptions {...getProps()} />);
+      setValue.mockClear();
+      const onValueAxisPositionChanged = component
+        .find(ValueAxesPanel)
+        .prop('onValueAxisPositionChanged');
+      onValueAxisPositionChanged(0, Position.Left);
+      expect(setValue).nthCalledWith(1, 'valueAxes', [
+        expect.objectContaining({
+          id: 'ValueAxis-1',
+          position: Position.Left,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-2',
+          position: Position.Left,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-3',
+          position: Position.Left,
+        }),
+      ]);
+    });
+
+    it('should update only changed value axis if value axis stays vertical', () => {
+      const component = mount(<MetricsAxisOptions {...getProps(Position.Top, Position.Bottom)} />);
+      setValue.mockClear();
+      const onValueAxisPositionChanged = component
+        .find(ValueAxesPanel)
+        .prop('onValueAxisPositionChanged');
+      onValueAxisPositionChanged(1, Position.Top);
+      expect(setValue).nthCalledWith(1, 'valueAxes', [
+        expect.objectContaining({
+          id: 'ValueAxis-1',
+          position: Position.Top,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-2',
+          position: Position.Top,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-3',
+          position: Position.Bottom,
+        }),
+      ]);
+    });
+  });
+
+  describe('onCategoryAxisPositionChanged', () => {
+    const getProps = (
+      position: Position = Position.Bottom
+    ): ValidationVisOptionsProps<VisParams> => ({
+      ...defaultProps,
+      stateParams: {
+        ...defaultProps.stateParams,
+        valueAxes: [
+          {
+            ...valueAxis,
+            id: 'ValueAxis-1',
+            position: mapPosition(position),
+          },
+          {
+            ...valueAxis,
+            id: 'ValueAxis-2',
+            position: mapPositionOpposite(mapPosition(position)),
+          },
+          {
+            ...valueAxis,
+            id: 'ValueAxis-3',
+            position: mapPosition(position),
+          },
+        ],
+        categoryAxes: [
+          {
+            ...categoryAxis,
+            position,
+          },
+        ],
+      },
+    });
+
+    it('should update all value axes if category axis changes from horizontal to vertical', () => {
+      const component = mount(<MetricsAxisOptions {...getProps()} />);
+      setValue.mockClear();
+      const onPositionChanged = component.find(CategoryAxisPanel).prop('onPositionChanged');
+      onPositionChanged(Position.Left);
+      expect(setValue).nthCalledWith(1, 'valueAxes', [
+        expect.objectContaining({
+          id: 'ValueAxis-1',
+          position: Position.Bottom,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-2',
+          position: Position.Top,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-3',
+          position: Position.Bottom,
+        }),
+      ]);
+    });
+
+    it('should update all value axes if category axis changes from vertical to horizontal', () => {
+      const component = mount(<MetricsAxisOptions {...getProps(Position.Left)} />);
+      setValue.mockClear();
+      const onPositionChanged = component.find(CategoryAxisPanel).prop('onPositionChanged');
+      onPositionChanged(Position.Top);
+      expect(setValue).nthCalledWith(1, 'valueAxes', [
+        expect.objectContaining({
+          id: 'ValueAxis-1',
+          position: Position.Left,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-2',
+          position: Position.Right,
+        }),
+        expect.objectContaining({
+          id: 'ValueAxis-3',
+          position: Position.Left,
+        }),
+      ]);
+    });
+
+    it('should not update value axes if category axis stays horizontal', () => {
+      const component = mount(<MetricsAxisOptions {...getProps()} />);
+      setValue.mockClear();
+      const onPositionChanged = component.find(CategoryAxisPanel).prop('onPositionChanged');
+      onPositionChanged(Position.Top);
+      expect(setValue).not.toBeCalled();
+    });
+
+    it('should not update value axes if category axis stays vertical', () => {
+      const component = mount(<MetricsAxisOptions {...getProps(Position.Left)} />);
+      setValue.mockClear();
+      const onPositionChanged = component.find(CategoryAxisPanel).prop('onPositionChanged');
+      onPositionChanged(Position.Right);
+      expect(setValue).not.toBeCalled();
+    });
+  });
+});
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/index.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.tsx
similarity index 83%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/index.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.tsx
index 0862c47c35cff..9b4bf3127d45e 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/index.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/index.tsx
@@ -19,10 +19,12 @@
 
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { cloneDeep, get } from 'lodash';
+
 import { EuiSpacer } from '@elastic/eui';
 
-import { IAggConfig } from 'src/plugins/data/public';
-import { BasicVislibParams, ValueAxis, SeriesParam, Axis } from '../../../types';
+import { IAggConfig } from '../../../../../../data/public';
+
+import { VisParams, ValueAxis, SeriesParam, CategoryAxis } from '../../../../types';
 import { ValidationVisOptionsProps } from '../../common';
 import { SeriesPanel } from './series_panel';
 import { CategoryAxisPanel } from './category_axis_panel';
@@ -34,6 +36,7 @@ import {
   getUpdatedAxisName,
   mapPositionOpposite,
   mapPosition,
+  mapPositionOpposingOpposite,
 } from './utils';
 
 export type SetParamByIndex = <P extends keyof ValueAxis, O extends keyof SeriesParam>(
@@ -51,11 +54,9 @@ export type ChangeValueAxis = (
 
 const VALUE_AXIS_PREFIX = 'ValueAxis-';
 
-function MetricsAxisOptions(props: ValidationVisOptionsProps<BasicVislibParams>) {
+function MetricsAxisOptions(props: ValidationVisOptionsProps<VisParams>) {
   const { stateParams, setValue, aggs, vis, isTabSelected } = props;
 
-  const [isCategoryAxisHorizontal, setIsCategoryAxisHorizontal] = useState(true);
-
   const setParamByIndex: SetParamByIndex = useCallback(
     (axesName, index, paramName, value) => {
       const items = stateParams[axesName];
@@ -72,7 +73,7 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
   );
 
   const setCategoryAxis = useCallback(
-    (value: Axis) => {
+    (value: CategoryAxis) => {
       const categoryAxes = [...stateParams.categoryAxes];
       categoryAxes[0] = value;
       setValue('categoryAxes', categoryAxes);
@@ -170,33 +171,58 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
   );
 
   const onValueAxisPositionChanged = useCallback(
-    (index: number, value: ValueAxis['position']) => {
+    (index: number, axisPosition: ValueAxis['position']) => {
+      const isHorizontalAxis = isAxisHorizontal(axisPosition);
       const valueAxes = [...stateParams.valueAxes];
-      const name = getUpdatedAxisName(value, valueAxes);
+      const name = getUpdatedAxisName(axisPosition, valueAxes);
+      const [categoryAxes] = stateParams.categoryAxes;
 
-      valueAxes[index] = {
-        ...valueAxes[index],
-        name,
-        position: value,
-      };
-      setValue('valueAxes', valueAxes);
+      if (isAxisHorizontal(categoryAxes.position) === isHorizontalAxis) {
+        const updatedCategoryAxes = {
+          ...categoryAxes,
+          position: mapPosition(categoryAxes.position),
+        };
+
+        setValue('categoryAxes', [updatedCategoryAxes]);
+
+        const oldPosition = valueAxes[index].position;
+        const newValueAxes = valueAxes.map(({ position, ...axis }, i) => ({
+          ...axis,
+          position:
+            i === index
+              ? axisPosition
+              : mapPositionOpposingOpposite(position, oldPosition, axisPosition),
+        }));
+        setValue('valueAxes', newValueAxes);
+      } else {
+        valueAxes[index] = {
+          ...valueAxes[index],
+          name,
+          position: axisPosition,
+        };
+        setValue('valueAxes', valueAxes);
+      }
     },
-    [stateParams.valueAxes, setValue]
+    [stateParams.valueAxes, stateParams.categoryAxes, setValue]
   );
 
   const onCategoryAxisPositionChanged = useCallback(
-    (chartPosition: Axis['position']) => {
-      const isChartHorizontal = isAxisHorizontal(chartPosition);
-      setIsCategoryAxisHorizontal(isAxisHorizontal(chartPosition));
-
-      stateParams.valueAxes.forEach((axis, index) => {
-        if (isAxisHorizontal(axis.position) === isChartHorizontal) {
-          const position = mapPosition(axis.position);
-          onValueAxisPositionChanged(index, position);
-        }
-      });
+    (axisPosition: CategoryAxis['position']) => {
+      const isHorizontalAxis = isAxisHorizontal(axisPosition);
+
+      if (
+        stateParams.valueAxes.some(
+          ({ position }) => isAxisHorizontal(position) === isHorizontalAxis
+        )
+      ) {
+        const newValueAxes = stateParams.valueAxes.map(({ position, ...axis }) => ({
+          ...axis,
+          position: mapPosition(position),
+        }));
+        setValue('valueAxes', newValueAxes);
+      }
     },
-    [stateParams.valueAxes, onValueAxisPositionChanged]
+    [setValue, stateParams.valueAxes]
   );
 
   const addValueAxis = useCallback(() => {
@@ -305,7 +331,6 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
       <EuiSpacer size="s" />
       <ValueAxesPanel
         addValueAxis={addValueAxis}
-        isCategoryAxisHorizontal={isCategoryAxisHorizontal}
         removeValueAxis={removeValueAxis}
         onValueAxisPositionChanged={onValueAxisPositionChanged}
         setParamByIndex={setParamByIndex}
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/label_options.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/label_options.test.tsx
similarity index 99%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/label_options.test.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/label_options.test.tsx
index f500b7e58e9fd..9c5a39e8fc3fc 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/label_options.test.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/label_options.test.tsx
@@ -19,6 +19,7 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
+
 import { LabelOptions, LabelOptionsProps } from './label_options';
 import { TruncateLabelsOption } from '../../common';
 import { valueAxis } from './mocks';
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/label_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/label_options.tsx
similarity index 78%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/label_options.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/label_options.tsx
index 14e1da6ebcc70..8c5c440ad9de9 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/label_options.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/label_options.tsx
@@ -23,24 +23,21 @@ import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { Axis } from '../../../types';
+import { SelectOption, SwitchOption, Labels } from '../../../../../../charts/public';
+
 import { TruncateLabelsOption } from '../../common';
-import { getRotateOptions } from '../../../utils/collections';
-import { SelectOption, SwitchOption } from '../../../../../charts/public';
+import { getRotateOptions } from '../../../collections';
 
-export type SetAxisLabel = <T extends keyof Axis['labels']>(
-  paramName: T,
-  value: Axis['labels'][T]
-) => void;
+export type SetAxisLabel = <T extends keyof Labels>(paramName: T, value: Labels[T]) => void;
 export interface LabelOptionsProps {
-  axisLabels: Axis['labels'];
+  axisLabels: Labels;
   axisFilterCheckboxName: string;
   setAxisLabel: SetAxisLabel;
 }
 
 function LabelOptions({ axisLabels, axisFilterCheckboxName, setAxisLabel }: LabelOptionsProps) {
   const setAxisLabelRotate = useCallback(
-    (paramName: 'rotate', value: Axis['labels']['rotate']) => {
+    (paramName: 'rotate', value: Labels['rotate']) => {
       setAxisLabel(paramName, Number(value));
     },
     [setAxisLabel]
@@ -54,7 +51,7 @@ function LabelOptions({ axisLabels, axisFilterCheckboxName, setAxisLabel }: Labe
       <EuiTitle size="xxs">
         <h3>
           <FormattedMessage
-            id="visTypeVislib.controls.pointSeries.categoryAxis.labelsTitle"
+            id="visTypeXy.controls.pointSeries.categoryAxis.labelsTitle"
             defaultMessage="Labels"
           />
         </h3>
@@ -62,7 +59,7 @@ function LabelOptions({ axisLabels, axisFilterCheckboxName, setAxisLabel }: Labe
       <EuiSpacer size="s" />
 
       <SwitchOption
-        label={i18n.translate('visTypeVislib.controls.pointSeries.categoryAxis.showLabelsLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.categoryAxis.showLabelsLabel', {
           defaultMessage: 'Show labels',
         })}
         paramName="show"
@@ -73,7 +70,7 @@ function LabelOptions({ axisLabels, axisFilterCheckboxName, setAxisLabel }: Labe
       <SwitchOption
         data-test-subj={axisFilterCheckboxName}
         disabled={!axisLabels.show}
-        label={i18n.translate('visTypeVislib.controls.pointSeries.categoryAxis.filterLabelsLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.categoryAxis.filterLabelsLabel', {
           defaultMessage: 'Filter labels',
         })}
         paramName="filter"
@@ -87,7 +84,7 @@ function LabelOptions({ axisLabels, axisFilterCheckboxName, setAxisLabel }: Labe
         <EuiFlexItem>
           <SelectOption
             disabled={!axisLabels.show}
-            label={i18n.translate('visTypeVislib.controls.pointSeries.categoryAxis.alignLabel', {
+            label={i18n.translate('visTypeXy.controls.pointSeries.categoryAxis.alignLabel', {
               defaultMessage: 'Align',
             })}
             options={rotateOptions}
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/line_options.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.test.tsx
similarity index 96%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/line_options.test.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.test.tsx
index e90c96146ec2c..7727f90f79107 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/line_options.test.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.test.tsx
@@ -19,8 +19,10 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
+
+import { NumberInputOption } from '../../../../../../charts/public';
+
 import { LineOptions, LineOptionsParams } from './line_options';
-import { NumberInputOption } from '../../../../../charts/public';
 import { seriesParam, vis } from './mocks';
 
 const LINE_WIDTH = 'lineWidth';
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/line_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.tsx
similarity index 84%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/line_options.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.tsx
index 4b0cce94267f1..df2735396b38d 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/line_options.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.tsx
@@ -22,9 +22,10 @@ import React, { useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
-import { Vis } from '../../../../../visualizations/public';
-import { SeriesParam } from '../../../types';
-import { NumberInputOption, SelectOption, SwitchOption } from '../../../../../charts/public';
+import { Vis } from '../../../../../../visualizations/public';
+import { NumberInputOption, SelectOption, SwitchOption } from '../../../../../../charts/public';
+
+import { SeriesParam } from '../../../../types';
 import { SetChart } from './chart_options';
 
 export interface LineOptionsParams {
@@ -46,7 +47,7 @@ function LineOptions({ chart, vis, setChart }: LineOptionsParams) {
       <EuiSpacer size="m" />
 
       <SwitchOption
-        label={i18n.translate('visTypeVislib.controls.pointSeries.series.showLineLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.series.showLineLabel', {
           defaultMessage: 'Show line',
         })}
         paramName="drawLinesBetweenPoints"
@@ -60,7 +61,7 @@ function LineOptions({ chart, vis, setChart }: LineOptionsParams) {
         <EuiFlexItem>
           <SelectOption
             disabled={!chart.drawLinesBetweenPoints}
-            label={i18n.translate('visTypeVislib.controls.pointSeries.series.lineModeLabel', {
+            label={i18n.translate('visTypeXy.controls.pointSeries.series.lineModeLabel', {
               defaultMessage: 'Line mode',
             })}
             options={vis.type.editorConfig.collections.interpolationModes}
@@ -72,7 +73,7 @@ function LineOptions({ chart, vis, setChart }: LineOptionsParams) {
         <EuiFlexItem>
           <NumberInputOption
             disabled={!chart.drawLinesBetweenPoints}
-            label={i18n.translate('visTypeVislib.controls.pointSeries.series.lineWidthLabel', {
+            label={i18n.translate('visTypeXy.controls.pointSeries.series.lineWidthLabel', {
               defaultMessage: 'Line width',
             })}
             paramName="lineWidth"
@@ -87,7 +88,7 @@ function LineOptions({ chart, vis, setChart }: LineOptionsParams) {
       <EuiSpacer size="m" />
 
       <SwitchOption
-        label={i18n.translate('visTypeVislib.controls.pointSeries.series.showDotsLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.series.showDotsLabel', {
           defaultMessage: 'Show dots',
         })}
         paramName="showCircles"
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/mocks.ts b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/mocks.ts
similarity index 73%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/mocks.ts
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/mocks.ts
index 277fcf0cdbc3d..fd78036ffe74c 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/mocks.ts
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/mocks.ts
@@ -17,21 +17,27 @@
  * under the License.
  */
 
-import { Vis } from '../../../../../visualizations/public';
-import { Axis, ValueAxis, SeriesParam } from '../../../types';
+import { Position } from '@elastic/charts';
+
+import { Vis } from '../../../../../../visualizations/public';
+import { Style } from '../../../../../../charts/public';
+
+import {
+  ValueAxis,
+  SeriesParam,
+  ChartMode,
+  InterpolationMode,
+  ScaleType,
+  AxisType,
+  CategoryAxis,
+} from '../../../../types';
 import {
-  ChartTypes,
-  ChartModes,
-  InterpolationModes,
-  ScaleTypes,
-  Positions,
-  AxisTypes,
   getScaleTypes,
   getAxisModes,
   getPositions,
   getInterpolationModes,
-} from '../../../utils/collections';
-import { Style } from '../../../../../charts/public';
+} from '../../../collections';
+import { ChartType } from '../../../../../common';
 
 const defaultValueAxisId = 'ValueAxis-1';
 
@@ -49,13 +55,13 @@ const axis = {
   },
 };
 
-const categoryAxis: Axis = {
+const categoryAxis: CategoryAxis = {
   ...axis,
   id: 'CategoryAxis-1',
-  type: AxisTypes.CATEGORY,
-  position: Positions.BOTTOM,
+  type: AxisType.Category,
+  position: Position.Bottom,
   scale: {
-    type: ScaleTypes.LINEAR,
+    type: ScaleType.Linear,
   },
 };
 
@@ -63,10 +69,10 @@ const valueAxis: ValueAxis = {
   ...axis,
   id: defaultValueAxisId,
   name: 'ValueAxis-1',
-  type: AxisTypes.VALUE,
-  position: Positions.LEFT,
+  type: AxisType.Value,
+  position: Position.Left,
   scale: {
-    type: ScaleTypes.LINEAR,
+    type: ScaleType.Linear,
     boundsMargin: 1,
     defaultYExtents: true,
     min: 1,
@@ -77,8 +83,8 @@ const valueAxis: ValueAxis = {
 
 const seriesParam: SeriesParam = {
   show: true,
-  type: ChartTypes.HISTOGRAM,
-  mode: ChartModes.STACKED,
+  type: ChartType.Histogram,
+  mode: ChartMode.Stacked,
   data: {
     label: 'Count',
     id: '1',
@@ -86,7 +92,7 @@ const seriesParam: SeriesParam = {
   drawLinesBetweenPoints: true,
   lineWidth: 2,
   showCircles: true,
-  interpolate: InterpolationModes.LINEAR,
+  interpolate: InterpolationMode.Linear,
   valueAxis: defaultValueAxisId,
 };
 
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/series_panel.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/series_panel.tsx
similarity index 83%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/series_panel.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/series_panel.tsx
index 27c423860972c..8d284398c5b60 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/series_panel.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/series_panel.tsx
@@ -23,8 +23,9 @@ import { EuiPanel, EuiTitle, EuiSpacer, EuiAccordion } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { Vis } from '../../../../../visualizations/public';
-import { ValueAxis, SeriesParam } from '../../../types';
+import { Vis } from '../../../../../../visualizations/public';
+
+import { ValueAxis, SeriesParam } from '../../../../types';
 import { ChartOptions } from './chart_options';
 import { SetParamByIndex, ChangeValueAxis } from '.';
 
@@ -42,7 +43,7 @@ function SeriesPanel({ seriesParams, ...chartProps }: SeriesPanelProps) {
       <EuiTitle size="xs">
         <h3>
           <FormattedMessage
-            id="visTypeVislib.controls.pointSeries.series.metricsTitle"
+            id="visTypeXy.controls.pointSeries.series.metricsTitle"
             defaultMessage="Metrics"
           />
         </h3>
@@ -57,13 +58,10 @@ function SeriesPanel({ seriesParams, ...chartProps }: SeriesPanelProps) {
           initialIsOpen={index === 0}
           buttonContent={chart.data.label}
           buttonContentClassName="visEditorSidebar__aggGroupAccordionButtonContent eui-textTruncate"
-          aria-label={i18n.translate(
-            'visTypeVislib.controls.pointSeries.seriesAccordionAriaLabel',
-            {
-              defaultMessage: 'Toggle {agg} options',
-              values: { agg: chart.data.label },
-            }
-          )}
+          aria-label={i18n.translate('visTypeXy.controls.pointSeries.seriesAccordionAriaLabel', {
+            defaultMessage: 'Toggle {agg} options',
+            values: { agg: chart.data.label },
+          })}
         >
           <>
             <EuiSpacer size="m" />
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/utils.ts b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/utils.ts
similarity index 53%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/utils.ts
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/utils.ts
index 708e8cf15f029..58216ee8953cd 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/utils.ts
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/utils.ts
@@ -16,13 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
 import { upperFirst } from 'lodash';
 
-import { BasicVislibParams, ValueAxis, SeriesParam } from '../../../types';
-import { ChartModes, ChartTypes, InterpolationModes, Positions } from '../../../utils/collections';
+import { Position } from '@elastic/charts';
+
+import { VisParams, ValueAxis, SeriesParam, ChartMode, InterpolationMode } from '../../../../types';
+import { ChartType } from '../../../../../common';
 
-const makeSerie = (
+export const makeSerie = (
   id: string,
   label: string,
   defaultValueAxis: ValueAxis['id'],
@@ -31,11 +32,11 @@ const makeSerie = (
   const data = { id, label };
   const defaultSerie = {
     show: true,
-    mode: ChartModes.NORMAL,
-    type: ChartTypes.LINE,
+    mode: ChartMode.Normal,
+    type: ChartType.Line,
     drawLinesBetweenPoints: true,
     showCircles: true,
-    interpolate: InterpolationModes.LINEAR,
+    interpolate: InterpolationMode.Linear,
     lineWidth: 2,
     valueAxis: defaultValueAxis,
     data,
@@ -43,12 +44,12 @@ const makeSerie = (
   return lastSerie ? { ...lastSerie, data } : defaultSerie;
 };
 
-const isAxisHorizontal = (position: Positions) =>
-  [Positions.TOP, Positions.BOTTOM].includes(position as any);
+export const isAxisHorizontal = (position: Position) =>
+  [Position.Top, Position.Bottom].includes(position as any);
 
 const RADIX = 10;
 
-function countNextAxisNumber(axisName: string, axisProp: 'id' | 'name' = 'id') {
+export function countNextAxisNumber(axisName: string, axisProp: 'id' | 'name' = 'id') {
   return (value: number, axis: ValueAxis) => {
     const nameLength = axisName.length;
     if (axis[axisProp].substr(0, nameLength) === axisName) {
@@ -63,9 +64,9 @@ function countNextAxisNumber(axisName: string, axisProp: 'id' | 'name' = 'id') {
 
 const AXIS_PREFIX = 'Axis-';
 
-const getUpdatedAxisName = (
+export const getUpdatedAxisName = (
   axisPosition: ValueAxis['position'],
-  valueAxes: BasicVislibParams['valueAxes']
+  valueAxes: VisParams['valueAxes']
 ) => {
   const axisName = upperFirst(axisPosition) + AXIS_PREFIX;
   const nextAxisNameNumber = valueAxes.reduce(countNextAxisNumber(axisName, 'name'), 1);
@@ -73,39 +74,56 @@ const getUpdatedAxisName = (
   return `${axisName}${nextAxisNameNumber}`;
 };
 
-function mapPositionOpposite(position: Positions) {
+/**
+ * Maps axis position to opposite position
+ * @param position
+ */
+export function mapPositionOpposite(position: Position) {
   switch (position) {
-    case Positions.BOTTOM:
-      return Positions.TOP;
-    case Positions.TOP:
-      return Positions.BOTTOM;
-    case Positions.LEFT:
-      return Positions.RIGHT;
-    case Positions.RIGHT:
-      return Positions.LEFT;
+    case Position.Bottom:
+      return Position.Top;
+    case Position.Top:
+      return Position.Bottom;
+    case Position.Left:
+      return Position.Right;
+    case Position.Right:
+      return Position.Left;
     default:
       throw new Error('Invalid legend position.');
   }
 }
 
-function mapPosition(position: Positions) {
-  switch (position) {
-    case Positions.BOTTOM:
-      return Positions.LEFT;
-    case Positions.TOP:
-      return Positions.RIGHT;
-    case Positions.LEFT:
-      return Positions.BOTTOM;
-    case Positions.RIGHT:
-      return Positions.TOP;
+/**
+ * Maps axis position to new position or opposite of new position based on old position
+ * @param position
+ * @param oldPosition
+ * @param newPosition
+ */
+export function mapPositionOpposingOpposite(
+  position: Position,
+  oldPosition: Position,
+  newPosition: Position
+) {
+  if (position === oldPosition) {
+    return newPosition;
   }
+
+  return mapPositionOpposite(newPosition);
 }
 
-export {
-  makeSerie,
-  isAxisHorizontal,
-  countNextAxisNumber,
-  getUpdatedAxisName,
-  mapPositionOpposite,
-  mapPosition,
-};
+/**
+ * Maps axis position to opposite rotation position
+ * @param position
+ */
+export function mapPosition(position: Position) {
+  switch (position) {
+    case Position.Bottom:
+      return Position.Left;
+    case Position.Top:
+      return Position.Right;
+    case Position.Left:
+      return Position.Bottom;
+    case Position.Right:
+      return Position.Top;
+  }
+}
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axes_panel.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axes_panel.test.tsx
similarity index 96%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axes_panel.test.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axes_panel.test.tsx
index 070433ca03f6d..f3286029db32f 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axes_panel.test.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axes_panel.test.tsx
@@ -19,10 +19,12 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
-import { ValueAxesPanel, ValueAxesPanelProps } from './value_axes_panel';
-import { ValueAxis, SeriesParam } from '../../../types';
-import { Positions } from '../../../utils/collections';
+
 import { mountWithIntl } from '@kbn/test/jest';
+import { Position } from '@elastic/charts';
+
+import { ValueAxis, SeriesParam } from '../../../../types';
+import { ValueAxesPanel, ValueAxesPanelProps } from './value_axes_panel';
 import { valueAxis, seriesParam, vis } from './mocks';
 
 describe('ValueAxesPanel component', () => {
@@ -47,7 +49,7 @@ describe('ValueAxesPanel component', () => {
     axisRight = {
       ...valueAxis,
       id: 'ValueAxis-2',
-      position: Positions.RIGHT,
+      position: Position.Right,
     };
     seriesParamCount = { ...seriesParam };
     seriesParamAverage = {
@@ -63,7 +65,6 @@ describe('ValueAxesPanel component', () => {
       seriesParams: [seriesParamCount, seriesParamAverage],
       valueAxes: [axisLeft, axisRight],
       vis,
-      isCategoryAxisHorizontal: false,
       setParamByIndex,
       onValueAxisPositionChanged,
       addValueAxis,
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axes_panel.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axes_panel.tsx
similarity index 90%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axes_panel.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axes_panel.tsx
index 5f7d33b7f1f47..397704663ff1f 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axes_panel.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axes_panel.tsx
@@ -31,13 +31,13 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { Vis } from '../../../../../visualizations/public';
-import { SeriesParam, ValueAxis } from '../../../types';
+import { Vis } from '../../../../../../visualizations/public';
+
+import { SeriesParam, ValueAxis } from '../../../../types';
 import { ValueAxisOptions } from './value_axis_options';
 import { SetParamByIndex } from '.';
 
 export interface ValueAxesPanelProps {
-  isCategoryAxisHorizontal: boolean;
   addValueAxis: () => ValueAxis;
   removeValueAxis: (axis: ValueAxis) => void;
   onValueAxisPositionChanged: (index: number, value: ValueAxis['position']) => void;
@@ -64,7 +64,7 @@ function ValueAxesPanel(props: ValueAxesPanelProps) {
 
   const removeButtonTooltip = useMemo(
     () =>
-      i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.removeButtonTooltip', {
+      i18n.translate('visTypeXy.controls.pointSeries.valueAxes.removeButtonTooltip', {
         defaultMessage: 'Remove Y-axis',
       }),
     []
@@ -87,7 +87,7 @@ function ValueAxesPanel(props: ValueAxesPanelProps) {
 
   const addButtonTooltip = useMemo(
     () =>
-      i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.addButtonTooltip', {
+      i18n.translate('visTypeXy.controls.pointSeries.valueAxes.addButtonTooltip', {
         defaultMessage: 'Add Y-axis',
       }),
     []
@@ -115,7 +115,7 @@ function ValueAxesPanel(props: ValueAxesPanelProps) {
           <EuiTitle size="xs">
             <h3>
               <FormattedMessage
-                id="visTypeVislib.controls.pointSeries.valueAxes.yAxisTitle"
+                id="visTypeXy.controls.pointSeries.valueAxes.yAxisTitle"
                 defaultMessage="Y-axes"
               />
             </h3>
@@ -146,7 +146,7 @@ function ValueAxesPanel(props: ValueAxesPanelProps) {
           buttonClassName="eui-textTruncate"
           buttonContentClassName="visEditorSidebar__aggGroupAccordionButtonContent eui-textTruncate"
           aria-label={i18n.translate(
-            'visTypeVislib.controls.pointSeries.valueAxes.toggleOptionsAriaLabel',
+            'visTypeXy.controls.pointSeries.valueAxes.toggleOptionsAriaLabel',
             {
               defaultMessage: 'Toggle {axisName} options',
               values: { axisName: axis.name },
@@ -160,7 +160,6 @@ function ValueAxesPanel(props: ValueAxesPanelProps) {
               axis={axis}
               index={index}
               valueAxis={valueAxes[index]}
-              isCategoryAxisHorizontal={props.isCategoryAxisHorizontal}
               onValueAxisPositionChanged={props.onValueAxisPositionChanged}
               setParamByIndex={props.setParamByIndex}
               setMultipleValidity={props.setMultipleValidity}
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axis_options.test.tsx
similarity index 64%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.test.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axis_options.test.tsx
index 1977bdba6eadf..0b325198c3fe7 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.test.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axis_options.test.tsx
@@ -19,21 +19,18 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
-import { ValueAxisOptions, ValueAxisOptionsParams } from './value_axis_options';
-import { ValueAxis } from '../../../types';
-import { TextInputOption } from '../../../../../charts/public';
+
+import { Position } from '@elastic/charts';
+
+import { TextInputOption } from '../../../../../../charts/public';
+
+import { ValueAxis, ScaleType } from '../../../../types';
 import { LabelOptions } from './label_options';
-import { ScaleTypes, Positions } from '../../../utils/collections';
+import { ValueAxisOptions, ValueAxisOptionsParams } from './value_axis_options';
 import { valueAxis, vis } from './mocks';
 
 const POSITION = 'position';
 
-interface PositionOption {
-  text: string;
-  value: Positions;
-  disabled: boolean;
-}
-
 describe('ValueAxisOptions component', () => {
   let setParamByIndex: jest.Mock;
   let onValueAxisPositionChanged: jest.Mock;
@@ -52,7 +49,6 @@ describe('ValueAxisOptions component', () => {
       index: 0,
       valueAxis,
       vis,
-      isCategoryAxisHorizontal: false,
       setParamByIndex,
       onValueAxisPositionChanged,
       setMultipleValidity,
@@ -73,50 +69,8 @@ describe('ValueAxisOptions component', () => {
     expect(comp.find(LabelOptions).exists()).toBeFalsy();
   });
 
-  it('should only allow left and right value axis position when category axis is horizontal', () => {
-    defaultProps.isCategoryAxisHorizontal = true;
-    const comp = shallow(<ValueAxisOptions {...defaultProps} />);
-
-    const options: PositionOption[] = comp.find({ paramName: POSITION }).prop('options');
-
-    expect(options.length).toBe(4);
-    options.forEach(({ value, disabled }) => {
-      switch (value) {
-        case Positions.LEFT:
-        case Positions.RIGHT:
-          expect(disabled).toBeFalsy();
-          break;
-        case Positions.TOP:
-        case Positions.BOTTOM:
-          expect(disabled).toBeTruthy();
-          break;
-      }
-    });
-  });
-
-  it('should only allow top and bottom value axis position when category axis is vertical', () => {
-    defaultProps.isCategoryAxisHorizontal = false;
-    const comp = shallow(<ValueAxisOptions {...defaultProps} />);
-
-    const options: PositionOption[] = comp.find({ paramName: POSITION }).prop('options');
-
-    expect(options.length).toBe(4);
-    options.forEach(({ value, disabled }) => {
-      switch (value) {
-        case Positions.LEFT:
-        case Positions.RIGHT:
-          expect(disabled).toBeTruthy();
-          break;
-        case Positions.TOP:
-        case Positions.BOTTOM:
-          expect(disabled).toBeFalsy();
-          break;
-      }
-    });
-  });
-
   it('should call onValueAxisPositionChanged when position is changed', () => {
-    const value = Positions.RIGHT;
+    const value = Position.Right;
     const comp = shallow(<ValueAxisOptions {...defaultProps} />);
     comp.find({ paramName: POSITION }).prop('setValue')(POSITION, value);
 
@@ -135,7 +89,7 @@ describe('ValueAxisOptions component', () => {
   });
 
   it('should call setValueAxis when scale value is changed', () => {
-    const scaleValue = ScaleTypes.SQUARE_ROOT;
+    const scaleValue = ScaleType.SquareRoot;
     const comp = shallow(<ValueAxisOptions {...defaultProps} />);
     comp.find({ paramName: 'type' }).prop('setValue')('type', scaleValue);
 
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axis_options.tsx
similarity index 76%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axis_options.tsx
index b42d038267d77..4ab792142e83a 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/value_axis_options.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/value_axis_options.tsx
@@ -17,17 +17,16 @@
  * under the License.
  */
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiSpacer, EuiAccordion, EuiHorizontalRule } from '@elastic/eui';
 
-import { Vis } from '../../../../../visualizations/public';
-import { ValueAxis } from '../../../types';
-import { Positions } from '../../../utils/collections';
-import { SelectOption, SwitchOption, TextInputOption } from '../../../../../charts/public';
+import { Vis } from '../../../../../../visualizations/public';
+import { SelectOption, SwitchOption, TextInputOption } from '../../../../../../charts/public';
+
+import { ValueAxis } from '../../../../types';
 import { LabelOptions, SetAxisLabel } from './label_options';
 import { CustomExtentsOptions } from './custom_extents_options';
-import { isAxisHorizontal } from './utils';
 import { SetParamByIndex } from '.';
 
 export type SetScale = <T extends keyof ValueAxis['scale']>(
@@ -38,7 +37,6 @@ export type SetScale = <T extends keyof ValueAxis['scale']>(
 export interface ValueAxisOptionsParams {
   axis: ValueAxis;
   index: number;
-  isCategoryAxisHorizontal: boolean;
   onValueAxisPositionChanged: (index: number, value: ValueAxis['position']) => void;
   setParamByIndex: SetParamByIndex;
   valueAxis: ValueAxis;
@@ -46,10 +44,9 @@ export interface ValueAxisOptionsParams {
   setMultipleValidity: (paramName: string, isValid: boolean) => void;
 }
 
-function ValueAxisOptions({
+export function ValueAxisOptions({
   axis,
   index,
-  isCategoryAxisHorizontal,
   valueAxis,
   vis,
   onValueAxisPositionChanged,
@@ -105,34 +102,13 @@ function ValueAxisOptions({
     [index, onValueAxisPositionChanged]
   );
 
-  const isPositionDisabled = useCallback(
-    (position: Positions) => {
-      if (isCategoryAxisHorizontal) {
-        return isAxisHorizontal(position);
-      }
-      return [Positions.LEFT, Positions.RIGHT].includes(position as any);
-    },
-    [isCategoryAxisHorizontal]
-  );
-
-  const positions = useMemo(
-    () =>
-      vis.type.editorConfig.collections.positions.map(
-        (position: { text: string; value: Positions }) => ({
-          ...position,
-          disabled: isPositionDisabled(position.value),
-        })
-      ),
-    [vis.type.editorConfig.collections.positions, isPositionDisabled]
-  );
-
   return (
     <>
       <SelectOption
-        label={i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.positionLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.valueAxes.positionLabel', {
           defaultMessage: 'Position',
         })}
-        options={positions}
+        options={vis.type.editorConfig.collections.positions}
         paramName="position"
         value={axis.position}
         setValue={onPositionChanged}
@@ -140,7 +116,7 @@ function ValueAxisOptions({
 
       <SelectOption
         id={`valueAxisMode${index}`}
-        label={i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.modeLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.valueAxes.modeLabel', {
           defaultMessage: 'Mode',
         })}
         options={vis.type.editorConfig.collections.axisModes}
@@ -151,7 +127,7 @@ function ValueAxisOptions({
 
       <SelectOption
         id={`scaleSelectYAxis-${axis.id}`}
-        label={i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.scaleTypeLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.valueAxes.scaleTypeLabel', {
           defaultMessage: 'Scale type',
         })}
         options={vis.type.editorConfig.collections.scaleTypes}
@@ -163,7 +139,7 @@ function ValueAxisOptions({
       <EuiHorizontalRule margin="m" />
 
       <SwitchOption
-        label={i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.showLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.valueAxes.showLabel', {
           defaultMessage: 'Show axis lines and labels',
         })}
         data-test-subj={`valueAxisShow-${axis.id}`}
@@ -177,7 +153,7 @@ function ValueAxisOptions({
           <EuiSpacer size="m" />
           <TextInputOption
             data-test-subj={`valueAxisTitle${index}`}
-            label={i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.titleLabel', {
+            label={i18n.translate('visTypeXy.controls.pointSeries.valueAxes.titleLabel', {
               defaultMessage: 'Title',
             })}
             paramName="text"
@@ -203,13 +179,13 @@ function ValueAxisOptions({
         initialIsOpen={false}
         buttonContentClassName="euiText euiText--small"
         buttonContent={i18n.translate(
-          'visTypeVislib.controls.pointSeries.valueAxes.customExtentsLabel',
+          'visTypeXy.controls.pointSeries.valueAxes.customExtentsLabel',
           {
             defaultMessage: 'Custom extents',
           }
         )}
         aria-label={i18n.translate(
-          'visTypeVislib.controls.pointSeries.valueAxes.toggleCustomExtendsAriaLabel',
+          'visTypeXy.controls.pointSeries.valueAxes.toggleCustomExtendsAriaLabel',
           {
             defaultMessage: 'Toggle custom extents',
           }
@@ -228,5 +204,3 @@ function ValueAxisOptions({
     </>
   );
 }
-
-export { ValueAxisOptions };
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/y_extents.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/y_extents.test.tsx
similarity index 94%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/y_extents.test.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/y_extents.test.tsx
index 7bd5c9efdf29d..c2af7f2ad921b 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/y_extents.test.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/y_extents.test.tsx
@@ -19,9 +19,11 @@
 
 import React from 'react';
 import { mount, shallow } from 'enzyme';
+
+import { NumberInputOption } from '../../../../../../charts/public';
+
+import { ScaleType } from '../../../../types';
 import { YExtents, YExtentsProps } from './y_extents';
-import { ScaleTypes } from '../../../utils/collections';
-import { NumberInputOption } from '../../../../../charts/public';
 
 describe('YExtents component', () => {
   let setMultipleValidity: jest.Mock;
@@ -35,7 +37,7 @@ describe('YExtents component', () => {
 
     defaultProps = {
       scale: {
-        type: ScaleTypes.LINEAR,
+        type: ScaleType.Linear,
       },
       setMultipleValidity,
       setScale,
@@ -81,7 +83,7 @@ describe('YExtents component', () => {
   it('should call setMultipleValidity with false when min equals 0 and scale is log', () => {
     defaultProps.scale.min = 0;
     defaultProps.scale.max = 1;
-    defaultProps.scale.type = ScaleTypes.LOG;
+    defaultProps.scale.type = ScaleType.Log;
     mount(<YExtents {...defaultProps} />);
 
     expect(setMultipleValidity).toBeCalledWith(Y_EXTENTS, false);
diff --git a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/y_extents.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/y_extents.tsx
similarity index 83%
rename from src/plugins/vis_type_vislib/public/components/options/metrics_axes/y_extents.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/y_extents.tsx
index 4e23ee5a41554..11d049d4864a7 100644
--- a/src/plugins/vis_type_vislib/public/components/options/metrics_axes/y_extents.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/y_extents.tsx
@@ -21,15 +21,15 @@ import React, { useEffect, useCallback } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { Scale } from '../../../types';
-import { ScaleTypes } from '../../../utils/collections';
-import { NumberInputOption } from '../../../../../charts/public';
+import { NumberInputOption } from '../../../../../../charts/public';
+
+import { Scale, ScaleType } from '../../../../types';
 import { SetScale } from './value_axis_options';
 
-const rangeError = i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.minErrorMessage', {
+const rangeError = i18n.translate('visTypeXy.controls.pointSeries.valueAxes.minErrorMessage', {
   defaultMessage: 'Min should be less than Max.',
 });
-const minError = i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.minNeededScaleText', {
+const minError = i18n.translate('visTypeXy.controls.pointSeries.valueAxes.minNeededScaleText', {
   defaultMessage: 'Min must exceed 0 when a log scale is selected.',
 });
 
@@ -59,7 +59,7 @@ function YExtents({ scale, setScale, setMultipleValidity }: YExtentsProps) {
     errors.push(rangeError);
   }
 
-  if (type === ScaleTypes.LOG && (isNullOrUndefined(min) || min <= 0)) {
+  if (type === ScaleType.Log && (isNullOrUndefined(min) || min <= 0)) {
     errors.push(minError);
   }
 
@@ -86,7 +86,7 @@ function YExtents({ scale, setScale, setMultipleValidity }: YExtentsProps) {
             <NumberInputOption
               data-test-subj="yAxisYExtentsMin"
               isInvalid={!!errors.length}
-              label={i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.minLabel', {
+              label={i18n.translate('visTypeXy.controls.pointSeries.valueAxes.minLabel', {
                 defaultMessage: 'Min',
               })}
               step={0.1}
@@ -98,7 +98,7 @@ function YExtents({ scale, setScale, setMultipleValidity }: YExtentsProps) {
           <EuiFlexItem>
             <NumberInputOption
               data-test-subj="yAxisYExtentsMax"
-              label={i18n.translate('visTypeVislib.controls.pointSeries.valueAxes.maxLabel', {
+              label={i18n.translate('visTypeXy.controls.pointSeries.valueAxes.maxLabel', {
                 defaultMessage: 'Max',
               })}
               step={0.1}
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/point_series/elastic_charts_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/point_series/elastic_charts_options.tsx
new file mode 100644
index 0000000000000..126c5521f0633
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/editor/components/options/point_series/elastic_charts_options.tsx
@@ -0,0 +1,69 @@
+/*
+ * 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 React from 'react';
+
+import { i18n } from '@kbn/i18n';
+
+import { SelectOption, SwitchOption } from '../../../../../../charts/public';
+
+import { ChartType } from '../../../../../common';
+import { VisParams } from '../../../../types';
+import { ValidationVisOptionsProps } from '../../common';
+
+export function ElasticChartsOptions(props: ValidationVisOptionsProps<VisParams>) {
+  const { stateParams, setValue, vis, aggs } = props;
+
+  const hasLineChart = stateParams.seriesParams.some(
+    ({ type, data: { id: paramId } }) =>
+      (type === ChartType.Line || type === ChartType.Area) &&
+      aggs.aggs.find(({ id }) => id === paramId)?.enabled
+  );
+
+  return (
+    <>
+      <SwitchOption
+        data-test-subj="detailedTooltip"
+        label={i18n.translate('visTypeXy.editors.elasticChartsOptions.detailedTooltip.label', {
+          defaultMessage: 'Show detailed tooltip',
+        })}
+        tooltip={i18n.translate('visTypeXy.editors.elasticChartsOptions.detailedTooltip.tooltip', {
+          defaultMessage:
+            'Enables the legacy detailed tooltip for displaying a single value. When disabled, a new summarized tooltip will be used to display multiple values.',
+        })}
+        paramName="detailedTooltip"
+        value={stateParams.detailedTooltip}
+        setValue={setValue}
+      />
+
+      {hasLineChart && (
+        <SelectOption
+          data-test-subj="fittingFunction"
+          label={i18n.translate('visTypeXy.editors.elasticChartsOptions.missingValuesLabel', {
+            defaultMessage: 'Fill missing values',
+          })}
+          options={vis.type.editorConfig.collections.fittingFunctions}
+          paramName="fittingFunction"
+          value={stateParams.fittingFunction}
+          setValue={setValue}
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/plugins/vis_type_vislib/public/components/options/point_series/grid_panel.tsx b/src/plugins/vis_type_xy/public/editor/components/options/point_series/grid_panel.tsx
similarity index 59%
rename from src/plugins/vis_type_vislib/public/components/options/point_series/grid_panel.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/point_series/grid_panel.tsx
index 0126dce37c9f2..c6ad52f7112c9 100644
--- a/src/plugins/vis_type_vislib/public/components/options/point_series/grid_panel.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/point_series/grid_panel.tsx
@@ -16,25 +16,37 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
 import React, { useMemo, useEffect, useCallback } from 'react';
 
-import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
+
+import { SelectOption, SwitchOption } from '../../../../../../charts/public';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-import { SelectOption, SwitchOption } from '../../../../../charts/public';
-import { BasicVislibParams, ValueAxis } from '../../../types';
+import { VisParams, ValueAxis } from '../../../../types';
+import { ValidationVisOptionsProps } from '../../common';
 
-function GridPanel({ stateParams, setValue, hasHistogramAgg }: VisOptionsProps<BasicVislibParams>) {
+type GridPanelOptions = ValidationVisOptionsProps<
+  VisParams,
+  {
+    showElasticChartsOptions: boolean;
+  }
+>;
+
+function GridPanel({ stateParams, setValue, hasHistogramAgg, extraProps }: GridPanelOptions) {
   const setGrid = useCallback(
-    <T extends keyof BasicVislibParams['grid']>(
-      paramName: T,
-      value: BasicVislibParams['grid'][T]
-    ) => setValue('grid', { ...stateParams.grid, [paramName]: value }),
+    <T extends keyof VisParams['grid']>(paramName: T, value: VisParams['grid'][T]) =>
+      setValue('grid', { ...stateParams.grid, [paramName]: value }),
     [stateParams.grid, setValue]
   );
 
+  const disableCategoryGridLines = useMemo(
+    () => !extraProps?.showElasticChartsOptions && hasHistogramAgg,
+    [extraProps?.showElasticChartsOptions, hasHistogramAgg]
+  );
+
   const options = useMemo(
     () => [
       ...stateParams.valueAxes.map(({ id, name }: ValueAxis) => ({
@@ -42,7 +54,7 @@ function GridPanel({ stateParams, setValue, hasHistogramAgg }: VisOptionsProps<B
         value: id,
       })),
       {
-        text: i18n.translate('visTypeVislib.controls.pointSeries.gridAxis.dontShowLabel', {
+        text: i18n.translate('visTypeXy.controls.pointSeries.gridAxis.dontShowLabel', {
           defaultMessage: "Don't show",
         }),
         value: '',
@@ -52,17 +64,17 @@ function GridPanel({ stateParams, setValue, hasHistogramAgg }: VisOptionsProps<B
   );
 
   useEffect(() => {
-    if (hasHistogramAgg) {
+    if (disableCategoryGridLines) {
       setGrid('categoryLines', false);
     }
-  }, [hasHistogramAgg, setGrid]);
+  }, [disableCategoryGridLines, setGrid]);
 
   return (
     <EuiPanel paddingSize="s">
       <EuiTitle size="xs">
         <h3>
           <FormattedMessage
-            id="visTypeVislib.controls.pointSeries.gridAxis.gridText"
+            id="visTypeXy.controls.pointSeries.gridAxis.gridText"
             defaultMessage="Grid"
           />
         </h3>
@@ -71,19 +83,16 @@ function GridPanel({ stateParams, setValue, hasHistogramAgg }: VisOptionsProps<B
       <EuiSpacer size="m" />
 
       <SwitchOption
-        disabled={hasHistogramAgg}
-        label={i18n.translate('visTypeVislib.controls.pointSeries.gridAxis.xAxisLinesLabel', {
+        disabled={disableCategoryGridLines}
+        label={i18n.translate('visTypeXy.controls.pointSeries.gridAxis.xAxisLinesLabel', {
           defaultMessage: 'Show X-axis lines',
         })}
         paramName="categoryLines"
         tooltip={
-          hasHistogramAgg
-            ? i18n.translate(
-                'visTypeVislib.controls.pointSeries.gridAxis.yAxisLinesDisabledTooltip',
-                {
-                  defaultMessage: "X-axis lines can't show for histograms.",
-                }
-              )
+          disableCategoryGridLines
+            ? i18n.translate('visTypeXy.controls.pointSeries.gridAxis.yAxisLinesDisabledTooltip', {
+                defaultMessage: "X-axis lines can't show for histograms.",
+              })
             : undefined
         }
         value={stateParams.grid.categoryLines}
@@ -93,12 +102,12 @@ function GridPanel({ stateParams, setValue, hasHistogramAgg }: VisOptionsProps<B
 
       <SelectOption
         id="gridAxis"
-        label={i18n.translate('visTypeVislib.controls.pointSeries.gridAxis.yAxisLinesLabel', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.gridAxis.yAxisLinesLabel', {
           defaultMessage: 'Y-axis lines',
         })}
         options={options}
         paramName="valueAxis"
-        value={stateParams.grid.valueAxis || ''}
+        value={stateParams.grid.valueAxis ?? ''}
         setValue={setGrid}
       />
     </EuiPanel>
diff --git a/src/plugins/vis_type_vislib/public/components/options/point_series/index.ts b/src/plugins/vis_type_xy/public/editor/components/options/point_series/index.ts
similarity index 100%
rename from src/plugins/vis_type_vislib/public/components/options/point_series/index.ts
rename to src/plugins/vis_type_xy/public/editor/components/options/point_series/index.ts
diff --git a/src/plugins/vis_type_vislib/public/components/options/point_series/point_series.tsx b/src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.tsx
similarity index 64%
rename from src/plugins/vis_type_vislib/public/components/options/point_series/point_series.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.tsx
index 18073d2218877..283fc28aed46e 100644
--- a/src/plugins/vis_type_vislib/public/components/options/point_series/point_series.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.tsx
@@ -16,25 +16,41 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
 import React, { useMemo } from 'react';
 import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { uniq } from 'lodash';
 
-import { ValidationVisOptionsProps } from '../../common';
-import { BasicOptions, SwitchOption } from '../../../../../charts/public';
+import { BasicOptions, SwitchOption } from '../../../../../../charts/public';
+import { BUCKET_TYPES } from '../../../../../../data/public';
+
+import { VisParams } from '../../../../types';
 import { GridPanel } from './grid_panel';
 import { ThresholdPanel } from './threshold_panel';
-import { BasicVislibParams } from '../../../types';
-import { ChartTypes } from '../../../utils/collections';
-
-function PointSeriesOptions(props: ValidationVisOptionsProps<BasicVislibParams>) {
-  const { stateParams, setValue, vis } = props;
+import { ChartType } from '../../../../../common';
+import { ValidationVisOptionsProps } from '../../common';
+import { ElasticChartsOptions } from './elastic_charts_options';
 
-  const currentChartTypes = useMemo(() => uniq(stateParams.seriesParams.map(({ type }) => type)), [
-    stateParams.seriesParams,
-  ]);
+export function PointSeriesOptions(
+  props: ValidationVisOptionsProps<
+    VisParams,
+    {
+      // TODO: Remove when vis_type_vislib is removed
+      // https://github.com/elastic/kibana/issues/56143
+      showElasticChartsOptions: boolean;
+    }
+  >
+) {
+  const { stateParams, setValue, vis, aggs } = props;
+  const hasBarChart = useMemo(
+    () =>
+      stateParams.seriesParams.some(
+        ({ type, data: { id: paramId } }) =>
+          type === ChartType.Histogram && aggs.aggs.find(({ id }) => id === paramId)?.enabled
+      ),
+    [stateParams.seriesParams, aggs.aggs]
+  );
 
   return (
     <>
@@ -42,7 +58,7 @@ function PointSeriesOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
         <EuiTitle size="xs">
           <h3>
             <FormattedMessage
-              id="visTypeVislib.editors.pointSeries.settingsTitle"
+              id="visTypeXy.editors.pointSeries.settingsTitle"
               defaultMessage="Settings"
             />
           </h3>
@@ -52,10 +68,11 @@ function PointSeriesOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
         <BasicOptions {...props} />
 
         {vis.data.aggs!.aggs.some(
-          (agg) => agg.schema === 'segment' && agg.type.name === 'date_histogram'
+          (agg) => agg.schema === 'segment' && agg.type.name === BUCKET_TYPES.DATE_HISTOGRAM
         ) ? (
           <SwitchOption
-            label={i18n.translate('visTypeVislib.editors.pointSeries.currentTimeMarkerLabel', {
+            data-test-subj="addTimeMarker"
+            label={i18n.translate('visTypeXy.editors.pointSeries.currentTimeMarkerLabel', {
               defaultMessage: 'Current time marker',
             })}
             paramName="addTimeMarker"
@@ -64,7 +81,8 @@ function PointSeriesOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
           />
         ) : (
           <SwitchOption
-            label={i18n.translate('visTypeVislib.editors.pointSeries.orderBucketsBySumLabel', {
+            data-test-subj="orderBucketsBySum"
+            label={i18n.translate('visTypeXy.editors.pointSeries.orderBucketsBySumLabel', {
               defaultMessage: 'Order buckets by sum',
             })}
             paramName="orderBucketsBySum"
@@ -73,10 +91,10 @@ function PointSeriesOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
           />
         )}
 
-        {currentChartTypes.includes(ChartTypes.HISTOGRAM) && (
+        {hasBarChart && (
           <SwitchOption
             data-test-subj="showValuesOnChart"
-            label={i18n.translate('visTypeVislib.editors.pointSeries.showLabels', {
+            label={i18n.translate('visTypeXy.editors.pointSeries.showLabels', {
               defaultMessage: 'Show values on chart',
             })}
             paramName="show"
@@ -86,6 +104,8 @@ function PointSeriesOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
             }
           />
         )}
+
+        {props.extraProps?.showElasticChartsOptions && <ElasticChartsOptions {...props} />}
       </EuiPanel>
 
       <EuiSpacer size="s" />
@@ -98,5 +118,3 @@ function PointSeriesOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
     </>
   );
 }
-
-export { PointSeriesOptions };
diff --git a/src/plugins/vis_type_vislib/public/components/options/point_series/threshold_panel.tsx b/src/plugins/vis_type_xy/public/editor/components/options/point_series/threshold_panel.tsx
similarity index 77%
rename from src/plugins/vis_type_vislib/public/components/options/point_series/threshold_panel.tsx
rename to src/plugins/vis_type_xy/public/editor/components/options/point_series/threshold_panel.tsx
index 964bb7d569b08..ec21a386a5679 100644
--- a/src/plugins/vis_type_vislib/public/components/options/point_series/threshold_panel.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/point_series/threshold_panel.tsx
@@ -17,39 +17,41 @@
  * under the License.
  */
 import React, { useCallback } from 'react';
-import { EuiPanel, EuiTitle, EuiColorPicker, EuiFormRow, EuiSpacer } from '@elastic/eui';
+
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiPanel, EuiTitle, EuiColorPicker, EuiFormRow, EuiSpacer } from '@elastic/eui';
 
-import { ValidationVisOptionsProps } from '../../common';
 import {
   SelectOption,
   SwitchOption,
   RequiredNumberInputOption,
-} from '../../../../../charts/public';
-import { BasicVislibParams } from '../../../types';
+} from '../../../../../../charts/public';
+
+import { ValidationVisOptionsProps } from '../../common';
+import { VisParams } from '../../../../types';
 
 function ThresholdPanel({
   stateParams,
   setValue,
   setMultipleValidity,
   vis,
-}: ValidationVisOptionsProps<BasicVislibParams>) {
+}: ValidationVisOptionsProps<VisParams>) {
   const setThresholdLine = useCallback(
-    <T extends keyof BasicVislibParams['thresholdLine']>(
+    <T extends keyof VisParams['thresholdLine']>(
       paramName: T,
-      value: BasicVislibParams['thresholdLine'][T]
+      value: VisParams['thresholdLine'][T]
     ) => setValue('thresholdLine', { ...stateParams.thresholdLine, [paramName]: value }),
     [stateParams.thresholdLine, setValue]
   );
 
   const setThresholdLineColor = useCallback(
-    (value: BasicVislibParams['thresholdLine']['color']) => setThresholdLine('color', value),
+    (value: VisParams['thresholdLine']['color']) => setThresholdLine('color', value),
     [setThresholdLine]
   );
 
   const setThresholdLineValidity = useCallback(
-    (paramName: keyof BasicVislibParams['thresholdLine'], isValid: boolean) =>
+    (paramName: keyof VisParams['thresholdLine'], isValid: boolean) =>
       setMultipleValidity(`thresholdLine__${paramName}`, isValid),
     [setMultipleValidity]
   );
@@ -59,7 +61,7 @@ function ThresholdPanel({
       <EuiTitle size="xs">
         <h3>
           <FormattedMessage
-            id="visTypeVislib.editors.pointSeries.thresholdLineSettingsTitle"
+            id="visTypeXy.editors.pointSeries.thresholdLineSettingsTitle"
             defaultMessage="Threshold line"
           />
         </h3>
@@ -67,7 +69,7 @@ function ThresholdPanel({
       <EuiSpacer size="m" />
 
       <SwitchOption
-        label={i18n.translate('visTypeVislib.editors.pointSeries.thresholdLine.showLabel', {
+        label={i18n.translate('visTypeXy.editors.pointSeries.thresholdLine.showLabel', {
           defaultMessage: 'Show threshold line',
         })}
         paramName="show"
@@ -78,7 +80,7 @@ function ThresholdPanel({
       {stateParams.thresholdLine.show && (
         <>
           <RequiredNumberInputOption
-            label={i18n.translate('visTypeVislib.editors.pointSeries.thresholdLine.valueLabel', {
+            label={i18n.translate('visTypeXy.editors.pointSeries.thresholdLine.valueLabel', {
               defaultMessage: 'Threshold value',
             })}
             paramName="value"
@@ -88,7 +90,7 @@ function ThresholdPanel({
           />
 
           <RequiredNumberInputOption
-            label={i18n.translate('visTypeVislib.editors.pointSeries.thresholdLine.widthLabel', {
+            label={i18n.translate('visTypeXy.editors.pointSeries.thresholdLine.widthLabel', {
               defaultMessage: 'Line width',
             })}
             paramName="width"
@@ -100,7 +102,7 @@ function ThresholdPanel({
           />
 
           <SelectOption
-            label={i18n.translate('visTypeVislib.editors.pointSeries.thresholdLine.styleLabel', {
+            label={i18n.translate('visTypeXy.editors.pointSeries.thresholdLine.styleLabel', {
               defaultMessage: 'Line style',
             })}
             options={vis.type.editorConfig.collections.thresholdLineStyles}
@@ -110,7 +112,7 @@ function ThresholdPanel({
           />
 
           <EuiFormRow
-            label={i18n.translate('visTypeVislib.editors.pointSeries.thresholdLine.colorLabel', {
+            label={i18n.translate('visTypeXy.editors.pointSeries.thresholdLine.colorLabel', {
               defaultMessage: 'Line color',
             })}
             fullWidth
diff --git a/src/plugins/vis_type_xy/public/editor/index.ts b/src/plugins/vis_type_xy/public/editor/index.ts
new file mode 100644
index 0000000000000..4fc95b851ad52
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/editor/index.ts
@@ -0,0 +1,21 @@
+/*
+ * 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 * from './common_config';
+export * from './collections';
diff --git a/src/plugins/vis_type_xy/public/editor/positions.ts b/src/plugins/vis_type_xy/public/editor/positions.ts
new file mode 100644
index 0000000000000..0a98939682661
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/editor/positions.ts
@@ -0,0 +1,48 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { Position } from '@elastic/charts';
+
+export const getPositions = () => [
+  {
+    text: i18n.translate('visTypeXy.legendPositions.topText', {
+      defaultMessage: 'Top',
+    }),
+    value: Position.Top,
+  },
+  {
+    text: i18n.translate('visTypeXy.legendPositions.leftText', {
+      defaultMessage: 'Left',
+    }),
+    value: Position.Left,
+  },
+  {
+    text: i18n.translate('visTypeXy.legendPositions.rightText', {
+      defaultMessage: 'Right',
+    }),
+    value: Position.Right,
+  },
+  {
+    text: i18n.translate('visTypeXy.legendPositions.bottomText', {
+      defaultMessage: 'Bottom',
+    }),
+    value: Position.Bottom,
+  },
+];
diff --git a/src/plugins/vis_type_xy/public/editor/scale_types.ts b/src/plugins/vis_type_xy/public/editor/scale_types.ts
new file mode 100644
index 0000000000000..c115b04ead5fd
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/editor/scale_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 { i18n } from '@kbn/i18n';
+
+import { ScaleType } from '../types';
+
+export const getScaleTypes = () => [
+  {
+    text: i18n.translate('visTypeXy.scaleTypes.linearText', {
+      defaultMessage: 'Linear',
+    }),
+    value: ScaleType.Linear,
+  },
+  {
+    text: i18n.translate('visTypeXy.scaleTypes.logText', {
+      defaultMessage: 'Log',
+    }),
+    value: ScaleType.Log,
+  },
+  {
+    text: i18n.translate('visTypeXy.scaleTypes.squareRootText', {
+      defaultMessage: 'Square root',
+    }),
+    value: ScaleType.SquareRoot,
+  },
+];
diff --git a/src/plugins/vis_type_xy/public/index.ts b/src/plugins/vis_type_xy/public/index.ts
index 9af75ce9059e9..0739ad77a245b 100644
--- a/src/plugins/vis_type_xy/public/index.ts
+++ b/src/plugins/vis_type_xy/public/index.ts
@@ -17,11 +17,35 @@
  * under the License.
  */
 
-import { PluginInitializerContext } from '../../../core/public';
 import { VisTypeXyPlugin as Plugin } from './plugin';
 
 export { VisTypeXyPluginSetup } from './plugin';
 
-export function plugin(initializerContext: PluginInitializerContext) {
-  return new Plugin(initializerContext);
+// TODO: Remove when vis_type_vislib is removed
+// https://github.com/elastic/kibana/issues/56143
+export {
+  CategoryAxis,
+  ThresholdLine,
+  ValueAxis,
+  Grid,
+  SeriesParam,
+  Dimension,
+  Dimensions,
+  ScaleType,
+  AxisType,
+  HistogramParams,
+  DateHistogramParams,
+} from './types';
+export type { ValidationVisOptionsProps } from './editor/components/common/validation_wrapper';
+export { TruncateLabelsOption } from './editor/components/common/truncate_labels';
+export { getPositions } from './editor/positions';
+export { getScaleTypes } from './editor/scale_types';
+export { xyVisTypes } from './vis_types';
+export { getAggId } from './config/get_agg_id';
+
+// Export common types
+export * from '../common';
+
+export function plugin() {
+  return new Plugin();
 }
diff --git a/src/plugins/vis_type_xy/public/plugin.ts b/src/plugins/vis_type_xy/public/plugin.ts
index 667018c1e6e30..c8812b07e5949 100644
--- a/src/plugins/vis_type_xy/public/plugin.ts
+++ b/src/plugins/vis_type_xy/public/plugin.ts
@@ -17,25 +17,30 @@
  * under the License.
  */
 
-import {
-  CoreSetup,
-  CoreStart,
-  Plugin,
-  IUiSettingsClient,
-  PluginInitializerContext,
-} from 'kibana/public';
-
+import { CoreSetup, CoreStart, Plugin } from '../../../core/public';
 import { Plugin as ExpressionsPublicPlugin } from '../../expressions/public';
 import { VisualizationsSetup, VisualizationsStart } from '../../visualizations/public';
 import { ChartsPluginSetup } from '../../charts/public';
+import { DataPublicPluginStart } from '../../data/public';
 
-export interface VisTypeXyDependencies {
-  uiSettings: IUiSettingsClient;
-  charts: ChartsPluginSetup;
-}
+import { createVisTypeXyVisFn } from './xy_vis_fn';
+import {
+  setDataActions,
+  setFormatService,
+  setThemeService,
+  setColorsService,
+  setTimefilter,
+  setUISettings,
+  setDocLinks,
+} from './services';
+import { visTypesDefinitions } from './vis_types';
+import { CHARTS_LIBRARY } from '../common';
+import { xyVisRenderer } from './vis_renderer';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface VisTypeXyPluginSetup {}
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface VisTypeXyPluginStart {}
 
 /** @internal */
 export interface VisTypeXyPluginSetupDependencies {
@@ -48,40 +53,43 @@ export interface VisTypeXyPluginSetupDependencies {
 export interface VisTypeXyPluginStartDependencies {
   expressions: ReturnType<ExpressionsPublicPlugin['start']>;
   visualizations: VisualizationsStart;
+  data: DataPublicPluginStart;
 }
 
-type VisTypeXyCoreSetup = CoreSetup<VisTypeXyPluginStartDependencies, void>;
+type VisTypeXyCoreSetup = CoreSetup<VisTypeXyPluginStartDependencies, VisTypeXyPluginStart>;
 
 /** @internal */
-export class VisTypeXyPlugin implements Plugin<VisTypeXyPluginSetup, void> {
-  constructor(public initializerContext: PluginInitializerContext) {}
-
+export class VisTypeXyPlugin
+  implements
+    Plugin<
+      VisTypeXyPluginSetup,
+      VisTypeXyPluginStart,
+      VisTypeXyPluginSetupDependencies,
+      VisTypeXyPluginStartDependencies
+    > {
   public async setup(
     core: VisTypeXyCoreSetup,
     { expressions, visualizations, charts }: VisTypeXyPluginSetupDependencies
   ) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      'The visTypeXy plugin is enabled\n\n',
-      'This may negatively alter existing vislib visualization configurations if saved.'
-    );
-    const visualizationDependencies: Readonly<VisTypeXyDependencies> = {
-      uiSettings: core.uiSettings,
-      charts,
-    };
-
-    const visTypeDefinitions: any[] = [];
-    const visFunctions: any = [];
+    if (core.uiSettings.get(CHARTS_LIBRARY, false)) {
+      setUISettings(core.uiSettings);
+      setThemeService(charts.theme);
+      setColorsService(charts.legacyColors);
 
-    visFunctions.forEach((fn: any) => expressions.registerFunction(fn));
-    visTypeDefinitions.forEach((vis: any) =>
-      visualizations.createBaseVisualization(vis(visualizationDependencies))
-    );
+      [createVisTypeXyVisFn].forEach(expressions.registerFunction);
+      expressions.registerRenderer(xyVisRenderer);
+      visTypesDefinitions.forEach(visualizations.createBaseVisualization);
+    }
 
     return {};
   }
 
-  public start(core: CoreStart, deps: VisTypeXyPluginStartDependencies) {
-    // nothing to do here
+  public start(core: CoreStart, { data }: VisTypeXyPluginStartDependencies) {
+    setFormatService(data.fieldFormats);
+    setDataActions(data.actions);
+    setTimefilter(data.query.timefilter.timefilter);
+    setDocLinks(core.docLinks);
+
+    return {};
   }
 }
diff --git a/src/plugins/vis_type_xy/public/services.ts b/src/plugins/vis_type_xy/public/services.ts
new file mode 100644
index 0000000000000..5a72759ecff6c
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/services.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.
+ */
+
+import { CoreSetup, DocLinksStart } from '../../../core/public';
+import { createGetterSetter } from '../../kibana_utils/public';
+import { DataPublicPluginStart } from '../../data/public';
+import { ChartsPluginSetup } from '../../charts/public';
+
+export const [getUISettings, setUISettings] = createGetterSetter<CoreSetup['uiSettings']>(
+  'xy core.uiSettings'
+);
+
+export const [getDataActions, setDataActions] = createGetterSetter<
+  DataPublicPluginStart['actions']
+>('xy data.actions');
+
+export const [getFormatService, setFormatService] = createGetterSetter<
+  DataPublicPluginStart['fieldFormats']
+>('xy data.fieldFormats');
+
+export const [getTimefilter, setTimefilter] = createGetterSetter<
+  DataPublicPluginStart['query']['timefilter']['timefilter']
+>('xy data.query.timefilter.timefilter');
+
+export const [getThemeService, setThemeService] = createGetterSetter<ChartsPluginSetup['theme']>(
+  'xy charts.theme'
+);
+
+export const [getColorsService, setColorsService] = createGetterSetter<
+  ChartsPluginSetup['legacyColors']
+>('xy charts.color');
+
+export const [getDocLinks, setDocLinks] = createGetterSetter<DocLinksStart>('DocLinks');
diff --git a/src/plugins/vis_type_xy/public/to_ast.test.ts b/src/plugins/vis_type_xy/public/to_ast.test.ts
new file mode 100644
index 0000000000000..678a9faaec585
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/to_ast.test.ts
@@ -0,0 +1,60 @@
+/*
+ * 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 { Vis } from '../../visualizations/public';
+import { buildExpression } from '../../expressions/public';
+import { sampleAreaVis } from '../../vis_type_vislib/public/sample_vis.test.mocks';
+
+import { toExpressionAst } from './to_ast';
+import { VisParams } from './types';
+
+jest.mock('../../expressions/public', () => ({
+  ...(jest.requireActual('../../expressions/public') as any),
+  buildExpression: jest.fn().mockImplementation(() => ({
+    toAst: () => ({
+      type: 'expression',
+      chain: [],
+    }),
+  })),
+}));
+
+jest.mock('./to_ast_esaggs', () => ({
+  getEsaggsFn: jest.fn(),
+}));
+
+describe('xy vis toExpressionAst function', () => {
+  let vis: Vis<VisParams>;
+
+  const params = {
+    timefilter: {},
+    timeRange: {},
+    abortSignal: {},
+  } as any;
+
+  beforeEach(() => {
+    vis = sampleAreaVis as any;
+  });
+
+  it('should match basic snapshot', () => {
+    toExpressionAst(vis, params);
+    const [, builtExpression] = (buildExpression as jest.Mock).mock.calls[0][0];
+
+    expect(builtExpression).toMatchSnapshot();
+  });
+});
diff --git a/src/plugins/vis_type_xy/public/to_ast.ts b/src/plugins/vis_type_xy/public/to_ast.ts
new file mode 100644
index 0000000000000..c93dbe46dca0e
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/to_ast.ts
@@ -0,0 +1,94 @@
+/*
+ * 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 moment from 'moment';
+
+import { VisToExpressionAst, getVisSchemas } from '../../visualizations/public';
+import { buildExpression, buildExpressionFunction } from '../../expressions/public';
+import { BUCKET_TYPES } from '../../data/public';
+
+import { DateHistogramParams, Dimensions, HistogramParams, VisParams } from './types';
+import { visName, VisTypeXyExpressionFunctionDefinition } from './xy_vis_fn';
+import { XyVisType } from '../common';
+import { getEsaggsFn } from './to_ast_esaggs';
+
+export const toExpressionAst: VisToExpressionAst<VisParams> = async (vis, params) => {
+  const schemas = getVisSchemas(vis, params);
+  const dimensions: Dimensions = {
+    x: schemas.segment ? schemas.segment[0] : null,
+    y: schemas.metric,
+    z: schemas.radius,
+    width: schemas.width,
+    series: schemas.group,
+    splitRow: schemas.split_row,
+    splitColumn: schemas.split_column,
+  };
+
+  const responseAggs = vis.data.aggs?.getResponseAggs().filter(({ enabled }) => enabled) ?? [];
+
+  if (dimensions.x) {
+    const xAgg = responseAggs[dimensions.x.accessor] as any;
+    if (xAgg.type.name === BUCKET_TYPES.DATE_HISTOGRAM) {
+      (dimensions.x.params as DateHistogramParams).date = true;
+      const { esUnit, esValue } = xAgg.buckets.getInterval();
+      (dimensions.x.params as DateHistogramParams).intervalESUnit = esUnit;
+      (dimensions.x.params as DateHistogramParams).intervalESValue = esValue;
+      (dimensions.x.params as DateHistogramParams).interval = moment
+        .duration(esValue, esUnit)
+        .asMilliseconds();
+      (dimensions.x.params as DateHistogramParams).format = xAgg.buckets.getScaledDateFormat();
+    } else if (xAgg.type.name === BUCKET_TYPES.HISTOGRAM) {
+      const intervalParam = xAgg.type.paramByName('interval');
+      const output = { params: {} as any };
+      await intervalParam.modifyAggConfigOnSearchRequestStart(xAgg, vis.data.searchSource, {
+        abortSignal: params.abortSignal,
+      });
+      intervalParam.write(xAgg, output);
+      (dimensions.x.params as HistogramParams).interval = output.params.interval;
+    }
+  }
+
+  const visConfig = { ...vis.params };
+
+  (dimensions.y || []).forEach((yDimension) => {
+    const yAgg = responseAggs[yDimension.accessor];
+    const seriesParam = (visConfig.seriesParams || []).find(
+      (param: any) => param.data.id === yAgg.id
+    );
+    if (seriesParam) {
+      const usedValueAxis = (visConfig.valueAxes || []).find(
+        (valueAxis: any) => valueAxis.id === seriesParam.valueAxis
+      );
+      if (usedValueAxis?.scale.mode === 'percentage') {
+        yDimension.format = { id: 'percent' };
+      }
+    }
+  });
+
+  visConfig.dimensions = dimensions;
+
+  const visTypeXy = buildExpressionFunction<VisTypeXyExpressionFunctionDefinition>(visName, {
+    type: vis.type.name as XyVisType,
+    visConfig: JSON.stringify(visConfig),
+  });
+
+  const ast = buildExpression([getEsaggsFn(vis), visTypeXy]);
+
+  return ast.toAst();
+};
diff --git a/src/plugins/vis_type_xy/public/to_ast_esaggs.ts b/src/plugins/vis_type_xy/public/to_ast_esaggs.ts
new file mode 100644
index 0000000000000..da8d11ac8340c
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/to_ast_esaggs.ts
@@ -0,0 +1,46 @@
+/*
+ * 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 { Vis } from '../../visualizations/public';
+import { buildExpression, buildExpressionFunction } from '../../expressions/public';
+import {
+  EsaggsExpressionFunctionDefinition,
+  IndexPatternLoadExpressionFunctionDefinition,
+} from '../../data/public';
+
+import { VisParams } from './types';
+
+/**
+ * Get esaggs expressions function
+ * TODO: replace this with vis.data.aggs!.toExpressionAst();
+ * https://github.com/elastic/kibana/issues/61768
+ * @param vis
+ */
+export function getEsaggsFn(vis: Vis<VisParams>) {
+  return buildExpressionFunction<EsaggsExpressionFunctionDefinition>('esaggs', {
+    index: buildExpression([
+      buildExpressionFunction<IndexPatternLoadExpressionFunctionDefinition>('indexPatternLoad', {
+        id: vis.data.indexPattern!.id!,
+      }),
+    ]),
+    metricsAtAllLevels: vis.isHierarchical(),
+    partialRows: false,
+    aggs: vis.data.aggs!.aggs.map((agg) => buildExpression(agg.toExpressionAst())),
+  });
+}
diff --git a/src/plugins/vis_type_xy/public/types/config.ts b/src/plugins/vis_type_xy/public/types/config.ts
new file mode 100644
index 0000000000000..ec73c0f6e3fc0
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/types/config.ts
@@ -0,0 +1,130 @@
+/*
+ * 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 {
+  AxisSpec,
+  CustomTooltip,
+  Fit,
+  GridLineStyle,
+  Position,
+  Rotation,
+  SeriesScales,
+  TickFormatter,
+  TooltipProps,
+  TooltipValueFormatter,
+  YDomainRange,
+} from '@elastic/charts';
+
+import { Dimension, Scale, ThresholdLine } from './param';
+
+export interface Column {
+  id: string | null;
+  name: string;
+}
+
+export interface Aspect {
+  accessor: Column['id'];
+  aggType: string | null;
+  aggId: string | null;
+  column?: Dimension['accessor'];
+  title: Column['name'];
+  format?: Dimension['format'];
+  formatter?: TickFormatter;
+  params: Dimension['params'];
+}
+
+export interface Aspects {
+  x: Aspect;
+  y: Aspect[];
+  z?: Aspect;
+  series?: Aspect[];
+}
+
+export interface AxisGrid {
+  show?: boolean;
+  styles?: GridLineStyle;
+}
+
+export interface TickOptions {
+  show?: boolean;
+  size?: number;
+  count?: number;
+  padding?: number;
+  formatter?: TickFormatter;
+  labelFormatter?: TickFormatter;
+  rotation?: number;
+  showDuplicates?: boolean;
+  integersOnly?: boolean;
+  showOverlappingTicks?: boolean;
+  showOverlappingLabels?: boolean;
+}
+
+export type YScaleType = SeriesScales['yScaleType'];
+export type XScaleType = SeriesScales['xScaleType'];
+
+export type ScaleConfig<S extends XScaleType | YScaleType> = Omit<Scale, 'type'> & {
+  type?: S;
+};
+
+export interface AxisConfig<S extends XScaleType | YScaleType> {
+  id: string;
+  groupId?: string;
+  position: Position;
+  ticks?: TickOptions;
+  show: boolean;
+  style: AxisSpec['style'];
+  scale: ScaleConfig<S>;
+  domain?: YDomainRange;
+  title?: string;
+  grid?: AxisGrid;
+  integersOnly: boolean;
+}
+
+export interface LegendOptions {
+  show: boolean;
+  position?: Position;
+}
+
+export type ThresholdLineConfig = Omit<ThresholdLine, 'style'> & {
+  dash?: number[];
+  groupId?: string;
+};
+
+export type TooltipConfig = Omit<TooltipProps, 'customTooltip'> & {
+  detailedTooltip?: (headerFormatter?: TooltipValueFormatter) => CustomTooltip;
+};
+
+export interface VisConfig {
+  legend: LegendOptions;
+  tooltip: TooltipConfig;
+  xAxis: AxisConfig<XScaleType>;
+  yAxes: Array<AxisConfig<YScaleType>>;
+  aspects: Aspects;
+  rotation: Rotation;
+  thresholdLine: ThresholdLineConfig;
+  orderBucketsBySum?: boolean;
+  showCurrentTime: boolean;
+  isTimeChart: boolean;
+  markSizeRatio: number;
+  showValueLabel: boolean;
+  enableHistogramMode: boolean;
+  fittingFunction?: Exclude<Fit, 'explicit'>;
+  detailedTooltip?: boolean;
+  isVislibVis?: boolean;
+}
diff --git a/src/plugins/vis_type_xy/public/types/constants.ts b/src/plugins/vis_type_xy/public/types/constants.ts
new file mode 100644
index 0000000000000..f92c56e43413e
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/types/constants.ts
@@ -0,0 +1,67 @@
+/*
+ * 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 { $Values } from '@kbn/utility-types';
+
+export const ChartMode = Object.freeze({
+  Normal: 'normal' as const,
+  Stacked: 'stacked' as const,
+});
+export type ChartMode = $Values<typeof ChartMode>;
+
+export const InterpolationMode = Object.freeze({
+  Linear: 'linear' as const,
+  Cardinal: 'cardinal' as const,
+  StepAfter: 'step-after' as const,
+});
+export type InterpolationMode = $Values<typeof InterpolationMode>;
+
+export const AxisType = Object.freeze({
+  Category: 'category' as const,
+  Value: 'value' as const,
+});
+export type AxisType = $Values<typeof AxisType>;
+
+export const ScaleType = Object.freeze({
+  Linear: 'linear' as const,
+  Log: 'log' as const,
+  SquareRoot: 'square root' as const,
+});
+export type ScaleType = $Values<typeof ScaleType>;
+
+export const AxisMode = Object.freeze({
+  Normal: 'normal' as const,
+  Percentage: 'percentage' as const,
+  Wiggle: 'wiggle' as const,
+  Silhouette: 'silhouette' as const,
+});
+export type AxisMode = $Values<typeof AxisMode>;
+
+export const ThresholdLineStyle = Object.freeze({
+  Full: 'full' as const,
+  Dashed: 'dashed' as const,
+  DotDashed: 'dot-dashed' as const,
+});
+export type ThresholdLineStyle = $Values<typeof ThresholdLineStyle>;
+
+export const ColorMode = Object.freeze({
+  Background: 'Background' as const,
+  Labels: 'Labels' as const,
+  None: 'None' as const,
+});
+export type ColorMode = $Values<typeof ColorMode>;
diff --git a/src/plugins/vis_type_xy/public/types/index.ts b/src/plugins/vis_type_xy/public/types/index.ts
new file mode 100644
index 0000000000000..791373def2018
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/types/index.ts
@@ -0,0 +1,23 @@
+/*
+ * 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 * from './constants';
+export * from './config';
+export * from './param';
+export * from './vis_type';
diff --git a/src/plugins/vis_type_xy/public/types/param.ts b/src/plugins/vis_type_xy/public/types/param.ts
new file mode 100644
index 0000000000000..c8cd020dec03c
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/types/param.ts
@@ -0,0 +1,160 @@
+/*
+ * 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 { Fit, Position } from '@elastic/charts';
+
+import { Style, Labels } from '../../../charts/public';
+import { SchemaConfig } from '../../../visualizations/public';
+
+import { ChartType } from '../../common';
+import {
+  ChartMode,
+  AxisMode,
+  AxisType,
+  InterpolationMode,
+  ScaleType,
+  ThresholdLineStyle,
+} from './constants';
+
+export interface Scale {
+  boundsMargin?: number | '';
+  defaultYExtents?: boolean;
+  max?: number | null;
+  min?: number | null;
+  mode?: AxisMode;
+  setYExtents?: boolean;
+  type: ScaleType;
+}
+
+export interface CategoryAxis {
+  id: string;
+  labels: Labels;
+  position: Position;
+  scale: Scale;
+  show: boolean;
+  title: {
+    text?: string;
+  };
+  type: AxisType;
+  /**
+   * Used only for heatmap, here for consistent types when used in vis_type_vislib
+   *
+   * remove with vis_type_vislib
+   * https://github.com/elastic/kibana/issues/56143
+   */
+  style: Partial<Style>;
+}
+
+export interface ValueAxis extends CategoryAxis {
+  name: string;
+}
+
+export interface ThresholdLine {
+  show: boolean;
+  value: number | null;
+  width: number | null;
+  style: ThresholdLineStyle;
+  color: string;
+}
+
+export interface SeriesParam {
+  data: { label: string; id: string };
+  drawLinesBetweenPoints: boolean;
+  interpolate?: InterpolationMode;
+  lineWidth?: number;
+  mode: ChartMode;
+  show: boolean;
+  showCircles: boolean;
+  type: ChartType;
+  valueAxis: string;
+}
+
+export interface Grid {
+  categoryLines: boolean;
+  valueAxis?: string;
+}
+
+export interface TimeMarker {
+  time: string;
+  class?: string;
+  color?: string;
+  opacity?: number;
+  width?: number;
+}
+
+export interface DateHistogramParams {
+  date: boolean;
+  interval: number;
+  intervalESValue: number;
+  intervalESUnit: string;
+  format: string;
+  bounds?: {
+    min: string | number;
+    max: string | number;
+  };
+}
+
+export interface HistogramParams {
+  interval: number;
+}
+
+export interface FakeParams {
+  defaultValue: string;
+}
+
+export type Dimension = Omit<SchemaConfig, 'params'> & {
+  params: DateHistogramParams | HistogramParams | FakeParams | {};
+};
+
+export interface Dimensions {
+  x: Dimension | null;
+  y: Dimension[];
+  z?: Dimension[];
+  width?: Dimension[];
+  series?: Dimension | Dimension[];
+  splitRow?: Dimension[];
+  splitColumn?: Dimension[];
+}
+
+export interface VisParams {
+  type: ChartType;
+  addLegend: boolean;
+  addTooltip: boolean;
+  legendPosition: Position;
+  addTimeMarker: boolean;
+  categoryAxes: CategoryAxis[];
+  orderBucketsBySum?: boolean;
+  labels: Labels;
+  thresholdLine: ThresholdLine;
+  valueAxes: ValueAxis[];
+  grid: Grid;
+  seriesParams: SeriesParam[];
+  dimensions: Dimensions;
+  radiusRatio: number;
+  times: TimeMarker[]; // For compatibility with vislib
+  /**
+   * flag to indicate old vislib visualizations
+   * used for backwards compatibility including colors
+   */
+  isVislibVis?: boolean;
+  /**
+   * Add for detailed tooltip option
+   */
+  detailedTooltip?: boolean;
+  fittingFunction?: Exclude<Fit, 'explicit'>;
+}
diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/__mocks__/@elastic/charts.js b/src/plugins/vis_type_xy/public/types/vis_type.ts
similarity index 62%
rename from src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/__mocks__/@elastic/charts.js
rename to src/plugins/vis_type_xy/public/types/vis_type.ts
index 19bfe685cac90..0231e745fe082 100644
--- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/__mocks__/@elastic/charts.js
+++ b/src/plugins/vis_type_xy/public/types/vis_type.ts
@@ -17,28 +17,16 @@
  * under the License.
  */
 
-export const CurveType = {
-  CURVE_CARDINAL: 0,
-  CURVE_NATURAL: 1,
-  CURVE_MONOTONE_X: 2,
-  CURVE_MONOTONE_Y: 3,
-  CURVE_BASIS: 4,
-  CURVE_CATMULL_ROM: 5,
-  CURVE_STEP: 6,
-  CURVE_STEP_AFTER: 7,
-  CURVE_STEP_BEFORE: 8,
-  LINEAR: 9,
-};
+import { BaseVisTypeOptions } from '../../../visualizations/public';
+import { ChartType } from '../../common';
 
-export const ScaleType = {
-  Linear: 'linear',
-  Ordinal: 'ordinal',
-  Log: 'log',
-  Sqrt: 'sqrt',
-  Time: 'time',
-};
+import { VisParams } from './param';
 
-export const BarSeries = () => null;
-export const AreaSeries = () => null;
+export type VisTypeNames = ChartType | 'horizontal_bar';
 
-export { LIGHT_THEME, DARK_THEME } from '@elastic/charts';
+export type XyVisTypeDefinition = BaseVisTypeOptions<VisParams> & {
+  name: VisTypeNames;
+  visConfig: {
+    defaults: Omit<VisParams, 'dimensions'>;
+  };
+};
diff --git a/src/plugins/vis_type_xy/public/utils/accessors.tsx b/src/plugins/vis_type_xy/public/utils/accessors.tsx
new file mode 100644
index 0000000000000..a7a9813f7e00c
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/utils/accessors.tsx
@@ -0,0 +1,90 @@
+/*
+ * 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 { AccessorFn, Accessor } from '@elastic/charts';
+import { BUCKET_TYPES } from '../../../data/public';
+import { FakeParams, Aspect } from '../types';
+
+export const COMPLEX_X_ACCESSOR = '__customXAccessor__';
+export const COMPLEX_SPLIT_ACCESSOR = '__complexSplitAccessor__';
+
+export const getXAccessor = (aspect: Aspect): Accessor | AccessorFn => {
+  return (
+    getComplexAccessor(COMPLEX_X_ACCESSOR)(aspect) ??
+    (() => (aspect.params as FakeParams)?.defaultValue)
+  );
+};
+
+const getFieldName = (fieldName: string, index?: number) => {
+  const indexStr = index !== undefined ? `::${index}` : '';
+
+  return `${fieldName}${indexStr}`;
+};
+
+/**
+ * Returns accessor function for complex accessor types
+ * @param aspect
+ */
+export const getComplexAccessor = (fieldName: string) => (
+  aspect: Aspect,
+  index?: number
+): Accessor | AccessorFn | undefined => {
+  if (!aspect.accessor) {
+    return;
+  }
+
+  if (
+    !(
+      (aspect.aggType === BUCKET_TYPES.DATE_RANGE || aspect.aggType === BUCKET_TYPES.RANGE) &&
+      aspect.formatter
+    )
+  ) {
+    return aspect.accessor;
+  }
+
+  const formatter = aspect.formatter;
+  const accessor = aspect.accessor;
+  const fn: AccessorFn = (d) => {
+    const v = d[accessor];
+    if (!v) {
+      return;
+    }
+    const f = formatter(v);
+    return f;
+  };
+
+  fn.fieldName = getFieldName(fieldName, index);
+
+  return fn;
+};
+
+export const getSplitSeriesAccessorFnMap = (
+  splitSeriesAccessors: Array<Accessor | AccessorFn>
+): Map<string | number, AccessorFn> => {
+  const m = new Map<string | number, AccessorFn>();
+
+  splitSeriesAccessors.forEach((accessor, index) => {
+    if (typeof accessor === 'function') {
+      const fieldName = getFieldName(COMPLEX_SPLIT_ACCESSOR, index);
+      m.set(fieldName, accessor);
+    }
+  });
+
+  return m;
+};
diff --git a/src/plugins/vis_type_xy/public/utils/domain.ts b/src/plugins/vis_type_xy/public/utils/domain.ts
new file mode 100644
index 0000000000000..132c8df71428b
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/utils/domain.ts
@@ -0,0 +1,94 @@
+/*
+ * 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 { uniq } from 'lodash';
+import { unitOfTime } from 'moment';
+
+import { DomainRange } from '@elastic/charts';
+
+import { getAdjustedInterval } from '../../../charts/public';
+import { Datatable } from '../../../expressions/public';
+
+import { getTimefilter } from '../services';
+import { Aspect, DateHistogramParams, HistogramParams } from '../types';
+
+export const getXDomain = (params: Aspect['params']): DomainRange => {
+  const minInterval = (params as DateHistogramParams | HistogramParams)?.interval ?? undefined;
+
+  if ((params as DateHistogramParams).date) {
+    const bounds = getTimefilter().getBounds();
+
+    if (bounds) {
+      return {
+        min: bounds.min ? bounds.min.valueOf() : undefined,
+        max: bounds.max ? bounds.max.valueOf() : undefined,
+        minInterval,
+      };
+    }
+  }
+
+  return {
+    minInterval,
+  };
+};
+
+export const getAdjustedDomain = (
+  data: Datatable['rows'],
+  { accessor, params }: Aspect,
+  timeZone: string,
+  domain?: DomainRange,
+  hasBars?: boolean
+): DomainRange => {
+  if (
+    accessor &&
+    domain &&
+    'min' in domain &&
+    'max' in domain &&
+    'intervalESValue' in params &&
+    'intervalESUnit' in params
+  ) {
+    const { interval, intervalESValue, intervalESUnit } = params;
+    const xValues = uniq(data.map((d) => d[accessor]).sort());
+
+    const [firstXValue] = xValues;
+    const lastXValue = xValues[xValues.length - 1];
+
+    const domainMin = Math.min(firstXValue, domain.min);
+    const domainMaxValue = hasBars ? domain.max - interval : lastXValue + interval;
+    const domainMax = Math.max(domainMaxValue, lastXValue);
+    const minInterval = getAdjustedInterval(
+      xValues,
+      intervalESValue,
+      intervalESUnit as unitOfTime.Base,
+      timeZone
+    );
+
+    return {
+      min: domainMin,
+      max: domainMax,
+      minInterval,
+    };
+  }
+
+  return 'interval' in params
+    ? {
+        minInterval: params.interval,
+      }
+    : {};
+};
diff --git a/src/plugins/vis_type_xy/public/utils/get_legend_actions.tsx b/src/plugins/vis_type_xy/public/utils/get_legend_actions.tsx
new file mode 100644
index 0000000000000..3833b5c646df8
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/utils/get_legend_actions.tsx
@@ -0,0 +1,113 @@
+/*
+ * 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 React, { useState } from 'react';
+
+import { i18n } from '@kbn/i18n';
+import { EuiContextMenuPanelDescriptor, EuiIcon, EuiPopover, EuiContextMenu } from '@elastic/eui';
+import { LegendAction, XYChartSeriesIdentifier, SeriesName } from '@elastic/charts';
+
+import { ClickTriggerEvent } from '../../../charts/public';
+
+export const getLegendActions = (
+  canFilter: (data: ClickTriggerEvent | null) => Promise<boolean>,
+  getFilterEventData: (series: XYChartSeriesIdentifier) => ClickTriggerEvent | null,
+  onFilter: (data: ClickTriggerEvent, negate?: any) => void,
+  getSeriesName: (series: XYChartSeriesIdentifier) => SeriesName
+): LegendAction => {
+  return ({ series: xySeries }) => {
+    const [popoverOpen, setPopoverOpen] = useState(false);
+    const [isfilterable, setIsfilterable] = useState(false);
+    const series = xySeries as XYChartSeriesIdentifier;
+    const filterData = getFilterEventData(series);
+
+    (async () => setIsfilterable(await canFilter(filterData)))();
+
+    if (!isfilterable || !filterData) {
+      return null;
+    }
+
+    const name = getSeriesName(series);
+    const panels: EuiContextMenuPanelDescriptor[] = [
+      {
+        id: 'main',
+        title: `${name}`,
+        items: [
+          {
+            name: i18n.translate('visTypeXy.legend.filterForValueButtonAriaLabel', {
+              defaultMessage: 'Filter for value',
+            }),
+            'data-test-subj': `legend-${name}-filterIn`,
+            icon: <EuiIcon type="plusInCircle" size="m" />,
+            onClick: () => {
+              setPopoverOpen(false);
+              onFilter(filterData);
+            },
+          },
+          {
+            name: i18n.translate('visTypeXy.legend.filterOutValueButtonAriaLabel', {
+              defaultMessage: 'Filter out value',
+            }),
+            'data-test-subj': `legend-${name}-filterOut`,
+            icon: <EuiIcon type="minusInCircle" size="m" />,
+            onClick: () => {
+              setPopoverOpen(false);
+              onFilter(filterData, true);
+            },
+          },
+        ],
+      },
+    ];
+
+    const Button = (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100%',
+          marginLeft: 4,
+          marginRight: 4,
+        }}
+        data-test-subj={`legend-${name}`}
+        onKeyPress={() => undefined}
+        onClick={() => setPopoverOpen(!popoverOpen)}
+      >
+        <EuiIcon size="s" type="boxesVertical" />
+      </div>
+    );
+
+    return (
+      <EuiPopover
+        id="contextMenuNormal"
+        button={Button}
+        isOpen={popoverOpen}
+        closePopover={() => setPopoverOpen(false)}
+        panelPaddingSize="none"
+        anchorPosition="upLeft"
+        title={i18n.translate('visTypeXy.legend.filterOptionsLegend', {
+          defaultMessage: '{legendDataLabel}, filter options',
+          values: { legendDataLabel: name },
+        })}
+      >
+        <EuiContextMenu initialPanelId="main" panels={panels} />
+      </EuiPopover>
+    );
+  };
+};
diff --git a/src/plugins/vis_type_xy/public/utils/get_series_name_fn.ts b/src/plugins/vis_type_xy/public/utils/get_series_name_fn.ts
new file mode 100644
index 0000000000000..bc3822ee7dc7a
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/utils/get_series_name_fn.ts
@@ -0,0 +1,73 @@
+/*
+ * 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 { memoize } from 'lodash';
+
+import { i18n } from '@kbn/i18n';
+import { XYChartSeriesIdentifier, SeriesName } from '@elastic/charts';
+
+import { VisConfig } from '../types';
+
+const emptyTextLabel = i18n.translate('visTypeXy.emptyTextColumnValue', {
+  defaultMessage: '(empty)',
+});
+
+/**
+ * Returns empty values
+ */
+export const fillEmptyValue = <T extends string | number | undefined>(value: T) =>
+  value === '' ? emptyTextLabel : value;
+
+function getSplitValues(
+  splitAccessors: XYChartSeriesIdentifier['splitAccessors'],
+  seriesAspects?: VisConfig['aspects']['series']
+) {
+  if (splitAccessors.size < 1) {
+    return [];
+  }
+
+  const splitValues: Array<string | number> = [];
+  splitAccessors.forEach((value, key) => {
+    const split = (seriesAspects ?? []).find(({ accessor }) => accessor === key);
+    splitValues.push(split?.formatter ? split?.formatter(value) : value);
+  });
+  return splitValues.map(fillEmptyValue);
+}
+
+export const getSeriesNameFn = (aspects: VisConfig['aspects'], multipleY = false) =>
+  memoize(
+    ({ splitAccessors, yAccessor }: XYChartSeriesIdentifier): SeriesName => {
+      const splitValues = getSplitValues(splitAccessors, aspects.series);
+      const yAccessorTitle =
+        aspects.y.find(({ accessor }) => accessor === yAccessor)?.title ?? null;
+
+      if (!yAccessorTitle) {
+        return null;
+      }
+
+      if (multipleY) {
+        if (splitValues.length === 0) {
+          return yAccessorTitle;
+        }
+        return `${splitValues.join(' - ')}: ${yAccessorTitle}`;
+      }
+
+      return splitValues.length > 0 ? splitValues.join(' - ') : yAccessorTitle;
+    }
+  );
diff --git a/src/plugins/vis_type_xy/public/utils/get_time_zone.tsx b/src/plugins/vis_type_xy/public/utils/get_time_zone.tsx
new file mode 100644
index 0000000000000..7c963d9cf571f
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/utils/get_time_zone.tsx
@@ -0,0 +1,36 @@
+/*
+ * 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 moment from 'moment';
+
+import { getUISettings } from '../services';
+
+/**
+ * Get timeZone from uiSettings
+ */
+export function getTimeZone() {
+  const uiSettings = getUISettings();
+  if (uiSettings.isDefault('dateFormat:tz')) {
+    const detectedTimeZone = moment.tz.guess();
+    if (detectedTimeZone) return detectedTimeZone;
+    else return moment().format('Z');
+  } else {
+    return uiSettings.get('dateFormat:tz', 'Browser');
+  }
+}
diff --git a/src/plugins/vis_type_xy/public/utils/index.tsx b/src/plugins/vis_type_xy/public/utils/index.tsx
new file mode 100644
index 0000000000000..20b5d7a3c8881
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/utils/index.tsx
@@ -0,0 +1,26 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { renderAllSeries } from './render_all_series';
+export { getTimeZone } from './get_time_zone';
+export { getLegendActions } from './get_legend_actions';
+export { getSeriesNameFn } from './get_series_name_fn';
+export { getXDomain, getAdjustedDomain } from './domain';
+export { useColorPicker } from './use_color_picker';
+export { getXAccessor } from './accessors';
diff --git a/src/plugins/vis_type_xy/public/utils/render_all_series.tsx b/src/plugins/vis_type_xy/public/utils/render_all_series.tsx
new file mode 100644
index 0000000000000..0bb909070163f
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/utils/render_all_series.tsx
@@ -0,0 +1,179 @@
+/*
+ * 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 React from 'react';
+
+import {
+  AreaSeries,
+  CurveType,
+  BarSeries,
+  XYChartSeriesIdentifier,
+  SeriesColorAccessorFn,
+  SeriesName,
+  Accessor,
+  AccessorFn,
+} from '@elastic/charts';
+import { ColorVariant } from '@elastic/charts/dist/utils/commons';
+
+import { DatatableRow } from '../../../expressions/public';
+
+import { ChartType } from '../../common';
+import { SeriesParam, VisConfig } from '../types';
+
+/**
+ * Matches vislib curve to elastic charts
+ * @param type curve type
+ */
+const getCurveType = (type?: 'linear' | 'cardinal' | 'step-after'): CurveType => {
+  switch (type) {
+    case 'cardinal':
+      return CurveType.CURVE_MONOTONE_X;
+    case 'step-after':
+      return CurveType.CURVE_STEP_AFTER;
+    case 'linear':
+    default:
+      return CurveType.LINEAR;
+  }
+};
+
+/**
+ * Renders chart Line, Area or Bar series
+ * @param config
+ * @param seriesParams
+ * @param data
+ * @param getSeriesName
+ * @param getSeriesColor
+ */
+export const renderAllSeries = (
+  { aspects, yAxes, xAxis, showValueLabel, enableHistogramMode, fittingFunction }: VisConfig,
+  seriesParams: SeriesParam[],
+  data: DatatableRow[],
+  getSeriesName: (series: XYChartSeriesIdentifier) => SeriesName,
+  getSeriesColor: SeriesColorAccessorFn,
+  timeZone: string,
+  xAccessor: Accessor | AccessorFn,
+  splitSeriesAccessors: Array<Accessor | AccessorFn>
+) =>
+  seriesParams.map(
+    ({
+      show,
+      valueAxis: groupId,
+      data: { id: paramId },
+      lineWidth: strokeWidth,
+      showCircles,
+      drawLinesBetweenPoints,
+      mode,
+      interpolate,
+      type,
+    }) => {
+      const yAspect = aspects.y.find(({ aggId }) => aggId === paramId);
+
+      if (!show || !yAspect || yAspect.accessor === null) {
+        return null;
+      }
+
+      const id = `${type}-${yAspect.accessor}`;
+      const yAxisScale = yAxes.find(({ groupId: axisGroupId }) => axisGroupId === groupId)?.scale;
+      const isStacked = mode === 'stacked' || yAxisScale?.mode === 'percentage';
+      const stackMode = yAxisScale?.mode === 'normal' ? undefined : yAxisScale?.mode;
+      // needed to seperate stacked and non-stacked bars into unique pseudo groups
+      const pseudoGroupId = isStacked ? `__pseudo_stacked_group-${groupId}__` : groupId;
+      // set domain of stacked groups to use actual groupId not pseudo groupdId
+      const useDefaultGroupDomain = isStacked ? groupId : undefined;
+
+      switch (type) {
+        case ChartType.Histogram:
+          return (
+            <BarSeries
+              key={id}
+              id={id}
+              name={getSeriesName}
+              color={getSeriesColor}
+              tickFormat={yAspect.formatter}
+              groupId={pseudoGroupId}
+              useDefaultGroupDomain={useDefaultGroupDomain}
+              xScaleType={xAxis.scale.type}
+              yScaleType={yAxisScale?.type}
+              xAccessor={xAccessor}
+              yAccessors={[yAspect.accessor]}
+              splitSeriesAccessors={splitSeriesAccessors}
+              data={data}
+              timeZone={timeZone}
+              stackAccessors={isStacked ? ['__any_value__'] : undefined}
+              enableHistogramMode={enableHistogramMode}
+              stackMode={stackMode}
+              minBarHeight={2}
+              displayValueSettings={{
+                showValueLabel,
+                hideClippedValue: true,
+              }}
+            />
+          );
+
+        case ChartType.Area:
+        case ChartType.Line:
+          const markSizeAccessor = showCircles ? aspects.z?.accessor ?? undefined : undefined;
+
+          return (
+            <AreaSeries
+              key={id}
+              id={id}
+              fit={fittingFunction}
+              color={getSeriesColor}
+              tickFormat={yAspect.formatter}
+              name={getSeriesName}
+              curve={getCurveType(interpolate)}
+              groupId={pseudoGroupId}
+              useDefaultGroupDomain={useDefaultGroupDomain}
+              xScaleType={xAxis.scale.type}
+              yScaleType={yAxisScale?.type}
+              xAccessor={xAccessor}
+              yAccessors={[yAspect.accessor]}
+              markSizeAccessor={markSizeAccessor}
+              markFormat={aspects.z?.formatter}
+              splitSeriesAccessors={splitSeriesAccessors}
+              data={data}
+              stackAccessors={isStacked ? ['__any_value__'] : undefined}
+              displayValueSettings={{
+                showValueLabel,
+                hideClippedValue: true,
+              }}
+              timeZone={timeZone}
+              stackMode={stackMode}
+              areaSeriesStyle={{
+                area: {
+                  ...(type === ChartType.Line && { opacity: 0 }),
+                },
+                line: {
+                  strokeWidth,
+                  visible: drawLinesBetweenPoints,
+                },
+                point: {
+                  visible: showCircles,
+                  fill: markSizeAccessor ? ColorVariant.Series : undefined,
+                },
+              }}
+            />
+          );
+        default:
+          // Error: unsupported chart type
+          return null;
+      }
+    }
+  );
diff --git a/src/plugins/vis_type_xy/public/utils/use_color_picker.tsx b/src/plugins/vis_type_xy/public/utils/use_color_picker.tsx
new file mode 100644
index 0000000000000..05de38b7700a9
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/utils/use_color_picker.tsx
@@ -0,0 +1,79 @@
+/*
+ * 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 React, { BaseSyntheticEvent, useMemo } from 'react';
+
+import { LegendColorPicker, Position, XYChartSeriesIdentifier, SeriesName } from '@elastic/charts';
+import { PopoverAnchorPosition, EuiWrappingPopover } from '@elastic/eui';
+
+import { ColorPicker } from '../../../charts/public';
+
+function getAnchorPosition(legendPosition: Position): PopoverAnchorPosition {
+  switch (legendPosition) {
+    case Position.Bottom:
+      return 'upCenter';
+    case Position.Top:
+      return 'downCenter';
+    case Position.Left:
+      return 'rightCenter';
+    default:
+      return 'leftCenter';
+  }
+}
+
+export const useColorPicker = (
+  legendPosition: Position,
+  setColor: (
+    newColor: string | null,
+    seriesKey: string | number,
+    event: BaseSyntheticEvent
+  ) => void,
+  getSeriesName: (series: XYChartSeriesIdentifier) => SeriesName
+): LegendColorPicker =>
+  useMemo(
+    () => ({ anchor, color, onClose, onChange, seriesIdentifier }) => {
+      const seriesName = getSeriesName(seriesIdentifier as XYChartSeriesIdentifier);
+      const handlChange = (newColor: string | null, event: BaseSyntheticEvent) => {
+        if (!seriesName) {
+          return;
+        }
+        if (newColor) {
+          onChange(newColor);
+        }
+        setColor(newColor, seriesName, event);
+        // must be called after onChange
+        onClose();
+      };
+
+      return (
+        <EuiWrappingPopover
+          isOpen
+          ownFocus
+          display="block"
+          button={anchor}
+          anchorPosition={getAnchorPosition(legendPosition)}
+          closePopover={onClose}
+          panelPaddingSize="s"
+        >
+          <ColorPicker color={color} onChange={handlChange} label={seriesName} />
+        </EuiWrappingPopover>
+      );
+    },
+    [getSeriesName, legendPosition, setColor]
+  );
diff --git a/src/plugins/vis_type_xy/public/vis_component.tsx b/src/plugins/vis_type_xy/public/vis_component.tsx
new file mode 100644
index 0000000000000..d87500218975a
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/vis_component.tsx
@@ -0,0 +1,327 @@
+/*
+ * 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 React, {
+  BaseSyntheticEvent,
+  KeyboardEvent,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+import {
+  Chart,
+  ElementClickListener,
+  XYChartElementEvent,
+  Position,
+  XYChartSeriesIdentifier,
+  BrushEndListener,
+  RenderChangeListener,
+  ScaleType,
+  AccessorFn,
+  Accessor,
+} from '@elastic/charts';
+import { keys } from '@elastic/eui';
+
+import { compact } from 'lodash';
+import {
+  getFilterFromChartClickEventFn,
+  getFilterFromSeriesFn,
+  LegendToggle,
+  getBrushFromChartBrushEventFn,
+  ClickTriggerEvent,
+} from '../../charts/public';
+import { Datatable, IInterpreterRenderHandlers } from '../../expressions/public';
+
+import { VisParams } from './types';
+import {
+  getAdjustedDomain,
+  getXDomain,
+  getTimeZone,
+  renderAllSeries,
+  getSeriesNameFn,
+  getLegendActions,
+  useColorPicker,
+  getXAccessor,
+} from './utils';
+import { XYAxis, XYEndzones, XYCurrentTime, XYSettings, XYThresholdLine } from './components';
+import { getConfig } from './config';
+import { getThemeService, getColorsService, getDataActions } from './services';
+import { ChartType } from '../common';
+
+import './_chart.scss';
+import {
+  COMPLEX_SPLIT_ACCESSOR,
+  getComplexAccessor,
+  getSplitSeriesAccessorFnMap,
+} from './utils/accessors';
+
+export interface VisComponentProps {
+  visParams: VisParams;
+  visData: Datatable;
+  uiState: IInterpreterRenderHandlers['uiState'];
+  fireEvent: IInterpreterRenderHandlers['event'];
+  renderComplete: IInterpreterRenderHandlers['done'];
+}
+
+export type VisComponentType = typeof VisComponent;
+
+const VisComponent = (props: VisComponentProps) => {
+  /**
+   * Stores all series labels to replicate vislib color map lookup
+   */
+  const allSeries: Array<string | number> = useMemo(() => [], []);
+  const [showLegend, setShowLegend] = useState<boolean>(() => {
+    // TODO: Check when this bwc can safely be removed
+    const bwcLegendStateDefault =
+      props.visParams.addLegend == null ? true : props.visParams.addLegend;
+    return props.uiState?.get('vis.legendOpen', bwcLegendStateDefault) as boolean;
+  });
+
+  useEffect(() => {
+    const fn = () => {
+      props?.uiState?.emit?.('reload');
+    };
+    props?.uiState?.on?.('change', fn);
+
+    return () => {
+      props?.uiState?.off?.('change', fn);
+    };
+  }, [props?.uiState]);
+
+  const onRenderChange = useCallback<RenderChangeListener>(
+    (isRendered) => {
+      if (isRendered) {
+        props.renderComplete();
+      }
+    },
+    [props]
+  );
+
+  const handleFilterClick = useCallback(
+    (
+      visData: Datatable,
+      xAccessor: Accessor | AccessorFn,
+      splitSeriesAccessors: Array<Accessor | AccessorFn>
+    ): ElementClickListener => {
+      const splitSeriesAccessorFnMap = getSplitSeriesAccessorFnMap(splitSeriesAccessors);
+      return (elements) => {
+        if (xAccessor !== null) {
+          const event = getFilterFromChartClickEventFn(
+            visData,
+            xAccessor,
+            splitSeriesAccessorFnMap
+          )(elements as XYChartElementEvent[]);
+          props.fireEvent(event);
+        }
+      };
+    },
+    [props]
+  );
+
+  const handleBrush = useCallback(
+    (
+      visData: Datatable,
+      xAccessor: Accessor | AccessorFn,
+      isInterval: boolean
+    ): BrushEndListener | undefined => {
+      if (xAccessor !== null && isInterval) {
+        return (brushArea) => {
+          const event = getBrushFromChartBrushEventFn(visData, xAccessor)(brushArea);
+          props.fireEvent(event);
+        };
+      }
+    },
+    [props]
+  );
+
+  const getFilterEventData = useCallback(
+    (
+      visData: Datatable,
+      xAccessor: Accessor | AccessorFn,
+      splitSeriesAccessors: Array<Accessor | AccessorFn>
+    ) => {
+      const splitSeriesAccessorFnMap = getSplitSeriesAccessorFnMap(splitSeriesAccessors);
+      return (series: XYChartSeriesIdentifier): ClickTriggerEvent | null => {
+        if (xAccessor !== null) {
+          return getFilterFromSeriesFn(visData)(series, splitSeriesAccessorFnMap);
+        }
+
+        return null;
+      };
+    },
+    []
+  );
+
+  const handleFilterAction = useCallback(
+    (event: ClickTriggerEvent, negate = false) => {
+      props.fireEvent({
+        ...event,
+        data: {
+          ...event.data,
+          negate,
+        },
+      });
+    },
+    [props]
+  );
+
+  const canFilter = async (event: ClickTriggerEvent | null): Promise<boolean> => {
+    if (!event) {
+      return false;
+    }
+    const filters = await getDataActions().createFiltersFromValueClickAction(event.data);
+    return Boolean(filters.length);
+  };
+
+  const toggleLegend = useCallback(() => {
+    setShowLegend((value) => {
+      const newValue = !value;
+      if (props.uiState?.set) {
+        props.uiState.set('vis.legendOpen', newValue);
+      }
+      return newValue;
+    });
+  }, [props.uiState]);
+
+  const setColor = useCallback(
+    (newColor: string | null, seriesLabel: string | number, event: BaseSyntheticEvent) => {
+      if ((event as KeyboardEvent).key && (event as KeyboardEvent).key !== keys.ENTER) {
+        return;
+      }
+
+      const colors = props.uiState?.get('vis.colors') || {};
+      if (colors[seriesLabel] === newColor || !newColor) {
+        delete colors[seriesLabel];
+      } else {
+        colors[seriesLabel] = newColor;
+      }
+
+      if (props.uiState?.set) {
+        props.uiState.setSilent('vis.colors', null);
+        props.uiState.set('vis.colors', colors);
+        props.uiState.emit('colorChanged');
+      }
+    },
+    [props.uiState]
+  );
+
+  const { visData, visParams } = props;
+  const config = getConfig(visData, visParams);
+  const timeZone = getTimeZone();
+  const xDomain =
+    config.xAxis.scale.type === ScaleType.Ordinal ? undefined : getXDomain(config.aspects.x.params);
+  const hasBars = visParams.seriesParams.some(
+    ({ type, data: { id: paramId } }) =>
+      type === ChartType.Histogram &&
+      config.aspects.y.find(({ aggId }) => aggId === paramId) !== undefined
+  );
+  const adjustedXDomain =
+    config.xAxis.scale.type === ScaleType.Ordinal
+      ? undefined
+      : getAdjustedDomain(visData.rows, config.aspects.x, timeZone, xDomain, hasBars);
+  const legendPosition = useMemo(() => config.legend.position ?? Position.Right, [
+    config.legend.position,
+  ]);
+  const isDarkMode = getThemeService().useDarkMode();
+  const getSeriesName = getSeriesNameFn(config.aspects, config.aspects.y.length > 1);
+
+  const getSeriesColor = useCallback(
+    (series: XYChartSeriesIdentifier) => {
+      const seriesName = getSeriesName(series);
+      if (!seriesName) {
+        return;
+      }
+
+      const overwriteColors: Record<string, string> = props.uiState?.get
+        ? props.uiState.get('vis.colors', {})
+        : {};
+
+      allSeries.push(seriesName);
+      return getColorsService().createColorLookupFunction(allSeries, overwriteColors)(seriesName);
+    },
+    [allSeries, getSeriesName, props.uiState]
+  );
+  const xAccessor = getXAccessor(config.aspects.x);
+  const splitSeriesAccessors = config.aspects.series
+    ? compact(config.aspects.series.map(getComplexAccessor(COMPLEX_SPLIT_ACCESSOR)))
+    : [];
+
+  return (
+    <div className="xyChart__container" data-test-subj="visTypeXyChart">
+      <LegendToggle
+        onClick={toggleLegend}
+        showLegend={showLegend}
+        legendPosition={legendPosition}
+      />
+      <Chart size="100%">
+        <XYSettings
+          {...config}
+          showLegend={showLegend}
+          legendPosition={legendPosition}
+          xDomain={xDomain}
+          adjustedXDomain={adjustedXDomain}
+          legendColorPicker={useColorPicker(legendPosition, setColor, getSeriesName)}
+          onElementClick={handleFilterClick(visData, xAccessor, splitSeriesAccessors)}
+          onBrushEnd={handleBrush(visData, xAccessor, 'interval' in config.aspects.x.params)}
+          onRenderChange={onRenderChange}
+          legendAction={
+            config.aspects.series && (config.aspects.series?.length ?? 0) > 0
+              ? getLegendActions(
+                  canFilter,
+                  getFilterEventData(visData, xAccessor, splitSeriesAccessors),
+                  handleFilterAction,
+                  getSeriesName
+                )
+              : undefined
+          }
+        />
+        <XYThresholdLine {...config.thresholdLine} />
+        <XYCurrentTime enabled={config.showCurrentTime} isDarkMode={isDarkMode} domain={xDomain} />
+        <XYEndzones
+          isFullBin={!config.enableHistogramMode}
+          enabled={config.isTimeChart}
+          isDarkMode={isDarkMode}
+          domain={xDomain}
+          hideTooltips={!config.detailedTooltip}
+          adjustedDomain={adjustedXDomain}
+        />
+        <XYAxis {...config.xAxis} />
+        {config.yAxes.map((axisProps) => (
+          <XYAxis key={axisProps.id} {...axisProps} />
+        ))}
+        {renderAllSeries(
+          config,
+          visParams.seriesParams,
+          visData.rows,
+          getSeriesName,
+          getSeriesColor,
+          timeZone,
+          xAccessor,
+          splitSeriesAccessors
+        )}
+      </Chart>
+    </div>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default memo(VisComponent);
diff --git a/src/plugins/vis_type_xy/public/vis_renderer.tsx b/src/plugins/vis_type_xy/public/vis_renderer.tsx
new file mode 100644
index 0000000000000..4ac7c23c30893
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/vis_renderer.tsx
@@ -0,0 +1,70 @@
+/*
+ * 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 React, { lazy } from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+
+import { I18nProvider } from '@kbn/i18n/react';
+
+import { ExpressionRenderDefinition } from '../../expressions/public';
+import { VisualizationContainer } from '../../visualizations/public';
+
+import { XyVisType } from '../common';
+import { SplitChartWarning } from './components/split_chart_warning';
+import { VisComponentType } from './vis_component';
+import { RenderValue, visName } from './xy_vis_fn';
+
+// @ts-ignore
+const VisComponent = lazy<VisComponentType>(() => import('./vis_component'));
+
+function shouldShowNoResultsMessage(visData: any, visType: XyVisType): boolean {
+  const rows: object[] | undefined = visData?.rows;
+  const isZeroHits = visData?.hits === 0 || (rows && !rows.length);
+
+  return Boolean(isZeroHits);
+}
+
+export const xyVisRenderer: ExpressionRenderDefinition<RenderValue> = {
+  name: visName,
+  displayName: 'XY visualization',
+  reuseDomNode: true,
+  render: (domNode, { visData, visConfig, visType }, handlers) => {
+    const showNoResult = shouldShowNoResultsMessage(visData, visType);
+    const isSplitChart = Boolean(visConfig.dimensions.splitRow || visConfig.dimensions.splitRow);
+
+    handlers.onDestroy(() => unmountComponentAtNode(domNode));
+    render(
+      <I18nProvider>
+        <>
+          {isSplitChart && <SplitChartWarning />}
+          <VisualizationContainer handlers={handlers} showNoResult={showNoResult || isSplitChart}>
+            <VisComponent
+              visParams={visConfig}
+              visData={visData}
+              renderComplete={handlers.done}
+              fireEvent={handlers.event}
+              uiState={handlers.uiState}
+            />
+          </VisualizationContainer>
+        </>
+      </I18nProvider>,
+      domNode
+    );
+  },
+};
diff --git a/src/plugins/vis_type_xy/public/vis_types/area.tsx b/src/plugins/vis_type_xy/public/vis_types/area.tsx
new file mode 100644
index 0000000000000..9529456f17d55
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/vis_types/area.tsx
@@ -0,0 +1,201 @@
+/*
+ * 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 React from 'react';
+
+import { i18n } from '@kbn/i18n';
+// @ts-ignore
+import { euiPaletteColorBlind } from '@elastic/eui/lib/services';
+import { Fit, Position } from '@elastic/charts';
+
+import { Schemas } from '../../../vis_default_editor/public';
+import { AggGroupNames } from '../../../data/public';
+import { VIS_EVENT_TO_TRIGGER } from '../../../visualizations/public';
+import { defaultCountLabel, LabelRotation } from '../../../charts/public';
+
+import {
+  ChartMode,
+  AxisType,
+  ScaleType,
+  AxisMode,
+  ThresholdLineStyle,
+  InterpolationMode,
+  XyVisTypeDefinition,
+} from '../types';
+import { toExpressionAst } from '../to_ast';
+import { ChartType } from '../../common';
+import { getConfigCollections } from '../editor/collections';
+import { getOptionTabs } from '../editor/common_config';
+import { SplitTooltip } from './split_tooltip';
+
+export const getAreaVisTypeDefinition = (
+  showElasticChartsOptions = false
+): XyVisTypeDefinition => ({
+  name: 'area',
+  title: i18n.translate('visTypeXy.area.areaTitle', { defaultMessage: 'Area' }),
+  icon: 'visArea',
+  description: i18n.translate('visTypeXy.area.areaDescription', {
+    defaultMessage: 'Emphasize the data between an axis and a line.',
+  }),
+  toExpressionAst,
+  getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush],
+  visConfig: {
+    defaults: {
+      type: ChartType.Area,
+      grid: {
+        categoryLines: false,
+      },
+      categoryAxes: [
+        {
+          id: 'CategoryAxis-1',
+          type: AxisType.Category,
+          position: Position.Bottom,
+          show: true,
+          scale: {
+            type: ScaleType.Linear,
+          },
+          labels: {
+            show: true,
+            filter: true,
+            truncate: 100,
+          },
+          title: {},
+          style: {},
+        },
+      ],
+      valueAxes: [
+        {
+          id: 'ValueAxis-1',
+          name: 'LeftAxis-1',
+          type: AxisType.Value,
+          position: Position.Left,
+          show: true,
+          scale: {
+            type: ScaleType.Linear,
+            mode: AxisMode.Normal,
+          },
+          labels: {
+            show: true,
+            rotate: LabelRotation.Horizontal,
+            filter: false,
+            truncate: 100,
+          },
+          title: {
+            text: defaultCountLabel,
+          },
+          style: {},
+        },
+      ],
+      seriesParams: [
+        {
+          show: true,
+          type: ChartType.Area,
+          mode: ChartMode.Stacked,
+          data: {
+            label: defaultCountLabel,
+            id: '1',
+          },
+          drawLinesBetweenPoints: true,
+          lineWidth: 2,
+          showCircles: true,
+          interpolate: InterpolationMode.Linear,
+          valueAxis: 'ValueAxis-1',
+        },
+      ],
+      addTooltip: true,
+      detailedTooltip: true,
+      addLegend: true,
+      legendPosition: Position.Right,
+      fittingFunction: Fit.Linear,
+      times: [],
+      addTimeMarker: false,
+      radiusRatio: 9,
+      thresholdLine: {
+        show: false,
+        value: 10,
+        width: 1,
+        style: ThresholdLineStyle.Full,
+        color: euiPaletteColorBlind()[9],
+      },
+      labels: {},
+    },
+  },
+  editorConfig: {
+    collections: getConfigCollections(),
+    optionTabs: getOptionTabs(showElasticChartsOptions),
+    schemas: new Schemas([
+      {
+        group: AggGroupNames.Metrics,
+        name: 'metric',
+        title: i18n.translate('visTypeXy.area.metricsTitle', {
+          defaultMessage: 'Y-axis',
+        }),
+        aggFilter: ['!geo_centroid', '!geo_bounds'],
+        min: 1,
+        defaults: [{ schema: 'metric', type: 'count' }],
+      },
+      {
+        group: AggGroupNames.Metrics,
+        name: 'radius',
+        title: i18n.translate('visTypeXy.area.radiusTitle', {
+          defaultMessage: 'Dot size',
+        }),
+        min: 0,
+        max: 1,
+        aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'segment',
+        title: i18n.translate('visTypeXy.area.segmentTitle', {
+          defaultMessage: 'X-axis',
+        }),
+        min: 0,
+        max: 1,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'group',
+        title: i18n.translate('visTypeXy.area.groupTitle', {
+          defaultMessage: 'Split series',
+        }),
+        min: 0,
+        max: 3,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'split',
+        title: i18n.translate('visTypeXy.area.splitTitle', {
+          defaultMessage: 'Split chart',
+        }),
+        min: 0,
+        max: 1,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+        // TODO: Remove when split chart aggs are supported
+        // https://github.com/elastic/kibana/issues/82496
+        ...(showElasticChartsOptions && {
+          disabled: true,
+          tooltip: <SplitTooltip />,
+        }),
+      },
+    ]),
+  },
+});
diff --git a/src/plugins/vis_type_xy/public/vis_types/histogram.tsx b/src/plugins/vis_type_xy/public/vis_types/histogram.tsx
new file mode 100644
index 0000000000000..87fcd53729f57
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/vis_types/histogram.tsx
@@ -0,0 +1,204 @@
+/*
+ * 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 React from 'react';
+
+import { i18n } from '@kbn/i18n';
+// @ts-ignore
+import { euiPaletteColorBlind } from '@elastic/eui/lib/services';
+import { Position } from '@elastic/charts';
+
+import { Schemas } from '../../../vis_default_editor/public';
+import { AggGroupNames } from '../../../data/public';
+import { VIS_EVENT_TO_TRIGGER } from '../../../visualizations/public';
+
+import {
+  ChartMode,
+  AxisType,
+  ScaleType,
+  AxisMode,
+  ThresholdLineStyle,
+  XyVisTypeDefinition,
+  InterpolationMode,
+} from '../types';
+import { toExpressionAst } from '../to_ast';
+import { ChartType } from '../../common';
+import { getConfigCollections } from '../editor/collections';
+import { getOptionTabs } from '../editor/common_config';
+import { defaultCountLabel, LabelRotation } from '../../../charts/public';
+import { SplitTooltip } from './split_tooltip';
+
+export const getHistogramVisTypeDefinition = (
+  showElasticChartsOptions = false
+): XyVisTypeDefinition => ({
+  name: 'histogram',
+  title: i18n.translate('visTypeXy.histogram.histogramTitle', {
+    defaultMessage: 'Vertical bar',
+  }),
+  icon: 'visBarVertical',
+  description: i18n.translate('visTypeXy.histogram.histogramDescription', {
+    defaultMessage: 'Present data in vertical bars on an axis.',
+  }),
+  toExpressionAst,
+  getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush],
+  visConfig: {
+    defaults: {
+      type: ChartType.Histogram,
+      grid: {
+        categoryLines: false,
+      },
+      categoryAxes: [
+        {
+          id: 'CategoryAxis-1',
+          type: AxisType.Category,
+          position: Position.Bottom,
+          show: true,
+          scale: {
+            type: ScaleType.Linear,
+          },
+          labels: {
+            show: true,
+            filter: true,
+            truncate: 100,
+          },
+          title: {},
+          style: {},
+        },
+      ],
+      valueAxes: [
+        {
+          id: 'ValueAxis-1',
+          name: 'LeftAxis-1',
+          type: AxisType.Value,
+          position: Position.Left,
+          show: true,
+          scale: {
+            type: ScaleType.Linear,
+            mode: AxisMode.Normal,
+          },
+          labels: {
+            show: true,
+            rotate: LabelRotation.Horizontal,
+            filter: false,
+            truncate: 100,
+          },
+          title: {
+            text: defaultCountLabel,
+          },
+          style: {},
+        },
+      ],
+      seriesParams: [
+        {
+          show: true,
+          type: ChartType.Histogram,
+          mode: ChartMode.Stacked,
+          data: {
+            label: defaultCountLabel,
+            id: '1',
+          },
+          interpolate: InterpolationMode.Linear,
+          valueAxis: 'ValueAxis-1',
+          drawLinesBetweenPoints: true,
+          lineWidth: 2,
+          showCircles: true,
+        },
+      ],
+      radiusRatio: 0,
+      addTooltip: true,
+      detailedTooltip: true,
+      addLegend: true,
+      legendPosition: Position.Right,
+      times: [],
+      addTimeMarker: false,
+      labels: {
+        show: false,
+      },
+      thresholdLine: {
+        show: false,
+        value: 10,
+        width: 1,
+        style: ThresholdLineStyle.Full,
+        color: euiPaletteColorBlind()[9],
+      },
+    },
+  },
+  editorConfig: {
+    collections: getConfigCollections(),
+    optionTabs: getOptionTabs(showElasticChartsOptions),
+    schemas: new Schemas([
+      {
+        group: AggGroupNames.Metrics,
+        name: 'metric',
+        title: i18n.translate('visTypeXy.histogram.metricTitle', {
+          defaultMessage: 'Y-axis',
+        }),
+        min: 1,
+        aggFilter: ['!geo_centroid', '!geo_bounds'],
+        defaults: [{ schema: 'metric', type: 'count' }],
+      },
+      {
+        group: AggGroupNames.Metrics,
+        name: 'radius',
+        title: i18n.translate('visTypeXy.histogram.radiusTitle', {
+          defaultMessage: 'Dot size',
+        }),
+        min: 0,
+        max: 1,
+        aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'segment',
+        title: i18n.translate('visTypeXy.histogram.segmentTitle', {
+          defaultMessage: 'X-axis',
+        }),
+        min: 0,
+        max: 1,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'group',
+        title: i18n.translate('visTypeXy.histogram.groupTitle', {
+          defaultMessage: 'Split series',
+        }),
+        min: 0,
+        max: 3,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'split',
+        title: i18n.translate('visTypeXy.histogram.splitTitle', {
+          defaultMessage: 'Split chart',
+        }),
+        min: 0,
+        max: 1,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+        // TODO: Remove when split chart aggs are supported
+        // https://github.com/elastic/kibana/issues/82496
+        ...(showElasticChartsOptions && {
+          disabled: true,
+          tooltip: <SplitTooltip />,
+        }),
+      },
+    ]),
+  },
+});
diff --git a/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.tsx b/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.tsx
new file mode 100644
index 0000000000000..2806cb8e14983
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.tsx
@@ -0,0 +1,203 @@
+/*
+ * 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 React from 'react';
+
+import { i18n } from '@kbn/i18n';
+// @ts-ignore
+import { euiPaletteColorBlind } from '@elastic/eui/lib/services';
+import { Position } from '@elastic/charts';
+
+import { Schemas } from '../../../vis_default_editor/public';
+import { AggGroupNames } from '../../../data/public';
+import { VIS_EVENT_TO_TRIGGER } from '../../../visualizations/public';
+
+import {
+  ChartMode,
+  AxisType,
+  ScaleType,
+  AxisMode,
+  ThresholdLineStyle,
+  XyVisTypeDefinition,
+  InterpolationMode,
+} from '../types';
+import { toExpressionAst } from '../to_ast';
+import { ChartType } from '../../common';
+import { getConfigCollections } from '../editor/collections';
+import { getOptionTabs } from '../editor/common_config';
+import { defaultCountLabel, LabelRotation } from '../../../charts/public';
+import { SplitTooltip } from './split_tooltip';
+
+export const getHorizontalBarVisTypeDefinition = (
+  showElasticChartsOptions = false
+): XyVisTypeDefinition => ({
+  name: 'horizontal_bar',
+  title: i18n.translate('visTypeXy.horizontalBar.horizontalBarTitle', {
+    defaultMessage: 'Horizontal bar',
+  }),
+  icon: 'visBarHorizontal',
+  description: i18n.translate('visTypeXy.horizontalBar.horizontalBarDescription', {
+    defaultMessage: 'Present data in horizontal bars on an axis.',
+  }),
+  toExpressionAst,
+  getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush],
+  visConfig: {
+    defaults: {
+      type: ChartType.Histogram,
+      grid: {
+        categoryLines: false,
+      },
+      categoryAxes: [
+        {
+          id: 'CategoryAxis-1',
+          type: AxisType.Category,
+          position: Position.Left,
+          show: true,
+          scale: {
+            type: ScaleType.Linear,
+          },
+          labels: {
+            show: true,
+            rotate: LabelRotation.Horizontal,
+            filter: false,
+            truncate: 200,
+          },
+          title: {},
+          style: {},
+        },
+      ],
+      valueAxes: [
+        {
+          id: 'ValueAxis-1',
+          name: 'LeftAxis-1',
+          type: AxisType.Value,
+          position: Position.Bottom,
+          show: true,
+          scale: {
+            type: ScaleType.Linear,
+            mode: AxisMode.Normal,
+          },
+          labels: {
+            show: true,
+            rotate: LabelRotation.Angled,
+            filter: true,
+            truncate: 100,
+          },
+          title: {
+            text: defaultCountLabel,
+          },
+          style: {},
+        },
+      ],
+      seriesParams: [
+        {
+          show: true,
+          type: ChartType.Histogram,
+          mode: ChartMode.Normal,
+          data: {
+            label: defaultCountLabel,
+            id: '1',
+          },
+          interpolate: InterpolationMode.Linear,
+          valueAxis: 'ValueAxis-1',
+          drawLinesBetweenPoints: true,
+          lineWidth: 2,
+          showCircles: true,
+        },
+      ],
+      addTooltip: true,
+      detailedTooltip: true,
+      addLegend: true,
+      legendPosition: Position.Right,
+      times: [],
+      addTimeMarker: false,
+      labels: {},
+      radiusRatio: 0,
+      thresholdLine: {
+        show: false,
+        value: 10,
+        width: 1,
+        style: ThresholdLineStyle.Full,
+        color: euiPaletteColorBlind()[9],
+      },
+    },
+  },
+  editorConfig: {
+    collections: getConfigCollections(),
+    optionTabs: getOptionTabs(showElasticChartsOptions),
+    schemas: new Schemas([
+      {
+        group: AggGroupNames.Metrics,
+        name: 'metric',
+        title: i18n.translate('visTypeXy.horizontalBar.metricTitle', {
+          defaultMessage: 'Y-axis',
+        }),
+        min: 1,
+        aggFilter: ['!geo_centroid', '!geo_bounds'],
+        defaults: [{ schema: 'metric', type: 'count' }],
+      },
+      {
+        group: AggGroupNames.Metrics,
+        name: 'radius',
+        title: i18n.translate('visTypeXy.horizontalBar.radiusTitle', {
+          defaultMessage: 'Dot size',
+        }),
+        min: 0,
+        max: 1,
+        aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'segment',
+        title: i18n.translate('visTypeXy.horizontalBar.segmentTitle', {
+          defaultMessage: 'X-axis',
+        }),
+        min: 0,
+        max: 1,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'group',
+        title: i18n.translate('visTypeXy.horizontalBar.groupTitle', {
+          defaultMessage: 'Split series',
+        }),
+        min: 0,
+        max: 3,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'split',
+        title: i18n.translate('visTypeXy.horizontalBar.splitTitle', {
+          defaultMessage: 'Split chart',
+        }),
+        min: 0,
+        max: 1,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+        // TODO: Remove when split chart aggs are supported
+        // https://github.com/elastic/kibana/issues/82496
+        ...(showElasticChartsOptions && {
+          disabled: true,
+          tooltip: <SplitTooltip />,
+        }),
+      },
+    ]),
+  },
+});
diff --git a/src/plugins/vis_type_xy/public/vis_types/index.ts b/src/plugins/vis_type_xy/public/vis_types/index.ts
new file mode 100644
index 0000000000000..7c07a5b31ba70
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/vis_types/index.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 { getAreaVisTypeDefinition } from './area';
+import { getLineVisTypeDefinition } from './line';
+import { getHistogramVisTypeDefinition } from './histogram';
+import { getHorizontalBarVisTypeDefinition } from './horizontal_bar';
+import { XyVisTypeDefinition } from '../types';
+
+export const visTypesDefinitions = [
+  getAreaVisTypeDefinition(true),
+  getLineVisTypeDefinition(true),
+  getHistogramVisTypeDefinition(true),
+  getHorizontalBarVisTypeDefinition(true),
+];
+
+// TODO: Remove when vis_type_vislib is removed
+// https://github.com/elastic/kibana/issues/56143
+export const xyVisTypes: Record<
+  string,
+  (showElasticChartsOptions?: boolean) => XyVisTypeDefinition
+> = {
+  area: getAreaVisTypeDefinition,
+  line: getLineVisTypeDefinition,
+  histogram: getHistogramVisTypeDefinition,
+  horizontalBar: getHorizontalBarVisTypeDefinition,
+};
diff --git a/src/plugins/vis_type_xy/public/vis_types/line.tsx b/src/plugins/vis_type_xy/public/vis_types/line.tsx
new file mode 100644
index 0000000000000..84e4070df495b
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/vis_types/line.tsx
@@ -0,0 +1,195 @@
+/*
+ * 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 React from 'react';
+
+import { i18n } from '@kbn/i18n';
+// @ts-ignore
+import { euiPaletteColorBlind } from '@elastic/eui/lib/services';
+import { Position, Fit } from '@elastic/charts';
+
+import { Schemas } from '../../../vis_default_editor/public';
+import { AggGroupNames } from '../../../data/public';
+import { VIS_EVENT_TO_TRIGGER } from '../../../visualizations/public';
+import { defaultCountLabel, LabelRotation } from '../../../charts/public';
+
+import {
+  ChartMode,
+  AxisType,
+  ScaleType,
+  AxisMode,
+  ThresholdLineStyle,
+  InterpolationMode,
+  XyVisTypeDefinition,
+} from '../types';
+import { toExpressionAst } from '../to_ast';
+import { ChartType } from '../../common';
+import { getConfigCollections } from '../editor/collections';
+import { getOptionTabs } from '../editor/common_config';
+import { SplitTooltip } from './split_tooltip';
+
+export const getLineVisTypeDefinition = (
+  showElasticChartsOptions = false
+): XyVisTypeDefinition => ({
+  name: 'line',
+  title: i18n.translate('visTypeXy.line.lineTitle', { defaultMessage: 'Line' }),
+  icon: 'visLine',
+  description: i18n.translate('visTypeXy.line.lineDescription', {
+    defaultMessage: 'Display data as a series of points.',
+  }),
+  toExpressionAst,
+  getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush],
+  visConfig: {
+    defaults: {
+      type: ChartType.Line,
+      grid: {
+        categoryLines: false,
+      },
+      categoryAxes: [
+        {
+          id: 'CategoryAxis-1',
+          type: AxisType.Category,
+          position: Position.Bottom,
+          show: true,
+          scale: {
+            type: ScaleType.Linear,
+          },
+          labels: {
+            show: true,
+            filter: true,
+            truncate: 100,
+          },
+          title: {},
+          style: {},
+        },
+      ],
+      valueAxes: [
+        {
+          id: 'ValueAxis-1',
+          name: 'LeftAxis-1',
+          type: AxisType.Value,
+          position: Position.Left,
+          show: true,
+          scale: {
+            type: ScaleType.Linear,
+            mode: AxisMode.Normal,
+          },
+          labels: {
+            show: true,
+            rotate: LabelRotation.Horizontal,
+            filter: false,
+            truncate: 100,
+          },
+          title: {
+            text: defaultCountLabel,
+          },
+          style: {},
+        },
+      ],
+      seriesParams: [
+        {
+          show: true,
+          type: ChartType.Line,
+          mode: ChartMode.Normal,
+          data: {
+            label: defaultCountLabel,
+            id: '1',
+          },
+          valueAxis: 'ValueAxis-1',
+          drawLinesBetweenPoints: true,
+          lineWidth: 2,
+          interpolate: InterpolationMode.Linear,
+          showCircles: true,
+        },
+      ],
+      addTooltip: true,
+      detailedTooltip: true,
+      addLegend: true,
+      legendPosition: Position.Right,
+      fittingFunction: Fit.Linear,
+      times: [],
+      addTimeMarker: false,
+      labels: {},
+      radiusRatio: 9,
+      thresholdLine: {
+        show: false,
+        value: 10,
+        width: 1,
+        style: ThresholdLineStyle.Full,
+        color: euiPaletteColorBlind()[9],
+      },
+    },
+  },
+  editorConfig: {
+    collections: getConfigCollections(),
+    optionTabs: getOptionTabs(showElasticChartsOptions),
+    schemas: new Schemas([
+      {
+        group: AggGroupNames.Metrics,
+        name: 'metric',
+        title: i18n.translate('visTypeXy.line.metricTitle', { defaultMessage: 'Y-axis' }),
+        min: 1,
+        aggFilter: ['!geo_centroid', '!geo_bounds'],
+        defaults: [{ schema: 'metric', type: 'count' }],
+      },
+      {
+        group: AggGroupNames.Metrics,
+        name: 'radius',
+        title: i18n.translate('visTypeXy.line.radiusTitle', { defaultMessage: 'Dot size' }),
+        min: 0,
+        max: 1,
+        aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality', 'top_hits'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'segment',
+        title: i18n.translate('visTypeXy.line.segmentTitle', { defaultMessage: 'X-axis' }),
+        min: 0,
+        max: 1,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'group',
+        title: i18n.translate('visTypeXy.line.groupTitle', {
+          defaultMessage: 'Split series',
+        }),
+        min: 0,
+        max: 3,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+      },
+      {
+        group: AggGroupNames.Buckets,
+        name: 'split',
+        title: i18n.translate('visTypeXy.line.splitTitle', {
+          defaultMessage: 'Split chart',
+        }),
+        min: 0,
+        max: 1,
+        aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+        // TODO: Remove when split chart aggs are supported
+        // https://github.com/elastic/kibana/issues/82496
+        ...(showElasticChartsOptions && {
+          disabled: true,
+          tooltip: <SplitTooltip />,
+        }),
+      },
+    ]),
+  },
+});
diff --git a/src/plugins/vis_type_xy/public/vis_types/split_tooltip.tsx b/src/plugins/vis_type_xy/public/vis_types/split_tooltip.tsx
new file mode 100644
index 0000000000000..2abe3e9b8cf71
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/vis_types/split_tooltip.tsx
@@ -0,0 +1,34 @@
+/*
+ * 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 React from 'react';
+
+import { FormattedMessage } from '@kbn/i18n/react';
+
+export function SplitTooltip() {
+  return (
+    <FormattedMessage
+      id="visTypeXy.splitTitle.tooltip"
+      defaultMessage="Split chart aggregation is not supported with the new {setting}. Please disable the {setting} advanced setting to enable split chart aggregation"
+      values={{
+        setting: <strong>charts library</strong>,
+      }}
+    />
+  );
+}
diff --git a/src/plugins/vis_type_xy/public/xy_vis_fn.ts b/src/plugins/vis_type_xy/public/xy_vis_fn.ts
new file mode 100644
index 0000000000000..47c4caf243b36
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/xy_vis_fn.ts
@@ -0,0 +1,86 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+import { ExpressionFunctionDefinition, Datatable, Render } from '../../expressions/public';
+
+import { ChartType, XyVisType } from '../common';
+import { VisParams } from './types';
+
+export const visName = 'xy_vis';
+
+interface Arguments {
+  type: XyVisType;
+  visConfig: string;
+}
+export interface RenderValue {
+  visData: Datatable;
+  visType: ChartType;
+  visConfig: VisParams;
+}
+
+export type VisTypeXyExpressionFunctionDefinition = ExpressionFunctionDefinition<
+  typeof visName,
+  Datatable,
+  Arguments,
+  Render<RenderValue>
+>;
+
+export const createVisTypeXyVisFn = (): VisTypeXyExpressionFunctionDefinition => ({
+  name: visName,
+  type: 'render',
+  context: {
+    types: ['datatable'],
+  },
+  help: i18n.translate('visTypeXy.functions.help', {
+    defaultMessage: 'XY visualization',
+  }),
+  args: {
+    type: {
+      types: ['string'],
+      default: '""',
+      help: 'xy vis type',
+    },
+    visConfig: {
+      types: ['string'],
+      default: '"{}"',
+      help: 'xy vis config',
+    },
+  },
+  fn(context, args, handlers) {
+    const visConfig = JSON.parse(args.visConfig) as VisParams;
+    const visType = visConfig.type;
+
+    if (handlers?.inspectorAdapters?.tables) {
+      handlers.inspectorAdapters.tables.logDatatable('default', context);
+    }
+
+    return {
+      type: 'render',
+      as: visName,
+      value: {
+        context,
+        visType,
+        visConfig,
+        visData: context,
+      },
+    };
+  },
+});
diff --git a/src/plugins/vis_type_xy/server/index.ts b/src/plugins/vis_type_xy/server/index.ts
index afc879dc9c845..62c8ef1876d54 100644
--- a/src/plugins/vis_type_xy/server/index.ts
+++ b/src/plugins/vis_type_xy/server/index.ts
@@ -17,13 +17,6 @@
  * under the License.
  */
 
-import { schema } from '@kbn/config-schema';
+import { VisTypeXyServerPlugin } from './plugin';
 
-export const config = {
-  schema: schema.object({ enabled: schema.boolean({ defaultValue: false }) }),
-};
-
-export const plugin = () => ({
-  setup() {},
-  start() {},
-});
+export const plugin = () => new VisTypeXyServerPlugin();
diff --git a/src/plugins/vis_type_xy/server/plugin.ts b/src/plugins/vis_type_xy/server/plugin.ts
new file mode 100644
index 0000000000000..51d741f9374fe
--- /dev/null
+++ b/src/plugins/vis_type_xy/server/plugin.ts
@@ -0,0 +1,57 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { schema } from '@kbn/config-schema';
+
+import { CoreSetup, Plugin, UiSettingsParams } from 'kibana/server';
+
+import { CHARTS_LIBRARY } from '../common';
+
+export const uiSettingsConfig: Record<string, UiSettingsParams<boolean>> = {
+  // TODO: Remove this when vis_type_vislib is removed
+  // https://github.com/elastic/kibana/issues/56143
+  [CHARTS_LIBRARY]: {
+    name: i18n.translate('visTypeXy.advancedSettings.visualization.chartsLibrary', {
+      defaultMessage: 'Charts library',
+    }),
+    value: false,
+    description: i18n.translate(
+      'visTypeXy.advancedSettings.visualization.chartsLibrary.description',
+      {
+        defaultMessage:
+          'Enables new charts library for areas, lines and bars in visualize. Currently, does <strong>not</strong> support split chart aggregation.',
+      }
+    ),
+    category: ['visualization'],
+    schema: schema.boolean(),
+  },
+};
+
+export class VisTypeXyServerPlugin implements Plugin<object, object> {
+  public setup(core: CoreSetup) {
+    core.uiSettings.register(uiSettingsConfig);
+
+    return {};
+  }
+
+  public start() {
+    return {};
+  }
+}
diff --git a/src/plugins/visualizations/public/index.ts b/src/plugins/visualizations/public/index.ts
index d66a6f6113cad..662350bfc3bd0 100644
--- a/src/plugins/visualizations/public/index.ts
+++ b/src/plugins/visualizations/public/index.ts
@@ -48,6 +48,7 @@ export { SchemaConfig, BuildPipelineParams } from './legacy/build_pipeline';
 export { updateOldState } from './legacy/vis_update_state';
 export { PersistedState } from './persisted_state';
 export {
+  VisualizationControllerConstructor,
   VisualizationController,
   SavedVisState,
   ISavedVis,
diff --git a/src/plugins/visualizations/public/legacy/build_pipeline.ts b/src/plugins/visualizations/public/legacy/build_pipeline.ts
index c10f47c39b47d..0b422802a7e1b 100644
--- a/src/plugins/visualizations/public/legacy/build_pipeline.ts
+++ b/src/plugins/visualizations/public/legacy/build_pipeline.ts
@@ -23,7 +23,9 @@ import {
   SerializedFieldFormat,
 } from '../../../../plugins/expressions/public';
 import { IAggConfig, search, TimefilterContract } from '../../../../plugins/data/public';
+
 import { Vis, VisParams } from '../types';
+
 const { isDateHistogramBucketAggConfig } = search.aggs;
 
 interface SchemaConfigParams {
diff --git a/src/plugins/visualizations/public/types.ts b/src/plugins/visualizations/public/types.ts
index 3c322f5e79165..829c1aed49013 100644
--- a/src/plugins/visualizations/public/types.ts
+++ b/src/plugins/visualizations/public/types.ts
@@ -17,13 +17,14 @@
  * under the License.
  */
 
-import { ExpressionAstExpression } from 'src/plugins/expressions';
 import { SavedObject } from '../../../plugins/saved_objects/public';
 import {
   AggConfigOptions,
   SearchSourceFields,
   TimefilterContract,
 } from '../../../plugins/data/public';
+import { ExpressionAstExpression } from '../../expressions/public';
+
 import { SerializedVis, Vis, VisParams } from './vis';
 import { ExprVis } from './expressions/vis';
 
diff --git a/src/plugins/visualizations/public/vis.ts b/src/plugins/visualizations/public/vis.ts
index 75c889af3d5c9..9d3e682530700 100644
--- a/src/plugins/visualizations/public/vis.ts
+++ b/src/plugins/visualizations/public/vis.ts
@@ -30,6 +30,7 @@
 import { isFunction, defaults, cloneDeep } from 'lodash';
 import { Assign } from '@kbn/utility-types';
 import { i18n } from '@kbn/i18n';
+
 import { PersistedState } from './persisted_state';
 import { getTypes, getAggs, getSearch, getSavedSearchLoader } from './services';
 import { VisType } from './vis_types';
diff --git a/src/plugins/visualizations/server/saved_objects/visualization_migrations.test.ts b/src/plugins/visualizations/server/saved_objects/visualization_migrations.test.ts
index 17c55af32005d..d3fc5de93c366 100644
--- a/src/plugins/visualizations/server/saved_objects/visualization_migrations.test.ts
+++ b/src/plugins/visualizations/server/saved_objects/visualization_migrations.test.ts
@@ -1676,4 +1676,94 @@ describe('migration visualization', () => {
       expect(visState.params.showToolbar).toEqual(true);
     });
   });
+
+  describe('7.12.0 update vislib visualization defaults', () => {
+    const migrate = (doc: any) =>
+      visualizationSavedObjectTypeMigrations['7.12.0'](
+        doc as Parameters<SavedObjectMigrationFn>[0],
+        savedObjectMigrationContext
+      );
+    const getTestDoc = (type = 'area', categoryAxes?: object[], valueAxes?: object[]) => ({
+      attributes: {
+        title: 'My Vis',
+        description: 'This is my super cool vis.',
+        visState: JSON.stringify({
+          type,
+          title: '[Flights] Delay Type',
+          params: {
+            type: type === 'horizontal_bar' ? 'histogram' : type,
+            categoryAxes: categoryAxes ?? [
+              {
+                labels: {},
+              },
+            ],
+            valueAxes: valueAxes ?? [
+              {
+                labels: {},
+              },
+            ],
+          },
+        }),
+      },
+    });
+
+    it('should return original doc if not area, line or histogram chart', () => {
+      const doc = getTestDoc('pie');
+      const migratedTestDoc = migrate(doc);
+      expect(migratedTestDoc).toEqual(doc);
+    });
+
+    it('should decorate existing docs with isVislibVis flag', () => {
+      const migratedTestDoc = migrate(getTestDoc());
+      const { isVislibVis } = JSON.parse(migratedTestDoc.attributes.visState).params;
+
+      expect(isVislibVis).toEqual(true);
+    });
+
+    describe('labels.filter', () => {
+      it('should keep existing categoryAxes labels.filter value', () => {
+        const migratedTestDoc = migrate(getTestDoc('area', [{ labels: { filter: false } }]));
+        const [result] = JSON.parse(migratedTestDoc.attributes.visState).params.categoryAxes;
+
+        expect(result.labels.filter).toEqual(false);
+      });
+
+      it('should keep existing valueAxes labels.filter value', () => {
+        const migratedTestDoc = migrate(
+          getTestDoc('area', undefined, [{ labels: { filter: true } }])
+        );
+        const [result] = JSON.parse(migratedTestDoc.attributes.visState).params.valueAxes;
+
+        expect(result.labels.filter).toEqual(true);
+      });
+
+      it('should set categoryAxes labels.filter to true for non horizontal_bar', () => {
+        const migratedTestDoc = migrate(getTestDoc());
+        const [result] = JSON.parse(migratedTestDoc.attributes.visState).params.categoryAxes;
+
+        expect(result.labels.filter).toEqual(true);
+      });
+
+      it('should set categoryAxes labels.filter to false for horizontal_bar', () => {
+        const migratedTestDoc = migrate(getTestDoc('horizontal_bar'));
+        const [result] = JSON.parse(migratedTestDoc.attributes.visState).params.categoryAxes;
+
+        expect(result.labels.filter).toEqual(false);
+      });
+
+      it('should set valueAxes labels.filter to false for non horizontal_bar', () => {
+        const migratedTestDoc = migrate(getTestDoc());
+        const [result] = JSON.parse(migratedTestDoc.attributes.visState).params.valueAxes;
+
+        expect(result.labels.filter).toEqual(false);
+      });
+
+      it('should set valueAxes labels.filter to true for horizontal_bar', () => {
+        const migratedTestDoc = migrate(getTestDoc('horizontal_bar'));
+        const [result] = JSON.parse(migratedTestDoc.attributes.visState).params.valueAxes;
+
+        expect(result.labels.filter).toEqual(true);
+      });
+    });
+  });
 });
diff --git a/src/plugins/visualizations/server/saved_objects/visualization_migrations.ts b/src/plugins/visualizations/server/saved_objects/visualization_migrations.ts
index bdd87e355499b..c625662ab7fe3 100644
--- a/src/plugins/visualizations/server/saved_objects/visualization_migrations.ts
+++ b/src/plugins/visualizations/server/saved_objects/visualization_migrations.ts
@@ -17,8 +17,11 @@
  * under the License.
  */
 
-import { SavedObjectMigrationFn } from 'kibana/server';
 import { cloneDeep, get, omit, has, flow } from 'lodash';
+
+import { SavedObjectMigrationFn } from 'kibana/server';
+
+import { ChartType } from '../../../vis_type_xy/common';
 import { DEFAULT_QUERY_LANGUAGE } from '../../../data/common';
 
 const migrateIndexPattern: SavedObjectMigrationFn<any, any> = (doc) => {
@@ -786,6 +789,69 @@ const enableDataTableVisToolbar: SavedObjectMigrationFn<any, any> = (doc) => {
   return doc;
 };
 
+/**
+ * Decorate axes with default label filter value
+ */
+const decorateAxes = <T extends { labels: { filter?: boolean } }>(
+  axes: T[],
+  fallback: boolean
+): T[] =>
+  axes.map((axis) => ({
+    ...axis,
+    labels: {
+      ...axis.labels,
+      filter: axis.labels.filter ?? fallback,
+    },
+  }));
+
+/**
+ * Migrate vislib bar, line and area charts to use new vis_type_xy plugin
+ */
+const migrateVislibAreaLineBarTypes: SavedObjectMigrationFn<any, any> = (doc) => {
+  const visStateJSON = get(doc, 'attributes.visState');
+  let visState;
+
+  if (visStateJSON) {
+    try {
+      visState = JSON.parse(visStateJSON);
+    } catch (e) {
+      // Let it go, the data is invalid and we'll leave it as is
+    }
+    if (
+      visState &&
+      [ChartType.Area, ChartType.Line, ChartType.Histogram].includes(visState?.params?.type)
+    ) {
+      const isHorizontalBar = visState.type === 'horizontal_bar';
+      const isLineOrArea =
+        visState?.params?.type === ChartType.Area || visState?.params?.type === ChartType.Line;
+      return {
+        ...doc,
+        attributes: {
+          ...doc.attributes,
+          visState: JSON.stringify({
+            ...visState,
+            params: {
+              ...visState.params,
+              categoryAxes:
+                visState.params.categoryAxes &&
+                decorateAxes(visState.params.categoryAxes, !isHorizontalBar),
+              valueAxes:
+                visState.params.valueAxes &&
+                decorateAxes(visState.params.valueAxes, isHorizontalBar),
+              isVislibVis: true,
+              detailedTooltip: true,
+              ...(isLineOrArea && {
+                fittingFunction: 'zero',
+              }),
+            },
+          }),
+        },
+      };
+    }
+  }
+  return doc;
+};
+
 export const visualizationSavedObjectTypeMigrations = {
   /**
    * We need to have this migration twice, once with a version prior to 7.0.0 once with a version
@@ -820,4 +886,5 @@ export const visualizationSavedObjectTypeMigrations = {
   '7.9.3': flow(migrateMatchAllQuery),
   '7.10.0': flow(migrateFilterRatioQuery, removeTSVBSearchSource),
   '7.11.0': flow(enableDataTableVisToolbar),
+  '7.12.0': flow(migrateVislibAreaLineBarTypes),
 };
diff --git a/test/api_integration/apis/saved_objects/find.js b/test/api_integration/apis/saved_objects/find.js
index 59a10379a9423..208343a04f0f2 100644
--- a/test/api_integration/apis/saved_objects/find.js
+++ b/test/api_integration/apis/saved_objects/find.js
@@ -195,9 +195,7 @@ export default function ({ getService }) {
                       title: 'Count of requests',
                     },
                     id: 'dd7caf20-9efd-11e7-acb3-3dab96693fab',
-                    migrationVersion: {
-                      visualization: '7.11.0',
-                    },
+                    migrationVersion: resp.body.saved_objects[0].migrationVersion,
                     namespaces: ['foo-ns'],
                     references: [
                       {
diff --git a/test/functional/apps/dashboard/bwc_shared_urls.js b/test/functional/apps/dashboard/bwc_shared_urls.ts
similarity index 97%
rename from test/functional/apps/dashboard/bwc_shared_urls.js
rename to test/functional/apps/dashboard/bwc_shared_urls.ts
index 75a4ee436ee8d..3b54b04ece6ac 100644
--- a/test/functional/apps/dashboard/bwc_shared_urls.js
+++ b/test/functional/apps/dashboard/bwc_shared_urls.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['dashboard', 'header']);
   const dashboardExpect = getService('dashboardExpect');
   const pieChart = getService('pieChart');
@@ -27,7 +29,7 @@ export default function ({ getService, getPageObjects }) {
   const log = getService('log');
   const queryBar = getService('queryBar');
 
-  let kibanaLegacyBaseUrl;
+  let kibanaLegacyBaseUrl: string;
 
   const urlQuery =
     `` +
diff --git a/test/functional/apps/dashboard/create_and_add_embeddables.js b/test/functional/apps/dashboard/create_and_add_embeddables.ts
similarity index 97%
rename from test/functional/apps/dashboard/create_and_add_embeddables.js
rename to test/functional/apps/dashboard/create_and_add_embeddables.ts
index c315828c594fa..d8b8a6f91fe31 100644
--- a/test/functional/apps/dashboard/create_and_add_embeddables.js
+++ b/test/functional/apps/dashboard/create_and_add_embeddables.ts
@@ -21,8 +21,9 @@ import expect from '@kbn/expect';
 
 import { VisualizeConstants } from '../../../../src/plugins/visualize/public/application/visualize_constants';
 import { VISUALIZE_ENABLE_LABS_SETTING } from '../../../../src/plugins/visualizations/common/constants';
+import { FtrProviderContext } from '../../ftr_provider_context';
 
-export default function ({ getService, getPageObjects }) {
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const PageObjects = getPageObjects(['dashboard', 'header', 'visualize', 'settings', 'common']);
   const browser = getService('browser');
diff --git a/test/functional/apps/dashboard/dashboard_clone.js b/test/functional/apps/dashboard/dashboard_clone.ts
similarity index 96%
rename from test/functional/apps/dashboard/dashboard_clone.js
rename to test/functional/apps/dashboard/dashboard_clone.ts
index 298cacef22dd5..92e8cf539786f 100644
--- a/test/functional/apps/dashboard/dashboard_clone.js
+++ b/test/functional/apps/dashboard/dashboard_clone.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const listingTable = getService('listingTable');
   const PageObjects = getPageObjects(['dashboard', 'header', 'common']);
diff --git a/test/functional/apps/dashboard/dashboard_filter_bar.js b/test/functional/apps/dashboard/dashboard_filter_bar.ts
similarity index 98%
rename from test/functional/apps/dashboard/dashboard_filter_bar.js
rename to test/functional/apps/dashboard/dashboard_filter_bar.ts
index cbef274b78e93..228e33cab0d8b 100644
--- a/test/functional/apps/dashboard/dashboard_filter_bar.js
+++ b/test/functional/apps/dashboard/dashboard_filter_bar.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const dashboardExpect = getService('dashboardExpect');
   const dashboardAddPanel = getService('dashboardAddPanel');
   const testSubjects = getService('testSubjects');
diff --git a/test/functional/apps/dashboard/dashboard_filtering.js b/test/functional/apps/dashboard/dashboard_filtering.ts
similarity index 98%
rename from test/functional/apps/dashboard/dashboard_filtering.js
rename to test/functional/apps/dashboard/dashboard_filtering.ts
index 45950963cfded..6b75b6707eb0a 100644
--- a/test/functional/apps/dashboard/dashboard_filtering.js
+++ b/test/functional/apps/dashboard/dashboard_filtering.ts
@@ -19,11 +19,13 @@
 
 import expect from '@kbn/expect';
 
+import { FtrProviderContext } from '../../ftr_provider_context';
+
 /**
  * Test the querying capabilities of dashboard, and make sure visualizations show the expected results, especially
  * with nested queries and filters on the visualizations themselves.
  */
-export default function ({ getService, getPageObjects }) {
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const dashboardExpect = getService('dashboardExpect');
   const pieChart = getService('pieChart');
   const queryBar = getService('queryBar');
diff --git a/test/functional/apps/dashboard/dashboard_grid.js b/test/functional/apps/dashboard/dashboard_grid.ts
similarity index 94%
rename from test/functional/apps/dashboard/dashboard_grid.js
rename to test/functional/apps/dashboard/dashboard_grid.ts
index 44e0123c49ae2..ced78f45e3ebe 100644
--- a/test/functional/apps/dashboard/dashboard_grid.js
+++ b/test/functional/apps/dashboard/dashboard_grid.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const browser = getService('browser');
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
diff --git a/test/functional/apps/dashboard/dashboard_listing.js b/test/functional/apps/dashboard/dashboard_listing.ts
similarity index 98%
rename from test/functional/apps/dashboard/dashboard_listing.js
rename to test/functional/apps/dashboard/dashboard_listing.ts
index 45c4d2bffbfa7..16e92cde15913 100644
--- a/test/functional/apps/dashboard/dashboard_listing.js
+++ b/test/functional/apps/dashboard/dashboard_listing.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['dashboard', 'header', 'common']);
   const browser = getService('browser');
   const listingTable = getService('listingTable');
diff --git a/test/functional/apps/dashboard/dashboard_options.js b/test/functional/apps/dashboard/dashboard_options.ts
similarity index 92%
rename from test/functional/apps/dashboard/dashboard_options.js
rename to test/functional/apps/dashboard/dashboard_options.ts
index 4e7c3f4cdc79b..817e56eb3c7d7 100644
--- a/test/functional/apps/dashboard/dashboard_options.js
+++ b/test/functional/apps/dashboard/dashboard_options.ts
@@ -19,14 +19,16 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
   const PageObjects = getPageObjects(['common', 'dashboard']);
 
   describe('dashboard data-shared attributes', () => {
-    let originalTitles = [];
+    let originalTitles: string[] = [];
 
     before(async () => {
       await esArchiver.load('dashboard/current/kibana');
diff --git a/test/functional/apps/dashboard/dashboard_query_bar.js b/test/functional/apps/dashboard/dashboard_query_bar.ts
similarity index 93%
rename from test/functional/apps/dashboard/dashboard_query_bar.js
rename to test/functional/apps/dashboard/dashboard_query_bar.ts
index 872507d00bdc4..9d65d7428cc78 100644
--- a/test/functional/apps/dashboard/dashboard_query_bar.js
+++ b/test/functional/apps/dashboard/dashboard_query_bar.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
   const pieChart = getService('pieChart');
diff --git a/test/functional/apps/dashboard/dashboard_save.js b/test/functional/apps/dashboard/dashboard_save.ts
similarity index 97%
rename from test/functional/apps/dashboard/dashboard_save.js
rename to test/functional/apps/dashboard/dashboard_save.ts
index fe4ad83d8050e..e414bca1b624e 100644
--- a/test/functional/apps/dashboard/dashboard_save.js
+++ b/test/functional/apps/dashboard/dashboard_save.ts
@@ -17,7 +17,9 @@
  * under the License.
  */
 
-export default function ({ getPageObjects, getService }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['dashboard', 'header']);
   const listingTable = getService('listingTable');
 
diff --git a/test/functional/apps/dashboard/dashboard_saved_query.js b/test/functional/apps/dashboard/dashboard_saved_query.ts
similarity index 97%
rename from test/functional/apps/dashboard/dashboard_saved_query.js
rename to test/functional/apps/dashboard/dashboard_saved_query.ts
index cbc9b7216c6c1..51990bd666424 100644
--- a/test/functional/apps/dashboard/dashboard_saved_query.js
+++ b/test/functional/apps/dashboard/dashboard_saved_query.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
   const PageObjects = getPageObjects(['common', 'dashboard', 'timePicker']);
@@ -82,12 +84,7 @@ export default function ({ getService, getPageObjects }) {
 
       it('allows saving changes to a currently loaded query via the saved query management component', async () => {
         await queryBar.setQuery('response:404');
-        await savedQueryManagementComponent.updateCurrentlyLoadedQuery(
-          'OkResponse',
-          '404 responses',
-          false,
-          false
-        );
+        await savedQueryManagementComponent.updateCurrentlyLoadedQuery('OkResponse', false, false);
         await savedQueryManagementComponent.savedQueryExistOrFail('OkResponse');
         await savedQueryManagementComponent.clearCurrentlyLoadedQuery();
         expect(await queryBar.getQueryString()).to.eql('');
diff --git a/test/functional/apps/dashboard/dashboard_snapshots.js b/test/functional/apps/dashboard/dashboard_snapshots.ts
similarity index 95%
rename from test/functional/apps/dashboard/dashboard_snapshots.js
rename to test/functional/apps/dashboard/dashboard_snapshots.ts
index 787e839aa08a5..414c191c94622 100644
--- a/test/functional/apps/dashboard/dashboard_snapshots.js
+++ b/test/functional/apps/dashboard/dashboard_snapshots.ts
@@ -19,7 +19,13 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects, updateBaselines }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({
+  getService,
+  getPageObjects,
+  updateBaselines,
+}: FtrProviderContext & { updateBaselines: boolean }) {
   const PageObjects = getPageObjects(['dashboard', 'header', 'visualize', 'common', 'timePicker']);
   const screenshot = getService('screenshots');
   const browser = getService('browser');
diff --git a/test/functional/apps/dashboard/dashboard_state.js b/test/functional/apps/dashboard/dashboard_state.ts
similarity index 87%
rename from test/functional/apps/dashboard/dashboard_state.js
rename to test/functional/apps/dashboard/dashboard_state.ts
index 3656c824394f4..48fec4efee5db 100644
--- a/test/functional/apps/dashboard/dashboard_state.js
+++ b/test/functional/apps/dashboard/dashboard_state.ts
@@ -20,10 +20,10 @@
 import expect from '@kbn/expect';
 
 import { PIE_CHART_VIS_NAME, AREA_CHART_VIS_NAME } from '../../page_objects/dashboard_page';
-
 import { DEFAULT_PANEL_WIDTH } from '../../../../src/plugins/dashboard/public/application/embeddable/dashboard_constants';
+import { FtrProviderContext } from '../../ftr_provider_context';
 
-export default function ({ getService, getPageObjects }) {
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects([
     'dashboard',
     'visualize',
@@ -39,13 +39,26 @@ export default function ({ getService, getPageObjects }) {
   const pieChart = getService('pieChart');
   const inspector = getService('inspector');
   const retry = getService('retry');
+  const elasticChart = getService('elasticChart');
+  const kibanaServer = getService('kibanaServer');
   const dashboardPanelActions = getService('dashboardPanelActions');
   const dashboardAddPanel = getService('dashboardAddPanel');
 
   describe('dashboard state', function describeIndexTests() {
+    // Used to track flag before and after reset
+    let isNewChartUiEnabled = false;
+
     before(async function () {
+      isNewChartUiEnabled = await PageObjects.visChart.isNewChartUiEnabled();
       await PageObjects.dashboard.initTests();
       await PageObjects.dashboard.preserveCrossAppState();
+
+      if (isNewChartUiEnabled) {
+        await kibanaServer.uiSettings.update({
+          'visualization:visualize:chartsLibrary': true,
+        });
+        await browser.refresh();
+      }
     });
 
     after(async function () {
@@ -58,18 +71,33 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.dashboard.clickNewDashboard();
       await PageObjects.timePicker.setHistoricalDataRange();
 
-      await dashboardAddPanel.addVisualization(AREA_CHART_VIS_NAME);
-      await PageObjects.dashboard.saveDashboard('Overridden colors');
+      const visName = await PageObjects.visChart.getExpectedValue(
+        AREA_CHART_VIS_NAME,
+        `${AREA_CHART_VIS_NAME} - chartsLibrary`
+      );
+      await dashboardAddPanel.addVisualization(visName);
+      const dashboarName = await PageObjects.visChart.getExpectedValue(
+        'Overridden colors',
+        'Overridden colors - chartsLibrary'
+      );
+      await PageObjects.dashboard.saveDashboard(dashboarName);
 
       await PageObjects.dashboard.switchToEditMode();
+      await queryBar.clickQuerySubmitButton();
 
-      await PageObjects.visChart.openLegendOptionColors('Count');
+      await PageObjects.visChart.openLegendOptionColors('Count', `[data-title="${visName}"]`);
       await PageObjects.visChart.selectNewLegendColorChoice('#EA6460');
 
-      await PageObjects.dashboard.saveDashboard('Overridden colors');
+      await PageObjects.dashboard.saveDashboard(dashboarName);
 
       await PageObjects.dashboard.gotoDashboardLandingPage();
-      await PageObjects.dashboard.loadSavedDashboard('Overridden colors');
+      await PageObjects.dashboard.loadSavedDashboard(dashboarName);
+
+      if (await PageObjects.visChart.isNewChartUiEnabled()) {
+        await elasticChart.setNewChartUiDebugFlag();
+        await queryBar.submitQuery();
+      }
+
       const colorChoiceRetained = await PageObjects.visChart.doesSelectedLegendColorExist(
         '#EA6460'
       );
@@ -231,7 +259,10 @@ export default function ({ getService, getPageObjects }) {
       describe('for embeddable config color parameters on a visualization', () => {
         it('updates a pie slice color on a soft refresh', async function () {
           await dashboardAddPanel.addVisualization(PIE_CHART_VIS_NAME);
-          await PageObjects.visChart.openLegendOptionColors('80,000');
+          await PageObjects.visChart.openLegendOptionColors(
+            '80,000',
+            `[data-title="${PIE_CHART_VIS_NAME}"]`
+          );
           await PageObjects.visChart.selectNewLegendColorChoice('#F9D9F9');
           const currentUrl = await browser.getCurrentUrl();
           const newUrl = currentUrl.replace('F9D9F9', 'FFFFFF');
diff --git a/test/functional/apps/dashboard/dashboard_time.js b/test/functional/apps/dashboard/dashboard_time.ts
similarity index 97%
rename from test/functional/apps/dashboard/dashboard_time.js
rename to test/functional/apps/dashboard/dashboard_time.ts
index 0420448302484..b2f7d89c29dfb 100644
--- a/test/functional/apps/dashboard/dashboard_time.js
+++ b/test/functional/apps/dashboard/dashboard_time.ts
@@ -19,9 +19,11 @@
 
 import expect from '@kbn/expect';
 
+import { FtrProviderContext } from '../../ftr_provider_context';
+
 const dashboardName = 'Dashboard Test Time';
 
-export default function ({ getPageObjects, getService }) {
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['common', 'dashboard', 'header', 'timePicker']);
   const browser = getService('browser');
 
diff --git a/test/functional/apps/dashboard/dashboard_time_picker.js b/test/functional/apps/dashboard/dashboard_time_picker.ts
similarity index 96%
rename from test/functional/apps/dashboard/dashboard_time_picker.js
rename to test/functional/apps/dashboard/dashboard_time_picker.ts
index 975fb5166a8e6..274a4355e26e2 100644
--- a/test/functional/apps/dashboard/dashboard_time_picker.js
+++ b/test/functional/apps/dashboard/dashboard_time_picker.ts
@@ -17,10 +17,12 @@
  * under the License.
  */
 
-import { PIE_CHART_VIS_NAME } from '../../page_objects/dashboard_page';
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { PIE_CHART_VIS_NAME } from '../../page_objects/dashboard_page';
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const dashboardExpect = getService('dashboardExpect');
   const pieChart = getService('pieChart');
   const dashboardVisualizations = getService('dashboardVisualizations');
diff --git a/test/functional/apps/dashboard/data_shared_attributes.js b/test/functional/apps/dashboard/data_shared_attributes.ts
similarity index 96%
rename from test/functional/apps/dashboard/data_shared_attributes.js
rename to test/functional/apps/dashboard/data_shared_attributes.ts
index 2793c47fc7dba..3fe1430743657 100644
--- a/test/functional/apps/dashboard/data_shared_attributes.js
+++ b/test/functional/apps/dashboard/data_shared_attributes.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
@@ -27,7 +29,7 @@ export default function ({ getService, getPageObjects }) {
   const PageObjects = getPageObjects(['common', 'dashboard', 'timePicker']);
 
   describe('dashboard data-shared attributes', function describeIndexTests() {
-    let originalPanelTitles;
+    let originalPanelTitles: string[];
 
     before(async () => {
       await esArchiver.load('dashboard/current/kibana');
diff --git a/test/functional/apps/dashboard/edit_embeddable_redirects.js b/test/functional/apps/dashboard/edit_embeddable_redirects.ts
similarity index 97%
rename from test/functional/apps/dashboard/edit_embeddable_redirects.js
rename to test/functional/apps/dashboard/edit_embeddable_redirects.ts
index fcc504ea24f31..da5b28dcc7f34 100644
--- a/test/functional/apps/dashboard/edit_embeddable_redirects.js
+++ b/test/functional/apps/dashboard/edit_embeddable_redirects.ts
@@ -18,7 +18,9 @@
  */
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['dashboard', 'header', 'visualize', 'settings', 'common']);
   const esArchiver = getService('esArchiver');
   const testSubjects = getService('testSubjects');
diff --git a/test/functional/apps/dashboard/embed_mode.js b/test/functional/apps/dashboard/embed_mode.ts
similarity index 96%
rename from test/functional/apps/dashboard/embed_mode.js
rename to test/functional/apps/dashboard/embed_mode.ts
index a1828143555b0..2611419a9c16d 100644
--- a/test/functional/apps/dashboard/embed_mode.js
+++ b/test/functional/apps/dashboard/embed_mode.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const retry = getService('retry');
   const esArchiver = getService('esArchiver');
diff --git a/test/functional/apps/dashboard/embeddable_rendering.js b/test/functional/apps/dashboard/embeddable_rendering.ts
similarity index 98%
rename from test/functional/apps/dashboard/embeddable_rendering.js
rename to test/functional/apps/dashboard/embeddable_rendering.ts
index 77fe28a01f86d..bc302c855b3c9 100644
--- a/test/functional/apps/dashboard/embeddable_rendering.js
+++ b/test/functional/apps/dashboard/embeddable_rendering.ts
@@ -19,6 +19,8 @@
 
 import expect from '@kbn/expect';
 
+import { FtrProviderContext } from '../../ftr_provider_context';
+
 /**
  * This tests both that one of each visualization can be added to a dashboard (as opposed to opening an existing
  * dashboard with the visualizations already on it), as well as conducts a rough type of snapshot testing by checking
@@ -27,7 +29,7 @@ import expect from '@kbn/expect';
  * broke?).  The upside is that this offers very good coverage with a minimal time investment.
  */
 
-export default function ({ getService, getPageObjects }) {
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const find = getService('find');
   const browser = getService('browser');
   const esArchiver = getService('esArchiver');
@@ -44,7 +46,7 @@ export default function ({ getService, getPageObjects }) {
     'discover',
     'timePicker',
   ]);
-  let visNames = [];
+  let visNames: string[] = [];
 
   const expectAllDataRenders = async () => {
     await pieChart.expectPieSliceCount(16);
diff --git a/test/functional/apps/dashboard/empty_dashboard.js b/test/functional/apps/dashboard/empty_dashboard.ts
similarity index 95%
rename from test/functional/apps/dashboard/empty_dashboard.js
rename to test/functional/apps/dashboard/empty_dashboard.ts
index 7f13aca438842..0a290eb01e531 100644
--- a/test/functional/apps/dashboard/empty_dashboard.js
+++ b/test/functional/apps/dashboard/empty_dashboard.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
diff --git a/test/functional/apps/dashboard/full_screen_mode.js b/test/functional/apps/dashboard/full_screen_mode.ts
similarity index 96%
rename from test/functional/apps/dashboard/full_screen_mode.js
rename to test/functional/apps/dashboard/full_screen_mode.ts
index c0a2d49b1c202..02c8996b44189 100644
--- a/test/functional/apps/dashboard/full_screen_mode.js
+++ b/test/functional/apps/dashboard/full_screen_mode.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
diff --git a/test/functional/apps/dashboard/index.js b/test/functional/apps/dashboard/index.ts
similarity index 85%
rename from test/functional/apps/dashboard/index.js
rename to test/functional/apps/dashboard/index.ts
index b62907dfe2c24..f2dba4785ea05 100644
--- a/test/functional/apps/dashboard/index.js
+++ b/test/functional/apps/dashboard/index.ts
@@ -17,9 +17,12 @@
  * under the License.
  */
 
-export default function ({ getService, loadTestFile }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, loadTestFile }: FtrProviderContext) {
   const browser = getService('browser');
   const esArchiver = getService('esArchiver');
+  const kibanaServer = getService('kibanaServer');
 
   async function loadCurrentData() {
     await browser.setWindowSize(1300, 900);
@@ -114,5 +117,29 @@ export default function ({ getService, loadTestFile }) {
       loadTestFile(require.resolve('./dashboard_listing'));
       loadTestFile(require.resolve('./dashboard_clone'));
     });
+
+    // TODO: Remove when vislib is removed
+    // https://github.com/elastic/kibana/issues/56143
+    describe('new charts library', function () {
+      this.tags('ciGroup6');
+
+      before(async () => {
+        await loadLogstash();
+        await kibanaServer.uiSettings.update({
+          'visualization:visualize:chartsLibrary': true,
+        });
+        await browser.refresh();
+      });
+
+      after(async () => {
+        await unloadLogstash();
+        await kibanaServer.uiSettings.update({
+          'visualization:visualize:chartsLibrary': false,
+        });
+        await browser.refresh();
+      });
+
+      loadTestFile(require.resolve('./dashboard_state'));
+    });
   });
 }
diff --git a/test/functional/apps/dashboard/panel_expand_toggle.js b/test/functional/apps/dashboard/panel_expand_toggle.ts
similarity index 95%
rename from test/functional/apps/dashboard/panel_expand_toggle.js
rename to test/functional/apps/dashboard/panel_expand_toggle.ts
index 7fe3f87918e57..5ae9c6402ebf1 100644
--- a/test/functional/apps/dashboard/panel_expand_toggle.js
+++ b/test/functional/apps/dashboard/panel_expand_toggle.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const browser = getService('browser');
   const esArchiver = getService('esArchiver');
diff --git a/test/functional/apps/dashboard/time_zones.js b/test/functional/apps/dashboard/time_zones.ts
similarity index 95%
rename from test/functional/apps/dashboard/time_zones.js
rename to test/functional/apps/dashboard/time_zones.ts
index 800bedb132978..a3e7efbd9e9ae 100644
--- a/test/functional/apps/dashboard/time_zones.js
+++ b/test/functional/apps/dashboard/time_zones.ts
@@ -20,7 +20,9 @@
 import path from 'path';
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const pieChart = getService('pieChart');
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
diff --git a/test/functional/apps/dashboard/view_edit.js b/test/functional/apps/dashboard/view_edit.ts
similarity index 97%
rename from test/functional/apps/dashboard/view_edit.js
rename to test/functional/apps/dashboard/view_edit.ts
index a6d81da131751..b0e5d0b08dba2 100644
--- a/test/functional/apps/dashboard/view_edit.js
+++ b/test/functional/apps/dashboard/view_edit.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const queryBar = getService('queryBar');
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
@@ -174,7 +176,7 @@ export default function ({ getService, getPageObjects }) {
             'Sep 19, 2013 @ 06:31:44.000',
             'Sep 19, 2013 @ 06:31:44.000'
           );
-          await PageObjects.dashboard.saveDashboard(dashboardName, true);
+          await PageObjects.dashboard.saveDashboard(dashboardName);
           await PageObjects.dashboard.switchToEditMode();
           await PageObjects.timePicker.setAbsoluteRange(
             'Sep 19, 2015 @ 06:31:44.000',
@@ -201,7 +203,7 @@ export default function ({ getService, getPageObjects }) {
       it('when time changed is stored with dashboard', async function () {
         await PageObjects.dashboard.gotoDashboardEditMode(dashboardName);
         await PageObjects.timePicker.setDefaultDataRange();
-        await PageObjects.dashboard.saveDashboard(dashboardName, true);
+        await PageObjects.dashboard.saveDashboard(dashboardName);
         await PageObjects.dashboard.switchToEditMode();
         await PageObjects.timePicker.setAbsoluteRange(
           'Sep 19, 2013 @ 06:31:44.000',
diff --git a/test/functional/apps/discover/_date_nanos.js b/test/functional/apps/discover/_date_nanos.ts
similarity index 93%
rename from test/functional/apps/discover/_date_nanos.js
rename to test/functional/apps/discover/_date_nanos.ts
index 1b5c033d67a43..2047f33278040 100644
--- a/test/functional/apps/discover/_date_nanos.js
+++ b/test/functional/apps/discover/_date_nanos.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
   const PageObjects = getPageObjects(['common', 'timePicker', 'discover']);
   const kibanaServer = getService('kibanaServer');
diff --git a/test/functional/apps/discover/_date_nanos_mixed.js b/test/functional/apps/discover/_date_nanos_mixed.ts
similarity index 94%
rename from test/functional/apps/discover/_date_nanos_mixed.js
rename to test/functional/apps/discover/_date_nanos_mixed.ts
index 63509d85afd3a..525d2afda67f8 100644
--- a/test/functional/apps/discover/_date_nanos_mixed.js
+++ b/test/functional/apps/discover/_date_nanos_mixed.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
   const PageObjects = getPageObjects(['common', 'timePicker', 'discover']);
   const kibanaServer = getService('kibanaServer');
diff --git a/test/functional/apps/discover/_discover.js b/test/functional/apps/discover/_discover.ts
similarity index 97%
rename from test/functional/apps/discover/_discover.js
rename to test/functional/apps/discover/_discover.ts
index 78197cd8d66ff..e52c33078029a 100644
--- a/test/functional/apps/discover/_discover.js
+++ b/test/functional/apps/discover/_discover.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const browser = getService('browser');
   const log = getService('log');
   const retry = getService('retry');
@@ -120,7 +122,7 @@ export default function ({ getService, getPageObjects }) {
           const rowData = await PageObjects.discover.getDocTableField(1);
           log.debug(`The first timestamp value in doc table: ${rowData}`);
           const dateParsed = Date.parse(rowData);
-          //compare against the parsed date of Sep 20, 2015 @ 17:30:00.000 and Sep 20, 2015 @ 23:30:00.000
+          // compare against the parsed date of Sep 20, 2015 @ 17:30:00.000 and Sep 20, 2015 @ 23:30:00.000
           return dateParsed >= 1442770200000 && dateParsed <= 1442791800000;
         });
       });
@@ -329,7 +331,7 @@ export default function ({ getService, getPageObjects }) {
           log.debug(
             `Timestamp before: ${requestTimestampBefore}, Timestamp after: ${requestTimestampAfter}`
           );
-          return requestTimestampAfter && requestTimestampBefore !== requestTimestampAfter;
+          return Boolean(requestTimestampAfter) && requestTimestampBefore !== requestTimestampAfter;
         });
       });
 
diff --git a/test/functional/apps/discover/_doc_navigation.js b/test/functional/apps/discover/_doc_navigation.ts
similarity index 95%
rename from test/functional/apps/discover/_doc_navigation.js
rename to test/functional/apps/discover/_doc_navigation.ts
index 59c4371b95d80..76612b255ac23 100644
--- a/test/functional/apps/discover/_doc_navigation.js
+++ b/test/functional/apps/discover/_doc_navigation.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const docTable = getService('docTable');
   const filterBar = getService('filterBar');
   const testSubjects = getService('testSubjects');
diff --git a/test/functional/apps/discover/_field_data.js b/test/functional/apps/discover/_field_data.ts
similarity index 96%
rename from test/functional/apps/discover/_field_data.js
rename to test/functional/apps/discover/_field_data.ts
index d45b8f4841cb6..e08325a81a3e8 100644
--- a/test/functional/apps/discover/_field_data.js
+++ b/test/functional/apps/discover/_field_data.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
diff --git a/test/functional/apps/discover/_filter_editor.js b/test/functional/apps/discover/_filter_editor.ts
similarity index 95%
rename from test/functional/apps/discover/_filter_editor.js
rename to test/functional/apps/discover/_filter_editor.ts
index afb59481b23e2..74222e4d7666f 100644
--- a/test/functional/apps/discover/_filter_editor.js
+++ b/test/functional/apps/discover/_filter_editor.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const retry = getService('retry');
   const esArchiver = getService('esArchiver');
diff --git a/test/functional/apps/discover/_inspector.js b/test/functional/apps/discover/_inspector.ts
similarity index 89%
rename from test/functional/apps/discover/_inspector.js
rename to test/functional/apps/discover/_inspector.ts
index 900ad28e14e69..2b25ced72ffe6 100644
--- a/test/functional/apps/discover/_inspector.js
+++ b/test/functional/apps/discover/_inspector.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['common', 'visualize', 'timePicker']);
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
@@ -27,10 +29,15 @@ export default function ({ getService, getPageObjects }) {
 
   const STATS_ROW_NAME_INDEX = 0;
   const STATS_ROW_VALUE_INDEX = 1;
-  function getHitCount(requestStats) {
+  function getHitCount(requestStats: string[][]): string | undefined {
     const hitsCountStatsRow = requestStats.find((statsRow) => {
       return statsRow[STATS_ROW_NAME_INDEX] === 'Hits (total)';
     });
+
+    if (!hitsCountStatsRow) {
+      return;
+    }
+
     return hitsCountStatsRow[STATS_ROW_VALUE_INDEX];
   }
 
diff --git a/test/functional/apps/discover/_large_string.js b/test/functional/apps/discover/_large_string.ts
similarity index 96%
rename from test/functional/apps/discover/_large_string.js
rename to test/functional/apps/discover/_large_string.ts
index 6142f042c1148..fe5613a4e3f19 100644
--- a/test/functional/apps/discover/_large_string.js
+++ b/test/functional/apps/discover/_large_string.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
   const log = getService('log');
   const retry = getService('retry');
diff --git a/test/functional/apps/discover/_saved_queries.js b/test/functional/apps/discover/_saved_queries.ts
similarity index 97%
rename from test/functional/apps/discover/_saved_queries.js
rename to test/functional/apps/discover/_saved_queries.ts
index 6b423bf6eeb1d..445018bcebd23 100644
--- a/test/functional/apps/discover/_saved_queries.js
+++ b/test/functional/apps/discover/_saved_queries.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const log = getService('log');
   const esArchiver = getService('esArchiver');
@@ -103,12 +105,7 @@ export default function ({ getService, getPageObjects }) {
 
       it('allows saving changes to a currently loaded query via the saved query management component', async () => {
         await queryBar.setQuery('response:404');
-        await savedQueryManagementComponent.updateCurrentlyLoadedQuery(
-          'OkResponse',
-          '404 responses',
-          false,
-          false
-        );
+        await savedQueryManagementComponent.updateCurrentlyLoadedQuery('OkResponse', false, false);
         await savedQueryManagementComponent.savedQueryExistOrFail('OkResponse');
         await savedQueryManagementComponent.clearCurrentlyLoadedQuery();
         expect(await queryBar.getQueryString()).to.eql('');
diff --git a/test/functional/apps/discover/_shared_links.js b/test/functional/apps/discover/_shared_links.ts
similarity index 92%
rename from test/functional/apps/discover/_shared_links.js
rename to test/functional/apps/discover/_shared_links.ts
index 60058ead1101e..a676878382865 100644
--- a/test/functional/apps/discover/_shared_links.js
+++ b/test/functional/apps/discover/_shared_links.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const log = getService('log');
   const esArchiver = getService('esArchiver');
@@ -30,9 +32,9 @@ export default function ({ getService, getPageObjects }) {
   const deployment = getService('deployment');
 
   describe('shared links', function describeIndexTests() {
-    let baseUrl;
+    let baseUrl: string;
 
-    async function setup({ storeStateInSessionStorage }) {
+    async function setup({ storeStateInSessionStorage }: { storeStateInSessionStorage: boolean }) {
       baseUrl = deployment.getHostPort();
       log.debug('baseUrl = ' + baseUrl);
       // browsers don't show the ':port' if it's 80 or 443 so we have to
@@ -58,21 +60,19 @@ export default function ({ getService, getPageObjects }) {
 
       await PageObjects.timePicker.setDefaultAbsoluteRange();
 
-      //After hiding the time picker, we need to wait for
-      //the refresh button to hide before clicking the share button
+      // After hiding the time picker, we need to wait for
+      // the refresh button to hide before clicking the share button
       await PageObjects.common.sleep(1000);
 
       await PageObjects.share.clickShareTopNavButton();
 
       return async () => {
-        await kibanaServer.uiSettings.replace({
-          'state:storeInSessionStorage': undefined,
-        });
+        await kibanaServer.uiSettings.unset('state:storeInSessionStorage');
       };
     }
 
     describe('shared links with state in query', async () => {
-      let teardown;
+      let teardown: () => Promise<void>;
       before(async function () {
         teardown = await setup({ storeStateInSessionStorage: false });
       });
@@ -125,7 +125,7 @@ export default function ({ getService, getPageObjects }) {
     });
 
     describe('shared links with state in sessionStorage', async () => {
-      let teardown;
+      let teardown: () => Promise<void>;
       before(async function () {
         teardown = await setup({ storeStateInSessionStorage: true });
       });
@@ -137,7 +137,7 @@ export default function ({ getService, getPageObjects }) {
       it('should allow for copying the snapshot URL as a short URL and should open it', async function () {
         const re = new RegExp(baseUrl + '/goto/[0-9a-f]{32}$');
         await PageObjects.share.checkShortenUrl();
-        let actualUrl;
+        let actualUrl: string = '';
         await retry.try(async () => {
           actualUrl = await PageObjects.share.getSharedUrl();
           expect(actualUrl).to.match(re);
diff --git a/test/functional/apps/discover/_source_filters.js b/test/functional/apps/discover/_source_filters.ts
similarity index 88%
rename from test/functional/apps/discover/_source_filters.js
rename to test/functional/apps/discover/_source_filters.ts
index b483f4cd67112..0af7c0ade79ba 100644
--- a/test/functional/apps/discover/_source_filters.js
+++ b/test/functional/apps/discover/_source_filters.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
@@ -43,8 +45,8 @@ export default function ({ getService, getPageObjects }) {
 
       await PageObjects.timePicker.setDefaultAbsoluteRange();
 
-      //After hiding the time picker, we need to wait for
-      //the refresh button to hide before clicking the share button
+      // After hiding the time picker, we need to wait for
+      // the refresh button to hide before clicking the share button
       await PageObjects.common.sleep(1000);
     });
 
diff --git a/test/functional/apps/discover/index.js b/test/functional/apps/discover/index.ts
similarity index 93%
rename from test/functional/apps/discover/index.js
rename to test/functional/apps/discover/index.ts
index bd6b7a806fbb3..c13529b7d1b43 100644
--- a/test/functional/apps/discover/index.js
+++ b/test/functional/apps/discover/index.ts
@@ -17,7 +17,9 @@
  * under the License.
  */
 
-export default function ({ getService, loadTestFile }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, loadTestFile }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
   const browser = getService('browser');
 
diff --git a/test/functional/apps/getting_started/_shakespeare.js b/test/functional/apps/getting_started/_shakespeare.ts
similarity index 89%
rename from test/functional/apps/getting_started/_shakespeare.js
rename to test/functional/apps/getting_started/_shakespeare.ts
index a648dae99158d..fa7d932aca1e8 100644
--- a/test/functional/apps/getting_started/_shakespeare.js
+++ b/test/functional/apps/getting_started/_shakespeare.ts
@@ -19,11 +19,17 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+// https://www.elastic.co/guide/en/kibana/current/tutorial-load-dataset.html
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const esArchiver = getService('esArchiver');
   const retry = getService('retry');
   const security = getService('security');
+  const browser = getService('browser');
+  const kibanaServer = getService('kibanaServer');
   const PageObjects = getPageObjects([
     'console',
     'common',
@@ -42,16 +48,26 @@ export default function ({ getService, getPageObjects }) {
     // So to modify a metric or aggregation tests need to keep track of the
     // order they are added.
     let aggIndex = 1;
+    // Used to track flag before and after reset
+    let isNewChartUiEnabled = false;
 
     before(async function () {
       log.debug(
         'Load empty_kibana and Shakespeare Getting Started data\n' +
           'https://www.elastic.co/guide/en/kibana/current/tutorial-load-dataset.html'
       );
+      isNewChartUiEnabled = await PageObjects.visChart.isNewChartUiEnabled();
       await security.testUser.setRoles(['kibana_admin', 'test_shakespeare_reader']);
       await esArchiver.load('empty_kibana', { skipExisting: true });
       log.debug('Load shakespeare data');
       await esArchiver.loadIfNeeded('getting_started/shakespeare');
+
+      if (isNewChartUiEnabled) {
+        await kibanaServer.uiSettings.update({
+          'visualization:visualize:chartsLibrary': true,
+        });
+        await browser.refresh();
+      }
     });
 
     after(async () => {
@@ -79,6 +95,10 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.visualize.clickNewSearch('shakespeare');
       await PageObjects.visChart.waitForVisualization();
 
+      // Remove refresh click when vislib is removed
+      // https://github.com/elastic/kibana/issues/56143
+      await PageObjects.visualize.clickRefresh();
+
       const expectedChartValues = [111396];
       await retry.try(async () => {
         const data = await PageObjects.visChart.getBarChartData('Count');
@@ -228,8 +248,14 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.visEditor.clickGo();
 
       // same values as previous test except scaled down by the 50 for Y-Axis min
-      const expectedChartValues = [21, 15, 12, 5, 5];
-      const expectedChartValues2 = [127, 56, 103, 82, 112];
+      const expectedChartValues = await PageObjects.visChart.getExpectedValue(
+        [21, 15, 12, 5, 5],
+        [71, 65, 62, 55, 55] // no scaled values in elastic-charts
+      );
+      const expectedChartValues2 = await PageObjects.visChart.getExpectedValue(
+        [127, 56, 103, 82, 112],
+        [177, 106, 153, 132, 162] // no scaled values in elastic-charts
+      );
       await retry.try(async () => {
         const data = await PageObjects.visChart.getBarChartData('Speaking Parts');
         const data2 = await PageObjects.visChart.getBarChartData('Max Speaking Parts');
diff --git a/test/functional/apps/getting_started/index.ts b/test/functional/apps/getting_started/index.ts
new file mode 100644
index 0000000000000..4cef16a47571e
--- /dev/null
+++ b/test/functional/apps/getting_started/index.ts
@@ -0,0 +1,56 @@
+/*
+ * 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 { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, loadTestFile }: FtrProviderContext) {
+  const browser = getService('browser');
+  const kibanaServer = getService('kibanaServer');
+
+  describe('Getting Started ', function () {
+    this.tags(['ciGroup6']);
+
+    before(async function () {
+      await browser.setWindowSize(1200, 800);
+    });
+
+    // TODO: Remove when vislib is removed
+    describe('chartsLibrary', function () {
+      before(async () => {
+        await kibanaServer.uiSettings.update({
+          'visualization:visualize:chartsLibrary': true,
+        });
+        await browser.refresh();
+      });
+
+      after(async () => {
+        await kibanaServer.uiSettings.update({
+          'visualization:visualize:chartsLibrary': false,
+        });
+        await browser.refresh();
+      });
+
+      loadTestFile(require.resolve('./_shakespeare'));
+    });
+
+    describe('', () => {
+      loadTestFile(require.resolve('./_shakespeare'));
+    });
+  });
+}
diff --git a/test/functional/apps/visualize/_area_chart.js b/test/functional/apps/visualize/_area_chart.ts
similarity index 90%
rename from test/functional/apps/visualize/_area_chart.js
rename to test/functional/apps/visualize/_area_chart.ts
index b943e070e1768..ab08fbb3870b4 100644
--- a/test/functional/apps/visualize/_area_chart.js
+++ b/test/functional/apps/visualize/_area_chart.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const find = getService('find');
   const inspector = getService('inspector');
@@ -36,9 +38,13 @@ export default function ({ getService, getPageObjects }) {
     'timePicker',
   ]);
 
-  describe('area charts', function indexPatternCreation() {
-    const vizName1 = 'Visualization AreaChart Name Test';
+  const getVizName = async () =>
+    await PageObjects.visChart.getExpectedValue(
+      'Visualization AreaChart Name Test',
+      'Visualization AreaChart Name Test - Charts library'
+    );
 
+  describe('area charts', function indexPatternCreation() {
     const initAreaChart = async () => {
       log.debug('navigateToApp visualize');
       await PageObjects.visualize.navigateToNewAggBasedVisualization();
@@ -58,7 +64,7 @@ export default function ({ getService, getPageObjects }) {
       const intervalValue = await PageObjects.visEditor.getInterval();
       log.debug('intervalValue = ' + intervalValue);
       expect(intervalValue[0]).to.be('Auto');
-      return PageObjects.visEditor.clickGo();
+      await PageObjects.visEditor.clickGo();
     };
 
     before(async function () {
@@ -75,22 +81,22 @@ export default function ({ getService, getPageObjects }) {
     });
 
     it('should save and load with special characters', async function () {
-      const vizNamewithSpecialChars = vizName1 + '/?&=%';
+      const vizNamewithSpecialChars = (await getVizName()) + '/?&=%';
       await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(
         vizNamewithSpecialChars
       );
     });
 
     it('should save and load with non-ascii characters', async function () {
-      const vizNamewithSpecialChars = `${vizName1} with Umlaut ä`;
+      const vizNamewithSpecialChars = `${await getVizName()} with Umlaut ä`;
       await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(
         vizNamewithSpecialChars
       );
     });
 
     it('should save and load', async function () {
-      await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1);
-      await PageObjects.visualize.loadSavedVisualization(vizName1);
+      await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(await getVizName());
+      await PageObjects.visualize.loadSavedVisualization(await getVizName());
       await PageObjects.visChart.waitForVisualization();
     });
 
@@ -99,13 +105,14 @@ export default function ({ getService, getPageObjects }) {
     });
 
     it('should show correct chart', async function () {
-      const xAxisLabels = [
-        '2015-09-20 00:00',
-        '2015-09-21 00:00',
-        '2015-09-22 00:00',
-        '2015-09-23 00:00',
-      ];
-      const yAxisLabels = ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400', '1,600'];
+      const xAxisLabels = await PageObjects.visChart.getExpectedValue(
+        ['2015-09-20 00:00', '2015-09-21 00:00', '2015-09-22 00:00', '2015-09-23 00:00'],
+        ['2015-09-19 12:00', '2015-09-20 12:00', '2015-09-21 12:00', '2015-09-22 12:00']
+      );
+      const yAxisLabels = await PageObjects.visChart.getExpectedValue(
+        ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400', '1,600'],
+        ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+      );
       const expectedAreaChartData = [
         37,
         202,
@@ -292,8 +299,9 @@ export default function ({ getService, getPageObjects }) {
       });
 
       after(async () => {
-        const url = await browser.getCurrentUrl();
-        const embedUrl = url.split('/visualize#').pop().replace('embed=true', '');
+        const url = (await browser.getCurrentUrl()) ?? '';
+        const lastValue = url.split('/visualize#').pop() ?? '';
+        const embedUrl = lastValue.replace('embed=true', '');
         await PageObjects.common.navigateToUrl('visualize', embedUrl, { useActualUrl: true });
       });
     });
@@ -309,8 +317,8 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabelsAsNumbers();
-        const minLabel = 2;
-        const maxLabel = 5000;
+        const minLabel = await PageObjects.visChart.getExpectedValue(2, 1);
+        const maxLabel = await PageObjects.visChart.getExpectedValue(5000, 900);
         const numberOfLabels = 10;
         expect(labels.length).to.be.greaterThan(numberOfLabels);
         expect(labels[0]).to.eql(minLabel);
@@ -321,8 +329,8 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabelsAsNumbers();
-        const minLabel = 2;
-        const maxLabel = 5000;
+        const minLabel = await PageObjects.visChart.getExpectedValue(2, 1);
+        const maxLabel = await PageObjects.visChart.getExpectedValue(5000, 900);
         const numberOfLabels = 10;
         expect(labels.length).to.be.greaterThan(numberOfLabels);
         expect(labels[0]).to.eql(minLabel);
@@ -334,17 +342,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
-        const expectedLabels = [
-          '0',
-          '200',
-          '400',
-          '600',
-          '800',
-          '1,000',
-          '1,200',
-          '1,400',
-          '1,600',
-        ];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400', '1,600'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
 
@@ -352,7 +353,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
-        const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400'];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['200', '400', '600', '800', '1,000', '1,200', '1,400'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
 
@@ -362,17 +366,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
         log.debug(labels);
-        const expectedLabels = [
-          '0',
-          '200',
-          '400',
-          '600',
-          '800',
-          '1,000',
-          '1,200',
-          '1,400',
-          '1,600',
-        ];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400', '1,600'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
 
@@ -380,7 +377,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
-        const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400'];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['200', '400', '600', '800', '1,000', '1,200', '1,400'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
     });
@@ -388,6 +388,7 @@ export default function ({ getService, getPageObjects }) {
       // that dataset spans from Oct 26, 2013 @ 06:10:17.855	to Apr 18, 2019 @ 11:38:12.790
       const fromTime = 'Jan 1, 2013 @ 00:00:00.000';
       const toTime = 'Jan 1, 2020 @ 00:00:00.000';
+
       it('should render a yearly area with 12 svg paths', async () => {
         log.debug('navigateToApp visualize');
         await PageObjects.visualize.navigateToNewAggBasedVisualization();
diff --git a/test/functional/apps/visualize/_chart_types.ts b/test/functional/apps/visualize/_chart_types.ts
index b404b74039be9..3d2f97dbfe8d0 100644
--- a/test/functional/apps/visualize/_chart_types.ts
+++ b/test/functional/apps/visualize/_chart_types.ts
@@ -19,6 +19,7 @@
 
 import _ from 'lodash';
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
diff --git a/test/functional/apps/visualize/_data_table.ts b/test/functional/apps/visualize/_data_table.ts
index ab5ee31f8b00f..4c122dc706e23 100644
--- a/test/functional/apps/visualize/_data_table.ts
+++ b/test/functional/apps/visualize/_data_table.ts
@@ -18,6 +18,7 @@
  */
 
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
@@ -26,7 +27,13 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const retry = getService('retry');
   const filterBar = getService('filterBar');
-  const PageObjects = getPageObjects(['visualize', 'timePicker', 'visEditor', 'visChart']);
+  const PageObjects = getPageObjects([
+    'visualize',
+    'timePicker',
+    'visEditor',
+    'visChart',
+    'common',
+  ]);
 
   describe('data table', function indexPatternCreation() {
     const vizName1 = 'Visualization DataTable';
diff --git a/test/functional/apps/visualize/_data_table_nontimeindex.ts b/test/functional/apps/visualize/_data_table_nontimeindex.ts
index 247107a07a550..b0c667f95468f 100644
--- a/test/functional/apps/visualize/_data_table_nontimeindex.ts
+++ b/test/functional/apps/visualize/_data_table_nontimeindex.ts
@@ -18,6 +18,7 @@
  */
 
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
diff --git a/test/functional/apps/visualize/_data_table_notimeindex_filters.ts b/test/functional/apps/visualize/_data_table_notimeindex_filters.ts
index d847d3bf4435c..2bf13f7294e51 100644
--- a/test/functional/apps/visualize/_data_table_notimeindex_filters.ts
+++ b/test/functional/apps/visualize/_data_table_notimeindex_filters.ts
@@ -18,6 +18,7 @@
  */
 
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
diff --git a/test/functional/apps/visualize/_embedding_chart.ts b/test/functional/apps/visualize/_embedding_chart.ts
index 9a8bb7dde442d..d549c8c1d297f 100644
--- a/test/functional/apps/visualize/_embedding_chart.ts
+++ b/test/functional/apps/visualize/_embedding_chart.ts
@@ -18,6 +18,7 @@
  */
 
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
diff --git a/test/functional/apps/visualize/_experimental_vis.js b/test/functional/apps/visualize/_experimental_vis.ts
similarity index 93%
rename from test/functional/apps/visualize/_experimental_vis.js
rename to test/functional/apps/visualize/_experimental_vis.ts
index c85d66eed12d2..26f01fe7d8bb6 100644
--- a/test/functional/apps/visualize/_experimental_vis.js
+++ b/test/functional/apps/visualize/_experimental_vis.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default ({ getService, getPageObjects }) => {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const PageObjects = getPageObjects(['visualize']);
 
@@ -44,7 +46,7 @@ export default ({ getService, getPageObjects }) => {
         // Select a index-pattern/search if this vis requires it
         await PageObjects.visualize.selectVisSourceIfRequired();
         // Check that the beta banner is there and state that this is beta
-        const info = await PageObjects.visualize.getBetaInfo();
+        const info = await PageObjects.visualize.getExperimentalInfo();
         expect(await info.getVisibleText()).to.contain('beta');
       });
 
@@ -73,4 +75,4 @@ export default ({ getService, getPageObjects }) => {
       });
     });
   });
-};
+}
diff --git a/test/functional/apps/visualize/_gauge_chart.js b/test/functional/apps/visualize/_gauge_chart.ts
similarity index 95%
rename from test/functional/apps/visualize/_gauge_chart.js
rename to test/functional/apps/visualize/_gauge_chart.ts
index 2339595997901..165cd2bad31cc 100644
--- a/test/functional/apps/visualize/_gauge_chart.js
+++ b/test/functional/apps/visualize/_gauge_chart.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const retry = getService('retry');
   const inspector = getService('inspector');
@@ -80,7 +82,7 @@ export default function ({ getService, getPageObjects }) {
         log.debug('Field = machine.os.raw');
         await PageObjects.visEditor.selectField('machine.os.raw');
         log.debug('Size = 4');
-        await PageObjects.visEditor.setSize('4');
+        await PageObjects.visEditor.setSize(4);
         await PageObjects.visEditor.clickGo();
       });
 
@@ -111,7 +113,7 @@ export default function ({ getService, getPageObjects }) {
 
         await PageObjects.visEditor.selectAggregation('Terms');
         await PageObjects.visEditor.selectField('machine.os.raw');
-        await PageObjects.visEditor.setSize('1');
+        await PageObjects.visEditor.setSize(1);
         await PageObjects.visEditor.clickBucket('Metric', 'metrics');
         await PageObjects.visEditor.selectAggregation('Min', 'metrics');
         await PageObjects.visEditor.selectField('bytes', 'metrics');
diff --git a/test/functional/apps/visualize/_heatmap_chart.js b/test/functional/apps/visualize/_heatmap_chart.ts
similarity index 97%
rename from test/functional/apps/visualize/_heatmap_chart.js
rename to test/functional/apps/visualize/_heatmap_chart.ts
index e48173c290372..252a6d60a8727 100644
--- a/test/functional/apps/visualize/_heatmap_chart.js
+++ b/test/functional/apps/visualize/_heatmap_chart.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const inspector = getService('inspector');
   const PageObjects = getPageObjects(['visualize', 'visEditor', 'visChart', 'timePicker']);
diff --git a/test/functional/apps/visualize/_histogram_request_start.ts b/test/functional/apps/visualize/_histogram_request_start.ts
index d51a90c997e66..de5ab3a23a227 100644
--- a/test/functional/apps/visualize/_histogram_request_start.ts
+++ b/test/functional/apps/visualize/_histogram_request_start.ts
@@ -18,6 +18,7 @@
  */
 
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
diff --git a/test/functional/apps/visualize/_inspector.js b/test/functional/apps/visualize/_inspector.ts
similarity index 96%
rename from test/functional/apps/visualize/_inspector.js
rename to test/functional/apps/visualize/_inspector.ts
index 426e61d9636ad..366d72f58ab79 100644
--- a/test/functional/apps/visualize/_inspector.js
+++ b/test/functional/apps/visualize/_inspector.ts
@@ -17,7 +17,9 @@
  * under the License.
  */
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const inspector = getService('inspector');
   const filterBar = getService('filterBar');
diff --git a/test/functional/apps/visualize/_lab_mode.js b/test/functional/apps/visualize/_lab_mode.ts
similarity index 94%
rename from test/functional/apps/visualize/_lab_mode.js
rename to test/functional/apps/visualize/_lab_mode.ts
index 27c149b9e0e0a..6c5afda9bb67c 100644
--- a/test/functional/apps/visualize/_lab_mode.js
+++ b/test/functional/apps/visualize/_lab_mode.ts
@@ -20,7 +20,9 @@
 import expect from '@kbn/expect';
 import { VISUALIZE_ENABLE_LABS_SETTING } from '../../../../src/plugins/visualizations/common/constants';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const PageObjects = getPageObjects(['common', 'header', 'discover', 'settings']);
 
diff --git a/test/functional/apps/visualize/_line_chart.js b/test/functional/apps/visualize/_line_chart_split_chart.ts
similarity index 93%
rename from test/functional/apps/visualize/_line_chart.js
rename to test/functional/apps/visualize/_line_chart_split_chart.ts
index 8c6dbd3461a4f..4941932a4b694 100644
--- a/test/functional/apps/visualize/_line_chart.js
+++ b/test/functional/apps/visualize/_line_chart_split_chart.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const inspector = getService('inspector');
   const retry = getService('retry');
@@ -32,9 +34,7 @@ export default function ({ getService, getPageObjects }) {
     'timePicker',
   ]);
 
-  describe('line charts', function () {
-    const vizName1 = 'Visualization LineChart';
-
+  describe('line charts - split chart', function () {
     const initLineChart = async function () {
       log.debug('navigateToApp visualize');
       await PageObjects.visualize.navigateToNewAggBasedVisualization();
@@ -70,19 +70,18 @@ export default function ({ getService, getPageObjects }) {
       log.debug('data=' + data);
       const tolerance = 10; // the y-axis scale is 10000 so 10 is 0.1%
       for (let x = 0; x < data.length; x++) {
+        const expected = Number(expectedChartData[x].split(' ')[1].replace(',', ''));
         log.debug(
           'x=' +
             x +
             " expectedChartData[x].split(' ')[1] = " +
-            expectedChartData[x].split(' ')[1].replace(',', '') +
+            expected +
             '  data[x]=' +
             data[x] +
             ' diff=' +
-            Math.abs(expectedChartData[x].split(' ')[1].replace(',', '') - data[x])
+            Math.abs(expected - data[x])
         );
-        expect(
-          Math.abs(expectedChartData[x].split(' ')[1].replace(',', '') - data[x]) < tolerance
-        ).to.be.ok();
+        expect(Math.abs(expected - data[x]) < tolerance).to.be.ok();
       }
       log.debug('Done');
     });
@@ -104,19 +103,18 @@ export default function ({ getService, getPageObjects }) {
         log.debug('data=' + data);
         const tolerance = 10; // the y-axis scale is 10000 so 10 is 0.1%
         for (let x = 0; x < data.length; x++) {
+          const expected = Number(expectedChartData[x].split(' ')[1].replace(',', ''));
           log.debug(
             'x=' +
               x +
               " expectedChartData[x].split(' ')[1] = " +
-              expectedChartData[x].split(' ')[1].replace(',', '') +
+              expected +
               '  data[x]=' +
               data[x] +
               ' diff=' +
-              Math.abs(expectedChartData[x].split(' ')[1].replace(',', '') - data[x])
+              Math.abs(expected - data[x])
           );
-          expect(
-            Math.abs(expectedChartData[x].split(' ')[1].replace(',', '') - data[x]) < tolerance
-          ).to.be.ok();
+          expect(Math.abs(expected - data[x]) < tolerance).to.be.ok();
         }
         log.debug('Done');
       });
@@ -168,9 +166,13 @@ export default function ({ getService, getPageObjects }) {
     });
 
     it('should be able to save and load', async function () {
-      await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1);
+      const vizName = await PageObjects.visChart.getExpectedValue(
+        'Visualization Line split chart',
+        'Visualization Line split chart - chart library'
+      );
+      await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName);
 
-      await PageObjects.visualize.loadSavedVisualization(vizName1);
+      await PageObjects.visualize.loadSavedVisualization(vizName);
       await PageObjects.visChart.waitForVisualization();
     });
 
@@ -211,6 +213,7 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = ['0', '2,000', '4,000', '6,000', '8,000', '10,000'];
+
         expect(labels).to.eql(expectedLabels);
       });
 
diff --git a/test/functional/apps/visualize/_line_chart_split_series.ts b/test/functional/apps/visualize/_line_chart_split_series.ts
new file mode 100644
index 0000000000000..78332819530ce
--- /dev/null
+++ b/test/functional/apps/visualize/_line_chart_split_series.ts
@@ -0,0 +1,355 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import expect from '@kbn/expect';
+
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const log = getService('log');
+  const inspector = getService('inspector');
+  const retry = getService('retry');
+  const testSubjects = getService('testSubjects');
+  const PageObjects = getPageObjects([
+    'common',
+    'visualize',
+    'visEditor',
+    'visChart',
+    'timePicker',
+  ]);
+
+  describe('line charts - split series', function () {
+    const initLineChart = async function () {
+      log.debug('navigateToApp visualize');
+      await PageObjects.visualize.navigateToNewAggBasedVisualization();
+      log.debug('clickLineChart');
+      await PageObjects.visualize.clickLineChart();
+      await PageObjects.visualize.clickNewSearch();
+      await PageObjects.timePicker.setDefaultAbsoluteRange();
+      log.debug('Bucket = Split chart');
+      await PageObjects.visEditor.clickBucket('Split series');
+      log.debug('Aggregation = Terms');
+      await PageObjects.visEditor.selectAggregation('Terms');
+      log.debug('Field = extension');
+      await PageObjects.visEditor.selectField('extension.raw');
+      await PageObjects.visEditor.clickGo();
+    };
+
+    before(initLineChart);
+
+    afterEach(async () => {
+      await inspector.close();
+    });
+
+    it('should show correct chart', async function () {
+      // this test only verifies the numerical part of this data
+      // it could also check the legend to verify the extensions
+      const expectedChartData = ['jpg 9,109', 'css 2,159', 'png 1,373', 'gif 918', 'php 445'];
+
+      // sleep a bit before trying to get the chart data
+      await PageObjects.common.sleep(3000);
+      const data = await PageObjects.visChart.getLineChartData();
+      log.debug('data=' + data);
+      const tolerance = 10; // the y-axis scale is 10000 so 10 is 0.1%
+      for (let x = 0; x < data.length; x++) {
+        const expected = Number(expectedChartData[x].split(' ')[1].replace(',', ''));
+        log.debug(
+          'x=' +
+            x +
+            " expectedChartData[x].split(' ')[1] = " +
+            expected +
+            '  data[x]=' +
+            data[x] +
+            ' diff=' +
+            Math.abs(expected - data[x])
+        );
+        expect(Math.abs(expected - data[x]) < tolerance).to.be.ok();
+      }
+      log.debug('Done');
+    });
+
+    it('should have inspector enabled', async function () {
+      await inspector.expectIsEnabled();
+    });
+
+    it('should show correct chart order by Term', async function () {
+      // this test only verifies the numerical part of this data
+      // it could also check the legend to verify the extensions
+      const expectedChartData = ['png 1,373', 'php 445', 'jpg 9,109', 'gif 918', 'css 2,159'];
+
+      log.debug('Order By = Term');
+      await PageObjects.visEditor.selectOrderByMetric(2, '_key');
+      await PageObjects.visEditor.clickGo();
+      await retry.try(async function () {
+        const data = await PageObjects.visChart.getLineChartData();
+        log.debug('data=' + data);
+        const tolerance = 10; // the y-axis scale is 10000 so 10 is 0.1%
+        for (let x = 0; x < data.length; x++) {
+          const expected = Number(expectedChartData[x].split(' ')[1].replace(',', ''));
+          log.debug(
+            'x=' +
+              x +
+              " expectedChartData[x].split(' ')[1] = " +
+              expected +
+              '  data[x]=' +
+              data[x] +
+              ' diff=' +
+              Math.abs(expected - data[x])
+          );
+          expect(Math.abs(expected - data[x]) < tolerance).to.be.ok();
+        }
+        log.debug('Done');
+      });
+    });
+
+    it('should show correct data, ordered by Term', async function () {
+      const expectedChartData = [
+        ['png', '1,373'],
+        ['php', '445'],
+        ['jpg', '9,109'],
+        ['gif', '918'],
+        ['css', '2,159'],
+      ];
+
+      await inspector.open();
+      await inspector.expectTableData(expectedChartData);
+    });
+
+    it('should request new data when autofresh is enabled', async () => {
+      const intervalS = 3;
+      await PageObjects.timePicker.startAutoRefresh(intervalS);
+
+      // check inspector panel request stats for timestamp
+      await inspector.open();
+      await inspector.openInspectorRequestsView();
+      const requestStatsBefore = await inspector.getTableData();
+      const requestTimestampBefore = requestStatsBefore.filter((r) =>
+        r[0].includes('Request timestamp')
+      )[0][1];
+
+      // pause to allow time for autorefresh to fire another request
+      await PageObjects.common.sleep(intervalS * 1000 * 1.5);
+
+      // get the latest timestamp from request stats
+      const requestStatsAfter = await inspector.getTableData();
+      const requestTimestampAfter = requestStatsAfter.filter((r) =>
+        r[0].includes('Request timestamp')
+      )[0][1];
+      log.debug(
+        `Timestamp before: ${requestTimestampBefore}, Timestamp after: ${requestTimestampAfter}`
+      );
+
+      // cleanup
+      await inspector.close();
+      await PageObjects.timePicker.pauseAutoRefresh();
+
+      // if autorefresh is working, timestamps should be different
+      expect(requestTimestampBefore).not.to.equal(requestTimestampAfter);
+    });
+
+    it('should be able to save and load', async function () {
+      const vizName = await PageObjects.visChart.getExpectedValue(
+        'Visualization Line split series',
+        'Visualization Line split series - chart library'
+      );
+
+      await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName);
+
+      await PageObjects.visualize.loadSavedVisualization(vizName);
+      await PageObjects.visChart.waitForVisualization();
+    });
+
+    describe('switch between Y axis scale types', () => {
+      before(initLineChart);
+      const axisId = 'ValueAxis-1';
+
+      it('should show ticks on selecting log scale', async () => {
+        await PageObjects.visEditor.clickMetricsAndAxes();
+        await PageObjects.visEditor.clickYAxisOptions(axisId);
+        await PageObjects.visEditor.selectYAxisScaleType(axisId, 'log');
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabelsAsNumbers();
+        const minLabel = await PageObjects.visChart.getExpectedValue(2, 1);
+        const maxLabel = await PageObjects.visChart.getExpectedValue(5000, 900);
+        const numberOfLabels = 10;
+        expect(labels.length).to.be.greaterThan(numberOfLabels);
+        expect(labels[0]).to.eql(minLabel);
+        expect(labels[labels.length - 1]).to.be.greaterThan(maxLabel);
+      });
+
+      it('should show filtered ticks on selecting log scale', async () => {
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabelsAsNumbers();
+        const minLabel = await PageObjects.visChart.getExpectedValue(2, 1);
+        const maxLabel = await PageObjects.visChart.getExpectedValue(5000, 900);
+        const numberOfLabels = 10;
+        expect(labels.length).to.be.greaterThan(numberOfLabels);
+        expect(labels[0]).to.eql(minLabel);
+        expect(labels[labels.length - 1]).to.be.greaterThan(maxLabel);
+      });
+
+      it('should show ticks on selecting square root scale', async () => {
+        await PageObjects.visEditor.selectYAxisScaleType(axisId, 'square root');
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          [
+            '0',
+            '1,000',
+            '2,000',
+            '3,000',
+            '4,000',
+            '5,000',
+            '6,000',
+            '7,000',
+            '8,000',
+            '9,000',
+            '10,000',
+          ],
+          ['0', '1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000']
+        );
+        expect(labels).to.eql(expectedLabels);
+      });
+
+      it('should show filtered ticks on selecting square root scale', async () => {
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000'],
+          ['0', '1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000']
+        );
+        expect(labels).to.eql(expectedLabels);
+      });
+
+      it('should show ticks on selecting linear scale', async () => {
+        await PageObjects.visEditor.selectYAxisScaleType(axisId, 'linear');
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
+        log.debug(labels);
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          [
+            '0',
+            '1,000',
+            '2,000',
+            '3,000',
+            '4,000',
+            '5,000',
+            '6,000',
+            '7,000',
+            '8,000',
+            '9,000',
+            '10,000',
+          ],
+          ['0', '1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000']
+        );
+        expect(labels).to.eql(expectedLabels);
+      });
+
+      it('should show filtered ticks on selecting linear scale', async () => {
+        await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
+        await PageObjects.visEditor.clickGo();
+        const labels = await PageObjects.visChart.getYAxisLabels();
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000'],
+          ['0', '1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000']
+        );
+        expect(labels).to.eql(expectedLabels);
+      });
+    });
+
+    describe('pipeline aggregations', () => {
+      before(async () => {
+        log.debug('navigateToApp visualize');
+        await PageObjects.visualize.navigateToNewAggBasedVisualization();
+        log.debug('clickLineChart');
+        await PageObjects.visualize.clickLineChart();
+        await PageObjects.visualize.clickNewSearch();
+        await PageObjects.timePicker.setDefaultAbsoluteRange();
+      });
+
+      describe('parent pipeline', () => {
+        it('should have an error if bucket is not selected', async () => {
+          await PageObjects.visEditor.clickMetricEditor();
+          log.debug('Metrics agg = Serial diff');
+          await PageObjects.visEditor.selectAggregation('Serial diff', 'metrics');
+          await testSubjects.existOrFail('bucketsError');
+        });
+
+        it('should apply with selected bucket', async () => {
+          log.debug('Bucket = X-axis');
+          await PageObjects.visEditor.clickBucket('X-axis');
+          log.debug('Aggregation = Date Histogram');
+          await PageObjects.visEditor.selectAggregation('Date Histogram');
+          await PageObjects.visEditor.clickGo();
+          const title = await PageObjects.visChart.getYAxisTitle();
+          expect(title).to.be('Serial Diff of Count');
+        });
+
+        it('should change y-axis label to custom', async () => {
+          log.debug('set custom label of y-axis to "Custom"');
+          await PageObjects.visEditor.setCustomLabel('Custom', 1);
+          await PageObjects.visEditor.clickGo();
+          const title = await PageObjects.visChart.getYAxisTitle();
+          expect(title).to.be('Custom');
+        });
+
+        it('should have advanced accordion and json input', async () => {
+          await testSubjects.click('advancedParams-1');
+          await testSubjects.existOrFail('advancedParams-1 > codeEditorContainer');
+        });
+      });
+
+      describe('sibling pipeline', () => {
+        it('should apply with selected bucket', async () => {
+          log.debug('Metrics agg = Average Bucket');
+          await PageObjects.visEditor.selectAggregation('Average Bucket', 'metrics');
+          await PageObjects.visEditor.clickGo();
+          const title = await PageObjects.visChart.getYAxisTitle();
+          expect(title).to.be('Overall Average of Count');
+        });
+
+        it('should change sub metric custom label and calculate y-axis title', async () => {
+          log.debug('set custom label of sub metric to "Cats"');
+          await PageObjects.visEditor.setCustomLabel('Cats', '1-metric');
+          await PageObjects.visEditor.clickGo();
+          const title = await PageObjects.visChart.getYAxisTitle();
+          expect(title).to.be('Overall Average of Cats');
+        });
+
+        it('should outer custom label', async () => {
+          log.debug('set custom label to "Custom"');
+          await PageObjects.visEditor.setCustomLabel('Custom', 1);
+          await PageObjects.visEditor.clickGo();
+          const title = await PageObjects.visChart.getYAxisTitle();
+          expect(title).to.be('Custom');
+        });
+
+        it('should have advanced accordion and json input', async () => {
+          await testSubjects.click('advancedParams-1');
+          await testSubjects.existOrFail('advancedParams-1 > codeEditorContainer');
+        });
+      });
+    });
+  });
+}
diff --git a/test/functional/apps/visualize/_linked_saved_searches.ts b/test/functional/apps/visualize/_linked_saved_searches.ts
index e7402de399e41..d1d8c0f1eebe7 100644
--- a/test/functional/apps/visualize/_linked_saved_searches.ts
+++ b/test/functional/apps/visualize/_linked_saved_searches.ts
@@ -18,7 +18,9 @@
  */
 
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
+
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const browser = getService('browser');
   const filterBar = getService('filterBar');
diff --git a/test/functional/apps/visualize/_markdown_vis.js b/test/functional/apps/visualize/_markdown_vis.ts
similarity index 95%
rename from test/functional/apps/visualize/_markdown_vis.js
rename to test/functional/apps/visualize/_markdown_vis.ts
index 21b472edecd41..07757cdf887c6 100644
--- a/test/functional/apps/visualize/_markdown_vis.js
+++ b/test/functional/apps/visualize/_markdown_vis.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getPageObjects, getService }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['visualize', 'visEditor', 'visChart', 'header']);
   const find = getService('find');
   const inspector = getService('inspector');
diff --git a/test/functional/apps/visualize/_metric_chart.js b/test/functional/apps/visualize/_metric_chart.ts
similarity index 98%
rename from test/functional/apps/visualize/_metric_chart.js
rename to test/functional/apps/visualize/_metric_chart.ts
index 483a0688d6aca..2af01fbe65f92 100644
--- a/test/functional/apps/visualize/_metric_chart.js
+++ b/test/functional/apps/visualize/_metric_chart.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const retry = getService('retry');
   const filterBar = getService('filterBar');
diff --git a/test/functional/apps/visualize/_pie_chart.js b/test/functional/apps/visualize/_pie_chart.ts
similarity index 99%
rename from test/functional/apps/visualize/_pie_chart.js
rename to test/functional/apps/visualize/_pie_chart.ts
index eef0f90005a43..f79f9ea826362 100644
--- a/test/functional/apps/visualize/_pie_chart.js
+++ b/test/functional/apps/visualize/_pie_chart.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const filterBar = getService('filterBar');
   const pieChart = getService('pieChart');
diff --git a/test/functional/apps/visualize/_point_series_options.js b/test/functional/apps/visualize/_point_series_options.ts
similarity index 82%
rename from test/functional/apps/visualize/_point_series_options.js
rename to test/functional/apps/visualize/_point_series_options.ts
index a671cb82ab70f..9ad3dbe583a7a 100644
--- a/test/functional/apps/visualize/_point_series_options.js
+++ b/test/functional/apps/visualize/_point_series_options.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const retry = getService('retry');
   const kibanaServer = getService('kibanaServer');
@@ -31,6 +33,7 @@ export default function ({ getService, getPageObjects }) {
     'timePicker',
     'visEditor',
     'visChart',
+    'common',
   ]);
   const inspector = getService('inspector');
 
@@ -154,7 +157,7 @@ export default function ({ getService, getPageObjects }) {
       });
 
       it('should put secondary axis on the right', async function () {
-        const length = await PageObjects.visChart.getRightValueAxes();
+        const length = await PageObjects.visChart.getRightValueAxesCount();
         expect(length).to.be(1);
       });
     });
@@ -163,7 +166,7 @@ export default function ({ getService, getPageObjects }) {
       it('should change average series type to histogram', async function () {
         await PageObjects.visEditor.setSeriesType(1, 'histogram');
         await PageObjects.visEditor.clickGo();
-        const length = await PageObjects.visChart.getHistogramSeries();
+        const length = await PageObjects.visChart.getHistogramSeriesCount();
         expect(length).to.be(1);
       });
     });
@@ -177,7 +180,8 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.toggleGridCategoryLines();
         await PageObjects.visEditor.clickGo();
         const gridLines = await PageObjects.visChart.getGridLines();
-        expect(gridLines.length).to.be(9);
+        const expectedCount = await PageObjects.visChart.getExpectedValue(9, 5);
+        expect(gridLines.length).to.be(expectedCount);
         gridLines.forEach((gridLine) => {
           expect(gridLine.y).to.be(0);
         });
@@ -188,7 +192,8 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.toggleGridCategoryLines();
         await PageObjects.visEditor.clickGo();
         const gridLines = await PageObjects.visChart.getGridLines();
-        expect(gridLines.length).to.be(9);
+        const expectedCount = await PageObjects.visChart.getExpectedValue(9, 8);
+        expect(gridLines.length).to.be(expectedCount);
         gridLines.forEach((gridLine) => {
           expect(gridLine.x).to.be(0);
         });
@@ -269,17 +274,30 @@ export default function ({ getService, getPageObjects }) {
       });
     });
 
-    describe('timezones', function () {
-      const expectedLabels = ['2015-09-20 00:00', '2015-09-21 00:00', '2015-09-22 00:00'];
-
+    describe('timezones', async function () {
       it('should show round labels in default timezone', async function () {
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['2015-09-20 00:00', '2015-09-21 00:00', '2015-09-22 00:00'],
+          ['2015-09-19 12:00', '2015-09-20 12:00', '2015-09-21 12:00', '2015-09-22 12:00']
+        );
         await initChart();
         const labels = await PageObjects.visChart.getXAxisLabels();
         expect(labels.join()).to.contain(expectedLabels.join());
       });
 
       it('should show round labels in different timezone', async function () {
-        await kibanaServer.uiSettings.replace({ 'dateFormat:tz': 'America/Phoenix' });
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['2015-09-20 00:00', '2015-09-21 00:00', '2015-09-22 00:00'],
+          [
+            '2015-09-19 12:00',
+            '2015-09-20 06:00',
+            '2015-09-21 00:00',
+            '2015-09-21 18:00',
+            '2015-09-22 12:00',
+          ]
+        );
+
+        await kibanaServer.uiSettings.update({ 'dateFormat:tz': 'America/Phoenix' });
         await browser.refresh();
         await PageObjects.header.awaitKibanaChrome();
         await initChart();
@@ -296,13 +314,34 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.timePicker.setAbsoluteRange(fromTime, toTime);
         await PageObjects.visChart.waitForRenderingCount();
 
-        await retry.waitFor('wait for x-axis labels to match expected for Phoenix', async () => {
-          const labels = await PageObjects.visChart.getXAxisLabels();
-          log.debug(`Labels: ${labels}`);
-          return (
-            labels.toString() === ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00'].toString()
-          );
-        });
+        await retry.waitForWithTimeout(
+          'wait for x-axis labels to match expected for Phoenix',
+          5000,
+          async () => {
+            const labels = (await PageObjects.visChart.getXAxisLabels()) ?? '';
+            log.debug(`Labels: ${labels}`);
+
+            const xLabels = await PageObjects.visChart.getExpectedValue(
+              ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
+              [
+                '09:30',
+                '10:00',
+                '10:30',
+                '11:00',
+                '11:30',
+                '12:00',
+                '12:30',
+                '13:00',
+                '13:30',
+                '14:00',
+                '14:30',
+                '15:00',
+                '15:30',
+              ]
+            );
+            return labels.toString() === xLabels.toString();
+          }
+        );
 
         const expectedTableData = [
           ['09:05', '13', '13,463,070,562.462'],
@@ -330,7 +369,7 @@ export default function ({ getService, getPageObjects }) {
         await inspector.expectTableData(expectedTableData);
         await inspector.close();
         log.debug("set 'dateFormat:tz': 'UTC'");
-        await kibanaServer.uiSettings.replace({
+        await kibanaServer.uiSettings.update({
           'dateFormat:tz': 'UTC',
           defaultIndex: 'logstash-*',
         });
@@ -339,16 +378,38 @@ export default function ({ getService, getPageObjects }) {
         await browser.refresh();
         // wait some time before trying to check for rendering count
         await PageObjects.header.awaitKibanaChrome();
+        await PageObjects.visualize.clickRefresh();
         await PageObjects.visChart.waitForRenderingCount();
         log.debug('getXAxisLabels');
 
-        await retry.waitFor('wait for x-axis labels to match expected for UTC', async () => {
-          const labels2 = await PageObjects.visChart.getXAxisLabels();
-          log.debug(`Labels: ${labels2}`);
-          return (
-            labels2.toString() === ['17:00', '18:00', '19:00', '20:00', '21:00', '22:00'].toString()
-          );
-        });
+        await retry.waitForWithTimeout(
+          'wait for x-axis labels to match expected for UTC',
+          5000,
+          async () => {
+            const labels2 = (await PageObjects.visChart.getXAxisLabels()) ?? '';
+            log.debug(`Labels: ${labels2}`);
+
+            const xLabels2 = await PageObjects.visChart.getExpectedValue(
+              ['17:00', '18:00', '19:00', '20:00', '21:00', '22:00'],
+              [
+                '16:30',
+                '17:00',
+                '17:30',
+                '18:00',
+                '18:30',
+                '19:00',
+                '19:30',
+                '20:00',
+                '20:30',
+                '21:00',
+                '21:30',
+                '22:00',
+                '22:30',
+              ]
+            );
+            return labels2.toString() === xLabels2.toString();
+          }
+        );
 
         // the expected inspector data is the same but with timestamps shifted +7 hours
         const expectedTableData2 = [
@@ -386,7 +447,7 @@ export default function ({ getService, getPageObjects }) {
         // for details see https://github.com/elastic/kibana/issues/63037
         if (timezone !== 'UTC') {
           log.debug("set 'dateFormat:tz': 'UTC'");
-          await kibanaServer.uiSettings.replace({ 'dateFormat:tz': 'UTC' });
+          await kibanaServer.uiSettings.update({ 'dateFormat:tz': 'UTC' });
         }
       });
     });
diff --git a/test/functional/apps/visualize/_region_map.js b/test/functional/apps/visualize/_region_map.ts
similarity index 95%
rename from test/functional/apps/visualize/_region_map.js
rename to test/functional/apps/visualize/_region_map.ts
index eee73d2fe76f9..45cb554f02771 100644
--- a/test/functional/apps/visualize/_region_map.js
+++ b/test/functional/apps/visualize/_region_map.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   describe('vector map', function () {
     const inspector = getService('inspector');
     const log = getService('log');
@@ -67,7 +69,7 @@ export default function ({ getService, getPageObjects }) {
           'World Countries'
         );
 
-        //ensure all fields are there
+        // ensure all fields are there
         await PageObjects.visEditor.setSelectByOptionText(
           'regionMapOptionsSelectJoinField',
           'ISO 3166-1 alpha-2 code'
diff --git a/test/functional/apps/visualize/_shared_item.js b/test/functional/apps/visualize/_shared_item.ts
similarity index 93%
rename from test/functional/apps/visualize/_shared_item.js
rename to test/functional/apps/visualize/_shared_item.ts
index 679f558e018b6..097ce9edad612 100644
--- a/test/functional/apps/visualize/_shared_item.js
+++ b/test/functional/apps/visualize/_shared_item.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const retry = getService('retry');
   const PageObjects = getPageObjects(['common', 'visualize']);
diff --git a/test/functional/apps/visualize/_tag_cloud.js b/test/functional/apps/visualize/_tag_cloud.ts
similarity index 98%
rename from test/functional/apps/visualize/_tag_cloud.js
rename to test/functional/apps/visualize/_tag_cloud.ts
index 7b1671aaeb2f2..4f3ec81af1c61 100644
--- a/test/functional/apps/visualize/_tag_cloud.js
+++ b/test/functional/apps/visualize/_tag_cloud.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const filterBar = getService('filterBar');
   const log = getService('log');
   const inspector = getService('inspector');
diff --git a/test/functional/apps/visualize/_tile_map.js b/test/functional/apps/visualize/_tile_map.ts
similarity index 94%
rename from test/functional/apps/visualize/_tile_map.js
rename to test/functional/apps/visualize/_tile_map.ts
index 3ae72fe73a5fd..a4e7671da2ac3 100644
--- a/test/functional/apps/visualize/_tile_map.js
+++ b/test/functional/apps/visualize/_tile_map.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const retry = getService('retry');
   const inspector = getService('inspector');
@@ -46,11 +48,11 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visualize.clickTileMap();
         await PageObjects.visualize.clickNewSearch();
         await PageObjects.timePicker.setDefaultAbsoluteRange();
-        //do not configure aggs
+        // do not configure aggs
       });
 
       it('should be able to zoom in twice', async () => {
-        //should not throw
+        // should not throw
         await PageObjects.tileMap.clickMapZoomIn();
         await PageObjects.tileMap.clickMapZoomIn();
       });
@@ -77,21 +79,25 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.clickGo();
       });
 
+      type SampleTableData = Array<string | { lat: number; lon: number }>;
+
       /**
        * manually compare data due to possible small difference in numbers. This is browser dependent.
        */
-      function compareTableData(actual, expected) {
+      function compareTableData(actual: string[][], expected: SampleTableData[]) {
         log.debug('comparing expected: ', expected);
         log.debug('with actual: ', actual);
 
         const roundedValues = actual.map((row) => {
           // Parse last element in each row as JSON and floor the lat/long value
           const coords = JSON.parse(row[row.length - 1]);
-          row[row.length - 1] = {
-            lat: Math.floor(parseFloat(coords.lat)),
-            lon: Math.floor(parseFloat(coords.lon)),
-          };
-          return row;
+          return [
+            ...row.slice(0, -1),
+            {
+              lat: Math.floor(parseFloat(coords.lat)),
+              lon: Math.floor(parseFloat(coords.lon)),
+            },
+          ];
         });
 
         expect(roundedValues).to.eql(expected);
@@ -111,9 +117,9 @@ export default function ({ getService, getPageObjects }) {
             ['-', 'f', '187', { lat: 45, lon: -83 }],
             ['-', '8', '108', { lat: 18, lon: -157 }],
           ];
-          //level 1
+          // level 1
           await PageObjects.tileMap.clickMapZoomOut();
-          //level 0
+          // level 0
           await PageObjects.tileMap.clickMapZoomOut();
 
           await inspector.open();
diff --git a/test/functional/apps/visualize/_tsvb_chart.ts b/test/functional/apps/visualize/_tsvb_chart.ts
index 6ded88cd50b39..c8d7cf99a5799 100644
--- a/test/functional/apps/visualize/_tsvb_chart.ts
+++ b/test/functional/apps/visualize/_tsvb_chart.ts
@@ -18,6 +18,7 @@
  */
 
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
diff --git a/test/functional/apps/visualize/_tsvb_markdown.ts b/test/functional/apps/visualize/_tsvb_markdown.ts
index 4f12a45cf5f6b..b010d6db20c06 100644
--- a/test/functional/apps/visualize/_tsvb_markdown.ts
+++ b/test/functional/apps/visualize/_tsvb_markdown.ts
@@ -18,6 +18,7 @@
  */
 
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getPageObjects, getService }: FtrProviderContext) {
diff --git a/test/functional/apps/visualize/_tsvb_table.ts b/test/functional/apps/visualize/_tsvb_table.ts
index 9c21103c85d0b..695bee5152f12 100644
--- a/test/functional/apps/visualize/_tsvb_table.ts
+++ b/test/functional/apps/visualize/_tsvb_table.ts
@@ -18,6 +18,7 @@
  */
 
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getPageObjects }: FtrProviderContext) {
diff --git a/test/functional/apps/visualize/_tsvb_time_series.ts b/test/functional/apps/visualize/_tsvb_time_series.ts
index d4a079a38c814..bd776708623fc 100644
--- a/test/functional/apps/visualize/_tsvb_time_series.ts
+++ b/test/functional/apps/visualize/_tsvb_time_series.ts
@@ -17,6 +17,7 @@
  * under the License.
  */
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getPageObjects, getService }: FtrProviderContext) {
diff --git a/test/functional/apps/visualize/_vega_chart.ts b/test/functional/apps/visualize/_vega_chart.ts
index b59d9590bb62a..b8023efb05ab0 100644
--- a/test/functional/apps/visualize/_vega_chart.ts
+++ b/test/functional/apps/visualize/_vega_chart.ts
@@ -18,6 +18,7 @@
  */
 import { unzip } from 'lodash';
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 const getTestSpec = (expression: string) => `
diff --git a/test/functional/apps/visualize/_vertical_bar_chart.js b/test/functional/apps/visualize/_vertical_bar_chart.ts
similarity index 93%
rename from test/functional/apps/visualize/_vertical_bar_chart.js
rename to test/functional/apps/visualize/_vertical_bar_chart.ts
index 5ecbf3f720ee6..f642c79646c81 100644
--- a/test/functional/apps/visualize/_vertical_bar_chart.js
+++ b/test/functional/apps/visualize/_vertical_bar_chart.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const retry = getService('retry');
   const inspector = getService('inspector');
@@ -354,8 +356,9 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabelsAsNumbers();
-        const minLabel = 2;
-        const maxLabel = 5000;
+
+        const minLabel = await PageObjects.visChart.getExpectedValue(2, 1);
+        const maxLabel = await PageObjects.visChart.getExpectedValue(5000, 900);
         const numberOfLabels = 10;
         expect(labels.length).to.be.greaterThan(numberOfLabels);
         expect(labels[0]).to.eql(minLabel);
@@ -366,8 +369,9 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabelsAsNumbers();
-        const minLabel = 2;
-        const maxLabel = 5000;
+
+        const minLabel = await PageObjects.visChart.getExpectedValue(2, 1);
+        const maxLabel = await PageObjects.visChart.getExpectedValue(5000, 900);
         const numberOfLabels = 10;
         expect(labels.length).to.be.greaterThan(numberOfLabels);
         expect(labels[0]).to.eql(minLabel);
@@ -379,17 +383,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
-        const expectedLabels = [
-          '0',
-          '200',
-          '400',
-          '600',
-          '800',
-          '1,000',
-          '1,200',
-          '1,400',
-          '1,600',
-        ];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400', '1,600'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
 
@@ -397,7 +394,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
-        const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400'];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['200', '400', '600', '800', '1,000', '1,200', '1,400'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
 
@@ -407,17 +407,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
         log.debug(labels);
-        const expectedLabels = [
-          '0',
-          '200',
-          '400',
-          '600',
-          '800',
-          '1,000',
-          '1,200',
-          '1,400',
-          '1,600',
-        ];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400', '1,600'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
 
@@ -425,7 +418,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
-        const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400'];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['200', '400', '600', '800', '1,000', '1,200', '1,400'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
     });
diff --git a/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js b/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.ts
similarity index 88%
rename from test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js
rename to test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.ts
index 7fb123f2e304a..d13f1513c5568 100644
--- a/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js
+++ b/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const retry = getService('retry');
   const inspector = getService('inspector');
@@ -140,8 +142,8 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabelsAsNumbers();
-        const minLabel = 2;
-        const maxLabel = 5000;
+        const minLabel = await PageObjects.visChart.getExpectedValue(2, 1);
+        const maxLabel = await PageObjects.visChart.getExpectedValue(5000, 900);
         const numberOfLabels = 10;
         expect(labels.length).to.be.greaterThan(numberOfLabels);
         expect(labels[0]).to.eql(minLabel);
@@ -152,8 +154,8 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabelsAsNumbers();
-        const minLabel = 2;
-        const maxLabel = 5000;
+        const minLabel = await PageObjects.visChart.getExpectedValue(2, 1);
+        const maxLabel = await PageObjects.visChart.getExpectedValue(5000, 900);
         const numberOfLabels = 10;
         expect(labels.length).to.be.greaterThan(numberOfLabels);
         expect(labels[0]).to.eql(minLabel);
@@ -165,17 +167,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
-        const expectedLabels = [
-          '0',
-          '200',
-          '400',
-          '600',
-          '800',
-          '1,000',
-          '1,200',
-          '1,400',
-          '1,600',
-        ];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400', '1,600'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
 
@@ -183,7 +178,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
-        const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400'];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['200', '400', '600', '800', '1,000', '1,200', '1,400'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
 
@@ -193,17 +191,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
         log.debug(labels);
-        const expectedLabels = [
-          '0',
-          '200',
-          '400',
-          '600',
-          '800',
-          '1,000',
-          '1,200',
-          '1,400',
-          '1,600',
-        ];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400', '1,600'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
 
@@ -211,7 +202,10 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
-        const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400'];
+        const expectedLabels = await PageObjects.visChart.getExpectedValue(
+          ['200', '400', '600', '800', '1,000', '1,200', '1,400'],
+          ['0', '200', '400', '600', '800', '1,000', '1,200', '1,400']
+        );
         expect(labels).to.eql(expectedLabels);
       });
     });
diff --git a/test/functional/apps/visualize/_visualize_listing.js b/test/functional/apps/visualize/_visualize_listing.ts
similarity index 96%
rename from test/functional/apps/visualize/_visualize_listing.js
rename to test/functional/apps/visualize/_visualize_listing.ts
index e7e62cfe424a9..5e5b100f1cf38 100644
--- a/test/functional/apps/visualize/_visualize_listing.js
+++ b/test/functional/apps/visualize/_visualize_listing.ts
@@ -17,7 +17,9 @@
  * under the License.
  */
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['visualize', 'visEditor']);
   const listingTable = getService('listingTable');
 
diff --git a/test/functional/apps/visualize/index.ts b/test/functional/apps/visualize/index.ts
index de73b2deabbd9..ad69ad5ab41cd 100644
--- a/test/functional/apps/visualize/index.ts
+++ b/test/functional/apps/visualize/index.ts
@@ -42,6 +42,37 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
       isOss = await deployment.isOss();
     });
 
+    // TODO: Remove when vislib is removed
+    describe('chartsLibrary', function () {
+      this.tags('ciGroup7');
+
+      before(async () => {
+        await kibanaServer.uiSettings.update({
+          'visualization:visualize:chartsLibrary': true,
+        });
+        await browser.refresh();
+      });
+
+      after(async () => {
+        await kibanaServer.uiSettings.update({
+          'visualization:visualize:chartsLibrary': false,
+        });
+        await browser.refresh();
+      });
+
+      // Test replaced vislib chart types
+      loadTestFile(require.resolve('./_area_chart'));
+      loadTestFile(require.resolve('./_line_chart_split_series'));
+      loadTestFile(require.resolve('./_point_series_options'));
+      loadTestFile(require.resolve('./_vertical_bar_chart'));
+      loadTestFile(require.resolve('./_vertical_bar_chart_nontimeindex'));
+
+      // Test non-replaced vislib chart types
+      loadTestFile(require.resolve('./_gauge_chart'));
+      loadTestFile(require.resolve('./_heatmap_chart'));
+      loadTestFile(require.resolve('./_pie_chart'));
+    });
+
     describe('', function () {
       this.tags('ciGroup9');
 
@@ -68,7 +99,8 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
     describe('', function () {
       this.tags('ciGroup11');
 
-      loadTestFile(require.resolve('./_line_chart'));
+      loadTestFile(require.resolve('./_line_chart_split_series'));
+      loadTestFile(require.resolve('./_line_chart_split_chart'));
       loadTestFile(require.resolve('./_pie_chart'));
       loadTestFile(require.resolve('./_point_series_options'));
       loadTestFile(require.resolve('./_markdown_vis'));
@@ -76,6 +108,7 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
       loadTestFile(require.resolve('./_lab_mode'));
       loadTestFile(require.resolve('./_linked_saved_searches'));
       loadTestFile(require.resolve('./_visualize_listing'));
+
       if (isOss) {
         loadTestFile(require.resolve('./_tile_map'));
         loadTestFile(require.resolve('./_region_map'));
diff --git a/test/functional/apps/visualize/input_control_vis/chained_controls.js b/test/functional/apps/visualize/input_control_vis/chained_controls.ts
similarity index 96%
rename from test/functional/apps/visualize/input_control_vis/chained_controls.js
rename to test/functional/apps/visualize/input_control_vis/chained_controls.ts
index e1a58e1da34f3..ea481a485bd90 100644
--- a/test/functional/apps/visualize/input_control_vis/chained_controls.js
+++ b/test/functional/apps/visualize/input_control_vis/chained_controls.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const filterBar = getService('filterBar');
   const PageObjects = getPageObjects(['common', 'visualize', 'visEditor', 'header', 'timePicker']);
   const testSubjects = getService('testSubjects');
diff --git a/test/functional/apps/visualize/input_control_vis/dynamic_options.js b/test/functional/apps/visualize/input_control_vis/dynamic_options.ts
similarity index 96%
rename from test/functional/apps/visualize/input_control_vis/dynamic_options.js
rename to test/functional/apps/visualize/input_control_vis/dynamic_options.ts
index 400be471be4b6..c7cc72cca3600 100644
--- a/test/functional/apps/visualize/input_control_vis/dynamic_options.js
+++ b/test/functional/apps/visualize/input_control_vis/dynamic_options.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['common', 'visualize', 'visEditor', 'header', 'timePicker']);
   const comboBox = getService('comboBox');
 
diff --git a/test/functional/apps/visualize/input_control_vis/index.js b/test/functional/apps/visualize/input_control_vis/index.ts
similarity index 89%
rename from test/functional/apps/visualize/input_control_vis/index.js
rename to test/functional/apps/visualize/input_control_vis/index.ts
index fd63fb5f04e3a..7e5d9f2f5289b 100644
--- a/test/functional/apps/visualize/input_control_vis/index.js
+++ b/test/functional/apps/visualize/input_control_vis/index.ts
@@ -17,7 +17,9 @@
  * under the License.
  */
 
-export default function ({ loadTestFile }) {
+import { FtrProviderContext } from '../../../ftr_provider_context';
+
+export default function ({ loadTestFile }: FtrProviderContext) {
   describe('input controls', function () {
     loadTestFile(require.resolve('./input_control_options'));
     loadTestFile(require.resolve('./dynamic_options'));
diff --git a/test/functional/apps/visualize/input_control_vis/input_control_options.js b/test/functional/apps/visualize/input_control_vis/input_control_options.ts
similarity index 98%
rename from test/functional/apps/visualize/input_control_vis/input_control_options.js
rename to test/functional/apps/visualize/input_control_vis/input_control_options.ts
index a17eeaca16002..6e2941eaeb14e 100644
--- a/test/functional/apps/visualize/input_control_vis/input_control_options.js
+++ b/test/functional/apps/visualize/input_control_vis/input_control_options.ts
@@ -19,7 +19,9 @@
 
 import expect from '@kbn/expect';
 
-export default function ({ getService, getPageObjects }) {
+import { FtrProviderContext } from '../../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const filterBar = getService('filterBar');
   const PageObjects = getPageObjects(['common', 'visualize', 'visEditor', 'header', 'timePicker']);
   const testSubjects = getService('testSubjects');
diff --git a/test/functional/apps/visualize/input_control_vis/input_control_range.ts b/test/functional/apps/visualize/input_control_vis/input_control_range.ts
index b855a01427068..9cdc591639c72 100644
--- a/test/functional/apps/visualize/input_control_vis/input_control_range.ts
+++ b/test/functional/apps/visualize/input_control_vis/input_control_range.ts
@@ -18,6 +18,7 @@
  */
 
 import expect from '@kbn/expect';
+
 import { FtrProviderContext } from '../../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
diff --git a/test/functional/page_objects/dashboard_page.ts b/test/functional/page_objects/dashboard_page.ts
index 27a7f585a5cf7..8924d22cdb50f 100644
--- a/test/functional/page_objects/dashboard_page.ts
+++ b/test/functional/page_objects/dashboard_page.ts
@@ -36,7 +36,10 @@ export function DashboardPageProvider({ getService, getPageObjects }: FtrProvide
   const PageObjects = getPageObjects(['common', 'header', 'visualize']);
 
   interface SaveDashboardOptions {
-    waitDialogIsClosed: boolean;
+    /**
+     * @default true
+     */
+    waitDialogIsClosed?: boolean;
     needsConfirm?: boolean;
     storeTimeWithDashboard?: boolean;
     saveAsNew?: boolean;
diff --git a/test/functional/page_objects/discover_page.ts b/test/functional/page_objects/discover_page.ts
index 494141355806f..b73812b33be67 100644
--- a/test/functional/page_objects/discover_page.ts
+++ b/test/functional/page_objects/discover_page.ts
@@ -351,7 +351,7 @@ export function DiscoverPageProvider({ getService, getPageObjects }: FtrProvider
     }
 
     public async waitForChartLoadingComplete(renderCount: number) {
-      await elasticChart.waitForRenderingCount('discoverChart', renderCount);
+      await elasticChart.waitForRenderingCount(renderCount, 'discoverChart');
     }
 
     public async waitForDocTableLoadingComplete() {
diff --git a/test/functional/page_objects/legacy/data_table_vis.ts b/test/functional/page_objects/legacy/data_table_vis.ts
index 6b437c7dd640d..d0c72dd5ec661 100644
--- a/test/functional/page_objects/legacy/data_table_vis.ts
+++ b/test/functional/page_objects/legacy/data_table_vis.ts
@@ -79,11 +79,11 @@ export function LegacyDataTableVisProvider({ getService, getPageObjects }: FtrPr
       });
     }
 
-    public async filterOnTableCell(column: number, row: number) {
+    public async filterOnTableCell(columnIndex: number, rowIndex: number) {
       await retry.try(async () => {
         const tableVis = await testSubjects.find('tableVis');
         const cell = await tableVis.findByCssSelector(
-          `tbody tr:nth-child(${row}) td:nth-child(${column})`
+          `tbody tr:nth-child(${rowIndex}) td:nth-child(${columnIndex})`
         );
         await cell.moveMouseTo();
         const filterBtn = await testSubjects.findDescendant('filterForCellValue', cell);
diff --git a/test/functional/page_objects/settings_page.ts b/test/functional/page_objects/settings_page.ts
index e29f75b806574..b4fe8424c2286 100644
--- a/test/functional/page_objects/settings_page.ts
+++ b/test/functional/page_objects/settings_page.ts
@@ -322,7 +322,8 @@ export function SettingsPageProvider({ getService, getPageObjects }: FtrProvider
 
     async createIndexPattern(
       indexPatternName: string,
-      timefield = '@timestamp',
+      // null to bypass default value
+      timefield: string | null = '@timestamp',
       isStandardIndexPattern = true
     ) {
       await retry.try(async () => {
diff --git a/test/functional/page_objects/time_picker.ts b/test/functional/page_objects/time_picker.ts
index 272fc5a7914be..998813cccf88b 100644
--- a/test/functional/page_objects/time_picker.ts
+++ b/test/functional/page_objects/time_picker.ts
@@ -99,7 +99,7 @@ export function TimePickerProvider({ getService, getPageObjects }: FtrProviderCo
       await testSubjects.click(`superDatePickerCommonlyUsed_${option}`);
     }
 
-    private async inputValue(dataTestSubj: string, value: string) {
+    public async inputValue(dataTestSubj: string, value: string) {
       if (browser.isFirefox) {
         const input = await testSubjects.find(dataTestSubj);
         await input.clearValue();
diff --git a/test/functional/page_objects/visualize_chart_page.ts b/test/functional/page_objects/visualize_chart_page.ts
index 553c8312a59af..2ad7c77a58ca9 100644
--- a/test/functional/page_objects/visualize_chart_page.ts
+++ b/test/functional/page_objects/visualize_chart_page.ts
@@ -17,25 +17,103 @@
  * under the License.
  */
 
+import { Position } from '@elastic/charts';
+
 import { FtrProviderContext } from '../ftr_provider_context';
 
+const elasticChartSelector = 'visTypeXyChart';
+
 export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const config = getService('config');
   const find = getService('find');
   const log = getService('log');
   const retry = getService('retry');
+  const kibanaServer = getService('kibanaServer');
+  const elasticChart = getService('elasticChart');
   const dataGrid = getService('dataGrid');
   const defaultFindTimeout = config.get('timeouts.find');
   const { common } = getPageObjects(['common']);
 
   class VisualizeChart {
+    private async getDebugState() {
+      return await elasticChart.getChartDebugData(elasticChartSelector);
+    }
+
+    /**
+     * Is chartsLibrary advanced setting enabled
+     */
+    public async isNewChartUiEnabled(): Promise<boolean> {
+      const enabled =
+        Boolean(await kibanaServer.uiSettings.get('visualization:visualize:chartsLibrary')) ??
+        false;
+      log.debug(`-- isNewChartUiEnabled = ${enabled}`);
+
+      return enabled;
+    }
+
+    /**
+     * Is chartsLibrary enabled and an area, line or histogram chart is available
+     */
+    private async isVisTypeXYChart(): Promise<boolean> {
+      const enabled = await this.isNewChartUiEnabled();
+
+      if (!enabled) {
+        log.debug(`-- isVisTypeXYChart = false`);
+        return false;
+      }
+
+      // check if enabled but not a line, area or histogram chart
+      if (await find.existsByCssSelector('.visLib__chart', 1)) {
+        const chart = await find.byCssSelector('.visLib__chart');
+        const chartType = await chart.getAttribute('data-vislib-chart-type');
+
+        if (!['line', 'area', 'histogram'].includes(chartType)) {
+          log.debug(`-- isVisTypeXYChart = false`);
+          return false;
+        }
+      }
+
+      if (!(await elasticChart.hasChart(elasticChartSelector, 1))) {
+        // not be a vislib chart type
+        log.debug(`-- isVisTypeXYChart = false`);
+        return false;
+      }
+
+      log.debug(`-- isVisTypeXYChart = true`);
+      return true;
+    }
+
+    /**
+     * Helper method to get expected values that are slightly different
+     * between vislib and elastic-chart inplementations
+     * @param vislibValue value expected for vislib chart
+     * @param elasticChartsValue value expected for `@elastic/charts` chart
+     */
+    public async getExpectedValue<T>(vislibValue: T, elasticChartsValue: T): Promise<T> {
+      if (await this.isVisTypeXYChart()) {
+        return elasticChartsValue;
+      }
+
+      return vislibValue;
+    }
+
     public async getYAxisTitle() {
+      if (await this.isVisTypeXYChart()) {
+        const xAxis = (await this.getDebugState())?.axes?.y ?? [];
+        return xAxis[0]?.title;
+      }
+
       const title = await find.byCssSelector('.y-axis-div .y-axis-title text');
       return await title.getVisibleText();
     }
 
     public async getXAxisLabels() {
+      if (await this.isVisTypeXYChart()) {
+        const [xAxis] = (await this.getDebugState())?.axes?.x ?? [];
+        return xAxis?.labels;
+      }
+
       const xAxis = await find.byCssSelector('.visAxis--x.visAxis__column--bottom');
       const $ = await xAxis.parseDomContent();
       return $('.x > g > text')
@@ -44,6 +122,11 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
     }
 
     public async getYAxisLabels() {
+      if (await this.isVisTypeXYChart()) {
+        const [yAxis] = (await this.getDebugState())?.axes?.y ?? [];
+        return yAxis?.labels;
+      }
+
       const yAxis = await find.byCssSelector('.visAxis__column--y.visAxis__column--left');
       const $ = await yAxis.parseDomContent();
       return $('.y > g > text')
@@ -52,6 +135,11 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
     }
 
     public async getYAxisLabelsAsNumbers() {
+      if (await this.isVisTypeXYChart()) {
+        const [yAxis] = (await this.getDebugState())?.axes?.y ?? [];
+        return yAxis?.values;
+      }
+
       return (await this.getYAxisLabels()).map((label) => Number(label.replace(',', '')));
     }
 
@@ -63,6 +151,12 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
      * Returns an array of height values
      */
     public async getAreaChartData(dataLabel: string, axis = 'ValueAxis-1') {
+      if (await this.isVisTypeXYChart()) {
+        const areas = (await this.getDebugState())?.areas ?? [];
+        const points = areas.find(({ name }) => name === dataLabel)?.lines.y1.points ?? [];
+        return points.map(({ y }) => y);
+      }
+
       const yAxisRatio = await this.getChartYAxisRatio(axis);
 
       const rectangle = await find.byCssSelector('rect.background');
@@ -99,6 +193,12 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
      * @param dataLabel data-label value
      */
     public async getAreaChartPaths(dataLabel: string) {
+      if (await this.isVisTypeXYChart()) {
+        const areas = (await this.getDebugState())?.areas ?? [];
+        const path = areas.find(({ name }) => name === dataLabel)?.path ?? '';
+        return path.split('L');
+      }
+
       const path = await retry.try(
         async () =>
           await find.byCssSelector(`path[data-label="${dataLabel}"]`, defaultFindTimeout * 2)
@@ -118,6 +218,14 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
      * @param axis axis value, 'ValueAxis-1' by default
      */
     public async getLineChartData(dataLabel = 'Count', axis = 'ValueAxis-1') {
+      if (await this.isVisTypeXYChart()) {
+        // For now lines are rendered as areas to enable stacking
+        const areas = (await this.getDebugState())?.areas ?? [];
+        const lines = areas.map(({ lines: { y1 }, name, color }) => ({ ...y1, name, color }));
+        const points = lines.find(({ name }) => name === dataLabel)?.points ?? [];
+        return points.map(({ y }) => y);
+      }
+
       // 1). get the range/pixel ratio
       const yAxisRatio = await this.getChartYAxisRatio(axis);
       // 2). find and save the y-axis pixel size (the chart height)
@@ -150,6 +258,12 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
      * @param axis axis value, 'ValueAxis-1' by default
      */
     public async getBarChartData(dataLabel = 'Count', axis = 'ValueAxis-1') {
+      if (await this.isVisTypeXYChart()) {
+        const bars = (await this.getDebugState())?.bars ?? [];
+        const values = bars.find(({ name }) => name === dataLabel)?.bars ?? [];
+        return values.map(({ y }) => y);
+      }
+
       const yAxisRatio = await this.getChartYAxisRatio(axis);
       const svg = await find.byCssSelector('div.chart');
       const $ = await svg.parseDomContent();
@@ -189,8 +303,11 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
     }
 
     public async toggleLegend(show = true) {
+      const isVisTypeXYChart = await this.isVisTypeXYChart();
+      const legendSelector = isVisTypeXYChart ? '.echLegend' : '.visLegend';
+
       await retry.try(async () => {
-        const isVisible = find.byCssSelector('.visLegend');
+        const isVisible = await find.existsByCssSelector(legendSelector);
         if ((show && !isVisible) || (!show && isVisible)) {
           await testSubjects.click('vislibToggleLegend');
         }
@@ -206,19 +323,26 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
     }
 
     public async doesLegendColorChoiceExist(color: string) {
-      return await testSubjects.exists(`legendSelectColor-${color}`);
+      return await testSubjects.exists(`visColorPickerColor-${color}`);
     }
 
     public async selectNewLegendColorChoice(color: string) {
-      await testSubjects.click(`legendSelectColor-${color}`);
+      await testSubjects.click(`visColorPickerColor-${color}`);
     }
 
     public async doesSelectedLegendColorExist(color: string) {
+      if (await this.isVisTypeXYChart()) {
+        const items = (await this.getDebugState())?.legend?.items ?? [];
+        return items.some(({ color: c }) => c === color);
+      }
+
       return await testSubjects.exists(`legendSelectedColor-${color}`);
     }
 
     public async expectError() {
-      await testSubjects.existOrFail('vislibVisualizeError');
+      if (!this.isVisTypeXYChart()) {
+        await testSubjects.existOrFail('vislibVisualizeError');
+      }
     }
 
     public async getVisualizationRenderingCount() {
@@ -233,6 +357,7 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
         async () => {
           const currentRenderingCount = await this.getVisualizationRenderingCount();
           log.debug(`-- currentRenderingCount=${currentRenderingCount}`);
+          log.debug(`-- expectedCount=${minimumCount}`);
           return currentRenderingCount >= minimumCount;
         }
       );
@@ -255,10 +380,18 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
 
     public async waitForVisualization() {
       await this.waitForVisualizationRenderingStabilized();
-      await find.byCssSelector('.visualization');
+
+      if (!(await this.isVisTypeXYChart())) {
+        await find.byCssSelector('.visualization');
+      }
     }
 
     public async getLegendEntries() {
+      if (await this.isVisTypeXYChart()) {
+        const items = (await this.getDebugState())?.legend?.items ?? [];
+        return items.map(({ name }) => name);
+      }
+
       const legendEntries = await find.allByCssSelector(
         '.visLegend__button',
         defaultFindTimeout * 2
@@ -268,12 +401,21 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
       );
     }
 
-    public async openLegendOptionColors(name: string) {
+    public async openLegendOptionColors(name: string, chartSelector = elasticChartSelector) {
       await this.waitForVisualizationRenderingStabilized();
       await retry.try(async () => {
-        // This click has been flaky in opening the legend, hence the retry.  See
-        // https://github.com/elastic/kibana/issues/17468
-        await testSubjects.click(`legend-${name}`);
+        if (await this.isVisTypeXYChart()) {
+          const chart = await find.byCssSelector(chartSelector);
+          const legendItemColor = await chart.findByCssSelector(
+            `[data-ech-series-name="${name}"] .echLegendItem__color`
+          );
+          legendItemColor.click();
+        } else {
+          // This click has been flaky in opening the legend, hence the retry.  See
+          // https://github.com/elastic/kibana/issues/17468
+          await testSubjects.click(`legend-${name}`);
+        }
+
         await this.waitForVisualizationRenderingStabilized();
         // arbitrary color chosen, any available would do
         const isOpen = await this.doesLegendColorChoiceExist('#EF843C');
@@ -283,6 +425,18 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
       });
     }
 
+    public async filterOnTableCell(columnIndex: number, rowIndex: number) {
+      await retry.try(async () => {
+        const cell = await dataGrid.getCellElement(rowIndex, columnIndex);
+        await cell.moveMouseTo();
+        const filterBtn = await testSubjects.findDescendant(
+          'tbvChartCell__filterForCellValue',
+          cell
+        );
+        await filterBtn.click();
+      });
+    }
+
     public async getMarkdownText() {
       const markdownContainer = await testSubjects.find('markdownBody');
       return markdownContainer.getVisibleText();
@@ -349,18 +503,6 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
       });
     }
 
-    public async filterOnTableCell(column: number, row: number) {
-      await retry.try(async () => {
-        const cell = await dataGrid.getCellElement(row, column);
-        await cell.moveMouseTo();
-        const filterBtn = await testSubjects.findDescendant(
-          'tbvChartCell__filterForCellValue',
-          cell
-        );
-        await filterBtn.click();
-      });
-    }
-
     public async getMetric() {
       const elements = await find.allByCssSelector(
         '[data-test-subj="visualizationLoader"] .mtrVis__container'
@@ -389,6 +531,15 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
       return values.filter((item) => item.length > 0);
     }
 
+    public async getRightValueAxesCount() {
+      if (await this.isVisTypeXYChart()) {
+        const yAxes = (await this.getDebugState())?.axes?.y ?? [];
+        return yAxes.filter(({ position }) => position === Position.Right).length;
+      }
+      const axes = await find.allByCssSelector('.visAxis__column--right g.axis');
+      return axes.length;
+    }
+
     public async clickOnGaugeByLabel(label: string) {
       const gauge = await testSubjects.find(`visGauge__meter--${label}`);
       const gaugeSize = await gauge.getSize();
@@ -400,17 +551,22 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
       await gauge.clickMouseButton({ xOffset: 0, yOffset });
     }
 
-    public async getRightValueAxes() {
-      const axes = await find.allByCssSelector('.visAxis__column--right g.axis');
-      return axes.length;
-    }
+    public async getHistogramSeriesCount() {
+      if (await this.isVisTypeXYChart()) {
+        const bars = (await this.getDebugState())?.bars ?? [];
+        return bars.filter(({ visible }) => visible).length;
+      }
 
-    public async getHistogramSeries() {
       const series = await find.allByCssSelector('.series.histogram');
       return series.length;
     }
 
     public async getGridLines(): Promise<Array<{ x: number; y: number }>> {
+      if (await this.isVisTypeXYChart()) {
+        const { x, y } = (await this.getDebugState())?.axes ?? { x: [], y: [] };
+        return [...x, ...y].flatMap(({ gridlines }) => gridlines);
+      }
+
       const grid = await find.byCssSelector('g.grid');
       const $ = await grid.parseDomContent();
       return $('path')
@@ -426,6 +582,11 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
     }
 
     public async getChartValues() {
+      if (await this.isVisTypeXYChart()) {
+        const barSeries = (await this.getDebugState())?.bars ?? [];
+        return barSeries.filter(({ visible }) => visible).flatMap((bars) => bars.labels);
+      }
+
       const elements = await find.allByCssSelector('.series.histogram text');
       const values = await Promise.all(
         elements.map(async (element) => {
diff --git a/test/functional/page_objects/visualize_editor_page.ts b/test/functional/page_objects/visualize_editor_page.ts
index f05cd35c5cb03..d6134883332e3 100644
--- a/test/functional/page_objects/visualize_editor_page.ts
+++ b/test/functional/page_objects/visualize_editor_page.ts
@@ -27,6 +27,7 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
   const browser = getService('browser');
   const testSubjects = getService('testSubjects');
   const comboBox = getService('comboBox');
+  const elasticChart = getService('elasticChart');
   const { common, header, visChart } = getPageObjects(['common', 'header', 'visChart']);
 
   interface IntervalOptions {
@@ -73,6 +74,10 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
     }
 
     public async clickGo() {
+      if (await visChart.isNewChartUiEnabled()) {
+        await elasticChart.setNewChartUiDebugFlag();
+      }
+
       const prevRenderingCount = await visChart.getVisualizationRenderingCount();
       log.debug(`Before Rendering count ${prevRenderingCount}`);
       await testSubjects.clickWhenNotDisabled('visualizeEditorRenderButton');
@@ -128,7 +133,7 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
       await testSubjects.click(`heatmapColorRange__addRangeButton`);
     }
 
-    public async setCustomRangeByIndex(index: string, from: string, to: string) {
+    public async setCustomRangeByIndex(index: string | number, from: string, to: string) {
       await testSubjects.setValue(`heatmapColorRange${index}__from`, from);
       await testSubjects.setValue(`heatmapColorRange${index}__to`, to);
     }
@@ -155,14 +160,14 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
     public async selectField(
       fieldValue: string,
       groupName = 'buckets',
-      childAggregationType = false
+      isChildAggregation = false
     ) {
       log.debug(`selectField ${fieldValue}`);
       const selector = `
           [data-test-subj="${groupName}AggGroup"]
           [data-test-subj^="visEditorAggAccordion"].euiAccordion-isOpen
           [data-test-subj="visAggEditorParams"]
-          ${childAggregationType ? '.visEditorAgg__subAgg' : ''}
+          ${isChildAggregation ? '.visEditorAgg__subAgg' : ''}
           [data-test-subj="visDefaultEditorField"]
         `;
       const fieldEl = await find.byCssSelector(selector);
@@ -184,12 +189,12 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
     public async selectAggregation(
       aggValue: string,
       groupName = 'buckets',
-      childAggregationType = false
+      isChildAggregation = false
     ) {
       const comboBoxElement = await find.byCssSelector(`
           [data-test-subj="${groupName}AggGroup"]
           [data-test-subj^="visEditorAggAccordion"].euiAccordion-isOpen
-          ${childAggregationType ? '.visEditorAgg__subAgg' : ''}
+          ${isChildAggregation ? '.visEditorAgg__subAgg' : ''}
           [data-test-subj="defaultEditorAggSelect"]
         `);
 
@@ -270,7 +275,7 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
       });
     }
 
-    public async setCustomLabel(label: string, index = 1) {
+    public async setCustomLabel(label: string, index: number | string = 1) {
       const customLabel = await testSubjects.find(`visEditorStringInput${index}customLabel`);
       customLabel.type(label);
     }
@@ -307,23 +312,23 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
       await browser.dragAndDrop({ location: resizerPanel }, { location: { x: -100, y: 0 } });
     }
 
-    public async toggleDisabledAgg(agg: string) {
+    public async toggleDisabledAgg(agg: string | number) {
       await testSubjects.click(`visEditorAggAccordion${agg} > ~toggleDisableAggregationBtn`);
       await header.waitUntilLoadingHasFinished();
     }
 
-    public async toggleAggregationEditor(agg: string) {
+    public async toggleAggregationEditor(agg: string | number) {
       await find.clickByCssSelector(
         `[data-test-subj="visEditorAggAccordion${agg}"] .euiAccordion__button`
       );
       await header.waitUntilLoadingHasFinished();
     }
 
-    public async toggleOtherBucket(agg = 2) {
+    public async toggleOtherBucket(agg: string | number = 2) {
       await testSubjects.click(`visEditorAggAccordion${agg} > otherBucketSwitch`);
     }
 
-    public async toggleMissingBucket(agg = 2) {
+    public async toggleMissingBucket(agg: string | number = 2) {
       await testSubjects.click(`visEditorAggAccordion${agg} > missingBucketSwitch`);
     }
 
@@ -432,13 +437,14 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
       await testSubjects.selectValue('visDefaultEditorAggregateWith', fieldValue);
     }
 
-    public async setInterval(newValue: string, options: IntervalOptions = {}) {
+    public async setInterval(newValue: string | number, options: IntervalOptions = {}) {
+      const newValueString = `${newValue}`;
       const { type = 'default', aggNth = 2, append = false } = options;
-      log.debug(`visEditor.setInterval(${newValue}, {${type}, ${aggNth}, ${append}})`);
+      log.debug(`visEditor.setInterval(${newValueString}, {${type}, ${aggNth}, ${append}})`);
       if (type === 'default') {
-        await comboBox.set('visEditorInterval', newValue);
+        await comboBox.set('visEditorInterval', newValueString);
       } else if (type === 'custom') {
-        await comboBox.setCustom('visEditorInterval', newValue);
+        await comboBox.setCustom('visEditorInterval', newValueString);
       } else {
         if (type === 'numeric') {
           const autoMode = await testSubjects.getAttribute(
@@ -450,9 +456,9 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
           }
         }
         if (append) {
-          await testSubjects.append(`visEditorInterval${aggNth}`, String(newValue));
+          await testSubjects.append(`visEditorInterval${aggNth}`, String(newValueString));
         } else {
-          await testSubjects.setValue(`visEditorInterval${aggNth}`, String(newValue));
+          await testSubjects.setValue(`visEditorInterval${aggNth}`, String(newValueString));
         }
       }
     }
diff --git a/test/functional/page_objects/visualize_page.ts b/test/functional/page_objects/visualize_page.ts
index b58acd0bd9059..e5bd6a0f10d82 100644
--- a/test/functional/page_objects/visualize_page.ts
+++ b/test/functional/page_objects/visualize_page.ts
@@ -27,7 +27,14 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide
   const log = getService('log');
   const globalNav = getService('globalNav');
   const listingTable = getService('listingTable');
-  const { common, header, visEditor } = getPageObjects(['common', 'header', 'visEditor']);
+  const queryBar = getService('queryBar');
+  const elasticChart = getService('elasticChart');
+  const { common, header, visEditor, visChart } = getPageObjects([
+    'common',
+    'header',
+    'visEditor',
+    'visChart',
+  ]);
 
   /**
    * This page object contains the visualization type selection, the landing page,
@@ -91,6 +98,13 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide
       });
     }
 
+    public async clickRefresh() {
+      if (await visChart.isNewChartUiEnabled()) {
+        await elasticChart.setNewChartUiDebugFlag();
+      }
+      await queryBar.clickQuerySubmitButton();
+    }
+
     public async waitForGroupsSelectPage() {
       await retry.try(async () => {
         const visualizeSelectGroupStep = await testSubjects.find('visNewDialogGroups');
diff --git a/test/functional/services/dashboard/expectations.ts b/test/functional/services/dashboard/expectations.ts
index 62e541e3baa4c..58e9b8975e8fd 100644
--- a/test/functional/services/dashboard/expectations.ts
+++ b/test/functional/services/dashboard/expectations.ts
@@ -238,7 +238,7 @@ export function DashboardExpectProvider({ getService, getPageObjects }: FtrProvi
       });
     }
 
-    async dataTableNoResult(expectedCount: number) {
+    async dataTableNoResult() {
       log.debug(`DashboardExpect.dataTableNoResult`);
       await retry.try(async () => {
         await PageObjects.visChart.getTableVisNoResult();
diff --git a/test/functional/services/dashboard/panel_actions.ts b/test/functional/services/dashboard/panel_actions.ts
index 2cea377d327e1..7e5ef068e2184 100644
--- a/test/functional/services/dashboard/panel_actions.ts
+++ b/test/functional/services/dashboard/panel_actions.ts
@@ -163,7 +163,7 @@ export function DashboardPanelActionsProvider({ getService, getPageObjects }: Ft
       await this.openInspector(header);
     }
 
-    async openInspector(parent: WebElementWrapper) {
+    async openInspector(parent?: WebElementWrapper) {
       await this.openContextMenu(parent);
       const exists = await testSubjects.exists(OPEN_INSPECTOR_TEST_SUBJ);
       if (!exists) {
@@ -247,7 +247,7 @@ export function DashboardPanelActionsProvider({ getService, getPageObjects }: Ft
       await testSubjects.click('customizePanelHideTitle');
     }
 
-    async toggleHidePanelTitle(originalTitle: string) {
+    async toggleHidePanelTitle(originalTitle?: string) {
       log.debug(`hidePanelTitle(${originalTitle})`);
       if (originalTitle) {
         const panelOptions = await this.getPanelHeading(originalTitle);
@@ -277,7 +277,7 @@ export function DashboardPanelActionsProvider({ getService, getPageObjects }: Ft
       await testSubjects.click('saveNewTitleButton');
     }
 
-    async resetCustomPanelTitle(panel: WebElementWrapper) {
+    async resetCustomPanelTitle(panel?: WebElementWrapper) {
       log.debug('resetCustomPanelTitle');
       await this.customizePanel(panel);
       await testSubjects.click('resetCustomEmbeddablePanelTitle');
diff --git a/test/functional/services/doc_table.ts b/test/functional/services/doc_table.ts
index 1ac8de69ee5f4..48ef76ce81745 100644
--- a/test/functional/services/doc_table.ts
+++ b/test/functional/services/doc_table.ts
@@ -25,8 +25,8 @@ export function DocTableProvider({ getService, getPageObjects }: FtrProviderCont
   const PageObjects = getPageObjects(['common', 'header']);
 
   interface SelectOptions {
-    isAnchorRow: boolean;
-    rowIndex: number;
+    isAnchorRow?: boolean;
+    rowIndex?: number;
   }
 
   class DocTable {
@@ -52,10 +52,11 @@ export function DocTableProvider({ getService, getPageObjects }: FtrProviderCont
       return await table.findByTestSubject('~docTableAnchorRow');
     }
 
-    public async getRow(options: SelectOptions): Promise<WebElementWrapper> {
-      return options.isAnchorRow
-        ? await this.getAnchorRow()
-        : (await this.getBodyRows())[options.rowIndex];
+    public async getRow({
+      isAnchorRow = false,
+      rowIndex = 0,
+    }: SelectOptions = {}): Promise<WebElementWrapper> {
+      return isAnchorRow ? await this.getAnchorRow() : (await this.getBodyRows())[rowIndex];
     }
 
     public async getDetailsRow(): Promise<WebElementWrapper> {
@@ -85,12 +86,12 @@ export function DocTableProvider({ getService, getPageObjects }: FtrProviderCont
       );
     }
 
-    public async getRowActions(
-      options: SelectOptions = { isAnchorRow: false, rowIndex: 0 }
-    ): Promise<WebElementWrapper[]> {
-      const detailsRow = options.isAnchorRow
+    public async getRowActions({ isAnchorRow = false, rowIndex = 0 }: SelectOptions = {}): Promise<
+      WebElementWrapper[]
+    > {
+      const detailsRow = isAnchorRow
         ? await this.getAnchorDetailsRow()
-        : (await this.getDetailsRows())[options.rowIndex];
+        : (await this.getDetailsRows())[rowIndex];
       return await detailsRow.findAllByTestSubject('~docTableRowAction');
     }
 
@@ -117,7 +118,7 @@ export function DocTableProvider({ getService, getPageObjects }: FtrProviderCont
 
     public async getTableDocViewRow(
       detailsRow: WebElementWrapper,
-      fieldName: WebElementWrapper
+      fieldName: string
     ): Promise<WebElementWrapper> {
       return await detailsRow.findByTestSubject(`~tableDocViewRow-${fieldName}`);
     }
@@ -130,7 +131,7 @@ export function DocTableProvider({ getService, getPageObjects }: FtrProviderCont
 
     public async addInclusiveFilter(
       detailsRow: WebElementWrapper,
-      fieldName: WebElementWrapper
+      fieldName: string
     ): Promise<void> {
       const tableDocViewRow = await this.getTableDocViewRow(detailsRow, fieldName);
       const addInclusiveFilterButton = await this.getAddInclusiveFilterButton(tableDocViewRow);
@@ -146,7 +147,7 @@ export function DocTableProvider({ getService, getPageObjects }: FtrProviderCont
 
     public async removeInclusiveFilter(
       detailsRow: WebElementWrapper,
-      fieldName: WebElementWrapper
+      fieldName: string
     ): Promise<void> {
       const tableDocViewRow = await this.getTableDocViewRow(detailsRow, fieldName);
       const addInclusiveFilterButton = await this.getRemoveInclusiveFilterButton(tableDocViewRow);
@@ -160,25 +161,21 @@ export function DocTableProvider({ getService, getPageObjects }: FtrProviderCont
       return await tableDocViewRow.findByTestSubject(`~addExistsFilterButton`);
     }
 
-    public async addExistsFilter(
-      detailsRow: WebElementWrapper,
-      fieldName: WebElementWrapper
-    ): Promise<void> {
+    public async addExistsFilter(detailsRow: WebElementWrapper, fieldName: string): Promise<void> {
       const tableDocViewRow = await this.getTableDocViewRow(detailsRow, fieldName);
       const addInclusiveFilterButton = await this.getAddExistsFilterButton(tableDocViewRow);
       await addInclusiveFilterButton.click();
       await PageObjects.header.awaitGlobalLoadingIndicatorHidden();
     }
 
-    public async toggleRowExpanded(
-      options: SelectOptions = { isAnchorRow: false, rowIndex: 0 }
-    ): Promise<WebElementWrapper> {
-      await this.clickRowToggle(options);
+    public async toggleRowExpanded({
+      isAnchorRow = false,
+      rowIndex = 0,
+    }: SelectOptions = {}): Promise<WebElementWrapper> {
+      await this.clickRowToggle({ isAnchorRow, rowIndex });
       await PageObjects.header.awaitGlobalLoadingIndicatorHidden();
       return await retry.try(async () => {
-        const row = options.isAnchorRow
-          ? await this.getAnchorRow()
-          : (await this.getBodyRows())[options.rowIndex];
+        const row = isAnchorRow ? await this.getAnchorRow() : (await this.getBodyRows())[rowIndex];
         const detailsRow = await row.findByXpath(
           './following-sibling::*[@data-test-subj="docTableDetailsRow"]'
         );
diff --git a/test/functional/services/inspector.ts b/test/functional/services/inspector.ts
index e256cf14541a7..597c4a46f5a25 100644
--- a/test/functional/services/inspector.ts
+++ b/test/functional/services/inspector.ts
@@ -91,7 +91,7 @@ export function InspectorProvider({ getService }: FtrProviderContext) {
      * @param expectedData
      */
     public async expectTableData(expectedData: string[][]): Promise<void> {
-      await log.debug(`Inspector.expectTableData(${expectedData.join(',')})`);
+      log.debug(`Inspector.expectTableData(${expectedData.join(',')})`);
       const data = await this.getTableData();
       expect(data).to.eql(expectedData);
     }
@@ -170,7 +170,7 @@ export function InspectorProvider({ getService }: FtrProviderContext) {
      * @param column column index
      * @param row row index
      */
-    public async filterForTableCell(column: string, row: string): Promise<void> {
+    public async filterForTableCell(column: string | number, row: string | number): Promise<void> {
       await retry.try(async () => {
         const table = await testSubjects.find('inspectorTable');
         const cell = await table.findByCssSelector(
@@ -188,7 +188,7 @@ export function InspectorProvider({ getService }: FtrProviderContext) {
      * @param column column index
      * @param row row index
      */
-    public async filterOutTableCell(column: string, row: string): Promise<void> {
+    public async filterOutTableCell(column: string | number, row: string | number): Promise<void> {
       await retry.try(async () => {
         const table = await testSubjects.find('inspectorTable');
         const cell = await table.findByCssSelector(
diff --git a/test/functional/services/visualizations/elastic_chart.ts b/test/functional/services/visualizations/elastic_chart.ts
index 3c454f0a88e24..1f1f7df45f460 100644
--- a/test/functional/services/visualizations/elastic_chart.ts
+++ b/test/functional/services/visualizations/elastic_chart.ts
@@ -17,14 +17,27 @@
  * under the License.
  */
 
+import { DebugState } from '@elastic/charts';
+
 import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../ftr_provider_context';
+import { WebElementWrapper } from '../lib/web_element_wrapper';
+
+declare global {
+  interface Window {
+    /**
+     * Flag used to enable debugState on elastic charts
+     */
+    _echDebugStateFlag?: boolean;
+  }
+}
 
 export function ElasticChartProvider({ getService }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const find = getService('find');
   const retry = getService('retry');
   const log = getService('log');
+  const browser = getService('browser');
 
   class ElasticChart {
     public async getCanvas() {
@@ -35,29 +48,87 @@ export function ElasticChartProvider({ getService }: FtrProviderContext) {
       return await find.existsByCssSelector('.echChart canvas:last-of-type');
     }
 
-    public async waitForRenderComplete(dataTestSubj: string) {
-      const chart = await testSubjects.find(dataTestSubj);
-      const rendered = await chart.findAllByCssSelector('.echChart[data-ech-render-complete=true]');
-      expect(rendered).to.equal(
-        1,
-        `Rendering for elastic-chart with data-test-subj='${dataTestSubj}' was not finished in time`
+    public async waitForRenderComplete(dataTestSubj?: string) {
+      const chart = await this.getChart(dataTestSubj);
+      const rendered = await chart.findAllByCssSelector(
+        '.echChartStatus[data-ech-render-complete=true]'
       );
+      expect(rendered.length).to.equal(1);
     }
 
-    public async getVisualizationRenderingCount(dataTestSubj: string) {
-      const chart = await testSubjects.find(dataTestSubj);
+    public async getVisualizationRenderingCount(dataTestSubj?: string) {
+      const chart = await this.getChart(dataTestSubj);
       const visContainer = await chart.findByCssSelector('.echChartStatus');
       const renderingCount = await visContainer.getAttribute('data-ech-render-count');
       return Number(renderingCount);
     }
 
-    public async waitForRenderingCount(dataTestSubj: string, minimumCount: number) {
+    public async waitForRenderingCount(minimumCount: number, dataTestSubj?: string) {
       await retry.waitFor(`rendering count to be equal to [${minimumCount}]`, async () => {
         const currentRenderingCount = await this.getVisualizationRenderingCount(dataTestSubj);
         log.debug(`-- currentRenderingCount=${currentRenderingCount}`);
         return currentRenderingCount >= minimumCount;
       });
     }
+
+    public async hasChart(dataTestSubj?: string, timeout?: number): Promise<boolean> {
+      if (dataTestSubj) {
+        return await testSubjects.exists(dataTestSubj, { timeout });
+      } else {
+        const charts = await this.getAllCharts(timeout);
+
+        return charts.length > 0;
+      }
+    }
+
+    private async getChart(dataTestSubj?: string, timeout?: number): Promise<WebElementWrapper> {
+      if (dataTestSubj) {
+        if (!(await testSubjects.exists(dataTestSubj, { timeout }))) {
+          throw Error(`Failed to find an elastic-chart with testSubject '${dataTestSubj}'`);
+        }
+
+        return await testSubjects.find(dataTestSubj);
+      } else {
+        const charts = await this.getAllCharts(timeout);
+        if (charts.length === 0) {
+          throw Error(`Failed to find any elastic-charts on the page`);
+        } else {
+          return charts[0];
+        }
+      }
+    }
+
+    private async getAllCharts(timeout?: number) {
+      return await find.allByCssSelector('.echChart', timeout);
+    }
+
+    /**
+     * used to get chart data from `@elastic/charts`
+     * requires `window._echDebugStateFlag` to be true
+     */
+    public async getChartDebugData(dataTestSubj?: string): Promise<DebugState | null> {
+      const chart = await this.getChart(dataTestSubj);
+
+      try {
+        const visContainer = await chart.findByCssSelector('.echChartStatus');
+        const debugDataString: string | undefined = await visContainer.getAttribute(
+          'data-ech-debug-state'
+        );
+        return debugDataString ? JSON.parse(debugDataString) : null;
+      } catch (error) {
+        throw Error('Elastic charts debugState not found');
+      }
+    }
+
+    /**
+     * Used to set a flag on the window to trigger debug state on elastic charts
+     * @param value
+     */
+    public async setNewChartUiDebugFlag(value = true) {
+      await browser.execute<[boolean], void>((v) => {
+        window._echDebugStateFlag = v;
+      }, value);
+    }
   }
 
   return new ElasticChart();
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index c1746fca6873e..1023c7ac7d889 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -255,6 +255,7 @@
     "charts.controls.rangeErrorMessage": "値は{min}と{max}の間でなければなりません",
     "charts.controls.vislibBasicOptions.legendPositionLabel": "凡例位置",
     "charts.controls.vislibBasicOptions.showTooltipLabel": "ツールヒントを表示",
+    "charts.colorPicker.setColor.screenReaderDescription": "値 {legendDataLabel} の色を設定",
     "console.autocomplete.addMethodMetaText": "メソド",
     "console.consoleDisplayName": "コンソール",
     "console.consoleMenu.copyAsCurlMessage": "リクエストが URL としてコピーされました",
@@ -1503,7 +1504,6 @@
     "discover.fieldNameIcons.stringFieldAriaLabel": "文字列フィールド",
     "discover.fieldNameIcons.unknownFieldAriaLabel": "不明なフィールド",
     "discover.helpMenu.appName": "発見",
-    "discover.histogram.partialData.bucketTooltipText": "選択された時間範囲にはこのバケット全体は含まれていませんが、一部データが含まれている可能性があります。",
     "discover.histogramOfFoundDocumentsAriaLabel": "検出されたドキュメントのヒストグラム",
     "discover.hitsPluralTitle": "{hits, plural, one {ヒット} other {ヒット}}",
     "discover.howToChangeTheTimeTooltip": "時刻を変更するには、上記のグローバル時刻フィルターを使用します。",
@@ -4305,27 +4305,27 @@
     "visTypeVislib.advancedSettings.visualization.heatmap.maxBucketsText": "1つのデータソースが返せるバケットの最大数です。値が大きいとブラウザのレンダリング速度が下がる可能性があります。",
     "visTypeVislib.advancedSettings.visualization.heatmap.maxBucketsTitle": "ヒートマップの最大バケット数",
     "visTypeVislib.aggResponse.allDocsTitle": "すべてのドキュメント",
-    "visTypeVislib.area.areaTitle": "エリア",
-    "visTypeVislib.area.countText": "カウント",
-    "visTypeVislib.area.groupTitle": "系列を分割",
-    "visTypeVislib.area.metricsTitle": "Y 軸",
-    "visTypeVislib.area.radiusTitle": "点のサイズ",
-    "visTypeVislib.area.segmentTitle": "X 軸",
-    "visTypeVislib.area.splitTitle": "チャートを分割",
-    "visTypeVislib.area.tabs.metricsAxesTitle": "メトリックと軸",
-    "visTypeVislib.area.tabs.panelSettingsTitle": "パネル設定",
-    "visTypeVislib.axisModes.normalText": "標準",
-    "visTypeVislib.axisModes.percentageText": "割合 (%)",
-    "visTypeVislib.axisModes.silhouetteText": "シルエット",
-    "visTypeVislib.axisModes.wiggleText": "振動",
-    "visTypeVislib.categoryAxis.rotate.angledText": "傾斜",
-    "visTypeVislib.categoryAxis.rotate.horizontalText": "横",
-    "visTypeVislib.categoryAxis.rotate.verticalText": "縦",
-    "visTypeVislib.chartModes.normalText": "標準",
-    "visTypeVislib.chartModes.stackedText": "スタック",
-    "visTypeVislib.chartTypes.areaText": "エリア",
-    "visTypeVislib.chartTypes.barText": "バー",
-    "visTypeVislib.chartTypes.lineText": "折れ線",
+    "visTypeXy.area.areaTitle": "エリア",
+    "charts.countText": "カウント",
+    "visTypeXy.area.groupTitle": "系列を分割",
+    "visTypeXy.area.metricsTitle": "Y 軸",
+    "visTypeXy.area.radiusTitle": "点のサイズ",
+    "visTypeXy.area.segmentTitle": "X 軸",
+    "visTypeXy.area.splitTitle": "チャートを分割",
+    "visTypeXy.area.tabs.metricsAxesTitle": "メトリックと軸",
+    "visTypeXy.area.tabs.panelSettingsTitle": "パネル設定",
+    "visTypeXy.axisModes.normalText": "標準",
+    "visTypeXy.axisModes.percentageText": "割合 (%)",
+    "visTypeXy.axisModes.silhouetteText": "シルエット",
+    "visTypeXy.axisModes.wiggleText": "振動",
+    "visTypeXy.categoryAxis.rotate.angledText": "傾斜",
+    "visTypeXy.categoryAxis.rotate.horizontalText": "横",
+    "visTypeXy.categoryAxis.rotate.verticalText": "縦",
+    "visTypeXy.chartModes.normalText": "標準",
+    "visTypeXy.chartModes.stackedText": "スタック",
+    "visTypeXy.chartTypes.areaText": "エリア",
+    "visTypeXy.chartTypes.barText": "バー",
+    "visTypeXy.chartTypes.lineText": "折れ線",
     "visTypeVislib.controls.gaugeOptions.alignmentLabel": "アラインメント",
     "visTypeVislib.controls.gaugeOptions.autoExtendRangeLabel": "範囲を自動拡張",
     "visTypeVislib.controls.gaugeOptions.displayWarningsLabel": "警告を表示",
@@ -4351,48 +4351,48 @@
     "visTypeVislib.controls.heatmapOptions.scaleToDataBoundsLabel": "データバウンドに合わせる",
     "visTypeVislib.controls.heatmapOptions.showLabelsTitle": "ラベルを表示",
     "visTypeVislib.controls.heatmapOptions.useCustomRangesLabel": "カスタム範囲を使用",
-    "visTypeVislib.controls.pointSeries.categoryAxis.alignLabel": "配置",
-    "visTypeVislib.controls.pointSeries.categoryAxis.filterLabelsLabel": "フィルターラベル",
-    "visTypeVislib.controls.pointSeries.categoryAxis.labelsTitle": "ラベル",
-    "visTypeVislib.controls.pointSeries.categoryAxis.positionLabel": "位置",
-    "visTypeVislib.controls.pointSeries.categoryAxis.showLabel": "軸線とラベルを表示",
-    "visTypeVislib.controls.pointSeries.categoryAxis.showLabelsLabel": "ラベルを表示",
-    "visTypeVislib.controls.pointSeries.categoryAxis.xAxisTitle": "X 軸",
-    "visTypeVislib.controls.pointSeries.gridAxis.dontShowLabel": "非表示",
-    "visTypeVislib.controls.pointSeries.gridAxis.gridText": "グリッド",
-    "visTypeVislib.controls.pointSeries.gridAxis.xAxisLinesLabel": "X 軸線を表示",
-    "visTypeVislib.controls.pointSeries.gridAxis.yAxisLinesDisabledTooltip": "ヒストグラムに X 軸線は表示できません。",
-    "visTypeVislib.controls.pointSeries.gridAxis.yAxisLinesLabel": "Y 軸線を表示",
-    "visTypeVislib.controls.pointSeries.series.chartTypeLabel": "チャートタイプ",
-    "visTypeVislib.controls.pointSeries.series.lineModeLabel": "線のモード",
-    "visTypeVislib.controls.pointSeries.series.lineWidthLabel": "線の幅",
-    "visTypeVislib.controls.pointSeries.series.metricsTitle": "メトリック",
-    "visTypeVislib.controls.pointSeries.series.modeLabel": "モード",
-    "visTypeVislib.controls.pointSeries.series.newAxisLabel": "新規軸…",
-    "visTypeVislib.controls.pointSeries.series.showDotsLabel": "点を表示",
-    "visTypeVislib.controls.pointSeries.series.showLineLabel": "線を表示",
-    "visTypeVislib.controls.pointSeries.series.valueAxisLabel": "値軸",
-    "visTypeVislib.controls.pointSeries.seriesAccordionAriaLabel": "{agg} オプションを切り替える",
-    "visTypeVislib.controls.pointSeries.valueAxes.addButtonTooltip": "Y 軸を追加します",
-    "visTypeVislib.controls.pointSeries.valueAxes.customExtentsLabel": "カスタム範囲",
-    "visTypeVislib.controls.pointSeries.valueAxes.maxLabel": "最高",
-    "visTypeVislib.controls.pointSeries.valueAxes.minErrorMessage": "最低値は最高値よりも低く設定する必要があります",
-    "visTypeVislib.controls.pointSeries.valueAxes.minLabel": "最低",
-    "visTypeVislib.controls.pointSeries.valueAxes.minNeededScaleText": "ログスケールが選択されている場合、最低値は 0 よりも大きいものである必要があります",
-    "visTypeVislib.controls.pointSeries.valueAxes.modeLabel": "モード",
-    "visTypeVislib.controls.pointSeries.valueAxes.positionLabel": "位置",
-    "visTypeVislib.controls.pointSeries.valueAxes.removeButtonTooltip": "Y 軸を削除します",
-    "visTypeVislib.controls.pointSeries.valueAxes.scaleToDataBounds.boundsMargin": "境界マージン",
-    "visTypeVislib.controls.pointSeries.valueAxes.scaleToDataBounds.minNeededBoundsMargin": "境界マージンは 0 以上でなければなりません",
-    "visTypeVislib.controls.pointSeries.valueAxes.scaleToDataBoundsLabel": "データバウンドに合わせる",
-    "visTypeVislib.controls.pointSeries.valueAxes.scaleTypeLabel": "スケールタイプ",
-    "visTypeVislib.controls.pointSeries.valueAxes.setAxisExtentsLabel": "軸範囲を設定",
-    "visTypeVislib.controls.pointSeries.valueAxes.showLabel": "軸線とラベルを表示",
-    "visTypeVislib.controls.pointSeries.valueAxes.titleLabel": "タイトル",
-    "visTypeVislib.controls.pointSeries.valueAxes.toggleCustomExtendsAriaLabel": "カスタム範囲を切り替える",
-    "visTypeVislib.controls.pointSeries.valueAxes.toggleOptionsAriaLabel": "{axisName} オプションを切り替える",
-    "visTypeVislib.controls.pointSeries.valueAxes.yAxisTitle": "Y 軸",
-    "visTypeVislib.controls.truncateLabel": "切り捨て",
+    "visTypeXy.controls.pointSeries.categoryAxis.alignLabel": "配置",
+    "visTypeXy.controls.pointSeries.categoryAxis.filterLabelsLabel": "フィルターラベル",
+    "visTypeXy.controls.pointSeries.categoryAxis.labelsTitle": "ラベル",
+    "visTypeXy.controls.pointSeries.categoryAxis.positionLabel": "位置",
+    "visTypeXy.controls.pointSeries.categoryAxis.showLabel": "軸線とラベルを表示",
+    "visTypeXy.controls.pointSeries.categoryAxis.showLabelsLabel": "ラベルを表示",
+    "visTypeXy.controls.pointSeries.categoryAxis.xAxisTitle": "X 軸",
+    "visTypeXy.controls.pointSeries.gridAxis.dontShowLabel": "非表示",
+    "visTypeXy.controls.pointSeries.gridAxis.gridText": "グリッド",
+    "visTypeXy.controls.pointSeries.gridAxis.xAxisLinesLabel": "X 軸線を表示",
+    "visTypeXy.controls.pointSeries.gridAxis.yAxisLinesDisabledTooltip": "ヒストグラムに X 軸線は表示できません。",
+    "visTypeXy.controls.pointSeries.gridAxis.yAxisLinesLabel": "Y 軸線を表示",
+    "visTypeXy.controls.pointSeries.series.chartTypeLabel": "チャートタイプ",
+    "visTypeXy.controls.pointSeries.series.lineModeLabel": "線のモード",
+    "visTypeXy.controls.pointSeries.series.lineWidthLabel": "線の幅",
+    "visTypeXy.controls.pointSeries.series.metricsTitle": "メトリック",
+    "visTypeXy.controls.pointSeries.series.modeLabel": "モード",
+    "visTypeXy.controls.pointSeries.series.newAxisLabel": "新規軸…",
+    "visTypeXy.controls.pointSeries.series.showDotsLabel": "点を表示",
+    "visTypeXy.controls.pointSeries.series.showLineLabel": "線を表示",
+    "visTypeXy.controls.pointSeries.series.valueAxisLabel": "値軸",
+    "visTypeXy.controls.pointSeries.seriesAccordionAriaLabel": "{agg} オプションを切り替える",
+    "visTypeXy.controls.pointSeries.valueAxes.addButtonTooltip": "Y 軸を追加します",
+    "visTypeXy.controls.pointSeries.valueAxes.customExtentsLabel": "カスタム範囲",
+    "visTypeXy.controls.pointSeries.valueAxes.maxLabel": "最高",
+    "visTypeXy.controls.pointSeries.valueAxes.minErrorMessage": "最低値は最高値よりも低く設定する必要があります",
+    "visTypeXy.controls.pointSeries.valueAxes.minLabel": "最低",
+    "visTypeXy.controls.pointSeries.valueAxes.minNeededScaleText": "ログスケールが選択されている場合、最低値は 0 よりも大きいものである必要があります",
+    "visTypeXy.controls.pointSeries.valueAxes.modeLabel": "モード",
+    "visTypeXy.controls.pointSeries.valueAxes.positionLabel": "位置",
+    "visTypeXy.controls.pointSeries.valueAxes.removeButtonTooltip": "Y 軸を削除します",
+    "visTypeXy.controls.pointSeries.valueAxes.scaleToDataBounds.boundsMargin": "境界マージン",
+    "visTypeXy.controls.pointSeries.valueAxes.scaleToDataBounds.minNeededBoundsMargin": "境界マージンは 0 以上でなければなりません",
+    "visTypeXy.controls.pointSeries.valueAxes.scaleToDataBoundsLabel": "データバウンドに合わせる",
+    "visTypeXy.controls.pointSeries.valueAxes.scaleTypeLabel": "スケールタイプ",
+    "visTypeXy.controls.pointSeries.valueAxes.setAxisExtentsLabel": "軸範囲を設定",
+    "visTypeXy.controls.pointSeries.valueAxes.showLabel": "軸線とラベルを表示",
+    "visTypeXy.controls.pointSeries.valueAxes.titleLabel": "タイトル",
+    "visTypeXy.controls.pointSeries.valueAxes.toggleCustomExtendsAriaLabel": "カスタム範囲を切り替える",
+    "visTypeXy.controls.pointSeries.valueAxes.toggleOptionsAriaLabel": "{axisName} オプションを切り替える",
+    "visTypeXy.controls.pointSeries.valueAxes.yAxisTitle": "Y 軸",
+    "visTypeXy.controls.truncateLabel": "切り捨て",
     "visTypeVislib.editors.heatmap.basicSettingsTitle": "基本設定",
     "visTypeVislib.editors.heatmap.heatmapSettingsTitle": "ヒートマップ設定",
     "visTypeVislib.editors.heatmap.highlightLabel": "ハイライト範囲",
@@ -4403,16 +4403,16 @@
     "visTypeVislib.editors.pie.showLabelsLabel": "ラベルを表示",
     "visTypeVislib.editors.pie.showTopLevelOnlyLabel": "トップレベルのみ表示",
     "visTypeVislib.editors.pie.showValuesLabel": "値を表示",
-    "visTypeVislib.editors.pointSeries.currentTimeMarkerLabel": "現在時刻マーカー",
-    "visTypeVislib.editors.pointSeries.orderBucketsBySumLabel": "バケットを合計で並べ替え",
-    "visTypeVislib.editors.pointSeries.settingsTitle": "設定",
-    "visTypeVislib.editors.pointSeries.showLabels": "チャートに値を表示",
-    "visTypeVislib.editors.pointSeries.thresholdLine.colorLabel": "線の色",
-    "visTypeVislib.editors.pointSeries.thresholdLine.showLabel": "しきい線を表示",
-    "visTypeVislib.editors.pointSeries.thresholdLine.styleLabel": "ラインスタイル",
-    "visTypeVislib.editors.pointSeries.thresholdLine.valueLabel": "しきい値",
-    "visTypeVislib.editors.pointSeries.thresholdLine.widthLabel": "線の幅",
-    "visTypeVislib.editors.pointSeries.thresholdLineSettingsTitle": "しきい線",
+    "visTypeXy.editors.pointSeries.currentTimeMarkerLabel": "現在時刻マーカー",
+    "visTypeXy.editors.pointSeries.orderBucketsBySumLabel": "バケットを合計で並べ替え",
+    "visTypeXy.editors.pointSeries.settingsTitle": "設定",
+    "visTypeXy.editors.pointSeries.showLabels": "チャートに値を表示",
+    "visTypeXy.editors.pointSeries.thresholdLine.colorLabel": "線の色",
+    "visTypeXy.editors.pointSeries.thresholdLine.showLabel": "しきい線を表示",
+    "visTypeXy.editors.pointSeries.thresholdLine.styleLabel": "ラインスタイル",
+    "visTypeXy.editors.pointSeries.thresholdLine.valueLabel": "しきい値",
+    "visTypeXy.editors.pointSeries.thresholdLine.widthLabel": "線の幅",
+    "visTypeXy.editors.pointSeries.thresholdLineSettingsTitle": "しきい線",
     "visTypeVislib.functions.pie.help": "パイビジュアライゼーション",
     "visTypeVislib.functions.vislib.help": "Vislib ビジュアライゼーション",
     "visTypeVislib.gauge.alignmentAutomaticTitle": "自動",
@@ -4430,46 +4430,45 @@
     "visTypeVislib.heatmap.metricTitle": "値",
     "visTypeVislib.heatmap.segmentTitle": "X 軸",
     "visTypeVislib.heatmap.splitTitle": "チャートを分割",
-    "visTypeVislib.histogram.groupTitle": "系列を分割",
-    "visTypeVislib.histogram.metricTitle": "Y 軸",
-    "visTypeVislib.histogram.radiusTitle": "点のサイズ",
-    "visTypeVislib.histogram.segmentTitle": "X 軸",
-    "visTypeVislib.histogram.splitTitle": "チャートを分割",
-    "visTypeVislib.horizontalBar.groupTitle": "系列を分割",
-    "visTypeVislib.horizontalBar.metricTitle": "Y 軸",
-    "visTypeVislib.horizontalBar.radiusTitle": "点のサイズ",
-    "visTypeVislib.horizontalBar.segmentTitle": "X 軸",
-    "visTypeVislib.horizontalBar.splitTitle": "チャートを分割",
-    "visTypeVislib.interpolationModes.smoothedText": "スムーズ",
-    "visTypeVislib.interpolationModes.steppedText": "ステップ",
-    "visTypeVislib.interpolationModes.straightText": "直線",
-    "visTypeVislib.legendPositions.bottomText": "一番下",
-    "visTypeVislib.legendPositions.leftText": "左",
-    "visTypeVislib.legendPositions.rightText": "右",
-    "visTypeVislib.legendPositions.topText": "トップ",
-    "visTypeVislib.line.groupTitle": "系列を分割",
-    "visTypeVislib.line.lineTitle": "折れ線",
-    "visTypeVislib.line.metricTitle": "Y 軸",
-    "visTypeVislib.line.radiusTitle": "点のサイズ",
-    "visTypeVislib.line.segmentTitle": "X 軸",
-    "visTypeVislib.line.splitTitle": "チャートを分割",
+    "visTypeXy.histogram.groupTitle": "系列を分割",
+    "visTypeXy.histogram.metricTitle": "Y 軸",
+    "visTypeXy.histogram.radiusTitle": "点のサイズ",
+    "visTypeXy.histogram.segmentTitle": "X 軸",
+    "visTypeXy.histogram.splitTitle": "チャートを分割",
+    "visTypeXy.horizontalBar.groupTitle": "系列を分割",
+    "visTypeXy.horizontalBar.metricTitle": "Y 軸",
+    "visTypeXy.horizontalBar.radiusTitle": "点のサイズ",
+    "visTypeXy.horizontalBar.segmentTitle": "X 軸",
+    "visTypeXy.horizontalBar.splitTitle": "チャートを分割",
+    "visTypeXy.interpolationModes.smoothedText": "スムーズ",
+    "visTypeXy.interpolationModes.steppedText": "ステップ",
+    "visTypeXy.interpolationModes.straightText": "直線",
+    "visTypeXy.legendPositions.bottomText": "一番下",
+    "visTypeXy.legendPositions.leftText": "左",
+    "visTypeXy.legendPositions.rightText": "右",
+    "visTypeXy.legendPositions.topText": "トップ",
+    "visTypeXy.line.groupTitle": "系列を分割",
+    "visTypeXy.line.lineTitle": "折れ線",
+    "visTypeXy.line.metricTitle": "Y 軸",
+    "visTypeXy.line.radiusTitle": "点のサイズ",
+    "visTypeXy.line.segmentTitle": "X 軸",
+    "visTypeXy.line.splitTitle": "チャートを分割",
     "visTypeVislib.pie.metricTitle": "サイズのスライス",
     "visTypeVislib.pie.pieTitle": "パイ",
     "visTypeVislib.pie.segmentTitle": "スライスの分割",
     "visTypeVislib.pie.splitTitle": "チャートを分割",
-    "visTypeVislib.scaleTypes.linearText": "線形",
-    "visTypeVislib.scaleTypes.logText": "ログ",
-    "visTypeVislib.scaleTypes.squareRootText": "平方根",
-    "visTypeVislib.thresholdLine.style.dashedText": "鎖線",
-    "visTypeVislib.thresholdLine.style.dotdashedText": "点線",
-    "visTypeVislib.thresholdLine.style.fullText": "完全",
+    "visTypeXy.scaleTypes.linearText": "線形",
+    "visTypeXy.scaleTypes.logText": "ログ",
+    "visTypeXy.scaleTypes.squareRootText": "平方根",
+    "visTypeXy.thresholdLine.style.dashedText": "鎖線",
+    "visTypeXy.thresholdLine.style.dotdashedText": "点線",
+    "visTypeXy.thresholdLine.style.fullText": "完全",
     "visTypeVislib.vislib.errors.noResultsFoundTitle": "結果が見つかりませんでした",
     "visTypeVislib.vislib.heatmap.maxBucketsText": "定義された数列が多すぎます ({nr})。構成されている最大値は {max} です。",
     "visTypeVislib.vislib.legend.filterForValueButtonAriaLabel": "値 {legendDataLabel} でフィルタリング",
     "visTypeVislib.vislib.legend.filterOptionsLegend": "{legendDataLabel}、フィルターオプション",
     "visTypeVislib.vislib.legend.filterOutValueButtonAriaLabel": "値 {legendDataLabel} を除外",
     "visTypeVislib.vislib.legend.loadingLabel": "読み込み中…",
-    "visTypeVislib.vislib.legend.setColorScreenReaderDescription": "値 {legendDataLabel} の色を設定",
     "visTypeVislib.vislib.legend.toggleLegendButtonAriaLabel": "凡例を切り替える",
     "visTypeVislib.vislib.legend.toggleLegendButtonTitle": "凡例を切り替える",
     "visTypeVislib.vislib.legend.toggleOptionsButtonAriaLabel": "{legendDataLabel}、トグルオプション",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 50f9da227b81f..f803ff48df76d 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -255,6 +255,7 @@
     "charts.controls.rangeErrorMessage": "值必须是在 {min} 到 {max} 的范围内",
     "charts.controls.vislibBasicOptions.legendPositionLabel": "图例位置",
     "charts.controls.vislibBasicOptions.showTooltipLabel": "显示工具提示",
+    "charts.colorPicker.setColor.screenReaderDescription": "为值 {legendDataLabel} 设置颜色",
     "console.autocomplete.addMethodMetaText": "方法",
     "console.consoleDisplayName": "控制台",
     "console.consoleMenu.copyAsCurlMessage": "请求已复制为 cURL",
@@ -1504,7 +1505,6 @@
     "discover.fieldNameIcons.stringFieldAriaLabel": "字符串字段",
     "discover.fieldNameIcons.unknownFieldAriaLabel": "未知字段",
     "discover.helpMenu.appName": "Discover",
-    "discover.histogram.partialData.bucketTooltipText": "选定的时间范围不包括此整个存储桶，其可能包含部分数据。",
     "discover.histogramOfFoundDocumentsAriaLabel": "已找到文档的直方图",
     "discover.hitsPluralTitle": "{hits, plural, one {次命中} other {次命中}}",
     "discover.howToChangeTheTimeTooltip": "要更改时间，请使用上面的全局时间筛选",
@@ -4307,27 +4307,27 @@
     "visTypeVislib.advancedSettings.visualization.heatmap.maxBucketsText": "单个数据源可以返回的最大存储桶数目。较高的数目可能对浏览器呈现性能有负面影响",
     "visTypeVislib.advancedSettings.visualization.heatmap.maxBucketsTitle": "热图最大存储桶数",
     "visTypeVislib.aggResponse.allDocsTitle": "所有文档",
-    "visTypeVislib.area.areaTitle": "面积图",
-    "visTypeVislib.area.countText": "计数",
-    "visTypeVislib.area.groupTitle": "拆分序列",
-    "visTypeVislib.area.metricsTitle": "Y 轴",
-    "visTypeVislib.area.radiusTitle": "点大小",
-    "visTypeVislib.area.segmentTitle": "X 轴",
-    "visTypeVislib.area.splitTitle": "拆分图表",
-    "visTypeVislib.area.tabs.metricsAxesTitle": "指标和轴",
-    "visTypeVislib.area.tabs.panelSettingsTitle": "面板设置",
-    "visTypeVislib.axisModes.normalText": "正常",
-    "visTypeVislib.axisModes.percentageText": "百分比",
-    "visTypeVislib.axisModes.silhouetteText": "剪影",
-    "visTypeVislib.axisModes.wiggleText": "扭动",
-    "visTypeVislib.categoryAxis.rotate.angledText": "带角度",
-    "visTypeVislib.categoryAxis.rotate.horizontalText": "水平",
-    "visTypeVislib.categoryAxis.rotate.verticalText": "垂直",
-    "visTypeVislib.chartModes.normalText": "正常",
-    "visTypeVislib.chartModes.stackedText": "堆叠",
-    "visTypeVislib.chartTypes.areaText": "面积图",
-    "visTypeVislib.chartTypes.barText": "条形图",
-    "visTypeVislib.chartTypes.lineText": "折线图",
+    "visTypeXy.area.areaTitle": "面积图",
+    "charts.countText": "计数",
+    "visTypeXy.area.groupTitle": "拆分序列",
+    "visTypeXy.area.metricsTitle": "Y 轴",
+    "visTypeXy.area.radiusTitle": "点大小",
+    "visTypeXy.area.segmentTitle": "X 轴",
+    "visTypeXy.area.splitTitle": "拆分图表",
+    "visTypeXy.area.tabs.metricsAxesTitle": "指标和轴",
+    "visTypeXy.area.tabs.panelSettingsTitle": "面板设置",
+    "visTypeXy.axisModes.normalText": "正常",
+    "visTypeXy.axisModes.percentageText": "百分比",
+    "visTypeXy.axisModes.silhouetteText": "剪影",
+    "visTypeXy.axisModes.wiggleText": "扭动",
+    "visTypeXy.categoryAxis.rotate.angledText": "带角度",
+    "visTypeXy.categoryAxis.rotate.horizontalText": "水平",
+    "visTypeXy.categoryAxis.rotate.verticalText": "垂直",
+    "visTypeXy.chartModes.normalText": "正常",
+    "visTypeXy.chartModes.stackedText": "堆叠",
+    "visTypeXy.chartTypes.areaText": "面积图",
+    "visTypeXy.chartTypes.barText": "条形图",
+    "visTypeXy.chartTypes.lineText": "折线图",
     "visTypeVislib.controls.gaugeOptions.alignmentLabel": "对齐方式",
     "visTypeVislib.controls.gaugeOptions.autoExtendRangeLabel": "自动扩展范围",
     "visTypeVislib.controls.gaugeOptions.displayWarningsLabel": "显示警告",
@@ -4353,48 +4353,48 @@
     "visTypeVislib.controls.heatmapOptions.scaleToDataBoundsLabel": "缩放到数据边界",
     "visTypeVislib.controls.heatmapOptions.showLabelsTitle": "显示标签",
     "visTypeVislib.controls.heatmapOptions.useCustomRangesLabel": "使用定制范围",
-    "visTypeVislib.controls.pointSeries.categoryAxis.alignLabel": "对齐",
-    "visTypeVislib.controls.pointSeries.categoryAxis.filterLabelsLabel": "筛选标签",
-    "visTypeVislib.controls.pointSeries.categoryAxis.labelsTitle": "标签",
-    "visTypeVislib.controls.pointSeries.categoryAxis.positionLabel": "位置",
-    "visTypeVislib.controls.pointSeries.categoryAxis.showLabel": "显示",
-    "visTypeVislib.controls.pointSeries.categoryAxis.showLabelsLabel": "显示标签",
-    "visTypeVislib.controls.pointSeries.categoryAxis.xAxisTitle": "X 轴",
-    "visTypeVislib.controls.pointSeries.gridAxis.dontShowLabel": "不显示",
-    "visTypeVislib.controls.pointSeries.gridAxis.gridText": "网格",
-    "visTypeVislib.controls.pointSeries.gridAxis.xAxisLinesLabel": "显示 X 轴线",
-    "visTypeVislib.controls.pointSeries.gridAxis.yAxisLinesDisabledTooltip": "直方图的 X 轴线无法显示。",
-    "visTypeVislib.controls.pointSeries.gridAxis.yAxisLinesLabel": "Y 轴线",
-    "visTypeVislib.controls.pointSeries.series.chartTypeLabel": "图表类型",
-    "visTypeVislib.controls.pointSeries.series.lineModeLabel": "线条模式",
-    "visTypeVislib.controls.pointSeries.series.lineWidthLabel": "线条宽度",
-    "visTypeVislib.controls.pointSeries.series.metricsTitle": "指标",
-    "visTypeVislib.controls.pointSeries.series.modeLabel": "模式",
-    "visTypeVislib.controls.pointSeries.series.newAxisLabel": "新建轴…...",
-    "visTypeVislib.controls.pointSeries.series.showDotsLabel": "显示点线",
-    "visTypeVislib.controls.pointSeries.series.showLineLabel": "显示线条",
-    "visTypeVislib.controls.pointSeries.series.valueAxisLabel": "值轴",
-    "visTypeVislib.controls.pointSeries.seriesAccordionAriaLabel": "切换 {agg} 选项",
-    "visTypeVislib.controls.pointSeries.valueAxes.addButtonTooltip": "添加 Y 轴",
-    "visTypeVislib.controls.pointSeries.valueAxes.customExtentsLabel": "定制范围",
-    "visTypeVislib.controls.pointSeries.valueAxes.maxLabel": "最大值",
-    "visTypeVislib.controls.pointSeries.valueAxes.minErrorMessage": "最小值应小于最大值。",
-    "visTypeVislib.controls.pointSeries.valueAxes.minLabel": "最小值",
-    "visTypeVislib.controls.pointSeries.valueAxes.minNeededScaleText": "如果选择了对数刻度，最小值必须大于 0。",
-    "visTypeVislib.controls.pointSeries.valueAxes.modeLabel": "模式",
-    "visTypeVislib.controls.pointSeries.valueAxes.positionLabel": "位置",
-    "visTypeVislib.controls.pointSeries.valueAxes.removeButtonTooltip": "移除 Y 轴",
-    "visTypeVislib.controls.pointSeries.valueAxes.scaleToDataBounds.boundsMargin": "边界边距",
-    "visTypeVislib.controls.pointSeries.valueAxes.scaleToDataBounds.minNeededBoundsMargin": "边界边距必须大于或等于 0。",
-    "visTypeVislib.controls.pointSeries.valueAxes.scaleToDataBoundsLabel": "缩放到数据边界",
-    "visTypeVislib.controls.pointSeries.valueAxes.scaleTypeLabel": "缩放类型",
-    "visTypeVislib.controls.pointSeries.valueAxes.setAxisExtentsLabel": "设置轴范围",
-    "visTypeVislib.controls.pointSeries.valueAxes.showLabel": "显示",
-    "visTypeVislib.controls.pointSeries.valueAxes.titleLabel": "标题",
-    "visTypeVislib.controls.pointSeries.valueAxes.toggleCustomExtendsAriaLabel": "切换定制范围",
-    "visTypeVislib.controls.pointSeries.valueAxes.toggleOptionsAriaLabel": "切换 {axisName} 选项",
-    "visTypeVislib.controls.pointSeries.valueAxes.yAxisTitle": "Y 轴",
-    "visTypeVislib.controls.truncateLabel": "截断",
+    "visTypeXy.controls.pointSeries.categoryAxis.alignLabel": "对齐",
+    "visTypeXy.controls.pointSeries.categoryAxis.filterLabelsLabel": "筛选标签",
+    "visTypeXy.controls.pointSeries.categoryAxis.labelsTitle": "标签",
+    "visTypeXy.controls.pointSeries.categoryAxis.positionLabel": "位置",
+    "visTypeXy.controls.pointSeries.categoryAxis.showLabel": "显示",
+    "visTypeXy.controls.pointSeries.categoryAxis.showLabelsLabel": "显示标签",
+    "visTypeXy.controls.pointSeries.categoryAxis.xAxisTitle": "X 轴",
+    "visTypeXy.controls.pointSeries.gridAxis.dontShowLabel": "不显示",
+    "visTypeXy.controls.pointSeries.gridAxis.gridText": "网格",
+    "visTypeXy.controls.pointSeries.gridAxis.xAxisLinesLabel": "显示 X 轴线",
+    "visTypeXy.controls.pointSeries.gridAxis.yAxisLinesDisabledTooltip": "直方图的 X 轴线无法显示。",
+    "visTypeXy.controls.pointSeries.gridAxis.yAxisLinesLabel": "Y 轴线",
+    "visTypeXy.controls.pointSeries.series.chartTypeLabel": "图表类型",
+    "visTypeXy.controls.pointSeries.series.lineModeLabel": "线条模式",
+    "visTypeXy.controls.pointSeries.series.lineWidthLabel": "线条宽度",
+    "visTypeXy.controls.pointSeries.series.metricsTitle": "指标",
+    "visTypeXy.controls.pointSeries.series.modeLabel": "模式",
+    "visTypeXy.controls.pointSeries.series.newAxisLabel": "新建轴…...",
+    "visTypeXy.controls.pointSeries.series.showDotsLabel": "显示点线",
+    "visTypeXy.controls.pointSeries.series.showLineLabel": "显示线条",
+    "visTypeXy.controls.pointSeries.series.valueAxisLabel": "值轴",
+    "visTypeXy.controls.pointSeries.seriesAccordionAriaLabel": "切换 {agg} 选项",
+    "visTypeXy.controls.pointSeries.valueAxes.addButtonTooltip": "添加 Y 轴",
+    "visTypeXy.controls.pointSeries.valueAxes.customExtentsLabel": "定制范围",
+    "visTypeXy.controls.pointSeries.valueAxes.maxLabel": "最大值",
+    "visTypeXy.controls.pointSeries.valueAxes.minErrorMessage": "最小值应小于最大值。",
+    "visTypeXy.controls.pointSeries.valueAxes.minLabel": "最小值",
+    "visTypeXy.controls.pointSeries.valueAxes.minNeededScaleText": "如果选择了对数刻度，最小值必须大于 0。",
+    "visTypeXy.controls.pointSeries.valueAxes.modeLabel": "模式",
+    "visTypeXy.controls.pointSeries.valueAxes.positionLabel": "位置",
+    "visTypeXy.controls.pointSeries.valueAxes.removeButtonTooltip": "移除 Y 轴",
+    "visTypeXy.controls.pointSeries.valueAxes.scaleToDataBounds.boundsMargin": "边界边距",
+    "visTypeXy.controls.pointSeries.valueAxes.scaleToDataBounds.minNeededBoundsMargin": "边界边距必须大于或等于 0。",
+    "visTypeXy.controls.pointSeries.valueAxes.scaleToDataBoundsLabel": "缩放到数据边界",
+    "visTypeXy.controls.pointSeries.valueAxes.scaleTypeLabel": "缩放类型",
+    "visTypeXy.controls.pointSeries.valueAxes.setAxisExtentsLabel": "设置轴范围",
+    "visTypeXy.controls.pointSeries.valueAxes.showLabel": "显示",
+    "visTypeXy.controls.pointSeries.valueAxes.titleLabel": "标题",
+    "visTypeXy.controls.pointSeries.valueAxes.toggleCustomExtendsAriaLabel": "切换定制范围",
+    "visTypeXy.controls.pointSeries.valueAxes.toggleOptionsAriaLabel": "切换 {axisName} 选项",
+    "visTypeXy.controls.pointSeries.valueAxes.yAxisTitle": "Y 轴",
+    "visTypeXy.controls.truncateLabel": "截断",
     "visTypeVislib.editors.heatmap.basicSettingsTitle": "基本设置",
     "visTypeVislib.editors.heatmap.heatmapSettingsTitle": "热图设置",
     "visTypeVislib.editors.heatmap.highlightLabel": "高亮范围",
@@ -4405,16 +4405,16 @@
     "visTypeVislib.editors.pie.showLabelsLabel": "显示标签",
     "visTypeVislib.editors.pie.showTopLevelOnlyLabel": "仅显示顶级",
     "visTypeVislib.editors.pie.showValuesLabel": "显示值",
-    "visTypeVislib.editors.pointSeries.currentTimeMarkerLabel": "当前时间标记",
-    "visTypeVislib.editors.pointSeries.orderBucketsBySumLabel": "按总计值排序存储桶",
-    "visTypeVislib.editors.pointSeries.settingsTitle": "设置",
-    "visTypeVislib.editors.pointSeries.showLabels": "在图表上显示值",
-    "visTypeVislib.editors.pointSeries.thresholdLine.colorLabel": "线条颜色",
-    "visTypeVislib.editors.pointSeries.thresholdLine.showLabel": "显示阈值线条",
-    "visTypeVislib.editors.pointSeries.thresholdLine.styleLabel": "线条样式",
-    "visTypeVislib.editors.pointSeries.thresholdLine.valueLabel": "阈值",
-    "visTypeVislib.editors.pointSeries.thresholdLine.widthLabel": "线条宽度",
-    "visTypeVislib.editors.pointSeries.thresholdLineSettingsTitle": "阈值线条",
+    "visTypeXy.editors.pointSeries.currentTimeMarkerLabel": "当前时间标记",
+    "visTypeXy.editors.pointSeries.orderBucketsBySumLabel": "按总计值排序存储桶",
+    "visTypeXy.editors.pointSeries.settingsTitle": "设置",
+    "visTypeXy.editors.pointSeries.showLabels": "在图表上显示值",
+    "visTypeXy.editors.pointSeries.thresholdLine.colorLabel": "线条颜色",
+    "visTypeXy.editors.pointSeries.thresholdLine.showLabel": "显示阈值线条",
+    "visTypeXy.editors.pointSeries.thresholdLine.styleLabel": "线条样式",
+    "visTypeXy.editors.pointSeries.thresholdLine.valueLabel": "阈值",
+    "visTypeXy.editors.pointSeries.thresholdLine.widthLabel": "线条宽度",
+    "visTypeXy.editors.pointSeries.thresholdLineSettingsTitle": "阈值线条",
     "visTypeVislib.functions.pie.help": "饼图可视化",
     "visTypeVislib.functions.vislib.help": "Vislib 可视化",
     "visTypeVislib.gauge.alignmentAutomaticTitle": "自动",
@@ -4432,46 +4432,45 @@
     "visTypeVislib.heatmap.metricTitle": "值",
     "visTypeVislib.heatmap.segmentTitle": "X 轴",
     "visTypeVislib.heatmap.splitTitle": "拆分图表",
-    "visTypeVislib.histogram.groupTitle": "拆分序列",
-    "visTypeVislib.histogram.metricTitle": "Y 轴",
-    "visTypeVislib.histogram.radiusTitle": "点大小",
-    "visTypeVislib.histogram.segmentTitle": "X 轴",
-    "visTypeVislib.histogram.splitTitle": "拆分图表",
-    "visTypeVislib.horizontalBar.groupTitle": "拆分序列",
-    "visTypeVislib.horizontalBar.metricTitle": "Y 轴",
-    "visTypeVislib.horizontalBar.radiusTitle": "点大小",
-    "visTypeVislib.horizontalBar.segmentTitle": "X 轴",
-    "visTypeVislib.horizontalBar.splitTitle": "拆分图表",
-    "visTypeVislib.interpolationModes.smoothedText": "平滑",
-    "visTypeVislib.interpolationModes.steppedText": "渐变",
-    "visTypeVislib.interpolationModes.straightText": "直线",
-    "visTypeVislib.legendPositions.bottomText": "下",
-    "visTypeVislib.legendPositions.leftText": "左",
-    "visTypeVislib.legendPositions.rightText": "右",
-    "visTypeVislib.legendPositions.topText": "上",
-    "visTypeVislib.line.groupTitle": "拆分序列",
-    "visTypeVislib.line.lineTitle": "折线图",
-    "visTypeVislib.line.metricTitle": "Y 轴",
-    "visTypeVislib.line.radiusTitle": "点大小",
-    "visTypeVislib.line.segmentTitle": "X 轴",
-    "visTypeVislib.line.splitTitle": "拆分图表",
+    "visTypeXy.histogram.groupTitle": "拆分序列",
+    "visTypeXy.histogram.metricTitle": "Y 轴",
+    "visTypeXy.histogram.radiusTitle": "点大小",
+    "visTypeXy.histogram.segmentTitle": "X 轴",
+    "visTypeXy.histogram.splitTitle": "拆分图表",
+    "visTypeXy.horizontalBar.groupTitle": "拆分序列",
+    "visTypeXy.horizontalBar.metricTitle": "Y 轴",
+    "visTypeXy.horizontalBar.radiusTitle": "点大小",
+    "visTypeXy.horizontalBar.segmentTitle": "X 轴",
+    "visTypeXy.horizontalBar.splitTitle": "拆分图表",
+    "visTypeXy.interpolationModes.smoothedText": "平滑",
+    "visTypeXy.interpolationModes.steppedText": "渐变",
+    "visTypeXy.interpolationModes.straightText": "直线",
+    "visTypeXy.legendPositions.bottomText": "下",
+    "visTypeXy.legendPositions.leftText": "左",
+    "visTypeXy.legendPositions.rightText": "右",
+    "visTypeXy.legendPositions.topText": "上",
+    "visTypeXy.line.groupTitle": "拆分序列",
+    "visTypeXy.line.lineTitle": "折线图",
+    "visTypeXy.line.metricTitle": "Y 轴",
+    "visTypeXy.line.radiusTitle": "点大小",
+    "visTypeXy.line.segmentTitle": "X 轴",
+    "visTypeXy.line.splitTitle": "拆分图表",
     "visTypeVislib.pie.metricTitle": "切片大小",
     "visTypeVislib.pie.pieTitle": "饼图",
     "visTypeVislib.pie.segmentTitle": "拆分切片",
     "visTypeVislib.pie.splitTitle": "拆分图表",
-    "visTypeVislib.scaleTypes.linearText": "线性",
-    "visTypeVislib.scaleTypes.logText": "对数",
-    "visTypeVislib.scaleTypes.squareRootText": "平方根",
-    "visTypeVislib.thresholdLine.style.dashedText": "虚线",
-    "visTypeVislib.thresholdLine.style.dotdashedText": "点虚线",
-    "visTypeVislib.thresholdLine.style.fullText": "实线",
+    "visTypeXy.scaleTypes.linearText": "线性",
+    "visTypeXy.scaleTypes.logText": "对数",
+    "visTypeXy.scaleTypes.squareRootText": "平方根",
+    "visTypeXy.thresholdLine.style.dashedText": "虚线",
+    "visTypeXy.thresholdLine.style.dotdashedText": "点虚线",
+    "visTypeXy.thresholdLine.style.fullText": "实线",
     "visTypeVislib.vislib.errors.noResultsFoundTitle": "找不到结果",
     "visTypeVislib.vislib.heatmap.maxBucketsText": "定义了过多的序列 ({nr})。配置的最大值为 {max}。",
     "visTypeVislib.vislib.legend.filterForValueButtonAriaLabel": "筛留值 {legendDataLabel}",
     "visTypeVislib.vislib.legend.filterOptionsLegend": "{legendDataLabel}, 筛选选项",
     "visTypeVislib.vislib.legend.filterOutValueButtonAriaLabel": "筛除值 {legendDataLabel}",
     "visTypeVislib.vislib.legend.loadingLabel": "正在加载……",
-    "visTypeVislib.vislib.legend.setColorScreenReaderDescription": "为值 {legendDataLabel} 设置颜色",
     "visTypeVislib.vislib.legend.toggleLegendButtonAriaLabel": "切换图例",
     "visTypeVislib.vislib.legend.toggleLegendButtonTitle": "切换图例",
     "visTypeVislib.vislib.legend.toggleOptionsButtonAriaLabel": "{legendDataLabel}, 切换选项",