diff --git a/src/main/resources/static/css/charts.css b/src/main/resources/static/css/charts.css
index 4292263f30bd9f3c2ec06fdaf638b69ea932d7a8..d23b28886551dd47519acece81e60f0fad894606 100644
--- a/src/main/resources/static/css/charts.css
+++ b/src/main/resources/static/css/charts.css
@@ -55,6 +55,10 @@
     background-color: var(--color-blue-baby) !important;
 }
 
+.chart-preview.active .card-action {
+    background-color: var(--color-red-light) !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 9158ff6f66648623b182996da7e29cb88f4dcee9..b91d2ca5aa53e1a56359b7f74c79230aa7a35ef7 100644
--- a/src/main/resources/static/js/charts.js
+++ b/src/main/resources/static/js/charts.js
@@ -99,6 +99,13 @@ $(document).ready(function()
         toggleChartTypeButtons('button-group-type', this);
         filterChartPreviews();
     });
+
+    $('.chart-preview').click(function()
+    {
+        unsetActiveChartPreview();
+
+        this.classList.toggle('active', true);
+    });
 });
 
 function createDatePickerEnd(minDate, selectedDate)
@@ -267,4 +274,15 @@ function filterChartPreviews()
     {
         chartPreviews[i].style.display = '';
     }
-}
\ No newline at end of file
+
+    unsetActiveChartPreview();
+}
+
+function unsetActiveChartPreview()
+{
+    let allChartPreviews = document.getElementsByClassName('chart-preview');
+    for(let i = 0; i < allChartPreviews.length; i++)
+    {
+        allChartPreviews[i].classList.toggle('active', false);
+    }
+}