From 2a34a3e421e774b8845805a9edac874da9954639 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Thu, 23 Jan 2020 00:21:36 +0100
Subject: [PATCH] Styling to charts for better formatting of size for mobile.

---
 src/ui/PurchaseGraph.vue | 12 +++++++++---
 src/ui/WinGraph.vue      | 14 ++++++++++----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/ui/PurchaseGraph.vue b/src/ui/PurchaseGraph.vue
index 0a87411..b58ae77 100644
--- a/src/ui/PurchaseGraph.vue
+++ b/src/ui/PurchaseGraph.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="chart">
     <canvas ref="purchase-chart" width="100" height="50"></canvas>
     <div ref="chartjsLegend" class="chartjsLegend"></div>
   </div>
@@ -74,6 +74,7 @@ export default {
       type: "line",
       data: chartdata,
       options: {
+        maintainAspectRatio: false,
         title: {
           display: true,
           text: "Antall kjøp"
@@ -121,9 +122,14 @@ export default {
   border-radius: 25px;
 }
 
-@include mobile {
-  canvas {
+.chart {
+  height: 40vh;
+
+  @include mobile {
+    position: relative;
+    width: 90vw !important;
     height: 50vh;
+    margin-bottom: 2rem;
   }
 }
 </style>
diff --git a/src/ui/WinGraph.vue b/src/ui/WinGraph.vue
index 6b2b0ca..9131147 100644
--- a/src/ui/WinGraph.vue
+++ b/src/ui/WinGraph.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <canvas ref="win-chart" width="100" height="50"></canvas>
+  <div class="chart">
+    <canvas ref="win-chart"></canvas>
   </div>
 </template>
 
@@ -64,6 +64,7 @@ export default {
       type: "bar",
       data: chartdata,
       options: {
+        maintainAspectRatio: false,
         title: {
           display: true,
           text: "Antall vinn"
@@ -94,9 +95,14 @@ export default {
 <style lang="scss" scoped>
 @import "../styles/media-queries.scss";
 
-@include mobile {
-  canvas {
+.chart {
+  height: 40vh;
+
+  @include mobile {
+    position: relative;
+    width: 90vw !important;
     height: 50vh;
+    margin-bottom: 2rem;
   }
 }
 </style>