make it so I can turn on and off search volume and demand

index.html

@@ -21,16 +21,16 @@
             <canvas id="dataChart"></canvas>
         </div>
         <div class="mt-6 flex justify-center space-x-4">
-            <div class="flex items-center">
-                <div class="w-4 h-4 bg-[#3722D3] rounded-full mr-2"></div>
-                <span class="text-gray-700">Search Volume</span>
-            </div>
-            <div class="flex items-center">
-                <div class="w-4 h-4 bg-[#00FF84] rounded-full mr-2"></div>
-                <span class="text-gray-700">Demand</span>
-            </div>
+            <button id="toggleSearch" class="flex items-center px-4 py-2 bg-[#3722D3] text-white rounded-full shadow hover:bg-[#2919a8] transition">
+                <div class="w-4 h-4 bg-white rounded-full mr-2"></div>
+                <span>Search Volume</span>
+            </button>
+            <button id="toggleDemand" class="flex items-center px-4 py-2 bg-[#00FF84] text-gray-800 rounded-full shadow hover:bg-[#00cc6a] transition">
+                <div class="w-4 h-4 bg-white rounded-full mr-2"></div>
+                <span>Demand</span>
+            </button>
         </div>
-    </div>
+</div>
 
     <script>
         document.addEventListener('DOMContentLoaded', function() {
@@ -139,9 +139,29 @@
                     }
                 }
             };
+            const chart = new Chart(ctx, config);
 
-            new Chart(ctx, config);
-        });
+            // Toggle buttons functionality
+            document.getElementById('toggleSearch').addEventListener('click', function() {
+                const meta = chart.getDatasetMeta(0);
+                meta.hidden = !meta.hidden;
+                chart.update();
+                this.classList.toggle('bg-gray-300');
+                this.classList.toggle('bg-[#3722D3]');
+                this.classList.toggle('text-white');
+                this.classList.toggle('text-gray-800');
+            });
+
+            document.getElementById('toggleDemand').addEventListener('click', function() {
+                const meta = chart.getDatasetMeta(1);
+                meta.hidden = !meta.hidden;
+                chart.update();
+                this.classList.toggle('bg-gray-300');
+                this.classList.toggle('bg-[#00FF84]');
+                this.classList.toggle('text-white');
+                this.classList.toggle('text-gray-800');
+            });
+});
     </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>

style.css

@@ -22,7 +22,11 @@ p {
 	border: 1px solid lightgray;
 	border-radius: 16px;
 }
-
 .card p:last-child {
 	margin-bottom: 0;
 }
+
+button {
+    cursor: pointer;
+    transition: all 0.2s ease;
+}