Allow users to click and drag on datetime X axis to log start and end time

[aadu]

I am trying to allow my users to click and drag on my datetime x axis to trigger an event which will console.log the start and end time they clicked and dragged to, but I can't seem to get it to work. I am assuming I need to use Highstock rather than native Highcharts, as it reminds me of functionality the navigator provides.

I am also using pointStart: Date.UTC() and pointIntervalUnit: 'month' to simplify my code, but it is possible these are causing issues with what I am trying to do?

CodePen: https://codepen.io/aaduane/pen/ExGwOBz

[jakub.j]

Thanks for contacting us with your question!

You can enable zooming by setting chart.zooming.type to 'x'. Than on chart.events.selection you can prevent event execution with e.preventDefault() and use data needed from the xAxis object, see demo:

Demo: https://jsfiddle.net/BlackLabel/1osvuyck/

FIY: You don't need Highstock to make it work.

Let me know if that was what you were looking for!
Best regards
Jakub

[aadu]

Thanks for contacting us with your question!

You can enable zooming by setting chart.zooming.type to 'x'. Than on chart.events.selection you can prevent event execution with e.preventDefault() and use data needed from the xAxis object, see demo:

Demo: https://jsfiddle.net/BlackLabel/1osvuyck/

FIY: You don't need Highstock to make it work.

Let me know if that was what you were looking for!
Best regards
Jakub

Ah yes, that works, thanks!