diff --git a/packages/core/base.css b/packages/core/base.css
index 3553d0fe21..558b90013a 100644
--- a/packages/core/base.css
+++ b/packages/core/base.css
@@ -71,14 +71,18 @@
     --page: var(--white-100);
     --shadow: theme("colors.grey.100");
 
-    --chart-1: 181 52% 45%;
-    --chart-2: 250 80% 72%;
-    --chart-3: 340 50% 57%;
-    --chart-4: 239 63% 61%;
-    --chart-5: 324 40% 38%;
-    --chart-6: 278 47% 58%;
-    --chart-7: 191 16% 47%;
-    --chart-8: 202 61% 27%;
+    --chart-categorical-1: 184 92% 35%;
+    --chart-categorical-2: 216 90% 65%;
+    --chart-categorical-3: 84 55% 53%;
+    --chart-categorical-4: 340 49% 60%;
+    --chart-categorical-5: 24 98% 59%;
+    --chart-categorical-6: 239 91% 64%;
+    --chart-categorical-7: 162 44% 33%;
+    --chart-categorical-8: 25 46% 53%;
+
+    --chart-feedback-negative: 6 100% 65%;
+    --chart-feedback-neutral: 38 92% 54%;
+    --chart-feedback-positive: 160 85% 39%;
 
     --scrollbar-track: transparent;
     --scrollbar-thumb: rgba(0, 0, 0, 0.4);
@@ -149,15 +153,6 @@
     --page: theme("colors.white.3");
     --shadow: theme("colors.grey.100");
 
-    --chart-1: 181 52% 45%;
-    --chart-2: 250 80% 72%;
-    --chart-3: 340 50% 57%;
-    --chart-4: 239 63% 61%;
-    --chart-5: 324 40% 38%;
-    --chart-6: 278 47% 58%;
-    --chart-7: 191 16% 47%;
-    --chart-8: 202 61% 27%;
-
     --scrollbar-track: transparent;
     --scrollbar-thumb: rgba(255, 255, 255, 0.4);
     --scrollbar-thumb-hover: rgba(255, 255, 255, 0.6);
diff --git a/packages/react/src/components/Charts/AreaChart/index.stories.tsx b/packages/react/src/components/Charts/AreaChart/index.stories.tsx
index cb018985e0..94d0e6f3e4 100644
--- a/packages/react/src/components/Charts/AreaChart/index.stories.tsx
+++ b/packages/react/src/components/Charts/AreaChart/index.stories.tsx
@@ -2,39 +2,10 @@ import type { Meta } from "@storybook/react-vite"
 
 import { AreaChart } from "./index"
 
