Project
Time to bring your energy dashboard to life. Go back to the dashboard you built in the responsiveness module and add hover effects to at least 2 charts.
Highlight the active element, dim the rest, and display a value on hover. Pick the right strategy for each chart.
Congrats!
You now know four different strategies to add hover effects to your charts: from simple CSS pseudo-classes, to descendant selectors, to toggling CSS classes in JavaScript, all the way to React internal state.
Each strategy has its own trade-offs between simplicity, design flexibility, and performance. You now have the tools to pick the right one for any situation.
Time to put it all into practice. Let's go back to your energy dashboard and make it interactive!
Your mission
Remember the responsive energy dashboard you built in the previous module? It looked great, but it was completely static. Hovering over a bar or a line did nothing.
Your project is to iterate on that dashboard and add hover effects to your charts. The goal is to make them feel alive and informative:
- Highlight the hovered element (brighter color, thicker stroke, larger radius...)
- Dim the other elements so the hovered one stands out
- Show a label or value next to the hovered element (a full tooltip comes in the next module!)
Pick at least 2 charts from your dashboard and add meaningful hover effects to them. Use whichever strategy fits best — you don't have to use the same one everywhere.
Oh no! 😱
This lesson isn’t available just yet.
Take a look at the status badges next to each lesson in the sidebar to see when it’s coming out.
Thanks for your patience! 🙏