mmath
Posts: 10
Joined: Thu May 27, 2021 2:44 pm

prevent drag past start/end of another bar

Hi,

I would like to prevent the user from dragging, for example, the end of one bar past the start of the next bar or vice versa (start over end). Net result would be that no two bars in the same category ever overlap in time.

My series dragDrop options are currently

Code: Select all

        dragDrop: {
            draggableX: true,
            draggableY: false, // cannot move between categories
            dragPrecisionX: 1000 * 60 * 60 * 24  // Snap to day
         },

Thanks for the help. I am loving your Gantt chart with Highcharts Vue!
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: prevent drag past start/end of another bar

Hi,
Welcome to our forum and thanks for contacting us with your question!

There are no options in our API to prevent points collision.
Of course, you can write an individual implementation that checks for collisions when uploading, it seems to need more time for this.

Here is a topic describing collision logic for dataLabels:
viewtopic.php?t=40360#p139905

Best regards.
Sebastian Hajdus
Highcharts Developer
mmath
Posts: 10
Joined: Thu May 27, 2021 2:44 pm

Re: prevent drag past start/end of another bar

Thanks for the link. That gives me some ideas. I really need the drag to "snap back" when dragged over another bar, so I think I will have to do something in the callback for the drop event to make sure the new point is good and snap it back to an acceptable spot if not.

Many thanks.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: prevent drag past start/end of another bar

Hi,
You can reach me any time if you need help with this example.

Regards.
Sebastian Hajdus
Highcharts Developer
mmath
Posts: 10
Joined: Thu May 27, 2021 2:44 pm

Re: prevent drag past start/end of another bar

Hi!
I'm finally back to working on this. I wrote my callback function to check for overlapping series data points. It is firing as expected on drop. However, when I find an overlap and wish to stop the drop, I return 'false' as the API doc indicates. Yet, this does not stop the default drop behavior of highcharts. V9.1.2 API doc says, 'To stop the default drop action, return false.'

I was expecting highcharts gantt to return the data point to the original start/end location. For example, if the point originally started 7/1/2021 and ended 7/5/2021, and was dropped at start 7/2/2021 and end 7/6/2021, I was expecting that returning false would result in the bar being at the original start and end. Can you clarify, please?

A secondary thought that I had was whether the series.gantt.dropDrop.guidebox.liveRedraw has anything to do with this. I have not set a value for this, and the API doc indicated that the value will be defaulted to "true" which the API doc says will update points as they are dragged.

https://api.highcharts.com/gantt/series ... int.events

Thanks for the guidance.
mmath
Posts: 10
Joined: Thu May 27, 2021 2:44 pm

Re: prevent drag past start/end of another bar

I found the solution. If I add series.dragDrop.liveRedraw=false to my chartOptions, then returning false from the drop callback works to abort the drop.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: prevent drag past start/end of another bar

Hi,
I'm glad that you found a solution and thanks for share it with us :)

Best regards!
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”