diff --git a/assets/javascripts/metrics/components/UsageChart.js b/assets/javascripts/metrics/components/UsageChart.js
index c0818bdd..9af03f3d 100644
--- a/assets/javascripts/metrics/components/UsageChart.js
+++ b/assets/javascripts/metrics/components/UsageChart.js
@@ -1,7 +1,6 @@
 import * as echarts from "echarts";
 import debounce from "lodash-es/debounce";
 import {
-  computed,
   defineComponent,
   onMounted,
   ref,
@@ -34,33 +33,20 @@ export default defineComponent({
     hitsTotal: Number,
     activeApiKeys: Array,
     activeApiKeysTotal: Number,
+    dateFormatOptions: Object,
   },
 
   setup(props) {
-    const chartData = computed(() => {
-      const data = {
-        labels: [],
-        hits: [],
-        activeApiKeys: [],
-      };
-
-      props.hits.forEach((day) => {
-        data.labels.push(day[0]);
-        data.hits.push(day[1]);
-      });
-
-      props.activeApiKeys.forEach((day) => {
-        data.activeApiKeys.push(day[1]);
-      });
-
-      return data;
-    });
-
     const chartEl = ref();
     let chart;
     onMounted(() => {
       const colors = ["#30A64A", "#0E5FC2"];
 
+      const dateFormatter = new Intl.DateTimeFormat(
+        undefined,
+        props.dateFormatOptions,
+      );
+
       chart = echarts.init(chartEl.value);
       chart.setOption({
         animation: false,
@@ -73,10 +59,17 @@ export default defineComponent({
         },
         tooltip: {
           trigger: "axis",
+          axisPointer: {
+            label: {
+              formatter: (params) => {
+                const date = new Date(params.value);
+                return dateFormatter.format(date);
+              },
+            },
+          },
         },
         xAxis: {
-          type: "category",
-          data: chartData.value.labels,
+          type: "time",
           axisLine: {
             show: false,
           },
@@ -109,13 +102,16 @@ export default defineComponent({
             name: "Hits",
             type: "line",
             yAxisIndex: 0,
-            data: chartData.value.hits,
+            data: props.hits,
+            label: {
+              formatter: "{b}: {@score}",
+            },
           },
           {
             name: "Unique API Keys",
             type: "line",
             yAxisIndex: 1,
-            data: chartData.value.activeApiKeys,
+            data: props.activeApiKeys,
           },
         ],
       });
@@ -123,20 +119,17 @@ export default defineComponent({
       window.addEventListener("resize", debounce(chart.resize));
     });
 
-    watch(chartData, () => {
+    watch(props, () => {
       if (chart) {
         chart.setOption({
-          xAxis: {
-            data: chartData.value.labels,
-          },
           series: [
             {
               name: "Hits",
-              data: chartData.value.hits,
+              data: props.hits,
             },
             {
               name: "Unique API Keys",
-              data: chartData.value.activeApiKeys,
+              data: props.activeApiKeys,
             },
           ],
         });
diff --git a/assets/javascripts/metrics/views/Metrics.js b/assets/javascripts/metrics/views/Metrics.js
index e991654f..4185f0b1 100644
--- a/assets/javascripts/metrics/views/Metrics.js
+++ b/assets/javascripts/metrics/views/Metrics.js
@@ -35,6 +35,7 @@ export default defineComponent({
             v-bind:hits-total="store.hitsRecentTotal(selectedOrganization)"
             v-bind:active-api-keys="store.activeApiKeysRecentDaily(selectedOrganization)"
             v-bind:active-api-keys-total="store.activeApiKeysRecentTotal(selectedOrganization)"
+            v-bind:date-format-options="{ year: 'numeric', month: 'long', day: 'numeric' }"
             />
         </div>
         <div class="desktop:grid-col">
@@ -44,6 +45,7 @@ export default defineComponent({
             v-bind:hits-total="store.hitsTotal(selectedOrganization)"
             v-bind:active-api-keys="store.activeApiKeysMonthly(selectedOrganization)"
             v-bind:active-api-keys-total="store.activeApiKeysTotal(selectedOrganization)"
+            v-bind:date-format-options="{ year: 'numeric', month: 'long' }"
             />
         </div>
       </div>
diff --git a/docker-compose.ci.yml b/docker-compose.ci.yml
index 466635e9..2c2adf68 100644
--- a/docker-compose.ci.yml
+++ b/docker-compose.ci.yml
@@ -1,4 +1,3 @@
-version: "3"
 services:
   web:
     build: