added logic to only show 7 or 6 bars based on daily period or not

src/components/HistoryChart.tsx

@@ -11,6 +11,9 @@ import {
   HistoryChartProps,
   ChartData,
 } from "../types/historyChart";
+import IconButton from "@mui/material/IconButton";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 
 const formatDisplay = (
   point: ChartDataPoint,
@@ -99,6 +102,32 @@ export default function HistoryChart({
         )
       : 1;
 
+  const [startIndex, setStartIndex] = React.useState(0);
+  const visibleCount = activeDataKey == 'daily' ? 7 : 6;
+  const total = currentData.length;
+
+  // clamp startIndex so we always show full 5 (when possible)
+  const clampedStartIndex = Math.min(
+    startIndex,
+    Math.max(total - visibleCount, 0)
+  );
+
+  const visibleData = currentData.slice(
+    clampedStartIndex,
+    clampedStartIndex + visibleCount
+  );
+
+  const canGoLeft = startIndex > 0;
+  const canGoRight = startIndex + visibleCount < currentData.length;
+
+  const handlePrev = () => {
+    if (canGoLeft) setStartIndex((prev) => prev - visibleCount);
+  };
+
+  const handleNext = () => {
+    if (canGoRight) setStartIndex((prev) => prev + visibleCount);
+  };
+
   return (
     <Paper
       sx={{
@@ -159,8 +188,30 @@ export default function HistoryChart({
       </ToggleButtonGroup>
 
       {currentData.length > 0 ? (
+        <Box sx={{ position: "relative", mt: 4 }}>
+
+          {/* LEFT ARROW */}
+          {canGoLeft && (
+            <IconButton
+              onClick={handlePrev}
+              size="small"
+              sx={{
+                position: "absolute",
+                left: 0,
+                top: "50%",
+                transform: "translateY(-50%)",
+                zIndex: 2,
+                bgcolor: "background.paper",
+                boxShadow: 1
+              }}
+            >
+              <ChevronLeftIcon fontSize="small" />
+            </IconButton>
+          )}
+
+          {/* CHART */}
           <Box sx={{ display: "flex", alignItems: "flex-end", height: 220, mt: 4 }}>
-          {currentData.map((point) => {
+            {visibleData.map((point) => {
               const currentHeight = (point.amount / maxAmount) * 100;
               const compareHeight = comparison
                 ? ((point.compareAmount || 0) / maxAmount) * 100
@@ -270,6 +321,26 @@ export default function HistoryChart({
               );
             })}
           </Box>
+
+          {/* RIGHT ARROW */}
+          {canGoRight && (
+            <IconButton
+              onClick={handleNext}
+              size="small"
+              sx={{
+                position: "absolute",
+                right: 0,
+                top: "50%",
+                transform: "translateY(-50%)",
+                zIndex: 2,
+                bgcolor: "background.paper",
+                boxShadow: 1
+              }}
+            >
+              <ChevronRightIcon fontSize="small" />
+            </IconButton>
+          )}
+        </Box>
       ) : (
         <Box sx={{ height: 200, display: "flex", alignItems: "center", justifyContent: "center" }}>
           <Typography color="text.secondary">No Data Available</Typography>