diff --git a/index.php b/index.php
index b073e847..32cbe952 100644
--- a/index.php
+++ b/index.php
@@ -65,7 +65,7 @@
         </div>
         <div class="box-body">
           <div class="chart">
-            <canvas id="queryOverTimeChart" style="height: 247px; width: 466px;" width="932" height="200"></canvas>
+            <canvas id="queryOverTimeChart" width="800" height="100"></canvas>
           </div>
         </div>
         <div class="overlay">
@@ -84,7 +84,7 @@
         </div>
         <div class="box-body">
           <div class="chart">
-            <canvas id="queryTypeChart" style="height: 247px; width: 466px;" width="932" height="400"></canvas>
+            <canvas id="queryTypeChart" width="400" height="160"></canvas>
           </div>
         </div>
         <div class="overlay">
@@ -100,7 +100,7 @@
         </div>
         <div class="box-body">
           <div class="chart">
-            <canvas id="forwardDestinationChart" style="height: 247px; width: 466px;" width="932" height="400"></canvas>
+            <canvas id="forwardDestinationChart" width="400" height="160"></canvas>
           </div>
         </div>
         <div class="overlay">
diff --git a/js/pihole/index.js b/js/pihole/index.js
index 15611871..960f8cde 100644
--- a/js/pihole/index.js
+++ b/js/pihole/index.js
@@ -61,6 +61,9 @@ $(document).ready(function() {
             tooltips: {
                 enabled: true,
                 mode: 'x-axis'
+            },
+            legend: {
+                display: false
             }
         }
     });
@@ -70,14 +73,13 @@ $(document).ready(function() {
         type: 'doughnut',
         data: {
             labels: [],
-            datasets: [{
-                data: []
-            }]
+            datasets: [{ data: [] }]
         },
         options: {
             legend: {
                 display: false
-            }
+            },
+            cutoutPercentage: 30
         }
     });
 
@@ -86,14 +88,13 @@ $(document).ready(function() {
         type: 'doughnut',
         data: {
             labels: [],
-            datasets: [{
-                data: []
-            }]
+            datasets: [{ data: [] }]
         },
         options: {
             legend: {
                 display: false
-            }
+            },
+            cutoutPercentage: 30
         }
     });
 });
@@ -145,6 +146,7 @@ function updateQueriesOverTime() {
         }
         $('#queries-over-time .overlay').remove();
         timeLineChart.update();
+        timeLineChart.resize();
     });
 }
 
@@ -166,6 +168,7 @@ function updateQueryTypes() {
         queryTypeChart.data.datasets.push(dd);
         $('#query-types .overlay').remove();
         queryTypeChart.update();
+        queryTypeChart.resize();
     });
 }