PureChart / purechart

Fully customizable HTML/CSS charts for Ruby on Rails 📊
https://docs.purechart.org
MIT License
80 stars 11 forks source link

Display Tooltip When Hovering Over Point in Dot Plot #37

Open GeorgeBerdovskiy opened 3 months ago

GeorgeBerdovskiy commented 3 months ago

Background

Due to PR #34, PureChart finally supports dot plots and line graphs! However, they are too simple to be used practically. While other contributors work on rendering the axes (#35, #36) we want to simultaneously add some fancy effects and interactivity.

Goal

Add a tooltip that appears when hovering over a point on the plot. This tooltip should use the same animation and styling as the lollipop chart tooltips - check out the HTML and CSS for those in app/views. Use the picture below for guidance.

image

You will need to get creative! Intuitively, you'll want to draw a separate tooltip for every single point and generate some CSS to display each one when hovering over its respective point. While this isn't easy, it's 100% doable with some elbow grease. Good luck 🚀

GeorgeBerdovskiy commented 3 months ago

Quick note - I said "dot plot" in the title while the picture clearly has a line graph. It doesn't really matter which one you choose to enhance with tooltips because we'll end up copying your code to the other one anyways. But please pick one to make things easy!

Otherwise whenever you make a change for the dot plot, you'll need to make that same change for the line plot, and vice-versa... big headache!