diff --git a/app/configurator/components/chart-controls/color-palette.tsx b/app/configurator/components/chart-controls/color-palette.tsx
index bc7934a46..1993349a2 100644
--- a/app/configurator/components/chart-controls/color-palette.tsx
+++ b/app/configurator/components/chart-controls/color-palette.tsx
@@ -262,18 +262,22 @@ export const ColorPaletteControls = ({
   const [, dispatch] = useConfiguratorState();
   const chartConfig = getChartConfig(state);
 
-  const paletteId = isColorInConfig(chartConfig) ?  get(chartConfig, `fields.color.paletteId`) :  get(
-    chartConfig,
-    `fields["${field}"].${colorConfigPath ? `${colorConfigPath}.` : ""}paletteId`,
-    DEFAULT_CATEGORICAL_PALETTE_ID
-  ) as string;
+  const paletteId = isColorInConfig(chartConfig)
+    ? get(chartConfig, `fields.color.paletteId`)
+    : (get(
+        chartConfig,
+        `fields["${field}"].${colorConfigPath ? `${colorConfigPath}.` : ""}paletteId`,
+        DEFAULT_CATEGORICAL_PALETTE_ID
+      ) as string);
 
-  const colorMapping = isColorInConfig(chartConfig) ? get(chartConfig, `fields.color.colorMapping`) :  get(
-    chartConfig,
-    `fields["${field}"].${
-      colorConfigPath ? `${colorConfigPath}.` : ""
-    }colorMapping`
-  ) as Record<string, string> | undefined;
+  const colorMapping = isColorInConfig(chartConfig)
+    ? get(chartConfig, `fields.color.colorMapping`)
+    : (get(
+        chartConfig,
+        `fields["${field}"].${
+          colorConfigPath ? `${colorConfigPath}.` : ""
+        }colorMapping`
+      ) as Record<string, string> | undefined);
 
   const resetColorPalette = useCallback(
     () =>
@@ -292,7 +296,7 @@ export const ColorPaletteControls = ({
   );
 
   if (colorMapping) {
-    const currentPalette = getPalette(paletteId);
+    const currentPalette = getPalette({ paletteId });
     const colorMappingColors = Object.values(colorMapping);
 
     const nbMatchedColors = colorMappingColors.length;
diff --git a/app/configurator/components/chart-options-selector.tsx b/app/configurator/components/chart-options-selector.tsx
index b827412a6..c42e2c69a 100644
--- a/app/configurator/components/chart-options-selector.tsx
+++ b/app/configurator/components/chart-options-selector.tsx
@@ -619,9 +619,13 @@ const ChartLayoutOptions = ({
   measures: Measure[];
 }) => {
   const { fields } = chartConfig;
-  const values: { id: string; symbol: LegendSymbol }[] = [
-    { id: fields.y.componentId, symbol: "line" },
-  ];
+  const values: { id: string; symbol: LegendSymbol }[] =
+    chartConfig.fields.color.type === "single"
+      ? [{ id: fields.y.componentId, symbol: "line" }]
+      : Object.keys(chartConfig.fields.color.colorMapping).map((key) => ({
+          id: key,
+          symbol: "line",
+        }));
 
   return encoding.options || hasColorPalette ? (
     <ControlSection collapse>
@@ -662,8 +666,12 @@ const ChartLayoutOptions = ({
                   <Box key={id}>
                     <ColorPickerField
                       field="color"
-                      path={`${chartConfig.fields.color.type === "single" ? "color" : `colorMapping["${id}"]`}`}
-                      label={measures.find((d) => d.id === id)!.label}
+                      path={
+                        chartConfig.fields.color.type === "single"
+                          ? "color"
+                          : `colorMapping["${id}"]`
+                      }
+                      label={measures.find((d) => d.id === id)?.label ?? ""}
                       symbol={symbol}
                     />
                   </Box>