Learn how to enhance Dash dashboards by defining custom interactions that go beyond basic dropdowns and sliders. This article demonstrates how to use hover functionality to trigger dynamic updates that display detailed information from your data set.
Key Insights
- Dash allows users to define nearly any user interface element—such as sliders, dropdowns, radio buttons, and checkboxes—as an input that can trigger updates elsewhere in the dashboard.
- In addition to updating graphs or figures, Dash can dynamically change any part of the page, such as displaying detailed data in a new section based on user interaction.
- Noble Desktop’s example shows how hovering over a point in a scatter plot can update a separate section of the dashboard to display extended information about that data point.
This lesson is a preview from our Data Analytics Certificate Online (includes software). Enroll in this course for detailed lessons, live instructor support, and project-based training.
One of the wonderful things in dash dashboards is how we can really make anything be interactive. We can define anything as an input that then produces some result. You know, so far we've done when you interact with this element, this drop down menu, you get a different figure down here.
And if you interact with the slider, you get a different figure down there. So, we have all kinds of different things that we can define as some way the user gives input, sliders, drop downs, any number of things, radio buttons, check buttons. However, however, we also can vary exactly what it is we're outputting to.
Right now we're outputting to this graph down here, but we can define another, a new part of the page and say put some output there. And the example we're going to do today is if we are hovering over one of these scatter plots, that's something the user is interacting with. They are making some change in the page by putting the cursor over certain elements.
And we can respond to that. In this case, the default scatter plot thing is to put a few of the values out here. But we can also put any values we want from the original data maybe down here.
It will be down here. Not just maybe. We can make a little section that's extra information about each car and we'll define it as when the user hovers over one of these elements.
We will put more information about that element, that car, down here. This will be the last thing we do for our Dash dashboards, this interactivity section. And I hope you enjoy it.