diff --git a/public/js/global/charts.js b/public/js/global/charts.js
index 019313b736..7ba9e380e9 100644
--- a/public/js/global/charts.js
+++ b/public/js/global/charts.js
@@ -60,6 +60,9 @@ for (var i = 0; i < colourSet.length; i++) {
 
 Chart.defaults.global.legend.display = false;
 Chart.defaults.global.animation.duration = 0;
+Chart.defaults.global.responsive = true;
+Chart.defaults.global.maintainAspectRatio = false;
+
 /*
  Set default options:
  */
diff --git a/resources/views/accounts/show.twig b/resources/views/accounts/show.twig
index 7681de70fd..8e8fad0f5f 100644
--- a/resources/views/accounts/show.twig
+++ b/resources/views/accounts/show.twig
@@ -24,7 +24,7 @@
                     </div>
                 </div>
                 <div class="box-body">
-                    <canvas id="overview-chart" style="width:100%;height:400px;"></canvas>
+                    <canvas id="overview-chart" style="width:100%;" height="400"></canvas>
                 </div>
             </div>
         </div>
diff --git a/resources/views/bills/show.twig b/resources/views/bills/show.twig
index 379cd56fb8..20058d0b85 100644
--- a/resources/views/bills/show.twig
+++ b/resources/views/bills/show.twig
@@ -85,7 +85,7 @@
                     <h3 class="box-title">Chart</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="bill-overview" style="width:100%;height:400px;"></canvas>
+                    <canvas id="bill-overview" style="width:100%;" height="400"></canvas>
                 </div>
             </div>
         </div>
diff --git a/resources/views/budgets/show.twig b/resources/views/budgets/show.twig
index 94b758a70d..d58dc7f544 100644
--- a/resources/views/budgets/show.twig
+++ b/resources/views/budgets/show.twig
@@ -27,7 +27,7 @@
                     </div>
                 </div>
                 <div class="box-body">
-                    <canvas id="budgetOverview" style="width:100%;height:400px;"></canvas>
+                    <canvas id="budgetOverview" style="width:100%;" height="400"></canvas>
                 </div>
             </div>
 
diff --git a/resources/views/categories/show.twig b/resources/views/categories/show.twig
index 737b6e7ab3..3c504b5b5b 100644
--- a/resources/views/categories/show.twig
+++ b/resources/views/categories/show.twig
@@ -12,7 +12,7 @@
                     <h3 class="box-title">{{ 'overview'|_ }} (month)</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="period" style="width:100%;height:350px;"></canvas>
+                    <canvas id="period" style="width:100%" height="350"></canvas>
                 </div>
             </div>
         </div>
@@ -22,7 +22,7 @@
                     <h3 class="box-title">{{ 'overview'|_ }} (all)</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="all" style="width:100%;height:350px;"></canvas>
+                    <canvas id="all" style="width:100%;" height="350"></canvas>
                 </div>
             </div>
         </div>
diff --git a/resources/views/categories/show_with_date.twig b/resources/views/categories/show_with_date.twig
index 640ae97797..60892dba50 100644
--- a/resources/views/categories/show_with_date.twig
+++ b/resources/views/categories/show_with_date.twig
@@ -13,7 +13,7 @@
                     <h3 class="box-title">{{ 'overview'|_ }} (period)</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="period-specific-period" style="width:100%;height:350px;"></canvas>
+                    <canvas id="period-specific-period" style="width:100%;height:350px;" height="350"></canvas>
                 </div>
             </div>
         </div>
diff --git a/resources/views/index.twig b/resources/views/index.twig
index d404b724b7..c3bb48fa1e 100644
--- a/resources/views/index.twig
+++ b/resources/views/index.twig
@@ -22,7 +22,7 @@
                     </div>
                 </div>
                 <div class="box-body">
-                    <canvas id="accounts-chart" style="width:100%;height:400px;"></canvas>
+                    <canvas id="accounts-chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
                 </div>
             </div>
 
@@ -36,7 +36,7 @@
                     </div>
                 </div>
                 <div class="box-body">
-                    <canvas id="budgets-chart" style="width:100%;height:400px;"></canvas>
+                    <canvas id="budgets-chart" style="width:100%;" height="400"></canvas>
                 </div>
             </div>
             <!-- CATEGORIES -->
@@ -49,7 +49,7 @@
                     </div>
                 </div>
                 <div class="box-body">
-                    <canvas id="categories-chart" style="width:100%;height:400px;"></canvas>
+                    <canvas id="categories-chart" style="width:100%;" height="400"></canvas>
                 </div>
             </div>
         </div>
@@ -65,7 +65,7 @@
                     </div>
                 </div>
                 <div class="box-body">
-                    <canvas id="bills-chart" style="width:100%;height:250px;"></canvas>
+                    <canvas id="bills-chart" style="width:100%;" height="250"></canvas>
                 </div>
             </div>
 
@@ -116,7 +116,7 @@
                     </div>
                 </div>
                 <div class="box-body">
-                    <canvas id="expense-accounts-chart" style="width:100%;height:400px;"></canvas>
+                    <canvas id="expense-accounts-chart" style="width:100%;" height="400"></canvas>
                 </div>
             </div>
         </div>
diff --git a/resources/views/piggy-banks/show.twig b/resources/views/piggy-banks/show.twig
index c8754ce86a..75aa0d8963 100644
--- a/resources/views/piggy-banks/show.twig
+++ b/resources/views/piggy-banks/show.twig
@@ -12,7 +12,7 @@
                     <h3 class="box-title">{{ 'events'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="piggy-bank-history" style="width:100%;height:400px;"></canvas>
+                    <canvas id="piggy-bank-history" style="width:100%;height:400px;" height="400"></canvas>
                 </div>
             </div>
         </div>
diff --git a/resources/views/reports/default/month.twig b/resources/views/reports/default/month.twig
index d449bfcba7..6b15db4071 100644
--- a/resources/views/reports/default/month.twig
+++ b/resources/views/reports/default/month.twig
@@ -13,7 +13,7 @@
                     <h3 class="box-title">{{ 'accountBalances'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="account-balances-chart" style="width:100%;height:400px;"></canvas>
+                    <canvas id="account-balances-chart" style="width:100%;height:400px;" height="400"></canvas>
                 </div>
             </div>
         </div>
diff --git a/resources/views/reports/default/multi-year.twig b/resources/views/reports/default/multi-year.twig
index 91baf47404..0b668e2ddd 100644
--- a/resources/views/reports/default/multi-year.twig
+++ b/resources/views/reports/default/multi-year.twig
@@ -13,7 +13,7 @@
                     <h3 class="box-title">{{ 'incomeVsExpenses'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="income-expenses-chart" style="width:100%;height:400px;"></canvas>
+                    <canvas id="income-expenses-chart" style="width:100%;height:400px;" height="400"></canvas>
                 </div>
             </div>
         </div>
@@ -23,7 +23,7 @@
                     <h3 class="box-title">{{ 'incomeVsExpenses'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="income-expenses-sum-chart" style="width:100%;height:400px;"></canvas>
+                    <canvas id="income-expenses-sum-chart" style="width:100%;height:400px;" height="400"></canvas>
                 </div>
             </div>
         </div>
@@ -62,7 +62,7 @@
                         <h3 class="box-title">{{ 'Asset account'|_ }}: {{ account.name }}</h3>
                     </div>
                     <div class="box-body">
-                        <canvas id="account-chart-{{ account.id }}" class="account-chart" data-id="{{ account.id }}" style="width:100%;height:400px;"></canvas>
+                        <canvas id="account-chart-{{ account.id }}" class="account-chart" data-id="{{ account.id }}" style="width:100%;height:400px;" height="400"></canvas>
                     </div>
                 </div>
             </div>
@@ -76,7 +76,7 @@
                     <h3 class="box-title">{{ 'net_worth'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="net-worth" style="width:100%;height:400px;"></canvas>
+                    <canvas id="net-worth" style="width:100%;height:400px;" height="400"></canvas>
                 </div>
             </div>
         </div>
@@ -94,7 +94,7 @@
                             <p class="well" id="budgets-chart-message" style="display:none;">
                                 Select one or more budgets to generate this chart. Insofar possible, your selection will be saved.
                             </p>
-                            <canvas id="budgets-chart" class="budgets-chart" style="width:100%;height:400px;"></canvas>
+                            <canvas id="budgets-chart" class="budgets-chart" style="width:100%;height:400px;" height="400"></canvas>
                         </div>
                     </div>
                     <div class="row">
@@ -126,7 +126,7 @@
                             <p class="well" id="categories-chart-message" style="display:none;">
                                 Select one or more categories to generate this chart. Insofar possible, your selection will be saved.
                             </p>
-                            <canvas id="categories-chart" class="categories-chart" style="width:100%;height:400px;"></canvas>
+                            <canvas id="categories-chart" class="categories-chart" style="width:100%;height:400px;" height="400"></canvas>
                         </div>
                     </div>
                     <div class="row">
diff --git a/resources/views/reports/default/year.twig b/resources/views/reports/default/year.twig
index 4b34eb1229..d6b07d6043 100644
--- a/resources/views/reports/default/year.twig
+++ b/resources/views/reports/default/year.twig
@@ -13,7 +13,7 @@
                     <h3 class="box-title">{{ 'incomeVsExpenses'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="income-expenses-chart" style="width:100%;height:400px;"></canvas>
+                    <canvas height="400" id="income-expenses-chart" style="width:100%;height:400px;"></canvas>
                 </div>
             </div>
         </div>
@@ -23,7 +23,7 @@
                     <h3 class="box-title">{{ 'incomeVsExpenses'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="income-expenses-sum-chart" style="width:100%;height:400px;"></canvas>
+                    <canvas height="400" id="income-expenses-sum-chart" style="width:100%;height:400px;"></canvas>
                 </div>
             </div>
         </div>
@@ -55,7 +55,7 @@
                     <h3 class="box-title">{{ 'net_worth'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="net-worth" style="width:100%;height:400px;"></canvas>
+                    <canvas height="400" id="net-worth" style="width:100%;height:400px;"></canvas>
                 </div>
             </div>
         </div>
@@ -68,7 +68,7 @@
                     <h3 class="box-title">{{ 'categories_spent_in_year'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="categories-spent-in-period" style="width:100%;height:400px;"></canvas>
+                    <canvas height="400" id="categories-spent-in-period" style="width:100%;height:400px;"></canvas>
                 </div>
             </div>
         </div>
@@ -81,7 +81,7 @@
                     <h3 class="box-title">{{ 'categories_earned_in_year'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="categories-earned-in-period" style="width:100%;height:400px;"></canvas>
+                    <canvas height="400" id="categories-earned-in-period" style="width:100%;height:400px;"></canvas>
                 </div>
             </div>
         </div>
@@ -94,7 +94,7 @@
                     <h3 class="box-title">{{ 'budgets'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="budgets" style="width:100%;height:400px;"></canvas>
+                    <canvas height="400" id="budgets" style="width:100%;height:400px;"></canvas>
                 </div>
             </div>
         </div>