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

6 Likes

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!

2 Likes

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.

image

2 Likes

I see. Very nice. Thanks.

2 Likes

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.

2 Likes

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”)?
Thanks

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…

Could we refresh this request because i have a client that want a certain feature? Let me explain:

The Problem: Currently, the Chart components in Glide are purely visual. If a user sees an outlier or a specific data point they want to investigate, they cannot click on it to take action. Instead, they have to navigate to a separate collection or list and search for that specific item manually, which creates friction in the user experience.

Proposed Solution: I would like to see “Actions” enabled for Chart components. Similar to how Collections work, clicking a specific bar in a Bar Chart, a slice in a Pie Chart, or a point in a Line Chart should trigger an action (e.g., “Show Detail Screen” or “Compose Action”) for the underlying row that the data point represents.

Use Case: I am building an insurance management app for a fleet of cars. I have a Bar Chart showing “Total Payouts per Vehicle.” If I see a car with a very high bar (high payouts), I want to be able to click directly on that bar to open the Details View for that specific car to see its history and photos.

Why this matters: This would turn charts from static reporting tools into interactive dashboards, making data-driven navigation much faster and more intuitive for end-users.