diff --git a/public/js/charts.js b/public/js/charts.js
index 0e29140169..3111645a18 100644
--- a/public/js/charts.js
+++ b/public/js/charts.js
@@ -27,16 +27,16 @@ var colourSet = [
 // Settings object that controls default parameters for library methods:
 accounting.settings = {
     currency: {
-        symbol : currencySymbol,   // default currency symbol is '$'
+        symbol: currencySymbol,   // default currency symbol is '$'
         format: "%s %v", // controls output: %s = symbol, %v = value/number (can be object: see below)
-        decimal : mon_decimal_point,  // decimal point separator
+        decimal: mon_decimal_point,  // decimal point separator
         thousand: mon_thousands_sep,  // thousands separator
-        precision : frac_digits   // decimal places
+        precision: frac_digits   // decimal places
     },
     number: {
-        precision : 0,  // default precision on numbers is 0
+        precision: 0,  // default precision on numbers is 0
         thousand: ",",
-        decimal : "."
+        decimal: "."
     }
 };
 
@@ -92,7 +92,7 @@ var defaultLineOptions = {
     datasetFill: false,
     scaleFontSize: 10,
     responsive: false,
-    scaleLabel:      "<%= '" + currencySymbol + " ' + Number(value).toFixed(0).replace('.', ',') %>",
+    scaleLabel: "<%= '" + currencySymbol + " ' + Number(value).toFixed(0).replace('.', ',') %>",
     tooltipFillColor: "rgba(0,0,0,0.5)",
     tooltipTemplate: "<%if (label){%><%=label%>: <%}%>" + currencySymbol + " <%= value %>",
     multiTooltipTemplate: "<%=datasetLabel%>: <%= '" + currencySymbol + " ' + Number(value).toFixed(2).replace('.', ',') %>"
@@ -107,9 +107,9 @@ var defaultColumnOptions = {
     scaleFontSize: 10,
     responsive: false,
     animation: false,
-    scaleLabel:           "<%= accounting.formatMoney(value) %>",
+    scaleLabel: "<%= accounting.formatMoney(value) %>",
     tooltipFillColor: "rgba(0,0,0,0.5)",
-    tooltipTemplate:      "<%if (label){%><%=label%>: <%}%> <%= accounting.formatMoney(value) %>",
+    tooltipTemplate: "<%if (label){%><%=label%>: <%}%> <%= accounting.formatMoney(value) %>",
     multiTooltipTemplate: "<%=datasetLabel%>: <%= accounting.formatMoney(value) %>"
 };
 
@@ -122,7 +122,7 @@ var defaultStackedColumnOptions = {
     animation: false,
     scaleFontSize: 10,
     responsive: false,
-    scaleLabel:           "<%= accounting.formatMoney(value) %>",
+    scaleLabel: "<%= accounting.formatMoney(value) %>",
     tooltipFillColor: "rgba(0,0,0,0.5)",
     multiTooltipTemplate: "<%=datasetLabel%>: <%= accounting.formatMoney(value) %>"
 
@@ -204,8 +204,19 @@ function areaChart(URL, container, options) {
 function columnChart(URL, container, options) {
     "use strict";
 
+    options = options || {};
+
     $.getJSON(URL).success(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 = [];
@@ -240,6 +251,15 @@ function stackedColumnChart(URL, container, options) {
 
     $.getJSON(URL).success(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 = [];
diff --git a/public/js/index.js b/public/js/index.js
index 12d602f5e6..87bae2bf0f 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -34,14 +34,37 @@ function drawChart() {
     "use strict";
     areaChart('chart/account/frontpage', 'accounts-chart');
     pieChart('chart/bill/frontpage', 'bills-chart');
-    stackedColumnChart('chart/budget/frontpage', 'budgets-chart');
-    columnChart('chart/category/frontpage', 'categories-chart');
-    columnChart('chart/account/expense', 'expense-accounts-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});
 
 
     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;
+}
+
+
 function getBoxAmounts() {
     "use strict";
     var boxes = ['in', 'out', 'bills-unpaid', 'bills-paid'];