diff --git a/frontend/src/component/impact-metrics/ImpactMetricsChart.tsx b/frontend/src/component/impact-metrics/ImpactMetricsChart.tsx
index 9d0280a27d..ca19837ac0 100644
--- a/frontend/src/component/impact-metrics/ImpactMetricsChart.tsx
+++ b/frontend/src/component/impact-metrics/ImpactMetricsChart.tsx
@@ -62,7 +62,7 @@ export const ImpactMetricsChart: FC<ImpactMetricsChartProps> = ({
         type: 'constant',
     });
 
-    const data = useChartData(timeSeriesData);
+    const data = useChartData(timeSeriesData, debug?.query);
 
     const hasError = !!dataError;
     const isLoading = dataLoading;
diff --git a/frontend/src/component/impact-metrics/hooks/useChartData.ts b/frontend/src/component/impact-metrics/hooks/useChartData.ts
index f7ea329d5e..0519908c67 100644
--- a/frontend/src/component/impact-metrics/hooks/useChartData.ts
+++ b/frontend/src/component/impact-metrics/hooks/useChartData.ts
@@ -1,14 +1,30 @@
 import { useMemo } from 'react';
 import { useTheme } from '@mui/material';
 import type { ImpactMetricsSeries } from 'hooks/api/getters/useImpactMetricsData/useImpactMetricsData';
-import { useSeriesColor } from './useSeriesColor.ts';
 import { getSeriesLabel } from '../utils.ts';
 
+const getColorStartingIndex = (modulo: number, series?: string): number => {
+    if (!series || series.length === 0 || modulo <= 0) {
+        return 0;
+    }
+
+    let hash = 0;
+    for (let i = 0; i < series.length; i++) {
+        const char = series.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash = hash & hash;
+    }
+
+    return Math.abs(hash) % modulo;
+};
+
 export const useChartData = (
     timeSeriesData: ImpactMetricsSeries[] | undefined,
+    colorIndexBy?: string,
 ) => {
     const theme = useTheme();
-    const getSeriesColor = useSeriesColor();
+    const colors = theme.palette.charts.series;
+    const startColorIndex = getColorStartingIndex(colors.length, colorIndexBy);
 
     return useMemo(() => {
         if (!timeSeriesData || timeSeriesData.length === 0) {
@@ -66,9 +82,9 @@ export const useChartData = (
                 (timestamp) => new Date(timestamp * 1000),
             );
 
-            const datasets = timeSeriesData.map((series) => {
+            const datasets = timeSeriesData.map((series, index) => {
                 const seriesLabel = getSeriesLabel(series.metric);
-                const color = getSeriesColor(seriesLabel);
+                const color = colors[(index + startColorIndex) % colors.length];
 
                 const dataMap = new Map(series.data);
 
@@ -90,5 +106,5 @@ export const useChartData = (
                 datasets,
             };
         }
-    }, [timeSeriesData, theme, getSeriesColor]);
+    }, [timeSeriesData, theme]);
 };
diff --git a/frontend/src/component/impact-metrics/hooks/useSeriesColor.ts b/frontend/src/component/impact-metrics/hooks/useSeriesColor.ts
deleted file mode 100644
index a8a0f3f6e5..0000000000
--- a/frontend/src/component/impact-metrics/hooks/useSeriesColor.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useTheme } from '@mui/material';
-
-export const useSeriesColor = () => {
-    const theme = useTheme();
-    const colors = theme.palette.charts.series;
-
-    return (seriesLabel: string): string => {
-        let hash = 0;
-        for (let i = 0; i < seriesLabel.length; i++) {
-            const char = seriesLabel.charCodeAt(i);
-            hash = (hash << 5) - hash + char;
-            hash = hash & hash; // Convert to 32-bit integer
-        }
-        const index = Math.abs(hash) % colors.length;
-        return colors[index];
-    };
-};