diff --git a/src/main/java/de/deadlocker8/budgetmaster/charts/DefaultCharts.java b/src/main/java/de/deadlocker8/budgetmaster/charts/DefaultCharts.java
index 684c1862f6ee5924d9141178cd8b61dccdd410ff..3ea353f74db7076421e9a98afb6e33dbbcc9dbfd 100644
--- a/src/main/java/de/deadlocker8/budgetmaster/charts/DefaultCharts.java
+++ b/src/main/java/de/deadlocker8/budgetmaster/charts/DefaultCharts.java
@@ -35,7 +35,7 @@ public class DefaultCharts
 
 	private static final Chart CHART_INCOMES_AND_EXPENDITURES_PER_MONTH_BY_CATEGORIES = new Chart("charts.default.incomesAndExpendituresPerMonthByCategories",
 		getChartFromFile("charts/IncomesAndExpendituresPerMonthByCategories.js"),
-		ChartType.DEFAULT, 3);
+		ChartType.DEFAULT, 4);
 
 
 	public static List<Chart> getDefaultCharts()
diff --git a/src/main/resources/charts/IncomesAndExpendituresPerMonthByCategories.js b/src/main/resources/charts/IncomesAndExpendituresPerMonthByCategories.js
index 0e0066378aa42e70616303f264518ea1223de74c..e83cd04528953554c38ad052cf559a803796c1c8 100644
--- a/src/main/resources/charts/IncomesAndExpendituresPerMonthByCategories.js
+++ b/src/main/resources/charts/IncomesAndExpendituresPerMonthByCategories.js
@@ -12,12 +12,14 @@ transactionData = transactionData.reverse();
 
 moment.locale('de');
 
-
 const NAME = 0;
 const COLOR = 1;
 const INCOME = 2;
 const EXPENDITURE = 3;
 
+var categoryNames = Array.from(new Set(transactionData.map(t => t.category.name)));
+var categoryColors = Array.from(new Set(transactionData.map(t => t.category.color)));
+
 var dates = [];
 var values = [];
 
@@ -25,12 +27,16 @@ for(var i = 0; i < transactionData.length; i++)
 {
     var transaction = transactionData[i];
 
+    var date = moment(transaction.date).startOf('month').format('MMM YY');
     var date = moment(transaction.date).startOf('month').format('MMM YY');
     if(!dates.includes(date))
     {
         dates.push(date);
         values.push([
-            [], [], [], []  // NAME, COLOR, INCOME, EXPENDITURE
+            categoryNames, // NAME
+            categoryColors, // COLOR
+            new Array(categoryNames.length).fill(0), // INCOME
+            new Array(categoryNames.length).fill(0)  // EXPENDITURE
         ]);
     }
 
@@ -122,6 +128,8 @@ for(var i = 0; i < dates.length; i++)
             name: currentValues[NAME][j],
             xaxis: 'x' + (i + 1),  // for grouping incomes and expenditure bar by month
             barmode: 'stack',
+            showlegend: i === 0,
+            legendgroup: currentValues[NAME][j],
             marker: {
                 color: currentValues[COLOR][j]  // use the category's color
             }