diff --git a/src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java b/src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java
index 784975cabe491adc8905402db3614055a825494f..3004c9a60aeaf088024dacbee5dfa596f5ec1f9c 100644
--- a/src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java
+++ b/src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java
@@ -67,7 +67,10 @@ public class ChartController extends BaseController
 		model.addAttribute("chartSettings", defaultChartSettings);
 		model.addAttribute("charts", charts);
 		model.addAttribute("displayTypes", ChartDisplayType.values());
+		model.addAttribute("initialDisplayType", ChartDisplayType.BAR);
 		model.addAttribute("groupTypes", ChartGroupType.values());
+		model.addAttribute("initialGroupType", ChartGroupType.MONTH);
+
 		return "charts/charts";
 	}
 
diff --git a/src/main/resources/static/js/charts.js b/src/main/resources/static/js/charts.js
index b91d2ca5aa53e1a56359b7f74c79230aa7a35ef7..6a25b214be07601522d90243bb6c0246290647d2 100644
--- a/src/main/resources/static/js/charts.js
+++ b/src/main/resources/static/js/charts.js
@@ -106,6 +106,8 @@ $(document).ready(function()
 
         this.classList.toggle('active', true);
     });
+
+    filterChartPreviews();
 });
 
 function createDatePickerEnd(minDate, selectedDate)
diff --git a/src/main/resources/templates/charts/charts.ftl b/src/main/resources/templates/charts/charts.ftl
index 1aa0dc78df51b4e7d55da4c7b7d14de614ab9c3b..0dd1280b3b8234c0b1f99da1660742ca3abb1ef8 100644
--- a/src/main/resources/templates/charts/charts.ftl
+++ b/src/main/resources/templates/charts/charts.ftl
@@ -33,7 +33,7 @@
                         <div class="row hide-on-small-and-down">
                             <div class="col s12 center-align">
                                 <#list displayTypes as displayType>
-                                    <@chartTypeButton item=displayType buttonClass="button-display-type"/>
+                                    <@chartTypeButton item=displayType buttonClass="button-display-type" initialItem=initialDisplayType/>
                                 </#list>
                             </div>
                         </div>
@@ -43,7 +43,7 @@
                         <div class="row hide-on-small-and-down">
                             <div class="col s12 center-align">
                                 <#list groupTypes as groupType>
-                                    <@chartTypeButton item=groupType buttonClass="button-group-type"/>
+                                    <@chartTypeButton item=groupType buttonClass="button-group-type" initialItem=initialGroupType/>
                                 </#list>
                             </div>
                         </div>
@@ -263,8 +263,10 @@
     </@stepCollapsible>
 </#macro>
 
-<#macro chartTypeButton item buttonClass>
-    <a class="waves-effect waves-light btn-large background-grey text-black ${buttonClass}" data-value="${item.name()}">
+<#macro chartTypeButton item buttonClass initialItem>
+    <#assign isInitialItem=item.name()==initialItem.name()/>
+
+    <a class="waves-effect waves-light btn-large background-grey text-black ${buttonClass} <#if isInitialItem>active</#if>" data-value="${item.name()}">
         <#if item.hasFontAwesomeIcon()>
             <i class="${item.getIcon()} left"></i> ${locale.getString(item.getLocalizationKey())}
         <#else>