diff --git a/packages/charts/src/util/populateData.ts b/packages/charts/src/util/populateData.ts
index ca14ba6ddac..d2697a81719 100644
--- a/packages/charts/src/util/populateData.ts
+++ b/packages/charts/src/util/populateData.ts
@@ -6,8 +6,8 @@ export const populateData = (labels, datasets, colors, theme, isPie = false) =>
   return {
     labels,
     datasets: datasets.map((item, index) => ({
-      backgroundColor: isPie ? colorPalette : colorPalette[index],
-      borderColor: isPie ? colorPalette : colorPalette[index],
+      backgroundColor: isPie ? colorPalette : colorPalette[index % colorPalette.length],
+      borderColor: isPie ? colorPalette : colorPalette[index % colorPalette.length],
       ...item
     }))
   };