diff --git a/src/main/resources/static/css/charts.css b/src/main/resources/static/css/charts.css
index 84439feb81c1dff5613727a9ce53fd325804e0e7..4292263f30bd9f3c2ec06fdaf638b69ea932d7a8 100644
--- a/src/main/resources/static/css/charts.css
+++ b/src/main/resources/static/css/charts.css
@@ -36,15 +36,6 @@
     font-size: 1.2rem;
 }
 
-.chart-button i {
-    font-size: 2.2rem;
-}
-
-.chart-button-name {
-    margin-left: 1rem;
-    font-weight: bold;
-}
-
 .chart-preview:hover {
     cursor: pointer;
 }
@@ -56,6 +47,14 @@
     padding: 1rem;
 }
 
+.button-display-type.active {
+    background-color: var(--color-green) !important;
+}
+
+.button-group-type.active {
+    background-color: var(--color-blue-baby) !important;
+}
+
 #chart-date-card {
     background-color: var(--color-grey-dark-almost-transparent);
 }
\ No newline at end of file
diff --git a/src/main/resources/static/js/charts.js b/src/main/resources/static/js/charts.js
index 9623f869f4e2f0e567d6748e817e0167324cc763..6290d579481e21c2552ede1dc7c5f30b7f114f68 100644
--- a/src/main/resources/static/js/charts.js
+++ b/src/main/resources/static/js/charts.js
@@ -87,6 +87,16 @@ $(document).ready(function()
     {
         handleQuickDate(this);
     });
+
+    $('.button-display-type').click(function()
+    {
+        toggleChartTypeButtons('button-display-type', this);
+    });
+
+    $('.button-group-type').click(function()
+    {
+        toggleChartTypeButtons('button-group-type', this);
+    });
 });
 
 function createDatePickerEnd(minDate, selectedDate)
@@ -226,4 +236,15 @@ function setDateRange(startDate, endDate)
 
     chartPickerEndDate.destroy();
     chartPickerEndDate = createDatePickerEnd(chartPickerStartDate.date, endDate.startOf('day').toDate());
+}
+
+function toggleChartTypeButtons(styleClassName, item)
+{
+    let siblings = document.getElementsByClassName(styleClassName);
+    for(let i = 0; i < siblings.length; i++)
+    {
+        siblings[i].classList.toggle('active', false);
+    }
+
+    item.classList.toggle('active', true);
 }
\ No newline at end of file
diff --git a/src/main/resources/templates/charts/charts.ftl b/src/main/resources/templates/charts/charts.ftl
index fe9102ea7d94c1990ece6dc9add3fba30a7523e4..1aa0dc78df51b4e7d55da4c7b7d14de614ab9c3b 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 displayType/>
+                                    <@chartTypeButton item=displayType buttonClass="button-display-type"/>
                                 </#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 groupType/>
+                                    <@chartTypeButton item=groupType buttonClass="button-group-type"/>
                                 </#list>
                             </div>
                         </div>
@@ -263,8 +263,8 @@
     </@stepCollapsible>
 </#macro>
 
-<#macro chartTypeButton item>
-    <a class="waves-effect waves-light btn-large background-grey text-black">
+<#macro chartTypeButton item buttonClass>
+    <a class="waves-effect waves-light btn-large background-grey text-black ${buttonClass}" data-value="${item.name()}">
         <#if item.hasFontAwesomeIcon()>
             <i class="${item.getIcon()} left"></i> ${locale.getString(item.getLocalizationKey())}
         <#else>
@@ -274,7 +274,7 @@
 </#macro>
 
 <#macro chartPreview chart>
-    <div class="col s6 m4 l3 center-align">
+    <div class="col s6 m4 l3 center-align chart-preview-column" data-display-type="${chart.getDisplayType()}" data-group-type="${chart.getGroupType()}">
         <div class="card chart-preview background-grey-dark">
             <div class="card-image">
                 <img src="<@s.url '/images/charts/' + chart.getPreviewImageFileName()!"placeholder.png"/>">