diff --git a/app/Generator/Chart/Basic/ChartJsGenerator.php b/app/Generator/Chart/Basic/ChartJsGenerator.php
index da6252548f..ef66a2b7cf 100644
--- a/app/Generator/Chart/Basic/ChartJsGenerator.php
+++ b/app/Generator/Chart/Basic/ChartJsGenerator.php
@@ -90,7 +90,9 @@ class ChartJsGenerator implements GeneratorInterface
             if (isset($set['currency_symbol'])) {
                 $currentSet['currency_symbol'] = $set['currency_symbol'];
             }
-
+            if(isset($set['backgroundColor'])) {
+                $currentSet['backgroundColor'] = $set['backgroundColor'];
+            }
             $chartData['datasets'][] = $currentSet;
         }
 
diff --git a/app/Http/Controllers/Chart/ReportController.php b/app/Http/Controllers/Chart/ReportController.php
index d2129761e4..dfc8f77e1d 100644
--- a/app/Http/Controllers/Chart/ReportController.php
+++ b/app/Http/Controllers/Chart/ReportController.php
@@ -112,14 +112,16 @@ class ReportController extends Controller
         $source    = $this->getChartData($accounts, $start, $end);
         $chartData = [
             [
-                'label'   => trans('firefly.income'),
-                'type'    => 'bar',
-                'entries' => [],
+                'label'           => trans('firefly.income'),
+                'type'            => 'bar',
+                'backgroundColor' => 'rgba(0, 141, 76, 0.5)', // green
+                'entries'         => [],
             ],
             [
-                'label'   => trans('firefly.expenses'),
-                'type'    => 'bar',
-                'entries' => [],
+                'label'           => trans('firefly.expenses'),
+                'type'            => 'bar',
+                'backgroundColor' => 'rgba(219, 68, 55, 0.5)', // red
+                'entries'         => [],
             ],
         ];
 
@@ -189,17 +191,19 @@ class ReportController extends Controller
 
         $chartData = [
             [
-                'label'   => (string)trans('firefly.income'),
-                'type'    => 'bar',
-                'entries' => [
+                'label'           => (string)trans('firefly.income'),
+                'type'            => 'bar',
+                'backgroundColor' => 'rgba(0, 141, 76, 0.5)', // green
+                'entries'         => [
                     (string)trans('firefly.sum_of_period')     => $numbers['sum_earned'],
                     (string)trans('firefly.average_in_period') => $numbers['avg_earned'],
                 ],
             ],
             [
-                'label'   => trans('firefly.expenses'),
-                'type'    => 'bar',
-                'entries' => [
+                'label'           => trans('firefly.expenses'),
+                'type'            => 'bar',
+                'backgroundColor' => 'rgba(219, 68, 55, 0.5)', // red
+                'entries'         => [
                     (string)trans('firefly.sum_of_period')     => $numbers['sum_spent'],
                     (string)trans('firefly.average_in_period') => $numbers['avg_spent'],
                 ],
diff --git a/public/js/ff/charts.js b/public/js/ff/charts.js
index 67e4805c53..275f3fb144 100644
--- a/public/js/ff/charts.js
+++ b/public/js/ff/charts.js
@@ -26,12 +26,12 @@ var allCharts = {};
  */
 var colourSet = [
     [53, 124, 165],
-    [0, 141, 76],
+    [0, 141, 76], // green
     [219, 139, 11],
-    [202, 25, 90],
+    [202, 25, 90], // paars rood-ish #CA195A
     [85, 82, 153],
     [66, 133, 244],
-    [219, 68, 55],
+    [219, 68, 55], // red #DB4437
     [244, 180, 0],
     [15, 157, 88],
     [171, 71, 188],
@@ -205,6 +205,21 @@ function columnChart(URI, container) {
 
 }
 
+/**
+ *
+ * @param URI
+ * @param container
+ */
+function columnChartCustomColours(URI, container) {
+    "use strict";
+    var colorData = false;
+    var options = $.extend(true, {}, defaultChartOptions);
+    var chartType = 'bar';
+
+    drawAChart(URI, container, chartType, options, colorData);
+
+}
+
 /**
  *
  * @param URI
diff --git a/public/js/ff/reports/default/multi-year.js b/public/js/ff/reports/default/multi-year.js
index f2a56fd888..67dc295242 100644
--- a/public/js/ff/reports/default/multi-year.js
+++ b/public/js/ff/reports/default/multi-year.js
@@ -23,8 +23,8 @@
 $(function () {
     "use strict";
     lineChart(netWorthUri, 'net-worth');
-    columnChart(opChartUri, 'income-expenses-chart');
-    columnChart(sumChartUri, 'income-expenses-sum-chart');
+    columnChartCustomColours(opChartUri, 'income-expenses-chart');
+    columnChartCustomColours(sumChartUri, 'income-expenses-sum-chart');
 
     loadAjaxPartial('budgetPeriodReport', budgetPeriodReportUri);
     loadAjaxPartial('categoryExpense', categoryExpenseUri);
diff --git a/public/js/ff/reports/default/year.js b/public/js/ff/reports/default/year.js
index 79887f7397..4504d3d810 100644
--- a/public/js/ff/reports/default/year.js
+++ b/public/js/ff/reports/default/year.js
@@ -23,8 +23,8 @@
 $(function () {
     "use strict";
     lineChart(netWorthUri, 'net-worth');
-    columnChart(opChartUri, 'income-expenses-chart');
-    columnChart(sumChartUri, 'income-expenses-sum-chart');
+    columnChartCustomColours(opChartUri, 'income-expenses-chart');
+    columnChartCustomColours(sumChartUri, 'income-expenses-sum-chart');
 
     loadAjaxPartial('budgetPeriodReport', budgetPeriodReportUri);
     loadAjaxPartial('categoryExpense', categoryExpenseUri);