From c2f68a57b64996a94a655f3a1927ed4ec2c1f357 Mon Sep 17 00:00:00 2001
From: Marco <mcrapts@gmail.com>
Date: Sat, 10 Aug 2019 16:08:44 +0200
Subject: [PATCH] fix

---
 src/App.vue              |  2 +-
 src/components/Chart.vue | 21 ++++++++++-----------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b120a9f..c7d62f6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -53,7 +53,7 @@ export default {
 </script>
 <style scoped>
 #app {
-  height: 100%;
+  height: 100vh;
 }
 #app,
 .section {
diff --git a/src/components/Chart.vue b/src/components/Chart.vue
index 277f0f7..3d61d58 100644
--- a/src/components/Chart.vue
+++ b/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;