fix

src/App.vue

@@ -53,7 +53,7 @@ export default {
 </script>
 <style scoped>
 #app {
-  height: 100%;
+  height: 100vh;
 }
 #app,
 .section {

src/components/Chart.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="chart-container">
     <Loader v-if="loading"></Loader>
-    <div class="chart" v-else>
-      <!-- Wrapper for chart so that highchart doesn't create scrollbars -->
-      <div ref="chart"></div>
-    </div>
+    <div class="chart" ref="chart" v-else></div>
   </div>
 </template>
 <script>
@@ -54,7 +51,7 @@ export default {
       const type = this.type
       const data = this.data.map(({ date, value }) => ({ x: date * 1000, y: value }))
       Highcharts.chart(this.$refs.chart, {
-        chart: { styledMode: true },
+        chart: { styledMode: true, marginBottom: 25 },
         title: { text: '' },
         legend: { enabled: false },
         plotOptions: {
@@ -107,12 +104,6 @@ export default {
 
 <style lang="scss">
 @import "@/style/_variables.scss";
-.chart, .chart div {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  width: 100%;
-}
 .chart-container {
   display: flex;
   flex-direction: column;
@@ -120,6 +111,14 @@ export default {
   align-items: center;
   justify-content: center;
   margin-bottom: 24px;
+  position: relative;
+}
+.chart {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  position: absolute;
 }
 .highcharts-graph {
   stroke-width: 3px;