How can I lasso points in my scatter plot?

[gibran.shah]

Hello,

Please have a look at this scatter plot: https://jsfiddle.net/xsdmcj64/

It’s a work in progress. Essentially what I’m trying to do is draw a lasso that user can surround a set of points with, something like this: https://lightningchart.com/lightningchart-js-interactive-examples/edit/lcjs-example-0040-customLassoInteraction.html?isList=true.

The JSFiddle above is a bit half baked but the essential points to look at are the drawLasso() method which is the handler for the rangeChanged event and the handleMouseMove() function which is the handler for the mouse move event (when depressed). The drawLasso() was originally going to be where I would attempt to draw a lasso as the user moves their mouse, but it ended up just being something that suppresses the default rangeChange behavior. Right now I’m working in the handleMouseMove() event handler. I’m stuck at this point because I don’t know how to draw a lasso in a CanvasJS environment.

I was hoping to make use of the HTML canvas element which allows for drawing, something like this HighCharts example: https://jsfiddle.net/nkj3qxms/. It uses a canvas to draw it’s scatter plot and then gets the context from the canvas to make use of all it’s drawing tools. But when I try to convert the chart in the CanvasJS JSFiddle link above, the chart disappears.

So the ask is: how can I either 1) incorporate a canvas into the chart so that I can use it’s drawing tools, or 2) make use of some lasso drawing tool that comes with CanvasJS?

Thank you!

[Manoj Mohan]

@gibran-shah,

Sorry, this feature is not available as of now.

—-
Manoj Mohan
Team CanvasJS