Draggable StripLines in Candlestick Chart without JQuery

[mnash]

I’m trying to create a candlestick chart with multiple striplines, which I have done. I’m using Angular, with Bootstrap and JQuery3.4.1 Slim.

My issue is with making the striplines draggable. I found this example, https://jsfiddle.net/canvasjs/ef097412/, which works nicely and if I copy the exact code into my index.html it also works. It’s when I try to remove the JQuery syntax and revert back to basic HTML/Typescript that I seem to have issues. For example how do I calculate the offsets when I only have the event property? It also seems that the stripLines function .get(“bounds”) doesn’t exist or returns null.

Do you think you could create an example the same as https://jsfiddle.net/canvasjs/ef097412/ but without using JQuery please? That would really help me. Thank you in advance.

[Indranil]

@mnash,

Please take a look at this updated JSFiddle for the same example without jQuery(plain JavaScript).

___________
Indranil Deo
Team CanvasJS

[mnash]

Thank you – that’s really useful.

One further question please, I have added ability to click the chart to add a stripline manually. This automatically creates an area and adds another stripline some distance away, but sometimes this auto-calculated stripline is off the scale of the chart. Is there a way to trigger the chart to re-calculate the x-axis scale?

[Indranil]

@mnash,

Can you kindly create a JSFiddle reproducing the issue you are facing and share it with us so that we can look into your code, understand the scenario better, and help you out?

___________
Indranil Deo
Team CanvasJS