Skip to main content

Changing states of component through variable blocks nested component interaction.

  • April 9, 2025
  • 0 replies
  • 36 views
Mads_Emmertsen2

Hi, i tried posting this in  “Ask the community” but with no response.
So I’m trying here as this might be unintended.

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?

This topic has been closed for replies.
Terms & ConditionsAccessibility statement