1. Learn
    2. /
  2. Courses
    3. /
  3. Building Dashboards with Dash and Plotly

Exercise

Generate key stats on hover

After a recent demonstration of your work to a manager in the e-commerce company, you have received a request to create a dashboard for this stakeholder. Having too many visualizations and too much text is absolutely not allowed.

Instead, they want the dashboard to be highly interactive. They have requested a scatter plot that, when hovered over, will provide some additional key stats in a text box to the right. This should change when hovering over a new point on the scatter plot.

Instructions

100 XP
  • Add the country column to the scatter plot's custom_data below line 11 so it will show up in the hoverData property of the figure and can be used in a callback.
  • Create a callback below line 40 that will be triggered by hovering over the scatter plot.
  • Extract the custom data you included in the scatter plot's hover data below line 50.
  • Use the aggregated variables created for you on lines 54 (top_major_cat) and 55 (top_sales_month) to create a list of text data below line 57 to be used in the output of the callback.