https://jsfiddle.net/u72o6670/1/
As you can see, the graph is working just fine as long as you are hovering over the legend but gets messy as soon as you click on a brand name.
The problem: the mouseover/mouseout interactions are overlapping the click interactions.
I don't know how to put on hold (to freeze) specific mouseover/mouseout interactions when, and as long as, a click function is triggered.
For example, in this graph:
- A polygonal shape is displayed when it's corresponding name is hovered over in the legend. I'd like to undo this behavior as long as a button in the legend is selected (clicked).
- All the percentages are displayed as well on mouseover. I'd like to undo this behavior as long as a button in the legend is selected (clicked).
- All the polygonal shapes appear on mouseout. I'd like to undo this behavior as long as a button in the legend is selected (clicked).
Also, (regarding the toggle function):
- The grid disappears as soon as a button is unclicked. I'd like to have the grid displayed as long as one of the button at least in the legend is selected (clicked).
It's been two weeks i'm on this graph now, i'm literally begging for help. If anyone has an idea how to fix these interactions...