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>