aadu
Posts: 30
Joined: Fri Sep 30, 2022 2:18 pm

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

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
Posts: 1084
Joined: Tue Jan 24, 2023 11:14 am

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

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
Jakub
Highcharts Developer
aadu
Posts: 30
Joined: Fri Sep 30, 2022 2:18 pm

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

jakub.j wrote: Mon Sep 18, 2023 3:22 pm 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!

Return to “Highcharts Stock”