diff --git a/src/components/ui/StatCard.test.tsx b/src/components/ui/StatCard.test.tsx
index 829226c..a51081f 100644
--- a/src/components/ui/StatCard.test.tsx
+++ b/src/components/ui/StatCard.test.tsx
@@ -337,4 +337,37 @@ describe("StatCard — sparkline", () => {
"Earnings history: 4 data points, trending up from 10 to 30, range 10 to 30",
);
});
+
+ it("formats sparkline values according to format and asset props (#709)", () => {
+ render(
+ ,
+ );
+ const svg = screen.getByRole("img");
+ expect(svg).toHaveAccessibleName(
+ "Lifetime earnings: 4 data points, trending up from 1,234.5 USDC to 8,420 USDC, range 1,234.5 USDC to 8,420 USDC",
+ );
+ });
+
+ it("formats sparkline values for count format (#709)", () => {
+ render(
+ ,
+ );
+ const svg = screen.getByRole("img");
+ expect(svg).toHaveAccessibleName(
+ "Completed tasks: 3 data points, trending up from 1,000 to 5,000, range 1,000 to 5,000",
+ );
+ });
});
diff --git a/src/components/ui/StatCard.tsx b/src/components/ui/StatCard.tsx
index eff652f..b78c634 100644
--- a/src/components/ui/StatCard.tsx
+++ b/src/components/ui/StatCard.tsx
@@ -23,7 +23,7 @@
*/
import { cn, formatCurrency, formatInteger, formatPercent } from "@/lib/utils";
-import { isRTLLocale, resolveLocale } from "@/lib/locale";
+import { resolveLocale } from "@/lib/locale";
import { ArrowUpRight, ArrowDownRight, AlertCircle } from "lucide-react";
import type { LucideIcon } from "lucide-react";
import { Sparkline } from "./Sparkline";
@@ -280,7 +280,11 @@ export function StatCard({
{/* The card's own label becomes the sparkline's accessible name, so
the trend is announced as "Earnings: 8 data points, trending up
from …" rather than as an unlabelled graphic. */}
-
+ formatValue(v, format, asset, locale).display}
+ />
)}
,