JavaScript Custom Time Selection Chart

This example showcases the creation of a custom user interaction.

Any custom interaction can be implemented with different event subscription methods.
In this example, ChartXY.addEventListener 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!