Line mark tooltips are not displaying x/y values

It seems like the only supported data attributes name, index and color.

import numpy as np
from bqplot import LinearScale, Tooltip, Axis, Figure, Lines

x_sc = LinearScale()
y_sc = LinearScale()

x_data = np.arange(100)
y_data = 100 + np.random.standard_normal(100).cumsum()

def_tt = Tooltip(fields=['x', 'y'], formats=['', '.2f'], labels=['x', 'y'])
line_chart = Lines(x=x_data, y=y_data, scales= {'x': x_sc, 'y': y_sc}, 
                       tooltip=def_tt, display_legend=True, labels=["line 1", "line 2", "line 3"] )

ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation='vertical', tick_format='0.2f')

Figure(marks=[line_chart], axes=[ax_x, ax_y])

[ibdafna]

Thanks both for looking into this! Apologies in advance for the short reply as I’m on the road.

Martin’s idea is good and makes sense, but as you correctly note is a lot of work. Another idea is to try to make intelligent use of the Scatter mark in conjunction with the line mark (make the Scatter points have display:hidden properties), as they are individual marks. On its own it still won’t be enough as you will need to hover exactly on the mark for the tooltip to render. So that approach will likely require augmenting with voronoi or similar.

All in all, if you think this is a lot of work for little return (and I agree) then let’s focus on lower hanging fruit 😺

On Thu, 11 Mar 2021, 04:28 Mariana Meireles, @.***> wrote:

Just to keep the context all in one place. This was Martin’s input on how to solve this 😃

You need to use the scales to turn your “mouse coordinates” into “data coordinates” You can do this by using the invert method on the scale widget: https://github.com/bqplot/bqplot/blob/master/js/src/LinearScale.ts#L55 Which makes use of the d3 invert method: https://github.com/d3/d3-scale#continuous_invert Now this will be easy for the x coordinate, because the mouse’s x coordinate is the same as the line’s x coordinate. But I suppose you need to find a way to get the line’s y coordinate given the mouse coordinate. this might be possible using the d3.lineAPI, but I am not sure what I am saying is true only if we go for this solution: #1237 https://github.com/bqplot/bqplot/issues/1237 otherwise, if you just add an hover event on the line itself, then the x, y coordinates of the mouse is the same as the lines and you can directly use the scales to know the data at this position. It might be easier for you to start with a simple hover event on the line for now. And implement #1237 https://github.com/bqplot/bqplot/issues/1237 later

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/bqplot/bqplot/issues/1238#issuecomment-796701228, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFZICWOUREUDYGU7FA6FC63TDCZO5ANCNFSM4TX4HSTQ .

[marimeireles]

Just to keep the context all in one place. This was Martin’s input on how to solve this 😃

You need to use the scales to turn your “mouse coordinates” into “data coordinates” You can do this by using the invert method on the scale widget: https://github.com/bqplot/bqplot/blob/master/js/src/LinearScale.ts#L55 Which makes use of the d3 invert method: https://github.com/d3/d3-scale#continuous_invert Now this will be easy for the x coordinate, because the mouse’s x coordinate is the same as the line’s x coordinate. But I suppose you need to find a way to get the line’s y coordinate given the mouse coordinate. this might be possible using the d3.lineAPI, but I am not sure what I am saying is true only if we go for this solution: bqplot/bqplot#1237 otherwise, if you just add an hover event on the line itself, then the x, y coordinates of the mouse is the same as the lines and you can directly use the scales to know the data at this position. It might be easier for you to start with a simple hover event on the line for now. And implement bqplot/bqplot#1237 later