diff --git a/webapp/src/components/BarChart.vue b/webapp/src/components/BarChart.vue
index 1f58475b..36f3b5a2 100644
--- a/webapp/src/components/BarChart.vue
+++ b/webapp/src/components/BarChart.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="card" v-if="dataLoaded">
+    <div class="card row" v-if="dataLoaded">
         <GChart type="ColumnChart" :data="chartData" :options="chartOptions" />
     </div>
 </template>
@@ -19,7 +19,7 @@ const options_col = {
         height: '80%'
     },
     bar: {
-        groupWidth: '100%'
+        groupWidth: '90%'
     },
     legend: {
         position: 'none'
diff --git a/webapp/src/components/CalendarChart.vue b/webapp/src/components/CalendarChart.vue
index a300bf08..9300cc5f 100644
--- a/webapp/src/components/CalendarChart.vue
+++ b/webapp/src/components/CalendarChart.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="card" v-if="dataLoaded">
+    <div class="card row" v-if="dataLoaded">
         <GChart type="Calendar" :data="chartData" :options="chartOptions" :settings="{ packages: ['calendar'] }" />
     </div>
 </template>
@@ -33,6 +33,7 @@ export default defineComponent({
     },
     created() {
         this.getInitialData();
+        this.startautorefresh();
     },
     methods: {
         getInitialData() {
@@ -52,7 +53,19 @@ export default defineComponent({
                         this.dataLoaded = true;
                     }
                 })
-        }
+        },
+        callEveryHour() {
+            this.getInitialData();
+            setInterval(this.getInitialData, 1000 * 60 * 60);   // refresh every hour
+        },
+        startautorefresh() {
+            var nextDate = new Date();
+            nextDate.setHours(nextDate.getHours() + 1);
+            nextDate.setMinutes(0);
+            nextDate.setSeconds(5);
+            var difference: number = nextDate.valueOf() - Date.now();
+            setTimeout(this.callEveryHour, difference);
+        },
     }
 });
 </script>