search

shutterstock / rickshaw

JavaScript toolkit for creating interactive real-time graphs
https://shutterstock.github.io/rickshaw
MIT License
6.53k stars 939 forks source link

Bar plot tooltip activation area #82

Closed arski closed 12 years ago

arski commented 12 years ago

If you take at http://code.shutterstock.com/rickshaw/examples/extensions.html - select bar plot and zoom in so that you only have a few bars there - try hovering over a bar - you won't see a tooltip unless you hover exactly along the left edge of a bar..

I doubt that this is by design, but even if it is, this is very annoying from usability point of view - surely one would expect the whole bar to trigger the tooltip.

Thanks for looking into this.

Cheers, Martin

arski commented 12 years ago

correction, the tooltip is activated at both left AND right edges, but not between them :o

arski commented 12 years ago

wow, found the bug.. in Rickshaw.Graph.HoverDetail there is a line saying if (e.target.nodeName != 'path' && e.target.nodeName != 'svg') return; however, in bar plots, the bar itself is a rect.. so changing that to if (e.target.nodeName != 'path' && e.target.nodeName != 'svg' && e.target.nodeName != 'rect') return; fixes things.

peterhellberg commented 12 years ago

Thank you, I had the same issue the other day.

arski commented 12 years ago

Actually, I think that e.target.nodeName != 'svg' should be removed from there.. since when you're hovering over the canvas itself, i.e. not one of the bars or areas, you shouldn't be triggering any tooltips (which won't be shown anyway, it just does all the useless processing..)

dchester commented 12 years ago

Thanks!

Actually, I think that e.target.nodeName != 'svg' should be removed from there.

It gets tricky with scatter plots and lines. Since they're such small targets, it's nice now that you don't have to work too hard to see the tooltips.

Whitelisting rect gets us going for now, but it might be nicer to have renderers register relevant elements directly in the future.