diff --git a/index.html b/index.html
index 09d8f08..e6856fb 100644
--- a/index.html
+++ b/index.html
@@ -448,16 +448,18 @@ <h1 id="home-button" data-link="/">bam2.iobio</h1>
 
       const broker_ = getDataBroker(broker);
       broker_.addEventListener('mapped-reads-from-index-file', (event) => {
+        const chart = document.querySelector('#mapped-reads-chart');
         // Determine the number of mapped reads and unmapped reads from the index file
         if (event.detail.mappedReads && event.detail.unmappedReads) {
           const val = event.detail.mappedReads;
           const total = event.detail.mappedReads + event.detail.unmappedReads;
           const data = [ val, total - val ];
-
-          const chart = document.querySelector('#mapped-reads-chart');
           chart.update(data);
           chart.style.setProperty('--iobio-data-color', 'rgb(9,176,135)');
           chart.style.setProperty('--iobio-data-color-secondary', 'rgba(9,176,135,0.5)');
+        } else {
+          chart.style.setProperty('--iobio-data-color', 'unset');
+          chart.style.setProperty('--iobio-data-color-secondary', 'unset');
         }
       });
     </script>