diff --git a/www/js/components/Chart.tsx b/www/js/components/Chart.tsx
index 2e5e3bd62..2ff236b5b 100644
--- a/www/js/components/Chart.tsx
+++ b/www/js/components/Chart.tsx
@@ -112,6 +112,7 @@ const Chart = ({
           responsive: true,
           maintainAspectRatio: false,
           resizeDelay: 1,
+          spanGaps: 1000 * 60 * 60 * 24, // 1 day
           scales: {
             ...(isHorizontal
               ? {
diff --git a/www/js/metrics/DailyActiveMinutesCard.tsx b/www/js/metrics/DailyActiveMinutesCard.tsx
index 94fff2544..b72c20ec6 100644
--- a/www/js/metrics/DailyActiveMinutesCard.tsx
+++ b/www/js/metrics/DailyActiveMinutesCard.tsx
@@ -18,21 +18,19 @@ const DailyActiveMinutesCard = ({ userMetrics }: Props) => {
   const { t } = useTranslation();
 
   const dailyActiveMinutesRecords = useMemo(() => {
-    const records: { label: string; x: string; y: number }[] = [];
+    const records: { label: string; x: number; y: number }[] = [];
     const recentDays = userMetrics?.duration?.slice(-14);
     recentDays?.forEach((day) => {
       ACTIVE_MODES.forEach((mode) => {
         const activeSeconds = valueForModeOnDay(day, mode);
-        if (activeSeconds) {
-          records.push({
-            label: labelKeyToRichMode(mode),
-            x: `${tsForDayOfMetricData(day) * 1000}`, // vertical chart, milliseconds on X axis
-            y: activeSeconds && activeSeconds / 60, // minutes on Y axis
-          });
-        }
+        records.push({
+          label: labelKeyToRichMode(mode),
+          x: tsForDayOfMetricData(day) * 1000, // vertical chart, milliseconds on X axis
+          y: activeSeconds ? activeSeconds / 60 : null, // minutes on Y axis
+        });
       });
     });
-    return records as { label: ActiveMode; x: string; y: number }[];
+    return records as { label: ActiveMode; x: number; y: number }[];
   }, [userMetrics?.duration]);
 
   return (
diff --git a/www/js/metrics/WeeklyActiveMinutesCard.tsx b/www/js/metrics/WeeklyActiveMinutesCard.tsx
index fc631c07c..5078f2cfc 100644
--- a/www/js/metrics/WeeklyActiveMinutesCard.tsx
+++ b/www/js/metrics/WeeklyActiveMinutesCard.tsx
@@ -24,9 +24,11 @@ const WeeklyActiveMinutesCard = ({ userMetrics }: Props) => {
     const records: { x: string; y: number; label: string }[] = [];
     const [recentWeek, prevWeek] = segmentDaysByWeeks(userMetrics?.duration, dateRange[1]);
     ACTIVE_MODES.forEach((mode) => {
-      const prevSum = prevWeek?.reduce((acc, day) => acc + (valueForModeOnDay(day, mode) || 0), 0);
-      if (prevSum) {
-        // `${t('main-metrics.prev-week')}\n(${formatDateRangeOfDays(lastWeekDistance)})`
+      if (prevWeek) {
+        const prevSum = prevWeek?.reduce(
+          (acc, day) => acc + (valueForModeOnDay(day, mode) || 0),
+          0,
+        );
         const xLabel = `${t('main-metrics.prev-week')}\n(${formatDateRangeOfDays(prevWeek)})`;
         records.push({ label: labelKeyToRichMode(mode), x: xLabel, y: prevSum / 60 });
       }
@@ -34,10 +36,8 @@ const WeeklyActiveMinutesCard = ({ userMetrics }: Props) => {
         (acc, day) => acc + (valueForModeOnDay(day, mode) || 0),
         0,
       );
-      if (recentSum) {
-        const xLabel = `${t('main-metrics.past-week')}\n(${formatDateRangeOfDays(recentWeek)})`;
-        records.push({ label: labelKeyToRichMode(mode), x: xLabel, y: recentSum / 60 });
-      }
+      const xLabel = `${t('main-metrics.past-week')}\n(${formatDateRangeOfDays(recentWeek)})`;
+      records.push({ label: labelKeyToRichMode(mode), x: xLabel, y: recentSum / 60 });
     });
     return records as { label: ActiveMode; x: string; y: number }[];
   }, [userMetrics?.duration]);