yu_takahasi
Posts: 8
Joined: Thu Sep 15, 2016 12:31 am

Overlap and disappear problems in Interactive Gantt Chart

Hi,

I'm trying to implement an 'Interactive Gantt Chart' into my web app,
and now I have two problems.
https://www.highcharts.com/demo/gantt/interactive-gantt


1) I'd like to avoid collisions between bars.
I mean, I don't want to allow bars horizontally overlapped.
I found the following article, but I cannot figure out how to avoid the collisions using codes.
viewtopic.php?t=46638
If possible, can I get some examples?

2) When I adjust both the beginning and ending of a bar to the same date and time,
the bar seems to be disappeared and no longer available.
How can I avoid this problem? I mean, there is a way to recover the disappeared bar?

Thanks for the help.
yu_takahasi
Posts: 8
Joined: Thu Sep 15, 2016 12:31 am

Re: Overlap and disappear problems in Interactive Gantt Chart

I think I have found the solution for avoiding overlaps.

Using plotOptions.series.point.events.drop event,
I can implement what I want.

in the drop event,
returning "false" cancels the drop action.

I'm not sure this is the best way,
but here is my code:

Code: Select all

plotOptions: {
     series: {
         point: {
             events: {
                 drop: function (e) {
                     // you can cancel drop actions when return false in this function.

                     // information on new point.
                     const start = e.newPoint.start
                     const end = e.newPoint.end
                     const id = e.newPointId
                     const y = e.origin.points[e.newPointId].y

                     // get xAxis option of Highchats.(I am using vue.js + Highcharts-vue.)
                     const xAxis = vueComponent.chartOptions.xAxis;

                     // cancel drop actions when the new point is out of gantt chart range.
                     if (
                         || end <= xAxis.min
                         || xAxis.max <= start ) return false

                     // get whole series of Highcharts
                     const seriesArray = vueComponent.chartOptions.series

                     let canDrop = true;

                     seriesArray.every((series) => {

                         series.data.every((item) => {

                             // cancel drop actions when

                             // - start date is between the specific bar 
                             if (item.start <= start && start <= item.end) {
                                 canDrop = false;
                                 return false;
                             }
                             // - end date is between the specific bar 
                             if (item.start <= end && end <= item.end) {
                                 canDrop = false;
                                 return false;
                             }
                             // the specific bar is completely between start date and end date.
                             if (start <= item.start && item.end <= end) {
                                 canDrop = false;
                                 return false;
                             }

                             return true;
                         })

                         return canDrop;
                     })

                     return canDrop;
                 }
             }
         }
     }
 },
yu_takahasi
Posts: 8
Joined: Thu Sep 15, 2016 12:31 am

Re: Overlap and disappear problems in Interactive Gantt Chart

And for the other problem ( bar is gone when I adjust both the beginning and ending of a bar to the same date and time),
I think I can avoid it using the same plotOptions.series.point.event.drop function.
I'm not sure this is the good way to do so, but here is my code:

Code: Select all

// get the point before start dragging.
const origin = e.origin.points[e.newPointId]

// cancel drop actions when the dragged bar is about to be disappeared.
if (!start) {
    // when only the end date is dragged
    if (origin.start == end) return false;
}
if (!end) {
    // when only the start date is dragged
    if (origin.end == start) return false;
}
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Overlap and disappear problems in Interactive Gantt Chart

Hello yu_takahasi,

Thanks for contacting us with your question and thank you for sharing your code!

My apologize for the late reply. I am working on the best solution for you, so I'll back with the answer as soon as possible.

Thank you for your patience,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Overlap and disappear problems in Interactive Gantt Chart

Hi,

I've started preparing a solution, but this functionality is more like a new feature and is beyond the scope of support on our forum.
However, you can create a feature request here: https://github.com/highcharts/highchart ... new/choose

In general, your approach is correct but the colision checking contdions needs to be improved .

When it comes to the hiding bar, your solution works good when we disable dragDrop.liveRedraw . Thanks again for sharing!
Demo: https://jsfiddle.net/BlackLabel/yzd8f4sx/

​If you have further inquiries, you may reach out to me at any time,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Gantt”