comparison with proper formatting for diff amount

src/components/HistoryChart.tsx

@@ -5,7 +5,7 @@ export interface ChartDataPoint {
   id: string;
   amount: number;
   compareAmount?: number;
-  compareLabel?: compareLabel;
+  compareLabel?: string;
   highlighted?: boolean;
 }
 
@@ -31,13 +31,13 @@ export interface HistoryChartProps {
   setComparison: (mode: boolean) => void;
 }
 
-const formatDisplay = (point: ChartDataPoint, tab: string) => {
+const formatDisplay = (
+  point: ChartDataPoint,
+  tab: string,
+  comparison: boolean
+) => {
   const base = point.amount;
-  const cmp = point.compareAmount || 0;
-
-  const diff = base - cmp;
-  const sign = diff >= 0 ? "+" : "-";
-  const absDiff = Math.abs(diff);
+  const cmp = point.compareAmount ?? 0;
 
   const formatShort = (val: number) => {
     if (tab === "monthly") {
@@ -49,7 +49,14 @@ const formatDisplay = (point: ChartDataPoint, tab: string) => {
     return val.toLocaleString("en-IN");
   };
 
-  if (!cmp) return `₹ ${formatShort(base)}`;
+  // Only hide diff when comparison OFF or compare is undefined
+  if (!comparison) {
+    return `₹ ${formatShort(base)}`;
+  }
+
+  const diff = base - cmp;
+  const sign = diff >= 0 ? "+" : "-";
+  const absDiff = Math.abs(diff);
 
   return `₹ ${formatShort(base)} (${sign}${formatShort(absDiff)})`;
 };
@@ -228,7 +235,7 @@ export default function HistoryChart({
                         whiteSpace: "nowrap"
                       }}
                     >
-                      {formatDisplay(point, activeTab.toLowerCase())}
+                      {formatDisplay(point, activeTab.toLowerCase(), comparison)}
                     </Typography>
                   </Box>
                 </Box>