Skip to main content
Question

Changing states of component through variable blocks nested component interaction.

Mads_Emmertsen2

Hi community, 

I have an issue that I’m having a hard time finding a solution to.

I’m creating a graph component for our design system and I want the user to be able to hover on data point to get more information. At the same time I want it to be possible to hover on a legend category and have the corresponding line highlighted.

I have set up a normal variant change on hover for the data points.

Interaction for the data point component



The issue occurs when I apply a variable change on hover on the legends category, which changes the line from state “default” to “hovered”. 

GraphState variable used to change the variant of the line + data point from “default” to hovered”

 

Interaction for the legend category (set on the graph component)

 

This interaction works fine but appears to block the data point hover interaction as shown in the gif below:

Gif showing the issue. The first frame is an instance of the graph component with the variable interaction. The second frame is the graph line component which doesn’t have the variable interaction applied and shows the intended interaction with the data points.


Has anyone encountered this issue and found a fix/work around?

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings