From aa2d73e19c16dec17ec869d2e70e5c826b419ef7 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 25 Aug 2026 16:26:34 +0000
Subject: [PATCH] fix(ui): give each provider a distinct color in Spend by
 Provider donut

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../components/EntityUsage/SpendByProvider.test.tsx         | 6 +++---
 .../_components/components/EntityUsage/SpendByProvider.tsx  | 1 -
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.test.tsx
index cbacaa9a356..2810c85acce 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.test.tsx
@@ -216,15 +216,15 @@ describe("SpendByProvider", () => {
     expect(screen.queryByText("unknown")).not.toBeInTheDocument();
   });
 
-  it("renders one cyan donut sector per visible provider with the $ total as center label", () => {
+  it("gives every visible provider its own donut color and shows the $ total as center label", () => {
     const { container } = render(
       <SpendByProvider loading={false} isDateChanging={false} providerSpend={mockProviderSpend} />,
     );
 
     const sectors = container.querySelectorAll(".recharts-pie-sector path");
     expect(sectors).toHaveLength(2);
-    const fills = new Set(Array.from(sectors).map((sector) => sector.getAttribute("fill")));
-    expect(fills).toEqual(new Set(["var(--color-cyan-500, #06b6d4)"]));
+    const fills = Array.from(sectors).map((sector) => sector.getAttribute("fill"));
+    expect(new Set(fills).size).toBe(fills.length);
 
     const centerLabels = Array.from(container.querySelectorAll("text.fill-foreground")).map((text) => text.textContent);
     expect(centerLabels).toContain("$351.25");
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.tsx
index f5d6db67478..181705fad5f 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.tsx
@@ -116,7 +116,6 @@ const SpendByProvider: React.FC<SpendByProviderProps> = ({ loading, isDateChangi
               index="provider"
               category="spend"
               valueFormatter={(value) => `$${formatNumberWithCommas(value, 2)}`}
-              colors={["cyan"]}
               showLabel
               startAngle={90}
               endAngle={-270}