diff --git a/resources/views/accounts/show.twig b/resources/views/accounts/show.twig
index afcae2a2e0..bedb9ee721 100644
--- a/resources/views/accounts/show.twig
+++ b/resources/views/accounts/show.twig
@@ -28,7 +28,7 @@
                     </div>
                 </div>
                 <div class="box-body">
-                    <canvas id="overview-chart" style="width:100%;" height="400"></canvas>
+                    <canvas id="overview-chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
                 </div>
             </div>
         </div>
@@ -40,8 +40,8 @@
                     <h3 class="box-title">{{ 'expenses_by_category'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <div style="width:60%;margin:0 auto;">
-                        <canvas id="account-cat-out" style="margin:0 auto;"></canvas>
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="account-cat-out" style="width:100%;height:250px;" height="250"></canvas>
                     </div>
                 </div>
             </div>
@@ -52,8 +52,8 @@
                     <h3 class="box-title">{{ 'expenses_by_budget'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <div style="width:60%;margin:0 auto;">
-                        <canvas id="account-budget-out" style="margin:0 auto;"></canvas>
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="account-budget-out" style="width:100%;height:250px;" height="250"></canvas>
                     </div>
                 </div>
             </div>
@@ -64,8 +64,8 @@
                     <h3 class="box-title">{{ 'income_by_category'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <div style="width:60%;margin:0 auto;">
-                        <canvas id="account-cat-in" style="margin:0 auto;"></canvas>
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="account-cat-in" style="width:100%;height:250px;" height="250"></canvas>
                     </div>
                 </div>
             </div>
@@ -149,13 +149,13 @@
         // uri's for charts:
         var chartUri = '{{ chartUri }}';
         {% if start and end %}
-            var incomeCategoryUri = '{{ route('chart.account.income-category', [account.id, start.format('Ymd'), end.format('Ymd')]) }}';
-            var expenseCategoryUri = '{{ route('chart.account.expense-category', [account.id, start.format('Ymd'), end.format('Ymd')]) }}';
-            var expenseBudgetUri = '{{ route('chart.account.expense-budget', [account.id, start.format('Ymd'), end.format('Ymd')]) }}';
+        var incomeCategoryUri = '{{ route('chart.account.income-category', [account.id, start.format('Ymd'), end.format('Ymd')]) }}';
+        var expenseCategoryUri = '{{ route('chart.account.expense-category', [account.id, start.format('Ymd'), end.format('Ymd')]) }}';
+        var expenseBudgetUri = '{{ route('chart.account.expense-budget', [account.id, start.format('Ymd'), end.format('Ymd')]) }}';
         {% else %}
-            var incomeCategoryUri = '{{ route('chart.account.income-category', [account.id, 'all', 'all']) }}';
-            var expenseCategoryUri = '{{ route('chart.account.expense-category', [account.id, 'all', 'all']) }}';
-            var expenseBudgetUri = '{{ route('chart.account.expense-budget', [account.id, 'all', 'all']) }}';
+        var incomeCategoryUri = '{{ route('chart.account.income-category', [account.id, 'all', 'all']) }}';
+        var expenseCategoryUri = '{{ route('chart.account.expense-category', [account.id, 'all', 'all']) }}';
+        var expenseBudgetUri = '{{ route('chart.account.expense-budget', [account.id, 'all', 'all']) }}';
         {% endif %}
 
     </script>
diff --git a/resources/views/bills/show.twig b/resources/views/bills/show.twig
index 9227d99d46..2b01b46c29 100644
--- a/resources/views/bills/show.twig
+++ b/resources/views/bills/show.twig
@@ -93,7 +93,7 @@
                     <h3 class="box-title">{{ 'chart'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="bill-overview" style="width:100%;" height="400"></canvas>
+                    <canvas id="bill-overview" style="width:100%;height:400px;" height="400" width="100%"></canvas>
                 </div>
             </div>
         </div>
diff --git a/resources/views/budgets/show.twig b/resources/views/budgets/show.twig
index eddccefe1d..3e598b1d6e 100644
--- a/resources/views/budgets/show.twig
+++ b/resources/views/budgets/show.twig
@@ -29,7 +29,7 @@
                     </div>
                 </div>
                 <div class="box-body">
-                    <canvas id="budgetOverview" style="width:100%;" height="400"></canvas>
+                    <canvas id="budgetOverview" style="width:100%;height:400px;" height="400" width="100%"></canvas>
                 </div>
             </div>
         </div>
@@ -42,8 +42,8 @@
                     <h3 class="box-title">{{ 'expenses_by_category'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <div style="width:60%;margin:0 auto;">
-                        <canvas id="budget-cat-out" style="margin:0 auto;"></canvas>
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="budget-cat-out" style="width:100%;height:250px;" height="250"></canvas>
                     </div>
                 </div>
             </div>
@@ -54,8 +54,8 @@
                     <h3 class="box-title">{{ 'expenses_by_asset_account'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <div style="width:60%;margin:0 auto;">
-                        <canvas id="budget-asset-out" style="margin:0 auto;"></canvas>
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="budget-asset-out" style="width:100%;height:250px;" height="250"></canvas>
                     </div>
                 </div>
             </div>
@@ -66,8 +66,8 @@
                     <h3 class="box-title">{{ 'expenses_by_expense_account'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <div style="width:60%;margin:0 auto;">
-                        <canvas id="budget-expense-out" style="margin:0 auto;"></canvas>
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="budget-expense-out" style="width:100%;height:250px;" height="250"></canvas>
                     </div>
                 </div>
             </div>
diff --git a/resources/views/categories/show.twig b/resources/views/categories/show.twig
index a158564b56..186ad996de 100644
--- a/resources/views/categories/show.twig
+++ b/resources/views/categories/show.twig
@@ -16,7 +16,7 @@
                         </h3>
                     </div>
                     <div class="box-body">
-                        <canvas id="specific-period" style="width:100%;height:350px;" height="350"></canvas>
+                        <canvas id="specific-period" style="width:100%;height:400px;" height="400" width="100%"></canvas>
                     </div>
                 </div>
             </div>
@@ -28,7 +28,7 @@
                         </h3>
                     </div>
                     <div class="box-body">
-                        <canvas id="category-everything" style="width:100%;height:350px;" height="350"></canvas>
+                        <canvas id="category-everything" style="width:100%;height:400px;" height="400" width="100%"></canvas>
                     </div>
                 </div>
             </div>
@@ -43,7 +43,7 @@
                         </h3>
                     </div>
                     <div class="box-body">
-                        <canvas id="category-everything" style="width:100%;height:350px;" height="350"></canvas>
+                        <canvas id="category-everything" style="width:100%;height:400px;" height="400" width="100%"></canvas>
                     </div>
                 </div>
             </div>
diff --git a/resources/views/index.twig b/resources/views/index.twig
index 2a62729913..7dd28358b9 100644
--- a/resources/views/index.twig
+++ b/resources/views/index.twig
@@ -28,7 +28,7 @@
                     <h3 class="box-title">{{ 'budgetsAndSpending'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="budgets-chart" style="width:100%;" height="400"></canvas>
+                    <canvas id="budgets-chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
                 </div>
             </div>
             <!-- CATEGORIES -->
@@ -38,7 +38,7 @@
 
                 </div>
                 <div class="box-body">
-                    <canvas id="categories-chart" style="width:100%;" height="400"></canvas>
+                    <canvas id="categories-chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
                 </div>
             </div>
         </div>
@@ -51,8 +51,8 @@
 
                     </div>
                     <div class="box-body">
-                        <div style="width:60%;margin:0 auto;">
-                            <canvas id="bills-chart" style="width:100%;height:175px;" height="175"></canvas>
+                        <div style="width:100%;margin:0 auto;">
+                            <canvas id="bills-chart" style="width:100%;height:200px;" height="200"></canvas>
                         </div>
 
                     </div>
@@ -114,7 +114,7 @@
 
                 </div>
                 <div class="box-body">
-                    <canvas id="expense-accounts-chart" style="width:100%;" height="400"></canvas>
+                    <canvas id="expense-accounts-chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
                 </div>
             </div>
             <!-- OPTIONAL REVENUE ACCOUNTS -->
@@ -125,7 +125,7 @@
 
                     </div>
                     <div class="box-body">
-                        <canvas id="revenue-accounts-chart" style="width:100%;" height="400"></canvas>
+                        <canvas id="revenue-accounts-chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
                     </div>
                 </div>
             {% endif %}
diff --git a/resources/views/piggy-banks/show.twig b/resources/views/piggy-banks/show.twig
index eace5c8d03..4ad481467c 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;" height="400"></canvas>
+                    <canvas id="piggy-bank-history" style="width:100%;height:400px;" height="400" width="100%"></canvas>
                 </div>
             </div>
         </div>
diff --git a/resources/views/reports/budget/month.twig b/resources/views/reports/budget/month.twig
index 4c74d0b0a5..4e2a405763 100644
--- a/resources/views/reports/budget/month.twig
+++ b/resources/views/reports/budget/month.twig
@@ -76,8 +76,8 @@
                         <h3 class="box-title">{{ 'expense_per_budget'|_ }}</h3>
                     </div>
                     <div class="box-body">
-                        <div style="width:75%;margin:0 auto;">
-                            <canvas id="budgets-out-pie-chart" style="margin:0 auto;"></canvas>
+                        <div style="width:100%;margin:0 auto;">
+                            <canvas id="budgets-out-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
                         </div>
                         <label style="font-weight:normal;">
                             <input type="checkbox" id="budgets-out-pie-chart-checked">
@@ -93,8 +93,8 @@
                     <h3 class="box-title">{{ 'expense_per_account'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <div style="width:75%;margin:0 auto;">
-                        <canvas id="accounts-out-pie-chart" style="margin:0 auto;"></canvas>
+                    <div style="width:100%;margin:0 auto;">
+                        <canvas id="accounts-out-pie-chart" style="width:100%;height:250px;" height="250"></canvas>
                     </div>
                     <label style="font-weight:normal;">
                         <input type="checkbox" id="accounts-out-pie-chart-checked">
@@ -117,7 +117,7 @@
                     amount spent vs budget limit reps<br>
                     over the entire period the amount spent would rise and the budget limit rep would be like a heart beat jumping up and down<br>
                     needs to be two axes to work<br>#}
-                    <canvas id="in-out-chart" style="margin:0 auto;" height="300"></canvas>
+                    <canvas id="in-out-chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
                 </div>
             </div>
         </div>
diff --git a/resources/views/reports/category/month.twig b/resources/views/reports/category/month.twig
index 697be04d70..75898d2eed 100644
--- a/resources/views/reports/category/month.twig
+++ b/resources/views/reports/category/month.twig
@@ -151,7 +151,7 @@
                     <h3 class="box-title">{{ 'income_and_expenses'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="in-out-chart" style="margin:0 auto;" height="300"></canvas>
+                    <canvas id="in-out-chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
                 </div>
             </div>
         </div>
diff --git a/resources/views/reports/default/month.twig b/resources/views/reports/default/month.twig
index 6ff31d8217..5fc9bb6655 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;" height="400"></canvas>
+                    <canvas id="account-balances-chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
                 </div>
             </div>
         </div>
diff --git a/resources/views/reports/default/multi-year.twig b/resources/views/reports/default/multi-year.twig
index 90a03fee2b..303a8e4cdb 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;" height="400"></canvas>
+                    <canvas id="income-expenses-chart" style="width:100%;height:400px;" height="400" width="100%"></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;" height="400"></canvas>
+                    <canvas id="income-expenses-sum-chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
                 </div>
             </div>
         </div>
@@ -94,7 +94,7 @@
                     <h3 class="box-title">{{ 'net_worth'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="net-worth" style="width:100%;height:400px;" height="400"></canvas>
+                    <canvas id="net-worth" style="width:100%;height:400px;" height="400" width="100%"></canvas>
                 </div>
             </div>
         </div>
@@ -127,7 +127,7 @@
                     <h3 class="box-title">{{ 'chart'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas height="400" id="budget_chart" style="width:100%;height:400px;"></canvas>
+                    <canvas style="width:100%;height:400px;" height="400" width="100%"></canvas>
                 </div>
             </div>
         </div>
@@ -175,7 +175,7 @@
                     <h3 class="box-title">{{ 'chart'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas height="400" id="category_chart" style="width:100%;height:400px;"></canvas>
+                    <canvas id="category_chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
                 </div>
             </div>
         </div>
diff --git a/resources/views/reports/default/year.twig b/resources/views/reports/default/year.twig
index b271662b3c..03bc5bdb7c 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 height="400" id="income-expenses-chart" style="width:100%;height:400px;"></canvas>
+                    <canvas id="income-expenses-chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
                 </div>
             </div>
         </div>
@@ -88,7 +88,7 @@
                     <h3 class="box-title">{{ 'net_worth'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas height="400" id="net-worth" style="width:100%;height:400px;"></canvas>
+                    <canvas id="net-worth" style="width:100%;height:400px;" height="400" width="100%"></canvas>
                 </div>
             </div>
         </div>
@@ -120,7 +120,7 @@
                     <h3 class="box-title">{{ 'chart'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas height="400" id="budget_chart" style="width:100%;height:400px;"></canvas>
+                    <canvas id="budget_chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
                 </div>
             </div>
         </div>
@@ -168,7 +168,7 @@
                     <h3 class="box-title">{{ 'chart'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas height="400" id="category_chart" style="width:100%;height:400px;"></canvas>
+                    <canvas id="category_chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
                 </div>
             </div>
         </div>
diff --git a/resources/views/reports/tag/month.twig b/resources/views/reports/tag/month.twig
index f160a4686a..3828b773f4 100644
--- a/resources/views/reports/tag/month.twig
+++ b/resources/views/reports/tag/month.twig
@@ -173,7 +173,7 @@
                     <h3 class="box-title">{{ 'income_and_expenses'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="in-out-chart" style="margin:0 auto;" height="300"></canvas>
+                    <canvas id="in-out-chart" style="width:100%;height:400px;" height="400" width="100%"></canvas>
                 </div>
             </div>
         </div>