labels with proper formatting

src/components/HistoryChart.tsx

@@ -5,6 +5,7 @@ export interface ChartDataPoint {
   id: string;
   amount: number;
   compareAmount?: number;
+  compareLabel?: compareLabel;
   highlighted?: boolean;
 }
 
@@ -232,18 +233,40 @@ export default function HistoryChart({
                   </Box>
                 </Box>
 
-                <Typography
+                <Box
-                  variant="caption"
-                  color="text.secondary"
                   sx={{
                     mt: 1,
-                    fontSize: "0.7rem",
                     textAlign: "center",
-                    lineHeight: 1.2
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    lineHeight: 1.1
                   }}
                 >
-                  {formatLabel(point.id, activeDataKey)}
+                  <Typography
-                </Typography>
+                    variant="caption"
+                    sx={{
+                      fontSize: "0.7rem",
+                      opacity: 0.7,
+                      color: "text.primary",
+                    }}
+                  >
+                    {formatLabel(point.id, activeDataKey)}
+                  </Typography>
+
+                  {comparison && point.compareLabel && activeDataKey !== "daily" && (
+                    <Typography
+                      variant="caption"
+                      sx={{
+                        fontSize: "0.7rem",
+                        opacity: 0.7,
+                        color: "grey.400",
+                      }}
+                    >
+                      {formatLabel(point.compareLabel, activeDataKey)}
+                    </Typography>
+                  )}
+                </Box>
               </Box>
             );
           })}