diff --git a/public/js/ff/charts.defaults.js b/public/js/ff/charts.defaults.js
new file mode 100644
index 0000000000..f763bb6c15
--- /dev/null
+++ b/public/js/ff/charts.defaults.js
@@ -0,0 +1,46 @@
+var defaultChartOptions = {
+    scales: {
+        xAxes: [
+            {
+                gridLines: {
+                    display: false
+                }
+            }
+        ],
+        yAxes: [{
+            display: true,
+            ticks: {
+                callback: function (tickValue, index, ticks) {
+                    "use strict";
+                    return accounting.formatMoney(tickValue);
+
+                },
+                beginAtZero: true
+            }
+
+        }]
+    },
+    tooltips: {
+        mode: 'label',
+        callbacks: {
+            label: function (tooltipItem, data) {
+                "use strict";
+                return data.datasets[tooltipItem.datasetIndex].label + ': ' + accounting.formatMoney(tooltipItem.yLabel);
+            }
+        }
+    }
+};
+
+var defaultPieOptions = {
+    tooltips: {
+        callbacks: {
+            label: function (tooltipItem, data) {
+                "use strict";
+                var value = data.datasets[0].data[tooltipItem.index];
+                return data.labels[tooltipItem.index] + ': ' + accounting.formatMoney(value);
+            }
+        }
+    },
+    maintainAspectRatio: true,
+    responsive: true
+};
\ No newline at end of file
diff --git a/public/js/ff/charts.js b/public/js/ff/charts.js
index 6478a8bf5e..98d1ad463e 100644
--- a/public/js/ff/charts.js
+++ b/public/js/ff/charts.js
@@ -47,355 +47,138 @@ Chart.defaults.global.animation.duration = 0;
 Chart.defaults.global.responsive = true;
 Chart.defaults.global.maintainAspectRatio = false;
 
-/*
- Set default options:
- */
-var defaultAreaOptions = {
-    scales: {
-        xAxes: [
-            {
-                gridLines: {
-                    display: false
-                }
-            }
-        ],
-        yAxes: [{
-            display: true,
-            ticks: {
-                callback: function (tickValue, index, ticks) {
-                    "use strict";
-                    return accounting.formatMoney(tickValue);
-
-                }
-            }
-        }]
-    },
-    tooltips: {
-        mode: 'label',
-        callbacks: {
-            label: function (tooltipItem, data) {
-                "use strict";
-                return data.datasets[tooltipItem.datasetIndex].label + ': ' + accounting.formatMoney(tooltipItem.yLabel);
-            }
-        }
-    }
-};
-
-
-var defaultPieOptions = {
-    tooltips: {
-        callbacks: {
-            label: function (tooltipItem, data) {
-                "use strict";
-                var value = data.datasets[0].data[tooltipItem.index];
-                return data.labels[tooltipItem.index] + ': ' + accounting.formatMoney(value);
-            }
-        }
-    },
-    maintainAspectRatio: true,
-    responsive: true
-};
-
-
-var defaultLineOptions = {
-    scales: {
-        xAxes: [
-            {
-                gridLines: {
-                    display: false
-                }
-            }
-        ],
-        yAxes: [{
-            display: true,
-            ticks: {
-                callback: function (tickValue, index, ticks) {
-                    "use strict";
-                    return accounting.formatMoney(tickValue);
-
-                }
-            }
-        }]
-    },
-    tooltips: {
-        mode: 'label',
-        callbacks: {
-            label: function (tooltipItem, data) {
-                "use strict";
-                return data.datasets[tooltipItem.datasetIndex].label + ': ' + accounting.formatMoney(tooltipItem.yLabel);
-            }
-        }
-    }
-};
-
-var defaultColumnOptions = {
-    scales: {
-        xAxes: [
-            {
-                gridLines: {
-                    display: false
-                }
-            }
-        ],
-        yAxes: [{
-            ticks: {
-                callback: function (tickValue, index, ticks) {
-                    "use strict";
-                    return accounting.formatMoney(tickValue);
-                },
-                beginAtZero: true
-            }
-        }]
-    },
-    elements: {
-        line: {
-            fill: false
-        }
-    },
-    tooltips: {
-        mode: 'label',
-        callbacks: {
-            label: function (tooltipItem, data) {
-                "use strict";
-                return data.datasets[tooltipItem.datasetIndex].label + ': ' + accounting.formatMoney(tooltipItem.yLabel);
-            }
-        }
-    }
-};
-
-var defaultStackedColumnOptions = {
-    stacked: true,
-    scales: {
-        xAxes: [{
-            stacked: true,
-            gridLines: {
-                display: false
-            }
-        }],
-        yAxes: [{
-            stacked: true,
-            ticks: {
-                callback: function (tickValue, index, ticks) {
-                    "use strict";
-                    return accounting.formatMoney(tickValue);
-
-                }
-            }
-        }]
-    },
-    tooltips: {
-        mode: 'label',
-        callbacks: {
-            label: function (tooltipItem, data) {
-                "use strict";
-                return data.datasets[tooltipItem.datasetIndex].label + ': ' + accounting.formatMoney(tooltipItem.yLabel);
-            }
-        }
-    }
-};
 
 /**
- * Function to draw a line chart:
- * @param URL
- * @param container
- * @param options
+ *
+ * @param data
+ * @returns {{}}
  */
