src/components/Charts/LineChart.jsx

@@ -6,7 +6,8 @@ const LineChart = ({
   seriesData = [],
   categories = [],
   colors = ["#1E90FF", "#FF6347"],
-    loading = false
+  loading = false,
+  lineChartCategoriesDates = [],
 }) => {
     const hasValidData =
         Array.isArray(seriesData) &&
@@ -100,11 +101,21 @@ const LineChart = ({
     tooltip: {
       enabled: true,
       x: {
-        formatter: (val, opts) => val
+        formatter: (value, { dataPointIndex }) => {
+          if (
+            lineChartCategoriesDates &&
+            lineChartCategoriesDates.length > dataPointIndex
+          ) {
+            return lineChartCategoriesDates[dataPointIndex];
+          }
+          return value;
         }
       }
+    }
+
   };
 
+
   return (
     <div className="w-full overflow-x-auto">
       <ReactApexChart

src/components/Dashboard/Dashboard.jsx

@@ -82,7 +82,13 @@ const Dashboard = () => {
       day: "numeric",
     })
   );
-
+  const lineChartCategoriesDates = sortedDashboardData.map((d) =>
+    new Date(d.date).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    })
+  );
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
       <div className="row gy-4">
@@ -252,6 +258,7 @@ const Dashboard = () => {
                 seriesData={lineChartSeries}
                 categories={lineChartCategories}
                 loading={isLineChartLoading}
+                lineChartCategoriesDates={lineChartCategoriesDates}
               />
             </div>
           </div>