naver / billboard.js

📊 Re-usable, easy interface JavaScript chart library based on D3.js
https://naver.github.io/billboard.js/
MIT License
5.83k stars 351 forks source link

Show tooltip on mouseover x Axis #2660

Open Edll opened 2 years ago

Edll commented 2 years ago

Hello I would like to show the tooltip when a user moves the mouse left and right on the chart. Unfortunately this only works on my TimeSeries chart when I move the mouse directly over the data point.

Bildschirmfoto_2022-04-27_13-13-01 Bildschirmfoto_2022-04-27_13-13-20

Is it possible to get this behaviour? In this example it seems like it would work.

https://naver.github.io/billboard.js/demo/#Chart.TimeseriesChart

I'm not sure what determines when the tooltip is displayed in this example.I have a custom function for the tick format on x axis. If I replace this with a constant, the behaviour does not change. Is it perhaps a problem that I am resolving multiple x data via xs?

Thank you for any advice

netil commented 2 years ago

show the tooltip when a user moves the mouse left and right on the chart

Hi @Edll, can you explain more specific about this?

Edll commented 2 years ago

I will try.

At the moment it is so that my chart tooltip behaves like this:

https://naver.github.io/billboard.js/demo/#Tooltip.TooltipGrouping

I have to move the mouse over a data point for the tooltip to appear.

However, I need the tooltip to appear when I move the mouse on the X axis. Like here.

https://naver.github.io/billboard.js/demo/#Tooltip.TooltipTemplate

grafik

So when the mouse reaches the next point on the X axis where a data point is located the tooltip is displayed. If I understand correctly, the next data point here is determined by a circle around the data point.

https://github.com/naver/billboard.js/blob/50ed64042fd5680f514f24598e7075eba3fe2186/src/ChartInternal/data/data.ts#L767

So I assume that the behaviour I need cannot be achieved with the standard scope?

Thanks for any help

netil commented 2 years ago

@Edll, when the option tooltip.grouped=false is set, tooltip will be displayed when the mouse is hovered on each data point. If you want tooltip to appear hovering on x axis range area, tooltip.grouped=true should be set.

tooltip: {
    grouped: true
}
Edll commented 2 years ago

Hello

this does not seem to work for me.

Can it be that this does not work if I use the xs at the same time?

netil commented 2 years ago

@Edll, could you provide the full generation code?

adamfagerstrom commented 1 year ago

@netil Posting in this thread when it's still open, but i think what the creator of the thread means could be seen in the examples for 'Multiple XY Line Chart', is there any limitations for the tooltip when multiple x-axes are used?

peetry214 commented 1 year ago

@netil Adam above me is correct. This issue can be seen by comparing the functionality of a regular line chart vs a multiple XY line chart. You will notice that the multiple XY line chart requires you to direct your cursor directly on each data point in order for the tooltip to display.

I also tried the "grouped: true" suggestion without any change.

Edit:

@Edll I found a workaround in a thread involving c3.js. It appears that setting the point sensitivity higher, somewhat fixes the issue.

point: { sensitivity: 1000 }