Add hover effect to bar chart

index.html

@@ -65,9 +65,9 @@
           data-bs-parent="#olympicStatsAccordion">
           <div class="accordion-body">
             <div class="chart-description">
-              This chart shows the distribution of medals won by over genders.
+              This chart shows the distribution of medals won over genders.
             </div>
-            <canvas id="medalDistributionByGenderChart"></canvas>
+            <div id="medalDistributionByGenderChart"></div>
           </div>
         </div>
       </div>

src/ts/charts/stacked-bar-chart.ts

@@ -80,6 +80,7 @@ export class StackedBarChart extends Chart {
             .attr('y', 15)
             .attr('text-anchor', 'middle')
             .style('font-weight', 'bold')
+            .style('user-select', 'none')
             .text('Filter by:');
 
         keys.forEach((key, i) => {
@@ -95,6 +96,7 @@ export class StackedBarChart extends Chart {
 
             legendItem.append('text')
                 .attr('x', 25).attr('y', 15)
+                .style('user-select', 'none')
                 .text(key);
         });
 
@@ -164,17 +166,21 @@ export class StackedBarChart extends Chart {
                 .attr('y', vis.height)
                 .attr('height', 0)
                 .on('mouseover', function (event: any, d: any) {
-                    vis.tooltip.transition().duration(200).style('opacity', .9);
+                    vis.tooltip.style('opacity', .9);
                     vis.tooltip.html(`${d.data.id}<br>${d[1] - d[0]}`)
                         .style('left', (event.pageX - 20) + 'px')
                         .style('top', (event.pageY - 60) + 'px');
+
+                    // Highlight the hovered stack and less opacity for the others
+                    allLayers.selectAll('rect').filter((di: any) => di !== d).style('opacity', 0.3);
                 })
                 .on('mousemove', function (event: any) {
                     vis.tooltip.style('left', (event.pageX - 20) + 'px')
                         .style('top', (event.pageY - 60) + 'px');
                 })
                 .on('mouseout', function () {
-                    vis.tooltip.transition().duration(200).style('opacity', 0);
+                    vis.tooltip.style('opacity', 0);
+                    vis.chart.selectAll('rect').style('opacity', 1);
                 });
 
             enterRects.merge(rects)