-function lineChart(URL, container, options) {
-    "use strict";
-    $.getJSON(URL).done(function (data) {
+function colorizeData(data) {
+    var newData = {};
+    newData.datasets = [];
 
-        var ctx = document.getElementById(container).getContext("2d");
-        var newData = {};
-        newData.datasets = [];
-
-        for (var i = 0; i < data.count; i++) {
-            newData.labels = data.labels;
-            var dataset = data.datasets[i];
-            dataset.backgroundColor = fillColors[i];
-            newData.datasets.push(dataset);
-        }
-
-        new Chart(ctx, {
-            type: 'line',
-            data: data,
-            options: defaultLineOptions
-        });
-
-    }).fail(function () {
-        $('#' + container).addClass('general-chart-error');
-    });
-    console.log('URL for line chart : ' + URL);
+    for (var i = 0; i < data.count; i++) {
+        newData.labels = data.labels;
+        var dataset = data.datasets[i];
+        dataset.backgroundColor = fillColors[i];
+        newData.datasets.push(dataset);
+    }
+    return newData;
 }
 
 /**
- * Function to draw an area chart:
- *
- * @param URL
+ * @param URI
  * @param container
+ * @param chartType
  * @param options
+ * @param colorData
  */
-function areaChart(URL, container, options) {
-    "use strict";
-
+function drawAChart(URI, container, chartType, options, colorData) {
     if ($('#' + container).length === 0) {
         console.log('No container called ' + container + ' was found.');
         return;
     }
 
-    $.getJSON(URL).done(function (data) {
-        var ctx = document.getElementById(container).getContext("2d");
-        var newData = {};
-        newData.datasets = [];
+    // var result = true;
+    // if (options.beforeDraw) {
+    //     result = options.beforeDraw(data, {url: URL, container: container});
+    // }
+    // if (result === false) {
+    //     return;
+    // }
 
-        for (var i = 0; i < data.count; i++) {
-            newData.labels = data.labels;
-            var dataset = data.datasets[i];
-            dataset.backgroundColor = fillColors[i];
-            newData.datasets.push(dataset);
+    $.getJSON(URI).done(function (data) {
+
+        if (colorData) {
+            data = colorizeData(data);
         }
 
-        new Chart(ctx, {
-            type: 'line',
-            data: newData,
-            options: defaultAreaOptions
-        });
-
-    }).fail(function () {
-        $('#' + container).addClass('general-chart-error');
-    });
-
-    console.log('URL for area chart: ' + URL);
-}
-
-/**
- *
- * @param URL
- * @param container
- * @param options
- */
-function columnChart(URL, container, options) {
-    "use strict";
-
-    options = options || {};
-
-    $.getJSON(URL).done(function (data) {
-
-        var result = true;
-        if (options.beforeDraw) {
-            result = options.beforeDraw(data, {url: URL, container: container});
-        }
-        if (result === false) {
-            return;
-        }
-        console.log('Will draw columnChart(' + URL + ')');
-
-        var ctx = document.getElementById(container).getContext("2d");
-        var newData = {};
-        newData.datasets = [];
-
-        for (var i = 0; i < data.count; i++) {
-            newData.labels = data.labels;
-            var dataset = data.datasets[i];
-            dataset.backgroundColor = fillColors[i];
-            newData.datasets.push(dataset);
-        }
-        new Chart(ctx, {
-            type: 'bar',
-            data: data,
-            options: defaultColumnOptions
-        });
-
-    }).fail(function () {
-        $('#' + container).addClass('general-chart-error');
-    });
-    console.log('URL for column chart : ' + URL);
-}
-
-/**
- *
- * @param URL
- * @param container
- * @param options
- */
-function stackedColumnChart(URL, container, options) {
-    "use strict";
-
-    options = options || {};
-
-
-    $.getJSON(URL).done(function (data) {
-
-        var result = true;
-        if (options.beforeDraw) {
-            result = options.beforeDraw(data, {url: URL, container: container});
-        }
-        if (result === false) {
-            return;
-        }
-
-
-        var ctx = document.getElementById(container).getContext("2d");
-        var newData = {};
-        newData.datasets = [];
-
-        for (var i = 0; i < data.count; i++) {
-            newData.labels = data.labels;
-            var dataset = data.datasets[i];
-            dataset.backgroundColor = fillColors[i];
-            newData.datasets.push(dataset);
-        }
-        new Chart(ctx, {
-            type: 'bar',
-            data: data,
-            options: defaultStackedColumnOptions
-        });
-
-
-    }).fail(function () {
-        $('#' + container).addClass('general-chart-error');
-    });
-    console.log('URL for stacked column chart : ' + URL);
-}
-
-/**
- *
- * @param URL
- * @param container
- * @param options
- */
-function pieChart(URL, container, options) {
-    "use strict";
-
-    if ($('#' + container).length === 0) {
-        console.log('No container called ' + container + ' was found.');
-        return;
-    }
-
-    $.getJSON(URL).done(function (data) {
-
         if (allCharts.hasOwnProperty(container)) {
-            console.log('Will draw updated pie chart');
-
+            console.log('Will draw updated ' + chartType + ' chart');
             allCharts[container].data.datasets = data.datasets;
             allCharts[container].data.labels = data.labels;
             allCharts[container].update();
         } else {
             // new chart!
-            console.log('Will draw new pie chart');
+            console.log('Will draw new ' + chartType + 'chart');
             var ctx = document.getElementById(container).getContext("2d");
             allCharts[container] = new Chart(ctx, {
-                type: 'pie',
+                type: chartType,
                 data: data,
-                options: defaultPieOptions
+                options: options
             });
         }
 
-
     }).fail(function () {
+        console.log('Failed to draw ' + chartType + ' in container ' + container);
         $('#' + container).addClass('general-chart-error');
     });
+    console.log('URL for ' + chartType + ' chart : ' + URL);
+}
 
 
-    console.log('URL for pie chart : ' + URL);
+/**
+ * Function to draw a line chart:
+ * @param URI
+ * @param container
+ */
+function lineChart(URI, container) {
+    "use strict";
+
+    var colorData = true;
+    var options = defaultChartOptions;
+    var chartType = 'line';
+
+    drawAChart(URI, container, chartType, options, colorData);
+}
+
+/**
+ *
+ * @param URI
+ * @param container
+ */
+function columnChart(URI, container) {
+    "use strict";
+
+    var colorData = true;
+    var options = defaultChartOptions;
+    var chartType = 'bar';
+
+    drawAChart(URI, container, chartType, options, colorData);
+
+}
+
+/**
+ *
+ * @param URI
+ * @param container
+ */
+function stackedColumnChart(URI, container) {
+    "use strict";
+
+    var colorData = true;
+    var options = defaultChartOptions;
+
+    options.stacked = true;
+    options.scales.xAxes[0].stacked = true;
+
+    var chartType = 'bar';
+
+    drawAChart(URI, container, chartType, options, colorData);
+}
+
+/**
+ *
+ * @param URI
+ * @param container
+ */
+function pieChart(URI, container) {
+    "use strict";
+
+    var colorData = false;
+    var options = defaultPieOptions;
+    var chartType = 'pie';
+
+    drawAChart(URI, container, chartType, options, colorData);
 
 }
diff --git a/public/js/ff/index.js b/public/js/ff/index.js
index a6a7e5d795..3621132011 100644
--- a/public/js/ff/index.js
+++ b/public/js/ff/index.js
@@ -1,4 +1,4 @@
-    /* globals $, columnChart,showTour, Tour, google, lineChart, pieChart, stackedColumnChart, areaChart */
+    /* globals $, columnChart,showTour, Tour, google, pieChart, stackedColumnChart */
 
 $(function () {
     "use strict";
@@ -32,38 +32,38 @@ function endTheTour() {
 
 function drawChart() {
     "use strict";
-    areaChart('chart/account/frontpage', 'accounts-chart');
+    lineChart('chart/account/frontpage', 'accounts-chart');
     pieChart('chart/bill/frontpage', 'bills-chart');
-    stackedColumnChart('chart/budget/frontpage', 'budgets-chart', {beforeDraw: beforeDrawIsEmpty});
-    columnChart('chart/category/frontpage', 'categories-chart', {beforeDraw: beforeDrawIsEmpty});
-    columnChart('chart/account/expense', 'expense-accounts-chart', {beforeDraw: beforeDrawIsEmpty});
-    columnChart('chart/account/revenue', 'revenue-accounts-chart', {beforeDraw: beforeDrawIsEmpty});
+    stackedColumnChart('chart/budget/frontpage', 'budgets-chart');
+    columnChart('chart/category/frontpage', 'categories-chart');
+    columnChart('chart/account/expense', 'expense-accounts-chart');
+    columnChart('chart/account/revenue', 'revenue-accounts-chart');
 
 
     getBoxAmounts();
 }
 
-/**
- * Removes a chart container if there is nothing for the chart to draw.
- *
- * @param data
- * @param options
- * @returns {boolean}
- */
-function beforeDrawIsEmpty(data, options) {
-    "use strict";
-
-    // check if chart holds data.
-    if (data.labels.length === 0) {
-        // remove the chart container + parent
-        console.log(options.container + ' appears empty. Removed.');
-        $('#' + options.container).parent().parent().remove();
-
-        // return false so script stops.
-        return false;
-    }
-    return true;
-}
+// /**
+//  * Removes a chart box if there is nothing for the chart to draw.
+//  *
+//  * @param data
+//  * @param options
+//  * @returns {boolean}
+//  */
+// function beforeDrawIsEmpty(data, options) {
+//     "use strict";
+//
+//     // check if chart holds data.
+//     if (data.labels.length === 0) {
+//         // remove the chart container + parent
+//         console.log(options.container + ' appears empty. Removed.');
+//         $('#' + options.container).parent().parent().remove();
+//
+//         // return false so script stops.
+//         return false;
+//     }
+//     return true;
+// }
 
 
 function getBoxAmounts() {
diff --git a/public/js/ff/reports/default/all.js b/public/js/ff/reports/default/all.js
index 9ab3c6c8d7..3b47c14cf9 100644
--- a/public/js/ff/reports/default/all.js
+++ b/public/js/ff/reports/default/all.js
@@ -130,63 +130,9 @@ function clickBudgetChart(e) {
     "use strict";
     var link = $(e.target);
     var budgetId = link.data('budget');
+
     var URL = 'chart/budget/period/' + budgetId + '/' + reportType + '/' + startDate + '/' + endDate + '/' + accountIds;
     var container = 'budget_chart';
-    // if chart drawn is false, draw the first one, then
-    // set to true
-    if (chartDrawn == false) {
-        // do new chart:
-
-
-        $.getJSON(URL).done(function (data) {
-            console.log('Will draw new columnChart(' + URL + ')');
-
-            var ctx = document.getElementById(container).getContext("2d");
-            var newData = {};
-            newData.datasets = [];
-
-            for (var i = 0; i < data.count; i++) {
-                newData.labels = data.labels;
-                var dataset = data.datasets[i];
-                dataset.backgroundColor = fillColors[i];
-                newData.datasets.push(dataset);
-            }
-            // completely new chart.
-            budgetChart = new Chart(ctx, {
-                type: 'bar',
-                data: data,
-                options: defaultColumnOptions
-            });
-
-        }).fail(function () {
-            $('#' + container).addClass('general-chart-error');
-        });
-        console.log('URL for column chart : ' + URL);
-        chartDrawn = true;
-    } else {
-        console.log('Will now handle remove data and add new!');
-        $.getJSON(URL).done(function (data) {
-            console.log('Will draw updated columnChart(' + URL + ')');
-            var newData = {};
-            newData.datasets = [];
-
-            for (var i = 0; i < data.count; i++) {
-                newData.labels = data.labels;
-                var dataset = data.datasets[i];
-                dataset.backgroundColor = fillColors[i];
-                newData.datasets.push(dataset);
-            }
-            // update the chart
-            console.log('Now update chart thing.');
-            budgetChart.data.datasets = newData.datasets;
-            budgetChart.update();
-
-        }).fail(function () {
-            $('#' + container).addClass('general-chart-error');
-        });
-
-
-    }
-
+    columnChart(URL, container);
     return false;
 }
\ No newline at end of file
diff --git a/public/js/ff/reports/default/multi-year.js b/public/js/ff/reports/default/multi-year.js
index 93ecb50039..0c8213785b 100644
--- a/public/js/ff/reports/default/multi-year.js
+++ b/public/js/ff/reports/default/multi-year.js
@@ -12,7 +12,7 @@ function drawChart() {
     "use strict";
 
     // income and expense over multi year:
-    lineChart('chart/report/net-worth/' + reportType + '/' + startDate + '/' + endDate + '/' + accountIds, 'net-worth');
-    columnChart('chart/report/in-out/' + reportType + '/' + startDate + '/' + endDate + '/' + accountIds, 'income-expenses-chart');
-    columnChart('chart/report/in-out-sum/' + reportType + '/' + startDate + '/' + endDate + '/' + accountIds, 'income-expenses-sum-chart');
+    lineChart('chart/report/net-worth/' + startDate + '/' + endDate + '/' + accountIds, 'net-worth');
+    columnChart('chart/report/in-out/' + startDate + '/' + endDate + '/' + accountIds, 'income-expenses-chart');
+    columnChart('chart/report/in-out-sum/' + startDate + '/' + endDate + '/' + accountIds, 'income-expenses-sum-chart');
 }
diff --git a/public/js/ff/reports/default/year.js b/public/js/ff/reports/default/year.js
index 1e2893f8e5..a28ac3f8c4 100644
--- a/public/js/ff/reports/default/year.js
+++ b/public/js/ff/reports/default/year.js
@@ -1,10 +1,7 @@
 /* globals google, accountIds, budgetYearOverviewUri */
 
-var chartDrawn;
-var budgetChart;
 $(function () {
     "use strict";
-    chartDrawn = false;
     drawChart();
 
     loadAjaxPartial('budgetOverview',budgetYearOverviewUri);
diff --git a/public/js/ff/reports/index.js b/public/js/ff/reports/index.js
index 9eb918d86a..bd949eeac6 100644
--- a/public/js/ff/reports/index.js
+++ b/public/js/ff/reports/index.js
@@ -18,7 +18,8 @@ $(function () {
         );
 
         // set values from cookies, if any:
-        if (readCookie('report-type') !== null) {
+        if (!(readCookie('report-type') === null)) {
+            console.log(readCookie('report-type'));
             $('select[name="report_type"]').val(readCookie('report-type'));
         }
 
diff --git a/resources/views/accounts/show.twig b/resources/views/accounts/show.twig
index ac18d8a0cd..b69befe609 100644
--- a/resources/views/accounts/show.twig
+++ b/resources/views/accounts/show.twig
@@ -81,6 +81,7 @@
         var accountID = {{ account.id }};
     </script>
     <script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
+    <script type="text/javascript" src="js/ff/charts.defaults.js"></script>
     <script type="text/javascript" src="js/ff/charts.js"></script>
     <script src="js/lib/jquery-ui.min.js" type="text/javascript"></script>
     <script src="js/lib/jquery.color-2.1.2.min.js" type="text/javascript"></script>
diff --git a/resources/views/accounts/show_with_date.twig b/resources/views/accounts/show_with_date.twig
index 957e3b5e98..ae3011c52f 100644
--- a/resources/views/accounts/show_with_date.twig
+++ b/resources/views/accounts/show_with_date.twig
@@ -55,6 +55,7 @@
         var dateString = "{{ date }}";
     </script>
     <script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
+    <script type="text/javascript" src="js/ff/charts.defaults.js"></script>
     <script type="text/javascript" src="js/ff/charts.js"></script>
     <script src="js/lib/jquery-ui.min.js" type="text/javascript"></script>
     <script src="js/lib/jquery.color-2.1.2.min.js" type="text/javascript"></script>
diff --git a/resources/views/bills/show.twig b/resources/views/bills/show.twig
index e2ea0f42a8..f2db32ebf2 100644
--- a/resources/views/bills/show.twig
+++ b/resources/views/bills/show.twig
@@ -119,6 +119,7 @@
         var billID = {{ bill.id }};
     </script>
     <script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
+    <script type="text/javascript" src="js/ff/charts.defaults.js"></script>
     <script type="text/javascript" src="js/ff/charts.js"></script>
     <script type="text/javascript" src="js/ff/bills/show.js"></script>
     <script type="text/javascript" src="js/ff/transactions/list.js"></script>
diff --git a/resources/views/budgets/show.twig b/resources/views/budgets/show.twig
index b0331ae279..a85ae2061b 100644
--- a/resources/views/budgets/show.twig
+++ b/resources/views/budgets/show.twig
@@ -107,6 +107,7 @@
     </script>
 
     <script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
+    <script type="text/javascript" src="js/ff/charts.defaults.js"></script>
     <script type="text/javascript" src="js/ff/charts.js"></script>
     <script type="text/javascript" src="js/ff/budgets/show.js"></script>
     <script type="text/javascript" src="js/ff/transactions/list.js"></script>
diff --git a/resources/views/categories/index.twig b/resources/views/categories/index.twig
index 18a1e08314..d4cfc7c335 100644
--- a/resources/views/categories/index.twig
+++ b/resources/views/categories/index.twig
@@ -35,6 +35,7 @@
 
 {% block scripts %}
     <script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
+    <script type="text/javascript" src="js/ff/charts.defaults.js"></script>
     <script type="text/javascript" src="js/ff/charts.js"></script>
     <script type="text/javascript" src="js/lib/bootstrap-sortable.js"></script>
     <script type="text/javascript" src="js/ff/categories/index.js"></script>
diff --git a/resources/views/categories/show.twig b/resources/views/categories/show.twig
index 311b857d6e..f6b18c08b4 100644
--- a/resources/views/categories/show.twig
+++ b/resources/views/categories/show.twig
@@ -76,6 +76,7 @@
         var categoryID = {{ category.id }};
     </script>
     <script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
+    <script type="text/javascript" src="js/ff/charts.defaults.js"></script>
     <script type="text/javascript" src="js/ff/charts.js"></script>
     <script type="text/javascript" src="js/ff/categories/show.js"></script>
     <script type="text/javascript" src="js/ff/transactions/list.js"></script>
diff --git a/resources/views/categories/show_with_date.twig b/resources/views/categories/show_with_date.twig
index 624a933957..2514b08214 100644
--- a/resources/views/categories/show_with_date.twig
+++ b/resources/views/categories/show_with_date.twig
@@ -44,6 +44,7 @@
         var categoryDate = "{{ carbon.format('Y-m-d') }}";
     </script>
     <script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
+    <script type="text/javascript" src="js/ff/charts.defaults.js"></script>
     <script type="text/javascript" src="js/ff/charts.js"></script>
     <script type="text/javascript" src="js/ff/categories/show_with_date.js"></script>
     <script type="text/javascript" src="js/ff/transactions/list.js"></script>
diff --git a/resources/views/index.twig b/resources/views/index.twig
index f50e0e1c12..1e72dc442f 100644
--- a/resources/views/index.twig
+++ b/resources/views/index.twig
@@ -132,6 +132,7 @@
     </script>
 
     <script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
+    <script type="text/javascript" src="js/ff/charts.defaults.js"></script>
     <script type="text/javascript" src="js/ff/charts.js"></script>
     <script type="text/javascript" src="js/ff/index.js"></script>
 {% endblock %}
diff --git a/resources/views/piggy-banks/show.twig b/resources/views/piggy-banks/show.twig
index 5e240a242d..031aefb4ba 100644
--- a/resources/views/piggy-banks/show.twig
+++ b/resources/views/piggy-banks/show.twig
@@ -107,6 +107,7 @@
     </script>
 
     <script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
+    <script type="text/javascript" src="js/ff/charts.defaults.js"></script>
     <script type="text/javascript" src="js/ff/charts.js"></script>
     <script type="text/javascript" src="js/ff/piggy-banks/show.js"></script>
 {% endblock %}
diff --git a/resources/views/reports/category/month.twig b/resources/views/reports/category/month.twig
index 46357c569d..2048b765b3 100644
--- a/resources/views/reports/category/month.twig
+++ b/resources/views/reports/category/month.twig
@@ -264,6 +264,7 @@
 
 {% block scripts %}
     <script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
+    <script type="text/javascript" src="js/ff/charts.defaults.js"></script>
     <script type="text/javascript" src="js/ff/charts.js"></script>
 
     <script type="text/javascript">
diff --git a/resources/views/reports/default/month.twig b/resources/views/reports/default/month.twig
index c3f7b4e56d..1b81077e10 100644
--- a/resources/views/reports/default/month.twig
+++ b/resources/views/reports/default/month.twig
@@ -120,6 +120,7 @@
 
     <script type="text/javascript" src="js/lib/bootstrap-sortable.js"></script>
     <script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
+    <script type="text/javascript" src="js/ff/charts.defaults.js"></script>
     <script type="text/javascript" src="js/ff/charts.js"></script>
     <script type="text/javascript">
         var year = {{ start.year }};
diff --git a/resources/views/reports/default/multi-year.twig b/resources/views/reports/default/multi-year.twig
index 39ee4403ab..0470f1a6dc 100644
--- a/resources/views/reports/default/multi-year.twig
+++ b/resources/views/reports/default/multi-year.twig
@@ -106,6 +106,7 @@
 
     <script type="text/javascript" src="js/lib/bootstrap-sortable.js"></script>
     <script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
+    <script type="text/javascript" src="js/ff/charts.defaults.js"></script>
     <script type="text/javascript" src="js/ff/charts.js"></script>
     <script type="text/javascript">
         var year = {{ start.year }};
diff --git a/resources/views/reports/default/year.twig b/resources/views/reports/default/year.twig
index bce36d9970..0f99348969 100644
--- a/resources/views/reports/default/year.twig
+++ b/resources/views/reports/default/year.twig
@@ -112,6 +112,7 @@
 {% endblock %}
 {% block scripts %}
     <script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
+    <script type="text/javascript" src="js/ff/charts.defaults.js"></script>
     <script type="text/javascript" src="js/ff/charts.js"></script>
     <script type="text/javascript">
         var year = '{{ start.year }}';