-const dataConfig = {
-  desktop: {
-    label: "Desktop",
-  },
-  mobile: {
-    label: "Mobile",
-  },
-}
-
-const meta: Meta<typeof AreaChart<typeof dataConfig>> = {
+const meta: Meta = {
   title: "Charts/AreaChart",
   component: AreaChart,
   tags: ["autodocs"],
-  args: {
-    dataConfig,
-    xAxis: {
-      tickFormatter: (value: string) => value.slice(0, 3),
-    },
-    yAxis: {
-      hide: true,
-      tickFormatter: (value: string) =>
-        `${Number.isNaN(parseFloat(value)) ? value : (parseFloat(value) / 100).toFixed(2) + ",00 Euros"}`,
-    },
-    blurArea: "lr",
-    data: [
-      { label: "January", values: { mobile: 1200, desktop: 500 } },
-      { label: "February", values: { mobile: 1500, desktop: 1500 } },
-      { label: "March", values: { mobile: 1300, desktop: 3000 } },
-      { label: "April", values: { mobile: 1000, desktop: 4500 } },
-      { label: "May", values: { mobile: 800, desktop: 5000 } },
-      { label: "June", values: { mobile: 600, desktop: 4000 } },
-    ],
-  },
   argTypes: {
     blurArea: {
       control: "select",
@@ -52,18 +23,117 @@ const meta: Meta<typeof AreaChart<typeof dataConfig>> = {
 
 export default meta
 
-export const Default = {}
+const headcountDataConfig = {
+  headcount: {
+    label: "Total headcount",
+  },
+}
 
-export const Dashed = {
+export const Default: Meta<typeof AreaChart<typeof headcountDataConfig>> = {
   args: {
-    dataConfig: {
-      desktop: {
-        label: "Desktop",
-        dashed: true,
+    dataConfig: headcountDataConfig,
+    xAxis: {
+      hide: false,
+      tickFormatter: (value: string) => value.slice(0, 3),
+    },
+    yAxis: {
+      hide: false,
+      tickFormatter: (value: string) => value,
+    },
+    data: [
+      { label: "January", values: { headcount: 170 } },
+      { label: "February", values: { headcount: 200 } },
+      { label: "March", values: { headcount: 256 } },
+      { label: "April", values: { headcount: 301 } },
+      { label: "May", values: { headcount: 345 } },
+      { label: "June", values: { headcount: 308 } },
+    ],
+  },
+}
+
+const headcountProjectionDataConfig = {
+  actual: {
+    label: "Actual headcount",
+  },
+  projected: {
+    label: "Projected headcount",
+    dashed: true,
+  },
+}
+
+export const DashedArea: Meta<
+  typeof AreaChart<typeof headcountProjectionDataConfig>
+> = {
+  args: {
+    dataConfig: headcountProjectionDataConfig,
+    xAxis: {
+      hide: false,
+      tickFormatter: (value: string) => value.slice(0, 3),
+    },
+    yAxis: {
+      hide: false,
+      tickFormatter: (value: string) => value,
+    },
+    data: [
+      { label: "January", values: { actual: 170, projected: 220 } },
+      { label: "February", values: { actual: 200, projected: 245 } },
+      { label: "March", values: { actual: 256, projected: 270 } },
+      { label: "April", values: { actual: 301, projected: 295 } },
+      { label: "May", values: { actual: 345, projected: 320 } },
+      { label: "June", values: { actual: 308, projected: 345 } },
+    ],
+  },
+}
+const teamHeadcountDataConfig = {
+  design: {
+    label: "Design",
+  },
+  product: {
+    label: "Product",
+  },
+  engineering: {
+    label: "Engineering",
+  },
+}
+
+export const MultipleAreas: Meta<
+  typeof AreaChart<typeof teamHeadcountDataConfig>
+> = {
+  args: {
+    dataConfig: teamHeadcountDataConfig,
+    xAxis: {
+      hide: false,
+      tickFormatter: (value: string) => value.slice(0, 3),
+    },
+    yAxis: {
+      hide: false,
+      tickFormatter: (value: string) => value,
+    },
+    data: [
+      {
+        label: "January",
+        values: { design: 12, product: 28, engineering: 65 },
       },
-      mobile: {
-        label: "Mobile",
+      {
+        label: "February",
+        values: { design: 14, product: 32, engineering: 72 },
       },
-    },
+      {
+        label: "March",
+        values: { design: 16, product: 36, engineering: 78 },
+      },
+      {
+        label: "April",
+        values: { design: 18, product: 41, engineering: 95 },
+      },
+      {
+        label: "May",
+        values: { design: 20, product: 58, engineering: 102 },
+      },
+      {
+        label: "June",
+        values: { design: 19, product: 50, engineering: 98 },
+      },
+    ],
   },
 }
diff --git a/packages/react/src/components/Charts/AreaChart/index.tsx b/packages/react/src/components/Charts/AreaChart/index.tsx
index 5b32e7fae5..b77a248b96 100644
--- a/packages/react/src/components/Charts/AreaChart/index.tsx
+++ b/packages/react/src/components/Charts/AreaChart/index.tsx
@@ -19,7 +19,7 @@ import {
   YAxis,
 } from "recharts"
 import { usePrivacyMode } from "../../../lib/privacyMode"
-import { autoColor } from "../utils/colors"
+import { getCategoricalColor, getColor } from "../utils/colors"
 import {
   cartesianGridProps,
   chartTooltipProps,
@@ -168,12 +168,20 @@ export const BaseAreaChart = <K extends LineChartConfig>(
             >
               <stop
                 offset="5%"
-                stopColor={dataConfig[area].color || autoColor(index)}
+                stopColor={
+                  dataConfig[area].color
+                    ? getColor(dataConfig[area].color)
+                    : getCategoricalColor(index)
+                }
                 stopOpacity={0.8}
               />
               <stop
                 offset="95%"
-                stopColor={dataConfig[area].color || autoColor(index)}
+                stopColor={
+                  dataConfig[area].color
+                    ? getColor(dataConfig[area].color)
+                    : getCategoricalColor(index)
+                }
                 stopOpacity={0.1}
               />
             </linearGradient>
@@ -232,7 +240,11 @@ export const BaseAreaChart = <K extends LineChartConfig>(
             mask={`url(#${chartId}-transparent-edges)`}
             fill={`url(#fill${area}-${chartId})`}
             fillOpacity={dataConfig[area].dashed ? 0 : 0.4}
-            stroke={dataConfig[area].color || autoColor(index)}
+            stroke={
+              dataConfig[area].color
+                ? getColor(dataConfig[area].color)
+                : getCategoricalColor(index)
+            }
             strokeWidth={1.5}
             strokeDasharray={dataConfig[area].dashed ? "4 4" : undefined}
           />
diff --git a/packages/react/src/components/Charts/BarChart/index.stories.tsx b/packages/react/src/components/Charts/BarChart/index.stories.tsx
index 9b58efcee4..c06733418d 100644
--- a/packages/react/src/components/Charts/BarChart/index.stories.tsx
+++ b/packages/react/src/components/Charts/BarChart/index.stories.tsx
@@ -1,13 +1,7 @@
 import { Meta } from "@storybook/react-vite"
 import { BarChart } from "./index"
 
-const dataConfig = {
-  desktop: {
-    label: "Desktop",
-  },
-}
-
-const meta: Meta<typeof BarChart<typeof dataConfig>> = {
+const meta: Meta = {
   title: "Charts/BarChart",
   component: BarChart,
   tags: ["autodocs"],
@@ -18,60 +12,105 @@ const meta: Meta<typeof BarChart<typeof dataConfig>> = {
       </div>
     ),
   ],
+}
+
+export default meta
+
+const teamsDataConfig = {
+  headcount: {
+    label: "Headcount",
+  },
+}
+
+export const Default: Meta<typeof BarChart<typeof teamsDataConfig>> = {
   args: {
-    dataConfig,
+    dataConfig: teamsDataConfig,
+    data: [
+      { label: "Marketing", values: { headcount: 8 } },
+      { label: "Sales", values: { headcount: 100 } },
+      { label: "Engineering", values: { headcount: 56 } },
+      { label: "Product", values: { headcount: 32 } },
+      { label: "Design", values: { headcount: 16 } },
+      { label: "Finance", values: { headcount: 12 } },
+      { label: "Legal", values: { headcount: 5 } },
+    ],
     xAxis: {
       hide: false,
-      tickFormatter: (value: string) => value.slice(0, 3),
+      tickFormatter: (value: string) => value,
     },
-    data: [
-      { label: "January", values: { desktop: 4000 } },
-      { label: "February", values: { desktop: 3000 } },
-      { label: "March", values: { desktop: 2000 } },
-      { label: "April", values: { desktop: 1500 } },
-      { label: "May", values: { desktop: 2000 } },
-    ],
-    onClick: (data) => {
-      console.log("Bar clicked", data)
+    yAxis: {
+      hide: false,
+      tickFormatter: (value: string) => value,
     },
   },
 }
 
-export default meta
-
-export const Default: Meta<typeof BarChart> = {}
-
-const dataMultiConfig = {
-  desktop: {
-    label: "Desktop",
+const teamsByOfficeDataConfig = {
+  headcount: {
+    label: "Headcount",
   },
-  mobile: {
-    label: "Mobile",
+  openPositions: {
+    label: "Open positions",
   },
-  tablet: {
-    label: "Tablet",
+  turnovers: {
+    label: "Turnovers",
   },
 }
 
-export const MultipleValues: Meta<typeof BarChart<typeof dataMultiConfig>> = {
+export const MultipleBars: Meta<
+  typeof BarChart<typeof teamsByOfficeDataConfig>
+> = {
   args: {
-    dataConfig: dataMultiConfig,
+    dataConfig: teamsByOfficeDataConfig,
     data: [
       {
-        label: "January",
-        values: { desktop: 2400, mobile: 4000, tablet: 3000 },
+        label: "New York",
+        values: {
+          headcount: 145,
+          openPositions: 12,
+          turnovers: 8,
+        },
       },
       {
-        label: "February",
-        values: { desktop: 1398, mobile: 3000, tablet: 2500 },
+        label: "London",
+        values: {
+          headcount: 89,
+          openPositions: 8,
+          turnovers: 19,
+        },
+      },
+      {
+        label: "Barcelona",
+        values: {
+          headcount: 67,
+          openPositions: 40,
+          turnovers: 4,
+        },
+      },
+      {
+        label: "Berlin",
+        values: {
+          headcount: 90,
+          openPositions: 30,
+          turnovers: 3,
+        },
+      },
+      {
+        label: "Remote",
+        values: {
+          headcount: 96,
+          openPositions: 22,
+          turnovers: 2,
+        },
       },
-      { label: "March", values: { desktop: 4000, mobile: 2000, tablet: 3500 } },
-      { label: "April", values: { desktop: 8000, mobile: 1500, tablet: 4500 } },
-      { label: "May", values: { desktop: 6000, mobile: 2000, tablet: 5000 } },
     ],
     xAxis: {
       hide: false,
-      tickFormatter: (value: string) => value.slice(0, 3),
+      tickFormatter: (value: string) => value,
+    },
+    yAxis: {
+      hide: false,
+      tickFormatter: (value: string) => value,
     },
   },
 }
@@ -79,9 +118,11 @@ export const MultipleValues: Meta<typeof BarChart<typeof dataMultiConfig>> = {
 const financialDataConfig = {
   profit: {
     label: "Profit",
+    color: "feedback-positive",
   },
   losses: {
     label: "Losses",
+    color: "feedback-negative",
   },
 }
 
diff --git a/packages/react/src/components/Charts/BarChart/index.tsx b/packages/react/src/components/Charts/BarChart/index.tsx
index 8590704322..77a643b4cc 100644
--- a/packages/react/src/components/Charts/BarChart/index.tsx
+++ b/packages/react/src/components/Charts/BarChart/index.tsx
@@ -16,7 +16,7 @@ import {
   YAxis,
 } from "recharts"
 
-import { autoColor } from "../utils/colors"
+import { getCategoricalColor, getColor } from "../utils/colors"
 import {
   cartesianGridProps,
   chartTooltipProps,
@@ -75,8 +75,8 @@ const _BarChart = <K extends ChartConfig>(
         ...item,
         fill:
           index === array.length - 1
-            ? autoColor(0)
-            : `hsl(${autoColor(0, false)} / 0.5)`,
+            ? getCategoricalColor(index)
+            : getCategoricalColor(index, 0.5),
       }
     }
 
@@ -200,7 +200,9 @@ const _BarChart = <K extends ChartConfig>(
             fill={
               highlightLastBar
                 ? (((data: { fill: string }) => data.fill) as unknown as string)
-                : (dataConfig[key].color ?? autoColor(index))
+                : dataConfig[key].color
+                  ? getColor(dataConfig[key].color)
+                  : getCategoricalColor(index)
             }
             radius={type === "stacked-by-sign" ? [4, 4, 0, 0] : 4}
             maxBarSize={32}
diff --git a/packages/react/src/components/Charts/CategoryBarChart/index.tsx b/packages/react/src/components/Charts/CategoryBarChart/index.tsx
index bc19720317..cfcafad21b 100644
--- a/packages/react/src/components/Charts/CategoryBarChart/index.tsx
+++ b/packages/react/src/components/Charts/CategoryBarChart/index.tsx
@@ -6,7 +6,7 @@ import {
 } from "@/ui/tooltip"
 import { ForwardedRef } from "react"
 
-import { autoColor } from "../utils/colors"
+import { getCategoricalColor, getColor } from "../utils/colors"
 import { fixedForwardRef } from "../utils/forwardRef"
 
 export interface CategoryBarProps {
@@ -31,7 +31,9 @@ const _CategoryBarChart = (
         <div className="flex h-2 gap-1 overflow-hidden">
           {data.map((category, index) => {
             const percentage = (category.value / total) * 100
-            const color = category.color || autoColor(index)
+            const color = category.color
+              ? getColor(category.color)
+              : getCategoricalColor(index)
 
             const formatPercentage = (value: number): string => {
               const percentage = (value / total) * 100
@@ -85,7 +87,9 @@ const _CategoryBarChart = (
           role="list"
         >
           {data.map((category, index) => {
-            const color = category.color || autoColor(index)
+            const color = category.color
+              ? getColor(category.color)
+              : getCategoricalColor(index)
 
             return (
               <div
diff --git a/packages/react/src/components/Charts/LineChart/index.stories.tsx b/packages/react/src/components/Charts/LineChart/index.stories.tsx
index 9ef28e9146..3bdda8ffd2 100644
--- a/packages/react/src/components/Charts/LineChart/index.stories.tsx
+++ b/packages/react/src/components/Charts/LineChart/index.stories.tsx
@@ -2,14 +2,7 @@ import type { Meta } from "@storybook/react-vite"
 
 import { LineChart } from "./index"
 
-const singleDataConfig = {
-  desktop: {
-    label: "Desktop",
-    color: "hsl(var(--chart-1))",
-  },
-}
-
-const meta: Meta<typeof LineChart<typeof singleDataConfig>> = {
+const meta: Meta = {
   component: LineChart,
   title: "Charts/LineChart",
   argTypes: {
@@ -30,52 +23,86 @@ const meta: Meta<typeof LineChart<typeof singleDataConfig>> = {
 
 export default meta
 
-export const Default: Meta<typeof LineChart<typeof singleDataConfig>> = {
+const timeToHireDataConfig = {
+  timeToHire: {
+    label: "Time to hire",
+  },
+}
+
+export const Default: Meta<typeof LineChart<typeof timeToHireDataConfig>> = {
   args: {
-    dataConfig: singleDataConfig,
+    dataConfig: timeToHireDataConfig,
     xAxis: {
+      hide: false,
       tickFormatter: (value: string) => value.slice(0, 3),
     },
     yAxis: {
-      hide: true,
-      tickFormatter: (value: string) =>
-        `${Number.isNaN(parseFloat(value)) ? value : (parseFloat(value) / 100).toFixed(2) + " €"}`,
+      hide: false,
+      tickFormatter: (value: string) => `${value} days`,
     },
     data: [
-      { label: "January", values: { desktop: 186 } },
-      { label: "February", values: { desktop: 305 } },
-      { label: "March", values: { desktop: 237 } },
-      { label: "April", values: { desktop: 73 } },
-      { label: "May", values: { desktop: 209 } },
-      { label: "June", values: { desktop: 214 } },
+      { label: "January", values: { timeToHire: 24 } },
+      { label: "February", values: { timeToHire: 17 } },
+      { label: "March", values: { timeToHire: 25 } },
+      { label: "April", values: { timeToHire: 30 } },
+      { label: "May", values: { timeToHire: 10 } },
+      { label: "June", values: { timeToHire: 26 } },
     ],
+    lineType: "linear",
   },
 }
 
-const multiDataConfig = {
-  desktop: {
-    label: "Desktop",
+const timeToHireBySeniorityDataConfig = {
+  junior: {
+    label: "Junior",
+  },
+  mid: {
+    label: "Mid",
   },
-  mobile: {
-    label: "Mobile",
-    dashed: true,
+  senior: {
+    label: "Senior",
   },
 }
 
-export const MultipleLines: Meta<typeof LineChart<typeof multiDataConfig>> = {
+export const MultipleLines: Meta<
+  typeof LineChart<typeof timeToHireBySeniorityDataConfig>
+> = {
   args: {
-    dataConfig: multiDataConfig,
+    dataConfig: timeToHireBySeniorityDataConfig,
     xAxis: {
       hide: false,
       tickFormatter: (value: string) => value.slice(0, 3),
     },
+    yAxis: {
+      hide: false,
+      tickFormatter: (value: string) => `${value} days`,
+    },
     data: [
-      { label: "January", values: { desktop: 186, mobile: 120 } },
-      { label: "February", values: { desktop: 305, mobile: 180 } },
-      { label: "March", values: { desktop: 237, mobile: 150 } },
-      { label: "April", values: { desktop: 73, mobile: 90 } },
-      { label: "May", values: { desktop: 209, mobile: 160 } },
-      { label: "June", values: { desktop: 214, mobile: 200 } },
+      {
+        label: "January",
+        values: { junior: 18, mid: 28, senior: 45 },
+      },
+      {
+        label: "February",
+        values: { junior: 15, mid: 25, senior: 42 },
+      },
+      {
+        label: "March",
+        values: { junior: 28, mid: 30, senior: 55 },
+      },
+      {
+        label: "April",
+        values: { junior: 16, mid: 26, senior: 40 },
+      },
+      {
+        label: "May",
+        values: { junior: 14, mid: 24, senior: 38 },
+      },
+      {
+        label: "June",
+        values: { junior: 20, mid: 24, senior: 44 },
+      },
     ],
+    lineType: "linear",
   },
 }
diff --git a/packages/react/src/components/Charts/LineChart/index.tsx b/packages/react/src/components/Charts/LineChart/index.tsx
index 7af9048f0e..40f02329e2 100644
--- a/packages/react/src/components/Charts/LineChart/index.tsx
+++ b/packages/react/src/components/Charts/LineChart/index.tsx
@@ -12,7 +12,7 @@ import {
   XAxis,
   YAxis,
 } from "recharts"
-import { autoColor } from "../utils/colors"
+import { getCategoricalColor, getColor } from "../utils/colors"
 import {
   cartesianGridProps,
   chartTooltipProps,
@@ -85,7 +85,11 @@ export const _LineChart = <K extends LineChartConfig>(
             dataKey={line}
             isAnimationActive={false}
             type={lineType}
-            stroke={dataConfig[line].color || autoColor(index)}
+            stroke={
+              dataConfig[line].color
+                ? getColor(dataConfig[line].color)
+                : getCategoricalColor(index)
+            }
             strokeWidth={1.5}
             strokeDasharray={dataConfig[line].dashed ? "4 4" : undefined}
             dot={false}
diff --git a/packages/react/src/components/Charts/PieChart/index.stories.tsx b/packages/react/src/components/Charts/PieChart/index.stories.tsx
index 633eee0b3a..7d487d9b02 100644
--- a/packages/react/src/components/Charts/PieChart/index.stories.tsx
+++ b/packages/react/src/components/Charts/PieChart/index.stories.tsx
@@ -2,27 +2,6 @@ import type { Meta } from "@storybook/react-vite"
 
 import { PieChart } from "./index"
 
-const dataConfig = {
-  january: {
-    label: "January",
-  },
-  february: {
-    label: "February",
-  },
-  march: {
-    label: "March",
-  },
-  april: {
-    label: "April",
-  },
-  may: {
-    label: "May",
-  },
-  june: {
-    label: "June",
-  },
-}
-
 const meta: Meta<typeof PieChart> = {
   component: PieChart,
   title: "Charts/PieChart",
@@ -44,28 +23,26 @@ const meta: Meta<typeof PieChart> = {
 
 export default meta
 
-export const Default: Meta<typeof PieChart> = {
-  args: {
-    dataConfig,
-    data: [
-      { label: "january", value: 186 },
-      { label: "february", value: 305 },
-      { label: "march", value: 237 },
-      { label: "april", value: 73 },
-      { label: "may", value: 209 },
-      { label: "june", value: 214 },
-    ],
-    tickFormatter: (value: string) =>
-      `${Number.isNaN(parseFloat(value)) ? value : (parseFloat(value) / 100).toFixed(2) + "€"}`,
+const genderSplitDataConfig = {
+  male: {
+    label: "Male",
+  },
+  female: {
+    label: "Female",
   },
 }
 
-export const WithOverview: Meta<typeof PieChart> = {
+export const Default: Meta<typeof PieChart> = {
   args: {
-    ...Default.args,
+    dataConfig: genderSplitDataConfig,
+    data: [
+      { label: "male", value: 8 },
+      { label: "female", value: 2 },
+    ],
     overview: {
-      label: "Total",
-      number: 224,
+      label: "Total employees",
+      number: 14,
     },
+    tickFormatter: (value: string) => value,
   },
 }
diff --git a/packages/react/src/components/Charts/PieChart/index.tsx b/packages/react/src/components/Charts/PieChart/index.tsx
index 284b800748..6e4c9e0b45 100644
--- a/packages/react/src/components/Charts/PieChart/index.tsx
+++ b/packages/react/src/components/Charts/PieChart/index.tsx
@@ -7,7 +7,7 @@ import {
 } from "@/ui/chart"
 import { ComponentProps, ForwardedRef } from "react"
 import { Cell, Label, Pie, PieChart as PieChartPrimitive } from "recharts"
-import { autoColor } from "../utils/colors"
+import { getCategoricalColor, getColor } from "../utils/colors"
 import { fixedForwardRef } from "../utils/forwardRef"
 import { ChartConfig } from "../utils/types"
 
@@ -31,9 +31,9 @@ export const _PieChart = (
 ) => {
   const preparedData = data.map((item, index) => ({
     ...item,
-    fill:
-      dataConfig[item.label as keyof typeof dataConfig]?.color ||
-      autoColor(index),
+    fill: dataConfig[item.label as keyof typeof dataConfig]?.color
+      ? getColor(dataConfig[item.label as keyof typeof dataConfig].color!)
+      : getCategoricalColor(index),
   }))
   const values = data.map((item) => item.value)
   const sum = values.reduce((acc, value) => {
diff --git a/packages/react/src/components/Charts/ProgressChart/index.tsx b/packages/react/src/components/Charts/ProgressChart/index.tsx
index 8482e1dfbe..2d581e7ae2 100644
--- a/packages/react/src/components/Charts/ProgressChart/index.tsx
+++ b/packages/react/src/components/Charts/ProgressChart/index.tsx
@@ -1,6 +1,6 @@
 import { Progress } from "@/ui/progress"
 import { ForwardedRef } from "react"
-import { autoColor } from "../utils/colors"
+import { getColor } from "../utils/colors"
 import { fixedForwardRef } from "../utils/forwardRef"
 import { ChartConfig, ChartPropsBase } from "../utils/types"
 
@@ -16,7 +16,7 @@ const _ProgressBar = <K extends ChartConfig>(
   { value, max = 100, label, color }: ProgressBarProps<K>,
   _ref: ForwardedRef<HTMLDivElement>
 ) => {
-  const barColor = color || autoColor(0)
+  const barColor = color ? getColor(color) : getColor("categorical-1")
   const percentage = (value / max) * 100
 
   return (
diff --git a/packages/react/src/components/Charts/RadarChart/index.tsx b/packages/react/src/components/Charts/RadarChart/index.tsx
index a59e7ae3d2..09252fe8bd 100644
--- a/packages/react/src/components/Charts/RadarChart/index.tsx
+++ b/packages/react/src/components/Charts/RadarChart/index.tsx
@@ -13,7 +13,7 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "../../../ui/chart"
-import { autoColor } from "../utils/colors"
+import { getCategoricalColor, getColor } from "../utils/colors"
 import { fixedForwardRef } from "../utils/forwardRef"
 import { ChartConfig, ChartItem } from "../utils/types"
 
@@ -60,8 +60,16 @@ export const _RadarChart = <K extends ChartConfig>(
           <Radar
             key={key}
             dataKey={key}
-            fill={dataConfig[key].color || autoColor(index)}
-            stroke={dataConfig[key].color || autoColor(index)}
+            fill={
+              dataConfig[key].color
+                ? getColor(dataConfig[key].color)
+                : getCategoricalColor(index)
+            }
+            stroke={
+              dataConfig[key].color
+                ? getColor(dataConfig[key].color)
+                : getCategoricalColor(index)
+            }
             strokeWidth={1.5}
             fillOpacity={0.3}
             label={dataConfig[key].label}
diff --git a/packages/react/src/components/Charts/RadialProgressChart/index.tsx b/packages/react/src/components/Charts/RadialProgressChart/index.tsx
index 4d3fa2cddf..81c57869ae 100644
--- a/packages/react/src/components/Charts/RadialProgressChart/index.tsx
+++ b/packages/react/src/components/Charts/RadialProgressChart/index.tsx
@@ -1,4 +1,4 @@
-import { autoColor } from "../utils/colors"
+import { getColor } from "../utils/colors"
 
 export interface RadialProgressProps {
   value: number
@@ -10,7 +10,7 @@ export interface RadialProgressProps {
 export function RadialProgressChart({
   value,
   max = 100,
-  color = autoColor(0),
+  color,
   overview,
 }: RadialProgressProps) {
   const strokeWidth = 12
@@ -19,6 +19,7 @@ export function RadialProgressChart({
   const radius = center - strokeWidth / 2
   const circumference = 2 * Math.PI * radius
   const progressOffset = ((max - Math.min(value, max)) / max) * circumference
+  const strokeColor = color ? getColor(color) : getColor("categorical-1")
 
   return (
     <div className="relative inline-flex aspect-auto h-full w-full items-center justify-center overflow-hidden">
@@ -39,7 +40,7 @@ export function RadialProgressChart({
           cy={center}
           r={radius}
           fill="none"
-          stroke={color}
+          stroke={strokeColor}
           strokeWidth={strokeWidth}
           strokeDasharray={circumference}
           strokeDashoffset={progressOffset}
diff --git a/packages/react/src/components/Charts/VerticalBarChart/index.stories.tsx b/packages/react/src/components/Charts/VerticalBarChart/index.stories.tsx
index 38ab4f9ede..0aaa418a38 100644
--- a/packages/react/src/components/Charts/VerticalBarChart/index.stories.tsx
+++ b/packages/react/src/components/Charts/VerticalBarChart/index.stories.tsx
@@ -1,19 +1,13 @@
 import { Meta } from "@storybook/react-vite"
 import { VerticalBarChart } from "./index"
 
-const dataConfig = {
-  value: {
-    label: "Value",
-  },
-}
-
-const meta: Meta<typeof VerticalBarChart<typeof dataConfig>> = {
+const meta: Meta = {
   title: "Charts/VerticalBarChart",
   component: VerticalBarChart,
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="h-52 w-full">
+      <div className="h-96 w-full">
         <Story />
       </div>
     ),
@@ -25,53 +19,83 @@ const meta: Meta<typeof VerticalBarChart<typeof dataConfig>> = {
       },
     },
   },
+}
+
+export default meta
+
+const hiresDataConfig = {
+  hires: {
+    label: "Successful hires",
+  },
+}
+
+export const Default: Meta<typeof VerticalBarChart<typeof hiresDataConfig>> = {
   args: {
-    dataConfig,
+    dataConfig: hiresDataConfig,
     data: [
-      { label: "Employee Satisfaction", values: { value: 85 } },
-      { label: "Retention Rate", values: { value: 92 } },
-      { label: "Training Completion", values: { value: 78 } },
-      { label: "Performance Score", values: { value: 88 } },
-      { label: "Recruitment Efficiency", values: { value: 100 } },
+      { label: "Sarah Johnson", values: { hires: 28 } },
+      { label: "Michael Chen", values: { hires: 25 } },
+      { label: "Emma Thompson", values: { hires: 23 } },
+      { label: "James Wilson", values: { hires: 21 } },
+      { label: "Olivia Martinez", values: { hires: 19 } },
+      { label: "David Brown", values: { hires: 18 } },
+      { label: "Sophie Davis", values: { hires: 16 } },
+      { label: "Alexander Lee", values: { hires: 15 } },
+      { label: "Isabella Garcia", values: { hires: 14 } },
+      { label: "Thomas Anderson", values: { hires: 12 } },
     ],
     yAxis: {
-      width: 100,
+      hide: false,
+      width: 120,
+    },
+    xAxis: {
+      hide: false,
+      tickFormatter: (value: string) => `${value} hires`,
     },
+    label: true,
   },
 }
 
-export default meta
-
-export const Default = {}
-
-const multiDataConfig = {
-  desktop: {
-    label: "Desktop",
+const hiresBySeniorityDataConfig = {
+  junior: {
+    label: "Junior hires",
   },
-  mobile: {
-    label: "Mobile",
+  senior: {
+    label: "Senior hires",
   },
 }
 
-export const MultipleValues: Meta<
-  typeof VerticalBarChart<typeof multiDataConfig>
+export const MultipleBars: Meta<
+  typeof VerticalBarChart<typeof hiresBySeniorityDataConfig>
 > = {
   args: {
-    dataConfig: multiDataConfig,
+    dataConfig: hiresBySeniorityDataConfig,
     data: [
-      { label: "January", values: { mobile: 4000, desktop: 2400 } },
-      { label: "February", values: { mobile: 3000, desktop: 1398 } },
-      { label: "March", values: { mobile: 2000, desktop: 4000 } },
-      { label: "April", values: { mobile: 1500, desktop: 8000 } },
-      { label: "May", values: { mobile: 2000, desktop: 6000 } },
+      { label: "Sarah Johnson", values: { junior: 18, senior: 10 } },
+      { label: "Michael Chen", values: { junior: 15, senior: 10 } },
+      { label: "Emma Thompson", values: { junior: 14, senior: 9 } },
+      { label: "James Wilson", values: { junior: 12, senior: 9 } },
+      { label: "Olivia Martinez", values: { junior: 11, senior: 8 } },
+      { label: "David Brown", values: { junior: 10, senior: 8 } },
+      { label: "Sophie Davis", values: { junior: 9, senior: 7 } },
+      { label: "Alexander Lee", values: { junior: 8, senior: 7 } },
+      { label: "Isabella Garcia", values: { junior: 8, senior: 6 } },
+      { label: "Thomas Anderson", values: { junior: 7, senior: 5 } },
     ],
+    yAxis: {
+      hide: false,
+      width: 120,
+    },
     xAxis: {
       hide: false,
-      tickFormatter: (value: string) =>
-        `${Number.isNaN(parseFloat(value)) ? value : (parseFloat(value) / 100).toFixed(2) + "€"}`,
+      tickFormatter: (value: string) => `${value} hires`,
     },
-    valueFormatter: (value: string | number | undefined) =>
-      `${Number.isNaN(Number(value)) ? value : (Number(value) / 100).toFixed(2) + "€"}`,
+  },
+}
+
+const dataConfig = {
+  value: {
+    label: "Value",
   },
 }
 
diff --git a/packages/react/src/components/Charts/VerticalBarChart/index.tsx b/packages/react/src/components/Charts/VerticalBarChart/index.tsx
index df4be5403c..7039aa27f8 100644
--- a/packages/react/src/components/Charts/VerticalBarChart/index.tsx
+++ b/packages/react/src/components/Charts/VerticalBarChart/index.tsx
@@ -14,7 +14,7 @@ import {
 import type { Props as LabelProps } from "recharts/types/component/Label"
 import type { CartesianViewBox } from "recharts/types/util/types"
 import { prepareData } from "../utils/bar"
-import { autoColor } from "../utils/colors"
+import { getCategoricalColor, getColor } from "../utils/colors"
 import {
   cartesianGridProps,
   chartTooltipProps,
@@ -142,7 +142,11 @@ const _VBarChart = <K extends ChartConfig>(
                 layout="vertical"
                 key={`bar-${key}`}
                 dataKey={key}
-                fill={dataConfig[key].color || autoColor(index)}
+                fill={
+                  dataConfig[key].color
+                    ? getColor(dataConfig[key].color)
+                    : getCategoricalColor(index)
+                }
                 radius={4}
                 maxBarSize={24}
               >
diff --git a/packages/react/src/components/Charts/utils/colors.tsx b/packages/react/src/components/Charts/utils/colors.tsx
index 09c479a252..4de830ca20 100644
--- a/packages/react/src/components/Charts/utils/colors.tsx
+++ b/packages/react/src/components/Charts/utils/colors.tsx
@@ -1,20 +1,20 @@
-const availableColors = {
-  "chart-1": "var(--chart-1)",
-  "chart-2": "var(--chart-2)",
-  "chart-3": "var(--chart-3)",
-  "chart-4": "var(--chart-4)",
-  "chart-5": "var(--chart-5)",
-  "chart-6": "var(--chart-6)",
-  "chart-7": "var(--chart-7)",
-  "chart-8": "var(--chart-8)",
+export const getCategoricalColor = (index: number, opacity?: number) => {
+  const categoricalColors = [
+    "categorical-1",
+    "categorical-2",
+    "categorical-3",
+    "categorical-4",
+    "categorical-5",
+    "categorical-6",
+    "categorical-7",
+    "categorical-8",
+  ]
+  return getColor(categoricalColors[index % categoricalColors.length], opacity)
 }
 
-export type ChartColor = keyof typeof availableColors
+export const getColor = (color: string, opacity?: number) => {
+  const opacityString = opacity !== undefined ? ` / ${opacity}` : ""
+  const chartColorName = `chart-${color}`
 
-export const autoColor = (index: number, withHSL = true) => {
-  const colors = Object.values(availableColors)
-  const color = colors[index % colors.length]
-  return withHSL ? `hsl(${color})` : color
+  return `hsl(var(--${chartColorName})${opacityString})`
 }
-
-export const chartColor = (color: ChartColor) => availableColors[color]
diff --git a/packages/react/src/experimental/Charts/RadarChart/index.tsx b/packages/react/src/experimental/Charts/RadarChart/index.tsx
index 9d0f583a55..0a6992e168 100644
--- a/packages/react/src/experimental/Charts/RadarChart/index.tsx
+++ b/packages/react/src/experimental/Charts/RadarChart/index.tsx
@@ -14,7 +14,10 @@ import {
   Radar,
   RadarChart as RadarChartPrimitive,
 } from "recharts"
-import { autoColor } from "../../../components/Charts/utils/colors"
+import {
+  getCategoricalColor,
+  getColor,
+} from "../../../components/Charts/utils/colors"
 import { fixedForwardRef } from "../../../components/Charts/utils/forwardRef"
 import { ChartConfig, ChartItem } from "../../../components/Charts/utils/types"
 
@@ -63,8 +66,16 @@ export const _RadarChart = <K extends ChartConfig>(
           <Radar
             key={key}
             dataKey={key}
-            fill={dataConfig[key].color || autoColor(index)}
-            stroke={dataConfig[key].color || autoColor(index)}
+            fill={
+              dataConfig[key].color
+                ? getColor(dataConfig[key].color)
+                : getCategoricalColor(index)
+            }
+            stroke={
+              dataConfig[key].color
+                ? getColor(dataConfig[key].color)
+                : getCategoricalColor(index)
+            }
             strokeWidth={1.5}
             fillOpacity={0.3}
             label={dataConfig[key].label}
diff --git a/packages/react/src/experimental/Navigation/Carousel/DynamicCarousel/index.stories.tsx b/packages/react/src/experimental/Navigation/Carousel/DynamicCarousel/index.stories.tsx
index c90001993d..49b2ea7356 100644
--- a/packages/react/src/experimental/Navigation/Carousel/DynamicCarousel/index.stories.tsx
+++ b/packages/react/src/experimental/Navigation/Carousel/DynamicCarousel/index.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
 import { BarChartProps } from "../../../../components/Charts/BarChart"
-import BarChartStory from "../../../../components/Charts/BarChart/index.stories"
+import { Default as BarChartStory } from "../../../../components/Charts/BarChart/index.stories"
 import { Placeholder } from "../../../../lib/storybook-utils/placeholder"
 import { BarChartWidget } from "../../../Widgets/Charts/BarChartWidget"
 import { DynamicCarousel } from "./index"
diff --git a/packages/react/src/experimental/Navigation/Carousel/index.stories.tsx b/packages/react/src/experimental/Navigation/Carousel/index.stories.tsx
index e269b2aae9..6372676d77 100644
--- a/packages/react/src/experimental/Navigation/Carousel/index.stories.tsx
+++ b/packages/react/src/experimental/Navigation/Carousel/index.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
 import { BarChartProps } from "../../../components/Charts/BarChart"
-import BarChartStory from "../../../components/Charts/BarChart/index.stories"
+import { Default as BarChartStory } from "../../../components/Charts/BarChart/index.stories"
 import { Placeholder } from "../../../lib/storybook-utils/placeholder"
 import { BarChartWidget } from "../../Widgets/Charts/BarChartWidget"
 import { Carousel } from "./index"
diff --git a/packages/react/src/experimental/Widgets/Charts/AreaChartWidget/index.stories.tsx b/packages/react/src/experimental/Widgets/Charts/AreaChartWidget/index.stories.tsx
index fbbd11f709..5692cc58a6 100644
--- a/packages/react/src/experimental/Widgets/Charts/AreaChartWidget/index.stories.tsx
+++ b/packages/react/src/experimental/Widgets/Charts/AreaChartWidget/index.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { AreaChartProps } from "../../../../components/Charts/AreaChart"
-import AreaChartStory from "../../../../components/Charts/AreaChart/index.stories"
+import { Default as AreaChartDefault } from "../../../../components/Charts/AreaChart/index.stories"
 import { containerStoryArgs, WidgetDecorator } from "../storybook-utils"
 import { AreaChartWidget } from "./index"
 
@@ -19,7 +19,7 @@ const meta: Meta<typeof AreaChartWidget> = {
       ...containerStoryArgs.header,
       title: "An area chart",
     },
-    chart: AreaChartStory.args as AreaChartProps,
+    chart: AreaChartDefault.args as AreaChartProps,
   },
   decorators: [WidgetDecorator],
 }
@@ -36,7 +36,7 @@ export const WithYAxis: Story = {
       title: "An area chart",
     },
     chart: {
-      ...(AreaChartStory.args as AreaChartProps),
+      ...(AreaChartDefault.args as AreaChartProps),
       yAxis: {
         hide: false,
       },
@@ -52,7 +52,7 @@ export const WithComment: Story = {
       comment: "44.000 $",
     },
     chart: {
-      ...(AreaChartStory.args as AreaChartProps),
+      ...(AreaChartDefault.args as AreaChartProps),
       yAxis: {
         hide: false,
       },
@@ -69,7 +69,7 @@ export const WithBlur: Story = {
       comment: "44.000 $",
     },
     chart: {
-      ...(AreaChartStory.args as AreaChartProps),
+      ...(AreaChartDefault.args as AreaChartProps),
       yAxis: {
         hide: false,
       },
diff --git a/packages/react/src/experimental/Widgets/Charts/BarChartWidget/index.stories.tsx b/packages/react/src/experimental/Widgets/Charts/BarChartWidget/index.stories.tsx
index c060ae7c39..c8adee2ddc 100644
--- a/packages/react/src/experimental/Widgets/Charts/BarChartWidget/index.stories.tsx
+++ b/packages/react/src/experimental/Widgets/Charts/BarChartWidget/index.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from "@storybook/react-vite"
 
 import { BarChartProps } from "../../../../components/Charts/BarChart"
-import BarChartStory from "../../../../components/Charts/BarChart/index.stories"
+import { Default as BarChartDefault } from "../../../../components/Charts/BarChart/index.stories"
 import { containerStoryArgs, WidgetDecorator } from "../storybook-utils"
 import { BarChartWidget } from "./index"
 
@@ -18,7 +18,7 @@ const meta = {
       ...containerStoryArgs.header,
       title: "A bar chart",
     },
-    chart: BarChartStory.args as BarChartProps,
+    chart: BarChartDefault.args as BarChartProps,
   },
   decorators: [WidgetDecorator],
 } satisfies Meta<typeof BarChartWidget>
diff --git a/packages/react/src/experimental/Widgets/Charts/LineChartWidget/index.stories.tsx b/packages/react/src/experimental/Widgets/Charts/LineChartWidget/index.stories.tsx
index 10ccbf1dcc..39280c28c7 100644
--- a/packages/react/src/experimental/Widgets/Charts/LineChartWidget/index.stories.tsx
+++ b/packages/react/src/experimental/Widgets/Charts/LineChartWidget/index.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from "@storybook/react-vite"
 
-import AreaChartStory from "../../../../components/Charts/AreaChart/index.stories"
 import { LineChartProps } from "../../../../components/Charts/LineChart"
+import { Default as LineChartDefault } from "../../../../components/Charts/LineChart/index.stories"
 import { containerStoryArgs, WidgetDecorator } from "../storybook-utils"
 import { LineChartWidget } from "./index"
 
@@ -18,7 +18,7 @@ const meta = {
       ...containerStoryArgs.header,
       title: "A line chart",
     },
-    chart: AreaChartStory.args as LineChartProps,
+    chart: LineChartDefault.args as LineChartProps,
   },
   decorators: [WidgetDecorator],
 } satisfies Meta<typeof LineChartWidget>
diff --git a/packages/react/src/experimental/Widgets/Charts/PieChartWidget/index.stories.tsx b/packages/react/src/experimental/Widgets/Charts/PieChartWidget/index.stories.tsx
index 17af59b76d..b51950433f 100644
--- a/packages/react/src/experimental/Widgets/Charts/PieChartWidget/index.stories.tsx
+++ b/packages/react/src/experimental/Widgets/Charts/PieChartWidget/index.stories.tsx
@@ -1,5 +1,7 @@
 import type { Meta } from "@storybook/react-vite"
 
+import { PieChartProps } from "../../../../components/Charts/PieChart"
+import { Default as PieChartDefault } from "../../../../components/Charts/PieChart/index.stories"
 import { containerStoryArgs, WidgetDecorator } from "../storybook-utils"
 import { PieChartWidget } from "./index"
 
@@ -21,32 +23,7 @@ const meta = {
       ...containerStoryArgs.header,
       title: "A pie chart",
     },
-    chart: {
-      dataConfig: {
-        january: {
-          label: "January",
-        },
-        february: {
-          label: "February",
-        },
-        march: {
-          label: "March",
-        },
-        april: {
-          label: "April",
-        },
-        may: {
-          label: "May",
-        },
-      },
-      data: [
-        { label: "january", value: 186 },
-        { label: "february", value: 305 },
-        { label: "march", value: 237 },
-        { label: "april", value: 73 },
-        { label: "may", value: 209 },
-      ],
-    },
+    chart: PieChartDefault.args as PieChartProps,
   },
   decorators: [WidgetDecorator],
 } satisfies Meta<typeof PieChartWidget>
diff --git a/packages/react/src/experimental/Widgets/Charts/VerticalBarChartWidget/index.stories.tsx b/packages/react/src/experimental/Widgets/Charts/VerticalBarChartWidget/index.stories.tsx
index 30b2b13f2d..de798a705b 100644
--- a/packages/react/src/experimental/Widgets/Charts/VerticalBarChartWidget/index.stories.tsx
+++ b/packages/react/src/experimental/Widgets/Charts/VerticalBarChartWidget/index.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from "@storybook/react-vite"
 
 import { VerticalBarChartProps } from "../../../../components/Charts/VerticalBarChart"
-import BarChartStory from "../../../../components/Charts/VerticalBarChart/index.stories"
+import { Default as VerticalBarChartDefault } from "../../../../components/Charts/VerticalBarChart/index.stories"
 import { containerStoryArgs, WidgetDecorator } from "../storybook-utils"
 import { VerticalBarChartWidget } from "./index"
 
@@ -18,7 +18,7 @@ const meta = {
       ...containerStoryArgs.header,
       title: "A Vertical Bar Chart",
     },
-    chart: BarChartStory.args as VerticalBarChartProps,
+    chart: VerticalBarChartDefault.args as VerticalBarChartProps,
   },
   decorators: [WidgetDecorator],
 } satisfies Meta<typeof VerticalBarChartWidget>
diff --git a/packages/react/src/experimental/Widgets/Content/ProgressBarDuo/index.tsx b/packages/react/src/experimental/Widgets/Content/ProgressBarDuo/index.tsx
index 241767e8b2..056cd2489f 100644
--- a/packages/react/src/experimental/Widgets/Content/ProgressBarDuo/index.tsx
+++ b/packages/react/src/experimental/Widgets/Content/ProgressBarDuo/index.tsx
@@ -1,5 +1,5 @@
 import { forwardRef } from "react"
-import { autoColor } from "../../../../components/Charts/utils/colors"
+import { getColor } from "../../../../components/Charts/utils/colors"
 
 interface DualProgressBarProps {
   value: number
@@ -14,7 +14,10 @@ export const ProgressBarDuo = forwardRef<HTMLDivElement, DualProgressBarProps>(
       <div ref={ref} className="flex h-2 w-full gap-0.5 overflow-hidden">
         <div
           className="rounded transition-all duration-300 ease-in-out"
-          style={{ width: `${percentage}%`, backgroundColor: autoColor(0) }}
+          style={{
+            width: `${percentage}%`,
+            backgroundColor: getColor("categorical-1"),
+          }}
         />
         <div
           className="rounded bg-f1-foreground-disabled transition-all duration-300 ease-in-out"