diff --git a/client/src/lib/progress/progressChartConfig.ts b/client/src/lib/progress/progressChartConfig.ts
index 637c0a5..7350682 100644
--- a/client/src/lib/progress/progressChartConfig.ts
+++ b/client/src/lib/progress/progressChartConfig.ts
@@ -2,6 +2,9 @@ import type { ChartConfiguration } from "chart.js"
 import { DateTime } from "luxon";
 import type { ExtendedPChartDataPoint, PChartTLabel, PChartTType } from '@/lib/progress/progressChartTypes'
 
+const X_AXIS_MIN = new Date('2024-03-01').getTime()
+const X_AXIS_MAX = new Date('2025-01-02').getTime()
+const Y_AXIS_MIN = 0
 
 const chartConfig: ChartConfiguration<PChartTType, ExtendedPChartDataPoint[], PChartTLabel> = {
   type: 'line',
@@ -10,8 +13,10 @@ const chartConfig: ChartConfiguration<PChartTType, ExtendedPChartDataPoint[], PC
   },
   options: {
     maintainAspectRatio: false,
+    responsive: true,
     scales: {
       x: {
+        position: 'top',
         type: "time",
         time: {
           displayFormats: {
@@ -20,14 +25,15 @@ const chartConfig: ChartConfiguration<PChartTType, ExtendedPChartDataPoint[], PC
           },
           unit: 'month'
         },
-        min: '2024-01-01',
-        max: '2025-01-02',
+        min: X_AXIS_MIN,
+        max: X_AXIS_MAX,
         title: {
           display: true,
           text: "Day in year"
         }
       },
       y: {
+        min: Y_AXIS_MIN,
         title: {
           display: true,
           text: 'Mileage'
@@ -38,6 +44,9 @@ const chartConfig: ChartConfiguration<PChartTType, ExtendedPChartDataPoint[], PC
       }
     },
     plugins: {
+      legend: {
+        position: 'top',
+      },
       tooltip: {
         boxPadding: 10,
         callbacks: {
@@ -65,7 +74,11 @@ const chartConfig: ChartConfiguration<PChartTType, ExtendedPChartDataPoint[], PC
         pan: {
           enabled: true,
 
-        }
+        },
+        limits: {
+          x: { min: X_AXIS_MIN, max: X_AXIS_MAX },
+          y: { min: Y_AXIS_MIN, max: 'original' }
+        },
       }
     }
   }
diff --git a/client/src/views/ProgressChart.vue b/client/src/views/ProgressChart.vue
index 90e8874..3a2781f 100644
--- a/client/src/views/ProgressChart.vue
+++ b/client/src/views/ProgressChart.vue
@@ -6,10 +6,13 @@
       <button type="button" class="filterbuttons btn m-2" :class="bestClass" @click="toggleBest()">
         Best</button>
     </div>
-    <div class="d-flex flex-column flex-grow-1">
-      <canvas id="acquisitions" ref="canvasref"></canvas>
-      <div v-if="loading" class="myspinner" role="status" aria-label="Loading chart">
-        <b-spinner />
+    <!-- <div id="canvas-parent" class="d-flex flex-row flex-grow-1 mh-100 justify-content-center align-items-center w-100"> -->
+    <div id="canvas-parent">
+      <div id="canvas-wrapper">
+        <canvas id="acquisitions" ref="canvasref"></canvas>
+        <div v-if="loading" class="myspinner" role="status" aria-label="Loading chart">
+          <b-spinner />
+        </div>
       </div>
     </div>
   </track-manager-nav-bar>
@@ -142,6 +145,36 @@ onMounted(() => {
 </script>
 
 <style scoped>
+#canvas-parent {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  align-items: center;
+  /* center the chart horizontally */
+  overflow: hidden;
+  /* needs an explicit height for children to reference 100% */
+  height: 100%;
+}
+
+#canvas-wrapper {
+  position: relative;
+  aspect-ratio: 3 / 4;
+  /* Drive sizing from height, not width */
+  height: 100%;
+  width: auto;
+  /* width follows from aspect-ratio + height */
+  max-width: 100%;
+  /* never overflow horizontally */
+  flex-shrink: 0;
+}
+
+#acquisitions {
+  position: absolute;
+  inset: 0;
+  width: 100% !important;
+  height: 100% !important;
+}
+
 .myspinner {
   position: absolute;