diff --git a/client/script.js b/client/script.js
index f2a0423dd..5c5e96540 100644
--- a/client/script.js
+++ b/client/script.js
@@ -7,7 +7,6 @@ const clientId = 'd9827efb2c79463b92becb457a635a04';
 const clientSecret = '6f2f0a36046f4f21980873a48c7bdab0';
 // --------------------- API dialogue functions ---------------------
 
-
 function getRandomIntInclusive(min, max) {
   const newMin = Math.ceil(min);
   const newMax = Math.floor(max);
@@ -70,7 +69,6 @@ async function getTracks(token, tracksEndPoint, limit) {
   return data;
 }
 
-
 // --------------------- Data handling functions ---------------------
 
 async function initSongs(plalylistSg, genre, token) {
@@ -81,7 +79,6 @@ async function initSongs(plalylistSg, genre, token) {
   return tracks.items.map((obj) => ({ ...obj, gen: genre }));
 }
 
-
 function songsToArray(songs) {
   console.log(songs);
   const array = [];
@@ -98,7 +95,6 @@ function songsToArray(songs) {
   // console.log(array)
 }
 
-
 function songLenArray(list) {
   const array = [];
   list.forEach((element) => {
@@ -163,11 +159,9 @@ function injectImages(list) {
   });
 }
 
-
 function initChart(songs, songlength) {
   const ctx = document.getElementById('myChart');
 
-
   // eslint-disable-next-line no-new
   const m_chart = new Chart(ctx, {
     type: 'bar',
@@ -176,7 +170,7 @@ function initChart(songs, songlength) {
       labels: songs,
       datasets: [
         {
-          label: 'Length of the song',
+          label: 'Length of the song(ms)',
           data: songlength,
           borderWidth: 4
         }
@@ -229,7 +223,6 @@ async function init() {
     );
     const playlist = await getPlaylistsByGenre(token, genreId, 1);
 
-
     // store the track endpoint of the playlist
     playlistEndpoint = `${playlist[0].href}/tracks`;
     console.log(playlistEndpoint);
@@ -248,7 +241,6 @@ async function init() {
     const sample = getRandomTen(songArray);
     const sample_name = songNameArray(sample);
     const sample_len = songLenArray(sample);
-    console.log(sample);
     injectHTML(sample);
     injectImages(sample);
     document.getElementById('GeneratedContents').style.display = 'flex';
@@ -257,7 +249,23 @@ async function init() {
     
     myChart.destroy();
     myChart = initChart(sample_name, sample_len);
+
+    filter.addEventListener('click', (z) => {
+      z.preventDefault();
+      const filterData = myChart.data.datasets[0].data.filter((value) => value > 180000);
+
+      const filterLabels = [];
+      let i = 0;
+      for (i; i < filterData.length; i += 1) {
+        const result = myChart.data.datasets[0].data.indexOf(filterData[i]);
+        const label = myChart.data.labels[result];
+        filterLabels.push(label);
+      }
+      myChart.data.datasets[0].data = filterData;
+      myChart.data.labels = filterLabels;
+      myChart.update();
+    });
   });
 }
 
-document.addEventListener('DOMContentLoaded', async () => init());
+document.addEventListener('DOMContentLoaded', async () => init());
\ No newline at end of file
diff --git a/index.html b/index.html
index b5ed94d1c..f6702056b 100644
--- a/index.html
+++ b/index.html
@@ -31,6 +31,7 @@ <h1> New Horizons </h1>
                 <div class="chart_container">
                     <canvas id="myChart"></canvas>
                 </div>
+                <button type="button", id="filter">Filter Length > 180000ms</button>
             </div>
                
         </div>