add white labels

theopensystemslab · Jan 10, 2025 · 0f5f5ef · 0f5f5ef
1 parent 8789ec9
commit 0f5f5ef
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/app/components/graphs/TenureComparisonBarChart.tsx b/app/components/graphs/TenureComparisonBarChart.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+import React from "react";
+import { Bar, BarChart, CartesianGrid, XAxis, LabelList } from "recharts";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import {
   ChartConfig,
@@ -10,6 +11,7 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
+import { formatValue } from "@/app/lib/format";
 
 const chartConfig = {
   freehold: {
@@ -22,8 +24,6 @@ const chartConfig = {
   },
 } satisfies ChartConfig;
 
-import React from "react";
-
 // Define type for DataInput
 type DataInput = {
   category: string;
@@ -99,7 +99,15 @@ const TenureComparisonBarChart: React.FC<StackedBarChartProps> = ({ data }) => {
             />
             <ChartTooltip content={<ChartTooltipContent hideLabel />} />
             <ChartLegend content={<ChartLegendContent />} />
-            <Bar dataKey="monthly" strokeWidth={2} activeIndex={2} />
+            <Bar dataKey="monthly" strokeWidth={2} activeIndex={2}>
+              <LabelList
+                dataKey="monthly"
+                position="center"
+                formatter={formatValue}
+                fill="white"
+                fontSize={12}
+              />
+            </Bar>
           </BarChart>
         </ChartContainer>
       </CardContent>

diff --git a/app/lib/format.ts b/app/lib/format.ts
@@ -5,8 +5,8 @@ export const formatValue = (value: number) => {
   if (value >= 1000000) {
     return `£${(value / 1000000).toFixed(1)}M`;
   }
-  if (value >= 1000) {
+  if (value >= 10000) {
     return `£${(value / 1000).toFixed(0)}K`;
   }
-  return `£${value}`;
+  return `£${value.toFixed(0)}`;
 };