can we add tooltips on horizontal lines or show their label on mouse hover

108 views
Skip to first unread message

Pragati Yadav

unread,
May 31, 2021, 5:46:40 AM5/31/21
to Chart.js User Discussion
I am able to add the horizontal line on chart using annotations and able to put mouse hover action also for them but I want to show their values on hover so lines needs to be fixed only their label should be visible on mouse hover or as tooltip will also work.
Is their any option for the same in chart js?
attached is the image for the chart which i created and added horizontal lines in same.
refe.PNG

juls.di...@gmail.com

unread,
May 31, 2021, 6:22:50 AM5/31/21
to Chart.js User Discussion
Can you provide some kind of code or working example (CodePen, stackblitz, jsbin  etc.)

Pragati Yadav

unread,
Jun 1, 2021, 12:21:13 PM6/1/21
to Chart.js User Discussion


you can refer following sample:

it is showing horizontal line on mouse hover but I want the lines to be fixed but the level "threshold" to be shown on hover.

juls.di...@gmail.com

unread,
Jun 2, 2021, 7:26:28 AM6/2/21
to Chart.js User Discussion
By "fixed" you mean to be visible all the time?

Pragati Yadav

unread,
Jun 2, 2021, 9:39:51 AM6/2/21
to Chart.js User Discussion
Yes, only their value i want to see on hover or as tooltips

juls.di...@gmail.com

unread,
Jun 3, 2021, 3:01:49 AM6/3/21
to Chart.js User Discussion
If you do not want to show the lines, you can make them transperent "borderColor: "#00000000"," in "function addLine(value) {"

example here

Regards,
Julian

juls.di...@gmail.com

unread,
Jun 3, 2021, 4:59:20 AM6/3/21
to Chart.js User Discussion
Or maybe you add the lines on startup and then play with the visibility on the label of the annotation on "hoverin" and "hoverout" events.
A similar example is here

Regards,
Julian
Reply all
Reply to author
Forward
0 new messages