diff --git a/app/charts/combo/chart-combo-line-single.tsx b/app/charts/combo/chart-combo-line-single.tsx
index af763b7d0..49db67896 100644
--- a/app/charts/combo/chart-combo-line-single.tsx
+++ b/app/charts/combo/chart-combo-line-single.tsx
@@ -80,9 +80,16 @@ export const ChartComboLineSingleVisualization = (
 
 export const ChartComboLineSingle = React.memo(
   (props: ChartProps<ComboLineSingleConfig>) => {
-    const { chartConfig } = props;
+    const { chartConfig, measures } = props;
     const { interactiveFiltersConfig } = chartConfig;
 
+    const getLegendItemDimension = React.useCallback(
+      (label) => {
+        return measures.find((measure) => measure.label === label);
+      },
+      [measures]
+    );
+
     return (
       <ComboLineSingleChart aspectRatio={0.4} {...props}>
         <ChartContainer>
@@ -97,7 +104,11 @@ export const ChartComboLineSingle = React.memo(
           <Tooltip type="multiple" />
         </ChartContainer>
         <ChartControlsContainer>
-          <LegendColor chartConfig={chartConfig} symbol="line" />
+          <LegendColor
+            chartConfig={chartConfig}
+            symbol="line"
+            getLegendItemDimension={getLegendItemDimension}
+          />
         </ChartControlsContainer>
       </ComboLineSingleChart>
     );
diff --git a/app/charts/shared/legend-color.tsx b/app/charts/shared/legend-color.tsx
index 87da7d3d9..c9d76f663 100644
--- a/app/charts/shared/legend-color.tsx
+++ b/app/charts/shared/legend-color.tsx
@@ -10,6 +10,7 @@ import { rgbArrayToHex } from "@/charts/shared/colors";
 import { getLegendGroups } from "@/charts/shared/legend-color-helpers";
 import Flex from "@/components/flex";
 import { Checkbox, CheckboxProps } from "@/components/form";
+import { OpenMetadataPanelWrapper } from "@/components/metadata-panel";
 import {
   ChartConfig,
   DataSource,
@@ -208,11 +209,16 @@ const useLegendGroups = ({
 type LegendColorProps = {
   chartConfig: ChartConfig;
   symbol: LegendSymbol;
+  // If the legend is based on measures, this function can be used to get the
+  // corresponding measure to open the metadata panel.
+  getLegendItemDimension?: (
+    dimensionLabel: string
+  ) => DimensionMetadataFragment | undefined;
   interactive?: boolean;
 };
 
 export const LegendColor = memo(function LegendColor(props: LegendColorProps) {
-  const { chartConfig, symbol, interactive } = props;
+  const { chartConfig, symbol, getLegendItemDimension, interactive } = props;
   const { colors, getColorLabel } = useChartState() as ColorsChartState;
   const values = colors.domain();
   const groups = useLegendGroups({ chartConfig, values });
@@ -222,6 +228,7 @@ export const LegendColor = memo(function LegendColor(props: LegendColorProps) {
       groups={groups}
       getColor={(v) => colors(v)}
       getLabel={getColorLabel}
+      getItemDimension={getLegendItemDimension}
       symbol={symbol}
       interactive={interactive}
       numberOfOptions={values.length}
@@ -288,14 +295,24 @@ type LegendColorContentProps = {
   groups: ReturnType<typeof useLegendGroups>;
   getColor: (d: string) => string;
   getLabel: (d: string) => string;
+  getItemDimension?: (
+    dimensionLabel: string
+  ) => DimensionMetadataFragment | undefined;
   symbol: LegendSymbol;
   interactive?: boolean;
   numberOfOptions: number;
 };
 
 const LegendColorContent = (props: LegendColorContentProps) => {
-  const { groups, getColor, getLabel, symbol, interactive, numberOfOptions } =
-    props;
+  const {
+    groups,
+    getColor,
+    getLabel,
+    getItemDimension,
+    symbol,
+    interactive,
+    numberOfOptions,
+  } = props;
   const classes = useStyles();
   const categories = useInteractiveFilters((d) => d.categories);
   const addCategory = useInteractiveFilters((d) => d.addCategory);
@@ -358,6 +375,7 @@ const LegendColorContent = (props: LegendColorContentProps) => {
                       key={`${d}_${i}`}
                       item={label}
                       color={getColor(d)}
+                      dimension={getItemDimension?.(label)}
                       symbol={symbol}
                       interactive={interactive}
                       onToggle={handleToggle}
@@ -377,6 +395,7 @@ const LegendColorContent = (props: LegendColorContentProps) => {
 type LegendItemProps = {
   item: string;
   color: string;
+  dimension?: DimensionMetadataFragment;
   symbol: LegendSymbol;
   interactive?: boolean;
   onToggle?: CheckboxProps["onChange"];
@@ -389,6 +408,7 @@ export const LegendItem = (props: LegendItemProps) => {
   const {
     item,
     color,
+    dimension,
     symbol,
     interactive,
     onToggle,
@@ -424,7 +444,14 @@ export const LegendItem = (props: LegendItemProps) => {
     </MaybeTooltip>
   ) : (
     <Flex data-testid="legendItem" className={classes.legendItem}>
-      {item}
+      {dimension ? (
+        <OpenMetadataPanelWrapper dim={dimension}>
+          {/* Account for the added space, to align the symbol and label. */}
+          <span style={{ marginTop: 3 }}>{item}</span>
+        </OpenMetadataPanelWrapper>
+      ) : (
+        item
+      )}
     </Flex>
   );
 };
diff --git a/app/components/form.tsx b/app/components/form.tsx
index 95bc68f7c..c47d400bf 100644
--- a/app/components/form.tsx
+++ b/app/components/form.tsx
@@ -463,7 +463,9 @@ const DisabledMessageIcon = (props: DisabledMessageIconProps) => {
         </Typography>
       }
       placement="top"
-      componentsProps={{ tooltip: { sx: { width: 140, px: 2, py: 1 } } }}
+      componentsProps={{
+        tooltip: { sx: { width: 140, px: 2, py: 1, lineHeight: 1.2 } },
+      }}
       sx={{ opacity: 1, pointerEvents: "auto", ml: 1 }}
     >
       <Typography color="warning.main">
diff --git a/app/configurator/components/chart-controls/color-palette.tsx b/app/configurator/components/chart-controls/color-palette.tsx
index c91c00cd4..a0218fa12 100644
--- a/app/configurator/components/chart-controls/color-palette.tsx
+++ b/app/configurator/components/chart-controls/color-palette.tsx
@@ -147,7 +147,7 @@ export const ColorPalette = ({
         ))}
       </Select>
       {component && state.state === "CONFIGURING_CHART" && (
-        <ColorPaletteReset
+        <ColorPaletteControls
           field={field}
           component={component}
           state={state}
@@ -197,7 +197,7 @@ const ColorSquare = ({
   );
 };
 
-const ColorPaletteReset = ({
+const ColorPaletteControls = ({
   field,
   colorConfigPath,
   component,
@@ -252,14 +252,37 @@ const ColorPaletteReset = ({
       palette === "dimension";
 
     return (
-      <Button
-        disabled={same}
-        onClick={resetColorPalette}
-        variant="inline"
-        sx={{ mt: 1, px: 1 }}
-      >
-        <Trans id="controls.color.palette.reset">Reset color palette</Trans>
-      </Button>
+      <Box sx={{ display: "flex", alignItems: "center", gap: 1, mt: 1 }}>
+        <Button
+          disabled={same}
+          onClick={resetColorPalette}
+          variant="inline"
+          sx={{ px: 1 }}
+        >
+          <Trans id="controls.color.palette.reset">Reset color palette</Trans>
+        </Button>
+        <Typography color="secondary">•</Typography>
+        <Button
+          onClick={() => {
+            return dispatch({
+              type: "CHART_CONFIG_UPDATE_COLOR_MAPPING",
+              value: {
+                field,
+                colorConfigPath,
+                dimensionIri: component.iri,
+                values: component.values,
+                random: true,
+              },
+            });
+          }}
+          variant="inline"
+          sx={{ px: 1 }}
+        >
+          <Trans id="controls.filters.select.refresh-colors">
+            Shuffle colors
+          </Trans>
+        </Button>
+      </Box>
     );
   } else {
     return <Box mt={2} />;
diff --git a/app/configurator/components/chart-controls/color-picker.tsx b/app/configurator/components/chart-controls/color-picker.tsx
index 7f2a411b1..bef45f894 100644
--- a/app/configurator/components/chart-controls/color-picker.tsx
+++ b/app/configurator/components/chart-controls/color-picker.tsx
@@ -1,16 +1,8 @@
 import { Trans } from "@lingui/macro";
-import {
-  Box,
-  Button,
-  Input,
-  Popover,
-  styled,
-  Theme,
-  Typography,
-} from "@mui/material";
+import { Box, Button, Popover, styled, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { color as d3Color } from "d3";
-import React, { MouseEventHandler, useCallback, useRef, useState } from "react";
+import { MouseEventHandler, useRef } from "react";
 
 import useDisclosure from "@/components/use-disclosure";
 import VisuallyHidden from "@/components/visually-hidden";
@@ -75,43 +67,9 @@ const useColorPickerStyles = makeStyles((theme: Theme) => ({
     gap: 2,
     marginBottom: 2,
   },
-  input: {
-    color: theme.palette.grey[700],
-    borderColor: theme.palette.divider,
-    backgroundColor: theme.palette.grey[100],
-    fontSize: "0.875rem",
-    "&:focus": { outline: "none", borderColor: theme.palette.primary.main },
-  },
 }));
 
 export const ColorPicker = ({ selectedColor, colors, onChange }: Props) => {
-  const [inputColorValue, setInputColorValue] = useState(selectedColor);
-
-  const selectColor = useCallback(
-    (_color) => {
-      setInputColorValue(_color);
-      // Make sure onChange is only called with valid colors
-      const c = d3Color(_color);
-
-      if (c) {
-        onChange?.(_color);
-      }
-    },
-    [onChange, setInputColorValue]
-  );
-
-  const formatInputColor = useCallback(
-    (_color) => {
-      // Make sure onChange is only called with valid colors
-      const c = d3Color(_color);
-
-      if (c) {
-        setInputColorValue(_color);
-      }
-    },
-    [setInputColorValue]
-  );
-
   const classes = useColorPickerStyles();
 
   return (
@@ -122,24 +80,10 @@ export const ColorPicker = ({ selectedColor, colors, onChange }: Props) => {
             key={color}
             color={color}
             selected={color === selectedColor}
-            onClick={() => {
-              selectColor(color);
-            }}
+            onClick={() => onChange?.(color)}
           />
         ))}
       </Box>
-      <Box sx={{ position: "relative" }}>
-        <Input
-          className={classes.input}
-          value={inputColorValue}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            selectColor(e.currentTarget.value);
-          }}
-          onBlur={(e) => {
-            formatInputColor(e.currentTarget.value);
-          }}
-        />
-      </Box>
     </Box>
   );
 };
diff --git a/app/configurator/components/chart-options-selector.tsx b/app/configurator/components/chart-options-selector.tsx
index fc1b6955e..0502bc26b 100644
--- a/app/configurator/components/chart-options-selector.tsx
+++ b/app/configurator/components/chart-options-selector.tsx
@@ -924,7 +924,7 @@ const ChartComboLineColumnYField = (
             sortOptions={false}
             label={t({
               id: "controls.chart.combo.y.column-measure",
-              message: "Column measure",
+              message: "Left axis (column)",
             })}
             value={y.columnComponentIri}
             onChange={(e) => {
@@ -939,32 +939,9 @@ const ChartComboLineColumnYField = (
                 },
               });
             }}
+            sx={{ mb: 2 }}
           />
 
-          <Box component="fieldset" mt={2} mb={4}>
-            <FieldSetLegend
-              legendTitle={
-                <Trans id="controls.chart.combo.y.axis-orientation">
-                  Axis orientation
-                </Trans>
-              }
-            />
-            <Flex sx={{ justifyContent: "flex-start" }}>
-              {[
-                { value: "right", label: t({ id: "left", message: "Left" }) },
-                { value: "left", label: t({ id: "right", message: "Right" }) },
-              ].map((d) => (
-                <ChartOptionRadioField
-                  key={d.value}
-                  label={d.label}
-                  field="y"
-                  path="lineAxisOrientation"
-                  value={d.value}
-                />
-              ))}
-            </Flex>
-          </Box>
-
           <Select
             id={`mesure-${y.lineComponentIri}`}
             options={[]}
@@ -972,7 +949,7 @@ const ChartComboLineColumnYField = (
             sortOptions={false}
             label={t({
               id: "controls.chart.combo.y.line-measure",
-              message: "Line measure",
+              message: "Right axis (line)",
             })}
             value={y.lineComponentIri}
             onChange={(e) => {
diff --git a/app/configurator/components/filters.tsx b/app/configurator/components/filters.tsx
index 023fd1778..81d9dda2c 100644
--- a/app/configurator/components/filters.tsx
+++ b/app/configurator/components/filters.tsx
@@ -25,7 +25,6 @@ import get from "lodash/get";
 import groupBy from "lodash/groupBy";
 import keyBy from "lodash/keyBy";
 import orderBy from "lodash/orderBy";
-import sortBy from "lodash/sortBy";
 import uniqBy from "lodash/uniqBy";
 import React, {
   forwardRef,
@@ -83,7 +82,6 @@ import { Icon } from "@/icons";
 import SvgIcCheck from "@/icons/components/IcCheck";
 import SvgIcChevronRight from "@/icons/components/IcChevronRight";
 import SvgIcClose from "@/icons/components/IcClose";
-import SvgIcFormatting from "@/icons/components/IcFormatting";
 import SvgIcRefresh from "@/icons/components/IcRefresh";
 import { getTimeInterval } from "@/intervals";
 import { useLocale } from "@/locales/use-locale";
@@ -303,44 +301,19 @@ const MultiFilterContent = ({
     anchorEl?.focus();
   });
 
-  const handleUpdateColorMapping = useEvent(
-    ({
-      type,
-    }: {
-      type: /** Goes back to original color mapping. */
-      | "reset"
-        /** Shuffles colors to create new, randomized color mapping. */
-        | "shuffle";
-    }) => {
-      const values = colorComponent?.values || [];
-
-      switch (type) {
-        case "reset":
-          return dispatch({
-            type: "CHART_CONFIG_UPDATE_COLOR_MAPPING",
-            value: {
-              field,
-              colorConfigPath,
-              dimensionIri,
-              values,
-              random: false,
-            },
-          });
-        case "shuffle":
-          const usedValues = new Set(values.map((v) => v.value));
-          return dispatch({
-            type: "CHART_CONFIG_UPDATE_COLOR_MAPPING",
-            value: {
-              field,
-              colorConfigPath,
-              dimensionIri,
-              values: sortBy(values, (d) => (usedValues.has(d.value) ? 0 : 1)),
-              random: true,
-            },
-          });
-      }
-    }
-  );
+  const handleResetColorMapping = useEvent(() => {
+    const values = colorComponent?.values ?? [];
+    dispatch({
+      type: "CHART_CONFIG_UPDATE_COLOR_MAPPING",
+      value: {
+        field,
+        colorConfigPath,
+        dimensionIri,
+        values,
+        random: false,
+      },
+    });
+  });
 
   const colorConfig = useMemo(() => {
     return getColorConfig(chartConfig, colorConfigPath);
@@ -400,43 +373,23 @@ const MultiFilterContent = ({
             <Trans id="controls.filters.select.selected-filters">
               Selected filters
             </Trans>
-            {hasColorMapping ? (
-              colorConfig?.palette === "dimension" ? (
-                <Tooltip
-                  title={
-                    <Trans id="controls.filters.select.reset-colors">
-                      Reset colors
-                    </Trans>
-                  }
+            {hasColorMapping && colorConfig?.palette === "dimension" && (
+              <Tooltip
+                title={
+                  <Trans id="controls.filters.select.reset-colors">
+                    Reset colors
+                  </Trans>
+                }
+              >
+                <IconButton
+                  size="small"
+                  onClick={handleResetColorMapping}
+                  sx={{ ml: 1, my: -2 }}
                 >
-                  <IconButton
-                    sx={{ ml: 1, my: -2 }}
-                    size="small"
-                    onClick={() => handleUpdateColorMapping({ type: "reset" })}
-                  >
-                    <SvgIcRefresh fontSize="inherit" />
-                  </IconButton>
-                </Tooltip>
-              ) : (
-                <Tooltip
-                  title={
-                    <Trans id="controls.filters.select.refresh-colors">
-                      Refresh colors
-                    </Trans>
-                  }
-                >
-                  <IconButton
-                    sx={{ ml: 1, my: -2 }}
-                    size="small"
-                    onClick={() =>
-                      handleUpdateColorMapping({ type: "shuffle" })
-                    }
-                  >
-                    <SvgIcFormatting fontSize="inherit" />
-                  </IconButton>
-                </Tooltip>
-              )
-            ) : null}
+                  <SvgIcRefresh fontSize="inherit" />
+                </IconButton>
+              </Tooltip>
+            )}
           </Typography>
           <Typography variant="body2" component="span">
             <Trans id="controls.filter.nb-elements">
@@ -638,7 +591,6 @@ const TreeAccordion = ({
           className={classes.optionCheck}
           style={{
             visibility: state === "NOT_SELECTED" ? "hidden" : "visible",
-            marginTop: 8,
           }}
         />
       </TreeAccordionSummary>
diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po
index d4097d54d..4ba766e8f 100644
--- a/app/locales/de/messages.po
+++ b/app/locales/de/messages.po
@@ -250,7 +250,7 @@ msgstr "Achsenausrichtung"
 
 #: app/configurator/components/chart-options-selector.tsx
 msgid "controls.chart.combo.y.column-measure"
-msgstr "Säule Messung"
+msgstr "Linke Achse (Säule)"
 
 #: app/configurator/components/chart-options-selector.tsx
 #: app/configurator/components/chart-options-selector.tsx
@@ -271,7 +271,7 @@ msgstr "Messung der linken Achse"
 
 #: app/configurator/components/chart-options-selector.tsx
 msgid "controls.chart.combo.y.line-measure"
-msgstr "Linie Messung"
+msgstr "Rechte Achse (Linie)"
 
 #: app/configurator/components/chart-options-selector.tsx
 msgid "controls.chart.combo.y.no-compatible-measures"
@@ -460,7 +460,7 @@ msgstr "Von"
 
 #: app/configurator/components/filters.tsx
 msgid "controls.filters.select.refresh-colors"
-msgstr "Farben auffrischen"
+msgstr "Farben mischen"
 
 #: app/configurator/components/filters.tsx
 msgid "controls.filters.select.reset-colors"
diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po
index 06a7e0c87..188c93c92 100644
--- a/app/locales/en/messages.po
+++ b/app/locales/en/messages.po
@@ -250,7 +250,7 @@ msgstr "Axis orientation"
 
 #: app/configurator/components/chart-options-selector.tsx
 msgid "controls.chart.combo.y.column-measure"
-msgstr "Column measure"
+msgstr "Left axis (column)"
 
 #: app/configurator/components/chart-options-selector.tsx
 #: app/configurator/components/chart-options-selector.tsx
@@ -271,7 +271,7 @@ msgstr "Left axis measure"
 
 #: app/configurator/components/chart-options-selector.tsx
 msgid "controls.chart.combo.y.line-measure"
-msgstr "Line measure"
+msgstr "Right axis (line)"
 
 #: app/configurator/components/chart-options-selector.tsx
 msgid "controls.chart.combo.y.no-compatible-measures"
@@ -460,7 +460,7 @@ msgstr "From"
 
 #: app/configurator/components/filters.tsx
 msgid "controls.filters.select.refresh-colors"
-msgstr "Refresh colors"
+msgstr "Shuffle colors"
 
 #: app/configurator/components/filters.tsx
 msgid "controls.filters.select.reset-colors"
diff --git a/app/locales/fr/messages.po b/app/locales/fr/messages.po
index 0e1f16eec..1118f13e6 100644
--- a/app/locales/fr/messages.po
+++ b/app/locales/fr/messages.po
@@ -250,7 +250,7 @@ msgstr "Orientation de l'axe"
 
 #: app/configurator/components/chart-options-selector.tsx
 msgid "controls.chart.combo.y.column-measure"
-msgstr "Mesure de la colonne"
+msgstr "Axe gauche (colonne)"
 
 #: app/configurator/components/chart-options-selector.tsx
 #: app/configurator/components/chart-options-selector.tsx
@@ -271,7 +271,7 @@ msgstr "Mesure de l'axe gauche"
 
 #: app/configurator/components/chart-options-selector.tsx
 msgid "controls.chart.combo.y.line-measure"
-msgstr "Mesure de la ligne"
+msgstr "Axe droit (ligne)"
 
 #: app/configurator/components/chart-options-selector.tsx
 msgid "controls.chart.combo.y.no-compatible-measures"
@@ -460,7 +460,7 @@ msgstr "Du"
 
 #: app/configurator/components/filters.tsx
 msgid "controls.filters.select.refresh-colors"
-msgstr "Renouveller les couleurs"
+msgstr "Mélanger les couleurs"
 
 #: app/configurator/components/filters.tsx
 msgid "controls.filters.select.reset-colors"
diff --git a/app/locales/it/messages.po b/app/locales/it/messages.po
index 2519fbccb..558b9730f 100644
--- a/app/locales/it/messages.po
+++ b/app/locales/it/messages.po
@@ -250,7 +250,7 @@ msgstr "Orientamento dell'asse"
 
 #: app/configurator/components/chart-options-selector.tsx
 msgid "controls.chart.combo.y.column-measure"
-msgstr "Misura della colonna"
+msgstr "Asse sinistro (colonna)"
 
 #: app/configurator/components/chart-options-selector.tsx
 #: app/configurator/components/chart-options-selector.tsx
@@ -271,7 +271,7 @@ msgstr "Misura dell'asse sinistro"
 
 #: app/configurator/components/chart-options-selector.tsx
 msgid "controls.chart.combo.y.line-measure"
-msgstr "Misura della linea"
+msgstr "Asse destro (linea)"
 
 #: app/configurator/components/chart-options-selector.tsx
 msgid "controls.chart.combo.y.no-compatible-measures"
@@ -460,7 +460,7 @@ msgstr "Della"
 
 #: app/configurator/components/filters.tsx
 msgid "controls.filters.select.refresh-colors"
-msgstr "Aggiorna i colori"
+msgstr "Mescolare i colori"
 
 #: app/configurator/components/filters.tsx
 msgid "controls.filters.select.reset-colors"