diff --git a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/dimension_editor.test.tsx b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/dimension_editor.test.tsx
index 3d675883ec6bf..08a83ef7e0176 100644
--- a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/dimension_editor.test.tsx
+++ b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/dimension_editor.test.tsx
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { mountWithIntl as mount } from '@kbn/test-jest-helpers';
+import { render, screen } from '@testing-library/react';
 import { EuiButtonGroupProps, EuiButtonGroup } from '@elastic/eui';
 import { DataDimensionEditor } from './dimension_editor';
 import { FramePublicAPI, DatasourcePublicAPI } from '../../../types';
@@ -195,6 +196,65 @@ describe('XY Config panels', () => {
 
       expect(component.find(EuiColorPicker).prop('color')).toEqual('red');
     });
+    test.each<{ collapseFn?: string; shouldDisplay?: boolean }>([
+      // should display color picker
+      { shouldDisplay: true },
+      // should not display color picker
+      { collapseFn: 'sum', shouldDisplay: false },
+    ])(
+      'should only show color picker when collapseFn is defined for breakdown group',
+      ({ collapseFn = undefined, shouldDisplay = true }) => {
+        const state = {
+          ...testState(),
+          layers: [
+            {
+              collapseFn,
+              seriesType: 'bar',
+              layerType: LayerTypes.DATA,
+              layerId: 'first',
+              splitAccessor: 'breakdownAccessor',
+              xAccessor: 'foo',
+              accessors: ['bar'],
+              yConfig: [{ forAccessor: 'bar', color: 'red' }],
+            },
+          ],
+        } as XYState;
+
+        render(
+          <DataDimensionEditor
+            layerId={state.layers[0].layerId}
+            frame={{
+              ...frame,
+              activeData: {
+                first: {
+                  type: 'datatable',
+                  columns: [],
+                  rows: [{ bar: 123 }],
+                },
+              },
+            }}
+            setState={jest.fn()}
+            accessor="breakdownAccessor"
+            groupId={'breakdown'}
+            state={state}
+            formatFactory={jest.fn()}
+            paletteService={chartPluginMock.createPaletteRegistry()}
+            panelRef={React.createRef()}
+            addLayer={jest.fn()}
+            removeLayer={jest.fn()}
+            datasource={{} as DatasourcePublicAPI}
+            isDarkMode={false}
+          />
+        );
+        const colorPickerUi = screen.queryByLabelText('Edit colors');
+
+        if (shouldDisplay) {
+          expect(colorPickerUi).toBeInTheDocument();
+        } else {
+          expect(colorPickerUi).not.toBeInTheDocument();
+        }
+      }
+    );
     test('does not apply incorrect color', () => {
       jest.useFakeTimers();
       const setState = jest.fn();
diff --git a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/dimension_editor.tsx b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/dimension_editor.tsx
index c0916b823466e..f06f2d861d865 100644
--- a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/dimension_editor.tsx
+++ b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/dimension_editor.tsx
@@ -134,8 +134,8 @@ export function DataDimensionEditor(
   const { splitAccessor } = layer;
   const splitCategories = getColorCategories(table?.rows ?? [], splitAccessor);
 
-  if (props.groupId === 'breakdown' && !layer.collapseFn) {
-    return (
+  if (props.groupId === 'breakdown') {
+    return !layer.collapseFn ? (
       <ColorMappingByTerms
         isDarkMode={isDarkMode}
         colorMapping={layer.colorMapping}
@@ -147,7 +147,7 @@ export function DataDimensionEditor(
         panelRef={props.panelRef}
         categories={splitCategories}
       />
-    );
+    ) : null;
   }
 
   const isHorizontal = isHorizontalChart(state.layers);