JavaScript Custom Time 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.onSeriesBackgroundMouseDrag is used to hook on to the event when user drags with mouse inside the series area.
An Axis band is used to highlight the selected time range, and after user stops dragging the Line series is colored so that selected points are focused whereas other points are "unfocused".

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!