diff --git a/app/charts/index.ts b/app/charts/index.ts
index 154dda04b..23518ef1c 100644
--- a/app/charts/index.ts
+++ b/app/charts/index.ts
@@ -27,9 +27,9 @@ import {
   TableColumn,
   TableFields,
 } from "@/configurator/config-types";
-import { DEFAULT_PALETTE } from "@/configurator/configurator-state";
 import { FIELD_VALUE_NONE } from "@/configurator/constants";
 import { HierarchyValue } from "@/graphql/resolver-types";
+import { getDefaultCategoricalPaletteName } from "@/palettes";
 import { visitHierarchy } from "@/rdf/tree-utils";
 import { CHART_CONFIG_VERSION } from "@/utils/chart-config/versioning";
 
@@ -160,6 +160,8 @@ export const getInitialAreaLayer = ({
   // color
   measure: NumericalMeasure | OrdinalMeasure;
 }): MapAreaLayer => {
+  const palette = getDefaultCategoricalPaletteName(measure);
+
   return {
     componentIri: component.iri,
     color: isNumericalMeasure(measure)
@@ -173,9 +175,9 @@ export const getInitialAreaLayer = ({
       : {
           type: "categorical",
           componentIri: measure.iri,
-          palette: "oranges",
+          palette,
           colorMapping: mapValueIrisToColor({
-            palette: DEFAULT_PALETTE,
+            palette,
             dimensionValues: measure.values,
           }),
         },
@@ -271,6 +273,9 @@ export const getInitialConfig = ({
       const scatterplotSegmentComponent =
         getCategoricalDimensions(dimensions)[0] ||
         getGeoDimensions(dimensions)[0];
+      const scatterplotPalette = getDefaultCategoricalPaletteName(
+        scatterplotSegmentComponent
+      );
 
       return {
         version: CHART_CONFIG_VERSION,
@@ -288,9 +293,9 @@ export const getInitialConfig = ({
           ...(scatterplotSegmentComponent
             ? {
                 componentIri: scatterplotSegmentComponent.iri,
-                palette: DEFAULT_PALETTE,
+                palette: scatterplotPalette,
                 colorMapping: mapValueIrisToColor({
-                  palette: DEFAULT_PALETTE,
+                  palette: scatterplotPalette,
                   dimensionValues: scatterplotSegmentComponent.values,
                 }),
               }
@@ -301,6 +306,7 @@ export const getInitialConfig = ({
       const pieSegmentComponent =
         getCategoricalDimensions(dimensions)[0] ||
         getGeoDimensions(dimensions)[0];
+      const piePalette = getDefaultCategoricalPaletteName(pieSegmentComponent);
 
       return {
         version: CHART_CONFIG_VERSION,
@@ -311,10 +317,10 @@ export const getInitialConfig = ({
           y: { componentIri: numericalMeasures[0].iri },
           segment: {
             componentIri: pieSegmentComponent.iri,
-            palette: DEFAULT_PALETTE,
+            palette: piePalette,
             sorting: { sortingType: "byMeasure", sortingOrder: "asc" },
             colorMapping: mapValueIrisToColor({
-              palette: DEFAULT_PALETTE,
+              palette: piePalette,
               dimensionValues: pieSegmentComponent.values,
             }),
           },
@@ -602,7 +608,13 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
           });
         },
       },
-      segment: ({ oldValue, oldChartConfig, newChartConfig, dimensions }) => {
+      segment: ({
+        oldValue,
+        oldChartConfig,
+        newChartConfig,
+        dimensions,
+        measures,
+      }) => {
         let newSegment: ColumnSegmentField | undefined;
 
         // When switching from a table chart, a whole fields object is passed as oldValue.
@@ -610,6 +622,7 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
           const tableSegment = convertTableFieldsToSegmentField({
             fields: oldValue as TableFields,
             dimensions,
+            measures,
           });
 
           if (tableSegment) {
@@ -673,13 +686,20 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
           });
         },
       },
-      segment: ({ oldValue, oldChartConfig, newChartConfig, dimensions }) => {
+      segment: ({
+        oldValue,
+        oldChartConfig,
+        newChartConfig,
+        dimensions,
+        measures,
+      }) => {
         let newSegment: LineSegmentField | undefined;
 
         if (oldChartConfig.chartType === "table") {
           const tableSegment = convertTableFieldsToSegmentField({
             fields: oldValue as TableFields,
             dimensions,
+            measures,
           });
 
           if (tableSegment) {
@@ -738,13 +758,20 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
           });
         },
       },
-      segment: ({ oldValue, oldChartConfig, newChartConfig, dimensions }) => {
+      segment: ({
+        oldValue,
+        oldChartConfig,
+        newChartConfig,
+        dimensions,
+        measures,
+      }) => {
         let newSegment: AreaSegmentField | undefined;
 
         if (oldChartConfig.chartType === "table") {
           const tableSegment = convertTableFieldsToSegmentField({
             fields: oldValue as TableFields,
             dimensions,
+            measures,
           });
 
           if (tableSegment) {
@@ -800,13 +827,20 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
           return newChartConfig;
         },
       },
-      segment: ({ oldValue, oldChartConfig, newChartConfig, dimensions }) => {
+      segment: ({
+        oldValue,
+        oldChartConfig,
+        newChartConfig,
+        dimensions,
+        measures,
+      }) => {
         let newSegment: ScatterPlotSegmentField | undefined;
 
         if (oldChartConfig.chartType === "table") {
           const tableSegment = convertTableFieldsToSegmentField({
             fields: oldValue as TableFields,
             dimensions,
+            measures,
           });
 
           if (tableSegment) {
@@ -844,13 +878,20 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
           });
         },
       },
-      segment: ({ oldValue, oldChartConfig, newChartConfig, dimensions }) => {
+      segment: ({
+        oldValue,
+        oldChartConfig,
+        newChartConfig,
+        dimensions,
+        measures,
+      }) => {
         let newSegment: PieSegmentField | undefined;
 
         if (oldChartConfig.chartType === "table") {
           const tableSegment = convertTableFieldsToSegmentField({
             fields: oldValue as TableFields,
             dimensions,
+            measures,
           });
 
           if (tableSegment) {
@@ -1136,9 +1177,11 @@ export const getFieldComponentIri = (fields: GenericFields, field: string) => {
 const convertTableFieldsToSegmentField = ({
   fields,
   dimensions,
+  measures,
 }: {
   fields: TableFields;
   dimensions: DataCubeMetadata["dimensions"];
+  measures: DataCubeMetadata["measures"];
 }): GenericSegmentField | undefined => {
   const groupedColumns = group(Object.values(fields), (d) => d.isGroup)
     .get(true)
@@ -1153,17 +1196,17 @@ const convertTableFieldsToSegmentField = ({
 
   if (component) {
     const { componentIri } = component;
+    const actualComponent = [...dimensions, ...measures].find(
+      (d) => d.iri === componentIri
+    ) as DimensionMetadataFragment;
+    const palette = getDefaultCategoricalPaletteName(actualComponent);
 
     return {
       componentIri,
-      palette: DEFAULT_PALETTE,
+      palette,
       colorMapping: mapValueIrisToColor({
-        palette: DEFAULT_PALETTE,
-        dimensionValues: (
-          dimensions.find(
-            (d) => d.iri === componentIri
-          ) as DimensionMetadataFragment
-        )?.values,
+        palette,
+        dimensionValues: actualComponent.values,
       }),
     };
   }
diff --git a/app/charts/shared/colors.tsx b/app/charts/shared/colors.tsx
index 3018df0d8..c040ef2b5 100644
--- a/app/charts/shared/colors.tsx
+++ b/app/charts/shared/colors.tsx
@@ -1,5 +1,8 @@
 import { color, RGBColor } from "d3";
 
+import { DimensionValue } from "@/domain/data";
+import { DimensionMetadataFragment } from "@/graphql/query-hooks";
+
 export const colorToRgbArray = (_color: string, opacity?: number): number[] => {
   const { r, g, b } = color(_color) as RGBColor;
 
@@ -18,3 +21,11 @@ export const rgbArrayToHex = (rgbArray: number[]): string => {
       );
   }
 };
+
+export const hasDimensionColors = (
+  d?: DimensionMetadataFragment
+): d is DimensionMetadataFragment => {
+  return !!(d?.values as DimensionValue[] | undefined)?.some(
+    (d) => d.color !== undefined
+  );
+};
diff --git a/app/charts/table/table-state.tsx b/app/charts/table/table-state.tsx
index ada16d469..8dca0b29b 100644
--- a/app/charts/table/table-state.tsx
+++ b/app/charts/table/table-state.tsx
@@ -34,7 +34,6 @@ import {
 } from "@/configurator/components/ui-helpers";
 import { Observation } from "@/domain/data";
 import { useFormatNumber, useDimensionFormatters } from "@/formatters";
-import { DimensionMetadataFragment } from "@/graphql/query-hooks";
 import { getColorInterpolator } from "@/palettes";
 import { useTheme } from "@/themes";
 import { estimateTextWidth } from "@/utils/estimate-text-width";
@@ -281,9 +280,7 @@ const useTableState = ({
           return common as TextColumnMeta;
         } else if (columnStyleType === "category") {
           const { colorMapping } = columnStyle as ColumnStyleCategory;
-          const dimension = dimensions.find(
-            (d) => d.iri === iri
-          ) as DimensionMetadataFragment;
+          const dimension = allColumnsByIri[iri];
 
           // Color scale (always from colorMappings)
           const colorScale = scaleOrdinal<string>();
diff --git a/app/configurator/components/chart-controls/color-palette.tsx b/app/configurator/components/chart-controls/color-palette.tsx
index bd16cc2b9..1e0a62600 100644
--- a/app/configurator/components/chart-controls/color-palette.tsx
+++ b/app/configurator/components/chart-controls/color-palette.tsx
@@ -12,19 +12,21 @@ import { makeStyles } from "@mui/styles";
 import get from "lodash/get";
 import { useCallback } from "react";
 
+import { hasDimensionColors } from "@/charts/shared/colors";
 import Flex from "@/components/flex";
 import { Label } from "@/components/form";
 import {
   ConfiguratorStateConfiguringChart,
   useConfiguratorState,
-  DEFAULT_PALETTE,
 } from "@/configurator";
 import { mapValueIrisToColor } from "@/configurator/components/ui-helpers";
-import { isNumericalMeasure } from "@/domain/data";
+import { DimensionValue, isNumericalMeasure } from "@/domain/data";
 import { DimensionMetadataFragment } from "@/graphql/query-hooks";
 import {
   categoricalPalettes,
+  DEFAULT_CATEGORICAL_PALETTE_NAME,
   divergingSteppedPalettes,
+  getDefaultCategoricalPalette,
   getPalette,
 } from "@/palettes";
 import useEvent from "@/utils/use-event";
@@ -58,9 +60,20 @@ export const ColorPalette = ({
 }: Props) => {
   const [state, dispatch] = useConfiguratorState();
   const classes = useStyles();
+  const hasColors = hasDimensionColors(component);
+  const defaultPalette =
+    hasColors && component
+      ? getDefaultCategoricalPalette(
+          (component.values as DimensionValue[])
+            .map((d) => d.color)
+            .filter(Boolean) as string[]
+        )
+      : null;
 
   const palettes = isNumericalMeasure(component)
     ? divergingSteppedPalettes
+    : defaultPalette
+    ? [defaultPalette, ...categoricalPalettes]
     : categoricalPalettes;
 
   const currentPaletteName = get(
@@ -78,6 +91,7 @@ export const ColorPalette = ({
     if (!component || !palette) {
       return;
     }
+
     dispatch({
       type: "CHART_PALETTE_CHANGED",
       value: {
@@ -200,7 +214,7 @@ const ColorPaletteReset = ({
     `chartConfig.fields["${field}"].${
       colorConfigPath ? `${colorConfigPath}.` : ""
     }palette`,
-    DEFAULT_PALETTE
+    DEFAULT_CATEGORICAL_PALETTE_NAME
   ) as string;
 
   const colorMapping = get(
@@ -233,9 +247,9 @@ const ColorPaletteReset = ({
 
     const nbMatchedColors = colorMappingColors.length;
     const matchedColorsInPalette = currentPalette.slice(0, nbMatchedColors);
-    const same = matchedColorsInPalette.every(
-      (pc, i) => pc === colorMappingColors[i]
-    );
+    const same =
+      matchedColorsInPalette.every((d, i) => d === colorMappingColors[i]) ||
+      palette === "dimension";
 
     return (
       <Button
diff --git a/app/configurator/components/filters.tsx b/app/configurator/components/filters.tsx
index 0fe9571ec..96fa38866 100644
--- a/app/configurator/components/filters.tsx
+++ b/app/configurator/components/filters.tsx
@@ -33,6 +33,7 @@ import React, {
   useState,
 } from "react";
 
+import { hasDimensionColors } from "@/charts/shared/colors";
 import Flex from "@/components/flex";
 import { Loading } from "@/components/hint";
 import {
@@ -396,9 +397,9 @@ const MultiFilterContent = ({
     );
   }, [colorConfigPath, config, dimensionIri, colorComponent]);
 
-  const hasDefaultColors = useMemo(() => {
-    return colorComponent?.values?.[0]?.color !== undefined;
-  }, [colorComponent?.values]);
+  const hasColors = useMemo(() => {
+    return hasDimensionColors(colorComponent);
+  }, [colorComponent]);
 
   return (
     <Box sx={{ position: "relative" }}>
@@ -438,7 +439,7 @@ const MultiFilterContent = ({
               Selected filters
             </Trans>
             {hasColorMapping ? (
-              hasDefaultColors ? (
+              hasColors ? (
                 <Tooltip
                   title={
                     <Trans id="controls.filters.select.reset-colors">
diff --git a/app/configurator/components/ui-helpers.ts b/app/configurator/components/ui-helpers.ts
index da59d35c7..be3947c65 100644
--- a/app/configurator/components/ui-helpers.ts
+++ b/app/configurator/components/ui-helpers.ts
@@ -211,7 +211,9 @@ export const mapValueIrisToColor = ({
 
   const paletteValues = getPalette(palette);
   const colors = dimensionValues.map(
-    (d, i) => d.color || paletteValues[i % paletteValues.length]
+    (d, i) =>
+      (palette === "dimension" && d.color) ||
+      paletteValues[i % paletteValues.length]
   );
   const colorScale = scaleOrdinal<string, string>()
     .domain(dimensionValues.map((d) => `${d.value}`))
diff --git a/app/configurator/configurator-state.spec.tsx b/app/configurator/configurator-state.spec.tsx
index d991545da..f53f394b3 100644
--- a/app/configurator/configurator-state.spec.tsx
+++ b/app/configurator/configurator-state.spec.tsx
@@ -689,7 +689,7 @@ describe("colorMapping", () => {
             color: {
               type: "categorical",
               componentIri: "areaLayerColorIri",
-              palette: "oranges",
+              palette: "dimension",
               colorMapping: {
                 red: "green",
                 green: "blue",
@@ -787,7 +787,7 @@ describe("handleChartOptionChanged", () => {
             color: {
               type: "categorical",
               componentIri: "areaLayerColorIri",
-              palette: "oranges",
+              palette: "dimension",
               colorMapping: {
                 red: "green",
                 green: "blue",
diff --git a/app/configurator/configurator-state.tsx b/app/configurator/configurator-state.tsx
index 6c6b758b5..1c2d91028 100644
--- a/app/configurator/configurator-state.tsx
+++ b/app/configurator/configurator-state.tsx
@@ -29,6 +29,7 @@ import {
   getPossibleChartType,
 } from "@/charts";
 import { DEFAULT_FIXED_COLOR_FIELD } from "@/charts/map/constants";
+import { hasDimensionColors } from "@/charts/shared/colors";
 import { mapValueIrisToColor } from "@/configurator/components/ui-helpers";
 import {
   ConfiguratorStateConfiguringChart,
@@ -79,6 +80,7 @@ import {
 import { DataCubeMetadata } from "@/graphql/types";
 import { Locale } from "@/locales/locales";
 import { useLocale } from "@/locales/use-locale";
+import { DEFAULT_CATEGORICAL_PALETTE_NAME } from "@/palettes";
 import { findInHierarchy } from "@/rdf/tree-utils";
 import {
   getDataSourceFromLocalStorage,
@@ -92,8 +94,6 @@ import { migrateChartConfig } from "@/utils/chart-config/versioning";
 import { createChartId } from "@/utils/create-chart-id";
 import { unreachableError } from "@/utils/unreachable";
 
-export const DEFAULT_PALETTE = "category10";
-
 export type ConfiguratorStateAction =
   | {
       type: "INITIALIZED";
@@ -800,7 +800,7 @@ export const handleChartFieldChanged = (
       // (no "stacked" for scatterplots for instance)
       if (isSegmentInConfig(draft.chartConfig)) {
         const colorMapping = mapValueIrisToColor({
-          palette: DEFAULT_PALETTE,
+          palette: DEFAULT_CATEGORICAL_PALETTE_NAME,
           dimensionValues: component?.values || [],
         });
         draft.chartConfig.filters[componentIri] = {
@@ -811,7 +811,7 @@ export const handleChartFieldChanged = (
         };
         draft.chartConfig.fields.segment = {
           componentIri,
-          palette: DEFAULT_PALETTE,
+          palette: DEFAULT_CATEGORICAL_PALETTE_NAME,
           // Type exists only within column charts.
           ...(isColumnConfig(draft.chartConfig) && { type: "stacked" }),
           sorting: DEFAULT_SORTING,
@@ -844,7 +844,9 @@ export const handleChartFieldChanged = (
       "palette" in draft.chartConfig.fields.segment
     ) {
       const colorMapping = mapValueIrisToColor({
-        palette: draft.chartConfig.fields.segment.palette || DEFAULT_PALETTE,
+        palette:
+          draft.chartConfig.fields.segment.palette ||
+          DEFAULT_CATEGORICAL_PALETTE_NAME,
         dimensionValues: component?.values || [],
       });
 
@@ -965,16 +967,19 @@ export const handleChartOptionChanged = (
             canDimensionBeMultiFiltered(component) ||
             isOrdinalMeasure(component)
           ) {
+            const hasColors = hasDimensionColors(component);
+            const palette = hasColors
+              ? "dimension"
+              : previousPalette || DEFAULT_CATEGORICAL_PALETTE_NAME;
             setWith(
               draft,
               `chartConfig.fields.${action.value.field}.color`,
               {
                 type: "categorical",
                 componentIri: component.iri,
-                // TODO: Have proper categorical palettes here.
-                palette: previousPalette || "blues",
+                palette,
                 colorMapping: mapValueIrisToColor({
-                  palette: previousPalette || "blues",
+                  palette,
                   dimensionValues: component.values,
                 }),
               },
diff --git a/app/configurator/table/table-chart-options.tsx b/app/configurator/table/table-chart-options.tsx
index 15ffedac0..9902fe227 100644
--- a/app/configurator/table/table-chart-options.tsx
+++ b/app/configurator/table/table-chart-options.tsx
@@ -38,11 +38,12 @@ import {
   updateIsGroup,
   updateIsHidden,
 } from "@/configurator/table/table-config-state";
-import { canDimensionBeMultiFiltered } from "@/domain/data";
+import { canDimensionBeMultiFiltered, isNumericalMeasure } from "@/domain/data";
 import { DimensionMetadataFragment } from "@/graphql/query-hooks";
 import { DataCubeMetadata } from "@/graphql/types";
 import {
   getDefaultCategoricalPalette,
+  getDefaultCategoricalPaletteName,
   getDefaultDivergingSteppedPalette,
 } from "@/palettes";
 
@@ -170,34 +171,31 @@ export const TableColumnOptions = ({
 
   const { isGroup, isHidden } = chartConfig.fields[activeField];
 
-  const columnStyleOptions =
-    component.__typename === "NominalDimension" ||
-    component.__typename === "OrdinalDimension" ||
-    component.__typename === "TemporalDimension"
-      ? [
-          {
-            value: "text",
-            label: t({ id: "columnStyle.text", message: `Text` }),
-          },
-          {
-            value: "category",
-            label: t({ id: "columnStyle.categories", message: `Categories` }),
-          },
-        ]
-      : [
-          {
-            value: "text",
-            label: t({ id: "columnStyle.text", message: `Text` }),
-          },
-          {
-            value: "heatmap",
-            label: t({ id: "columnStyle.heatmap", message: `Heat Map` }),
-          },
-          {
-            value: "bar",
-            label: t({ id: "columnStyle.bar", message: `Bar Chart` }),
-          },
-        ];
+  const columnStyleOptions = isNumericalMeasure(component)
+    ? [
+        {
+          value: "text",
+          label: t({ id: "columnStyle.text", message: `Text` }),
+        },
+        {
+          value: "heatmap",
+          label: t({ id: "columnStyle.heatmap", message: `Heat Map` }),
+        },
+        {
+          value: "bar",
+          label: t({ id: "columnStyle.bar", message: `Bar Chart` }),
+        },
+      ]
+    : [
+        {
+          value: "text",
+          label: t({ id: "columnStyle.text", message: `Text` }),
+        },
+        {
+          value: "category",
+          label: t({ id: "columnStyle.categories", message: `Categories` }),
+        },
+      ];
   return (
     <div
       key={`control-panel-table-column-${activeField}`}
@@ -259,12 +257,14 @@ export const TableColumnOptions = ({
                       columnColor: "#fff",
                     };
                   case "category":
+                    const palette = getDefaultCategoricalPaletteName(component);
+
                     return {
                       type: "category",
                       textStyle: "regular",
-                      palette: getDefaultCategoricalPalette().value,
+                      palette,
                       colorMapping: mapValueIrisToColor({
-                        palette: getDefaultCategoricalPalette().value,
+                        palette,
                         dimensionValues: (
                           component as DimensionMetadataFragment
                         )?.values,
@@ -419,7 +419,7 @@ const ColumnStyleSubOptions = ({
         <>
           <ColorPalette
             field={activeField}
-            colorConfigPath={"columnStyle"}
+            colorConfigPath="columnStyle"
             component={component}
           />
         </>
@@ -427,7 +427,7 @@ const ColumnStyleSubOptions = ({
         <>
           <ColorPalette
             field={activeField}
-            colorConfigPath={"columnStyle"}
+            colorConfigPath="columnStyle"
             component={component}
           />
         </>
diff --git a/app/configurator/table/table-chart-sorting-options.tsx b/app/configurator/table/table-chart-sorting-options.tsx
index 0cf01aec6..58ee7366b 100644
--- a/app/configurator/table/table-chart-sorting-options.tsx
+++ b/app/configurator/table/table-chart-sorting-options.tsx
@@ -7,6 +7,7 @@ import {
   Typography,
 } from "@mui/material";
 import { makeStyles } from "@mui/styles";
+import { ascending } from "d3";
 import React, { ChangeEvent, useCallback } from "react";
 import {
   DragDropContext,
@@ -215,34 +216,38 @@ const AddTableSortingOption = ({
       }),
       disabled: true,
     },
-    ...columns.flatMap((c) => {
-      if (
-        chartConfig.sorting.some(
-          ({ componentIri }) => componentIri === c.componentIri
-        )
-      ) {
-        return [];
-      }
+    ...columns
+      .flatMap((c) => {
+        if (
+          chartConfig.sorting.some(
+            ({ componentIri }) => componentIri === c.componentIri
+          )
+        ) {
+          return [];
+        }
 
-      const component =
-        metaData.dimensions.find(({ iri }) => iri === c.componentIri) ??
-        metaData.measures.find(({ iri }) => iri === c.componentIri);
-
-      return component
-        ? [
-            {
-              value: component.iri,
-              label: component.label,
-            },
-          ]
-        : [];
-    }),
+        const component =
+          metaData.dimensions.find(({ iri }) => iri === c.componentIri) ??
+          metaData.measures.find(({ iri }) => iri === c.componentIri);
+
+        return component
+          ? [
+              {
+                value: component.iri,
+                label: component.label,
+              },
+            ]
+          : [];
+      })
+      .sort((a, b) => ascending(a.label, b.label)),
   ];
+
   return (
     <Select
       id="add-tablesorting"
       value="-"
       options={options}
+      sortOptions={false}
       label={t({
         id: "controls.sorting.addDimension",
         message: `Add dimension`,
diff --git a/app/palettes.ts b/app/palettes.ts
index 8fbf25bff..f8f2ef63c 100644
--- a/app/palettes.ts
+++ b/app/palettes.ts
@@ -33,15 +33,43 @@ import {
   schemeTableau10,
 } from "d3";
 
+import { hasDimensionColors } from "./charts/shared/colors";
 import {
   DivergingPaletteType,
   SequentialPaletteType,
 } from "./configurator/config-types";
+import { DimensionMetadataFragment } from "./graphql/query-hooks";
 
 // Colors
 
-export const getPalette = (palette?: string): ReadonlyArray<string> => {
+export const getDefaultCategoricalPaletteName = (
+  d: DimensionMetadataFragment
+): string => {
+  const hasColors = hasDimensionColors(d);
+  return hasColors ? "dimension" : DEFAULT_CATEGORICAL_PALETTE_NAME;
+};
+
+export const getDefaultCategoricalPalette = (
+  colors?: string[]
+): CategoricalPalette => {
+  if (colors) {
+    return {
+      label: "default",
+      value: "dimension",
+      colors: colors.slice(0, 10),
+    };
+  } else {
+    return categoricalPalettes[0];
+  }
+};
+
+export const getPalette = (
+  palette?: string,
+  colors?: string[]
+): ReadonlyArray<string> => {
   switch (palette) {
+    case "dimension":
+      return getDefaultCategoricalPalette(colors).colors;
     case "accent":
       return schemeAccent;
     case "category10":
@@ -68,6 +96,30 @@ export const getPalette = (palette?: string): ReadonlyArray<string> => {
   }
 };
 
+type CategoricalPalette = {
+  label: string;
+  value: string;
+  colors: ReadonlyArray<string>;
+};
+
+export const categoricalPalettes: Array<CategoricalPalette> = [
+  {
+    label: "category10",
+    value: "category10",
+    colors: getPalette("category10"),
+  },
+  { label: "accent", value: "accent", colors: getPalette("accent") },
+  { label: "dark2", value: "dark2", colors: getPalette("dark2") },
+  { label: "paired", value: "paired", colors: getPalette("paired") },
+  { label: "pastel1", value: "pastel1", colors: getPalette("pastel1") },
+  { label: "pastel2", value: "pastel2", colors: getPalette("pastel2") },
+  { label: "set1", value: "set1", colors: getPalette("set1") },
+  { label: "set2", value: "set2", colors: getPalette("set2") },
+  { label: "set3", value: "set3", colors: getPalette("set3") },
+];
+
+export const DEFAULT_CATEGORICAL_PALETTE_NAME = categoricalPalettes[0].value;
+
 export const getSingleHueSequentialPalette = ({
   nbClass = 5,
   palette,
@@ -102,28 +154,6 @@ export const getSingleHueSequentialPalette = ({
   }
 };
 
-export const categoricalPalettes: Array<{
-  label: string;
-  value: string;
-  colors: ReadonlyArray<string>;
-}> = [
-  {
-    label: "category10",
-    value: "category10",
-    colors: getPalette("category10"),
-  },
-  { label: "accent", value: "accent", colors: getPalette("accent") },
-  { label: "dark2", value: "dark2", colors: getPalette("dark2") },
-  { label: "paired", value: "paired", colors: getPalette("paired") },
-  { label: "pastel1", value: "pastel1", colors: getPalette("pastel1") },
-  { label: "pastel2", value: "pastel2", colors: getPalette("pastel2") },
-  { label: "set1", value: "set1", colors: getPalette("set1") },
-  { label: "set2", value: "set2", colors: getPalette("set2") },
-  { label: "set3", value: "set3", colors: getPalette("set3") },
-];
-
-export const getDefaultCategoricalPalette = () => categoricalPalettes[0];
-
 export type Palette<T> = {
   label: string;
   value: T;