Clickable Chart Legends

Hey Guys,

Wondering if we can have a selectable legend where we can click on a legend result and it redirects us to a filtered value list of the legend item selected


Hi @Yasin_Hassanien, I had a similar need, so +1.

I achieved a similar user experience by adding an inline list below. The list or compact style would have been redundant, so I opted for tiles display.

1 Like

I did something similar using a button to view the details of the chart. It links to an inline list of the results.

Having the legend clickable would be ideal though!


What do you mean with adding a button to see the details of the chart? A button to another screen?

Would you mind sending a screenshot of your screen or screens if there’s a flow so we can see the UX?

Exactly – link to screen action on a button.



I see. Very nice. Thanks.


Hey, Many of my app users require this feature to be added.
In graphs, Want to have clickable legends to attach a view detail screen.

See Example:
I’ve graph of leads assigned to managers.

And to show specific list of status, I’ve to create another inline list to show this.
Screenshot 2021-06-07 at 12.15.49 AM

Please help me if any solution or CSS tricks.


Hi @kyleheney, @nathanaelb, @Purvang_Joshi and @Yasin_Hassanien,
Did you manage to find a workaround to generate these clickable legends (what some might call “exploding legends”)?

No, legends are still static and you will require an inline list below it to create a link to each specific details screen.

But how does the inline list update/change based on the graph?
Is there another choice component?

It would just be an inline list that uses the same data that your chart is using.

I suppose if the legend colors in your chart are static then you could hide the legend then rebuild it using an inline list below. The items in the list would then be clickable…