Fix hover effect in bars

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

@@ -118,9 +118,8 @@ export class StackedBarChart extends Chart {
         const index = this.activeKeys.indexOf(medalType);
         if (index != -1)
             this.activeKeys.splice(index, 1);
-        else {
+        else
             this.activeKeys.push(medalType);
-        }
 
         if (this.activeKeys.length === 0) this.activeKeys = keys;  // Reset if none selected
         this.updateVis();
@@ -173,7 +172,9 @@ export class StackedBarChart extends Chart {
                         .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);
+                    vis.chart.selectAll('rect').filter((di: any) => di !== d).style('opacity', 0.3);
+                    vis.legend.selectAll('rect')
+                        .style('opacity', (_, index) => vis.getLegendItemOpacity(index));
                 })
                 .on('mousemove', function (event: any) {
                     vis.tooltip.style('left', (event.pageX - 20) + 'px')