How to realize markLine

[zhelizhu]

Feature Proposal

How to realize markLine

Possible Implementation

No response

[stockiNail]

@zhelizhu if I understood well your need, I think you could have a look to https://github.com/chartjs/chartjs-plugin-annotation

[zhelizhu]

thank you,Then there is a problem How to get y values from the cursor position

[stockiNail]

Then there is a problem How to get y values from the cursor position

AFA I understood this is another different topic.

Having the chart instance, you can get the scale instance you need and get the value with the following method (see API docs):

https://www.chartjs.org/docs/latest/api/classes/Scale.html#getvalueforpixel

[LeeLenaleee]

How to get y values from the cursor position

The onHover and event plugin hooks all have the event in which the x and y coordinate of the cursor are

[zhelizhu]

Why when I press the mouse onHover events don't perform, I want to use the mouse to draw a line

[stockiNail]

@zhelizhu to do that, I think you need a plugin.

https://codepen.io/stockinail/pen/podKjGe

The above sample is very simple but it could be a starting point for you.

First click start drawing.
Second click stop drawing.
ALT + click remove the line

[zhelizhu]

[zhelizhu]

OnHover change datasets change line

[LeeLenaleee]

You can make a custom plugin, very similar as the one I made in #9844. Instead you check if you hover over any of the _gridLineItems on the scale, if so take that index get the y value store it in an array and after or directly update the correct element

[stockiNail]

maybe https://github.com/chrispahm/chartjs-plugin-dragdata can do what @zhelizhu wants

[zhelizhu]

Ok, thank you

[LeeLenaleee]

maybe https://github.com/chrispahm/chartjs-plugin-dragdata can do what @zhelizhu wants

Also thought about that but afaik you can only drag single points and not just move your mouse over and have the points snap to that location

[stockiNail]

@zhelizhu wrote

I want to do is press and move the mouse to change dataset , If my mouseup will not change dataset

For this reason I thought the dragdata plugin could address the use case.

Anyway, I have changed the codepen using dragdata (I was curious and maybe could help). https://codepen.io/stockinail/pen/podKjGe

[zhelizhu]

You can take a look at this https://codepen.io/zhelizhu/pen/rNYPWqG Can you solve the problem of the mouse press onHover don't perform