diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
index 0ea44e469f8ddd..255654cdcb07af 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
@@ -4,12 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import _ from 'lodash';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiButtonGroup, EuiFormRow } from '@elastic/eui';
-import { State, SeriesType, visualizationTypes } from './types';
-import { VisualizationLayerWidgetProps } from '../types';
+import { EuiButtonGroup, EuiFormRow, htmlIdGenerator } from '@elastic/eui';
+import { State, SeriesType, visualizationTypes, YAxisMode } from './types';
+import { VisualizationDimensionEditorProps, VisualizationLayerWidgetProps } from '../types';
 import { isHorizontalChart, isHorizontalSeries } from './state_helpers';
 import { trackUiEvent } from '../lens_ui_telemetry';
 
@@ -68,3 +67,73 @@ export function LayerContextMenu(props: VisualizationLayerWidgetProps<State>) {
     </EuiFormRow>
   );
 }
+
+const idPrefix = htmlIdGenerator()();
+
+export function DimensionEditor({
+  state,
+  setState,
+  layerId,
+  accessor,
+}: VisualizationDimensionEditorProps<State>) {
+  const index = state.layers.findIndex((l) => l.layerId === layerId);
+  const layer = state.layers[index];
+  const axisMode =
+    (layer.yAxisConfig &&
+      layer.yAxisConfig?.find((yAxisConfig) => yAxisConfig.forAccessor === accessor)?.mode) ||
+    'auto';
+  return (
+    <EuiFormRow
+      display="columnCompressed"
+      label={i18n.translate('xpack.lens.xyChart.axisSide.label', {
+        defaultMessage: 'Axis side',
+      })}
+    >
+      <EuiButtonGroup
+        legend={i18n.translate('xpack.lens.xyChart.axisSide.label', {
+          defaultMessage: 'Axis side',
+        })}
+        name="axisSide"
+        buttonSize="compressed"
+        className="eui-displayInlineBlock"
+        options={[
+          {
+            id: `${idPrefix}auto`,
+            label: i18n.translate('xpack.lens.xyChart.axisSide.auto', {
+              defaultMessage: 'Auto',
+            }),
+          },
+          {
+            id: `${idPrefix}left`,
+            label: i18n.translate('xpack.lens.xyChart.axisSide.left', {
+              defaultMessage: 'Left',
+            }),
+          },
+          {
+            id: `${idPrefix}right`,
+            label: i18n.translate('xpack.lens.xyChart.axisSide.right', {
+              defaultMessage: 'Right',
+            }),
+          },
+        ]}
+        idSelected={`${idPrefix}${axisMode}`}
+        onChange={(id) => {
+          const newMode = id.replace(idPrefix, '') as YAxisMode;
+          const newYAxisConfigs = [...(layer.yAxisConfig || [])];
+          const existingIndex = newYAxisConfigs.findIndex(
+            (yAxisConfig) => yAxisConfig.forAccessor === accessor
+          );
+          if (existingIndex !== -1) {
+            newYAxisConfigs[existingIndex].mode = newMode;
+          } else {
+            newYAxisConfigs.push({
+              forAccessor: accessor,
+              mode: newMode,
+            });
+          }
+          setState(updateLayer(state, { ...layer, yAxisConfig: newYAxisConfigs }, index));
+        }}
+      />
+    </EuiFormRow>
+  );
+}
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx
index 89fa57f55aae11..732fbb1fa7c715 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx
@@ -269,31 +269,6 @@ export function XYChart({
       }
     : undefined;
 
-  // TODO implement this logic to figure out which axes and groups we need
-  /*
-  // restructure state
-  const series = {
-    auto: [{ layer: <id>, accessor: <id>, formatter: {} }],
-    left: [{ layer: <id>, accessor: <id>, formatter: {} }]
-    right: [{ layer: <id>, accessor: <id>, formatter: {} }]
-  }
-
-  // sort auto series:
-
-  forEach(series.auto as siri) {
-    if(left.size == 0 || (left.size > 0 && formattersMatch)) left.push(siri) // default to left if formatters work
-    else if(right.size == 0 || (right.size > 0 && formattersMatch)) right.push(siri) // default to right if formatters don't match
-    else if (right.size > left.size ) left.push(siri) // otherwise balance using round robin (exotic edge case)
-    else right.push(siri)
-  }
-
-  // apply
-
-  either create one left and one right axis with the first formatter in the list
-
-  or group the left and right series by formatter and make every tuple [side, formatter] a series group with an axis
-   */
-
   return (
     <Chart>
       <Settings
@@ -397,9 +372,14 @@ export function XYChart({
           groupId={axis.groupId}
           position={axis.position}
           title={
-            data.tables[axis.series[0].layer].columns.find(
-              (column) => column.id === axis.series[0].accessor
-            )?.name || args.yTitle
+            axis.series
+              .map(
+                (series) =>
+                  data.tables[series.layer].columns.find((column) => column.id === series.accessor)
+                    ?.name
+              )
+              .filter((name) => Boolean(name))
+              .join(', ') || args.yTitle
           }
           showGridLines={false}
           hide={filteredLayers[0].hide}
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_visualization.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_visualization.tsx
index 9127eeb6257bb7..f07ad541b3a994 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_visualization.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_visualization.tsx
@@ -9,20 +9,11 @@ import _ from 'lodash';
 import { render } from 'react-dom';
 import { Position } from '@elastic/charts';
 import { I18nProvider } from '@kbn/i18n/react';
-import { htmlIdGenerator } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { EuiButtonGroup, EuiFormRow } from '@elastic/eui';
 import { getSuggestions } from './xy_suggestions';
-import { LayerContextMenu } from './xy_config_panel';
+import { DimensionEditor, LayerContextMenu } from './xy_config_panel';
 import { Visualization, OperationMetadata, VisualizationType } from '../types';
-import {
-  State,
-  PersistableState,
-  SeriesType,
-  visualizationTypes,
-  YAxisMode,
-  LayerConfig,
-} from './types';
+import { State, PersistableState, SeriesType, visualizationTypes, LayerConfig } from './types';
 import chartBarStackedSVG from '../assets/chart_bar_stacked.svg';
 import chartMixedSVG from '../assets/chart_mixed_xy.svg';
 import { isHorizontalChart } from './state_helpers';
@@ -33,19 +24,6 @@ const defaultSeriesType = 'bar_stacked';
 const isNumericMetric = (op: OperationMetadata) => !op.isBucketed && op.dataType === 'number';
 const isBucketed = (op: OperationMetadata) => op.isBucketed;
 
-// TODO move into xy_config_panel
-const idPrefix = htmlIdGenerator()();
-type UnwrapArray<T> = T extends Array<infer P> ? P : T;
-function updateLayer(state: State, layer: UnwrapArray<State['layers']>, index: number): State {
-  const newLayers = [...state.layers];
-  newLayers[index] = layer;
-
-  return {
-    ...state,
-    layers: newLayers,
-  };
-}
-
 function getVisualizationType(state: State): VisualizationType | 'mixed' {
   if (!state.layers.length) {
     return (
@@ -288,68 +266,11 @@ export const xyVisualization: Visualization<State, PersistableState> = {
     );
   },
 
-  renderDimensionEditor(domElement, { state, layerId, setState, accessor }) {
+  renderDimensionEditor(domElement, props) {
     // TODO move this in xy_config_panel
-    const index = state.layers.findIndex((l) => l.layerId === layerId);
-    const layer = state.layers[index];
-    const axisMode =
-      (layer.yAxisConfig &&
-        layer.yAxisConfig?.find((yAxisConfig) => yAxisConfig.forAccessor === accessor)?.mode) ||
-      'auto';
     render(
       <I18nProvider>
-        <EuiFormRow
-          display="columnCompressed"
-          label={i18n.translate('xpack.lens.xyChart.axisSide.label', {
-            defaultMessage: 'Axis side',
-          })}
-        >
-          <EuiButtonGroup
-            legend={i18n.translate('xpack.lens.xyChart.axisSide.label', {
-              defaultMessage: 'Axis side',
-            })}
-            name="axisSide"
-            buttonSize="compressed"
-            className="eui-displayInlineBlock"
-            options={[
-              {
-                id: `${idPrefix}auto`,
-                label: i18n.translate('xpack.lens.xyChart.axisSide.auto', {
-                  defaultMessage: 'Auto',
-                }),
-              },
-              {
-                id: `${idPrefix}left`,
-                label: i18n.translate('xpack.lens.xyChart.axisSide.left', {
-                  defaultMessage: 'Left',
-                }),
-              },
-              {
-                id: `${idPrefix}right`,
-                label: i18n.translate('xpack.lens.xyChart.axisSide.right', {
-                  defaultMessage: 'Right',
-                }),
-              },
-            ]}
-            idSelected={`${idPrefix}${axisMode}`}
-            onChange={(id) => {
-              const newMode = id.replace(idPrefix, '') as YAxisMode;
-              const newYAxisConfigs = [...(layer.yAxisConfig || [])];
-              const existingIndex = newYAxisConfigs.findIndex(
-                (yAxisConfig) => yAxisConfig.forAccessor === accessor
-              );
-              if (existingIndex !== -1) {
-                newYAxisConfigs[existingIndex].mode = newMode;
-              } else {
-                newYAxisConfigs.push({
-                  forAccessor: accessor,
-                  mode: newMode,
-                });
-              }
-              setState(updateLayer(state, { ...layer, yAxisConfig: newYAxisConfigs }, index));
-            }}
-          />
-        </EuiFormRow>
+        <DimensionEditor {...props} />
       </I18nProvider>,
       domElement
     );