Dragging a line

[rfreitas]

Hello,

I have a requirement that I need some help with.

I have a scatter graph that has a second series which is a 2 point line. They want to be able to move the entire line around (moving both points at the same time) and keep the slope fixed. They also want to be able to make the line longer/shorter. Is there anyway to do that?

Seems like one point would have to be fixed to make the line longer and shorter. And if they want to move the entire line at once, both points would need to move. Is there a way to accomplish this?

Thanks!

[magdalena]

Hello,

Thank you for contacting us with your question!

The best solution, in this case, will be using the Draggable X range series.

Demo:
https://jsfiddle.net/BlackLabel/g3xef4or/

API Reference:
https://api.highcharts.com/highcharts/s ... e.dragDrop

Feel free to ask any further questions!
Regards!

[rfreitas]

Thanks for the demo. Is there a way to put a 2 point line on an existing scatter graph, and then make it where you can move that line around. But the line is not going to be parallel to the x axis. So I assume, we can't use xrange, like your demo.

Similar to your example, but use points (2,1) and (8,2) for the line. So now the line is not parallel to the X axis. Is there a way that you can move the location of that line but the slope and length stays the same?

Thanks!

[magdalena]

Hi,

You can try to rotate xRange (demo: https://jsfiddle.net/BlackLabel/uw01epd8/) but a better option would be to generate a line using Highcharts. SVGRenderer.

Here is an example of a draggable svg you can base on:

Demo:
http://jsfiddle.net/BlackLabel/w68pLmfj/

API:
https://api.highcharts.com/class-refere ... VGRenderer

Regards!