JavaScript Lasso Selection Chart

This example showcases the creation of a custom user interaction.

By default, dragging left mouse inside the series area, a zoom/fit interaction is activated.
This default interaction can be disabled:

chart
    // Disable default chart interactions with left mouse button.
    .setMouseInteractionRectangleFit(false)
    .setMouseInteractionRectangleZoom(false)

And any custom interaction can be implemented with different event subscription methods.
In this example, ChartXY.onSeriesBackgroundMouseClick is used to hook on to the event when user clicks mouse button inside the series area.
PolygonSeries are used to draw a lasso selection as the user clicks with mouse on the chart.
Finally, after user clicks on any existing polygon point to close it, the data points that are inside the lasso are solved and highlighted using edit data API.

This idea of custom interactions can be extended to any application specific dynamic interaction, like deleting selected points, displaying them in a separate chart or moving them - imagination is the limit!