highchartsgantt-chartweekend

Skipping weekends with Highcharts Gantt


I am looking for a way to skip weekends while using date-time xAxis with Highcharts Gantt.

I have read a few posts about the

xAxis.ordinal 

option for HighStock but I am using HighCharts

Also, I would need to stick to date-time because I plan on creating an interactive Gantt / planning and update a database with these interactions and I don't want to be able to Drag and Drop (or expanding) a task into a weekend. I believe I could prevent that with the drop event (I think there is one) but then, 2/7th of my graph would be "empty". enter image description here

If anyone knows of a hack for this situation, I'm all for it !

PS: As I type this, I realise that xAxis seems to always be datetime with Gantt, so the "hack" of defining every xValue myself was probably for a regular chart... Am I doomed to have weekends ?

Edit: Here's a fiddle of where we're at right now. As you can see, we are able to hide all weekends using

xAxis: [{
    breaks: [{
        from: Date.UTC(2018, 11, 8),
        to: Date.UTC(2018, 11, 10),
        breakSize: 0,
        repeat: 7 * 24 * 36e5 //every week/7 days
    }]
}]

But, unfortunately, breaks don't seem to be compatible with the "draggable-points" module and causes dragged points/tasks to "resize" themselves when moved over a break (weekends in our case), flicker and, at some point, even disappear from the Gantt :/ (Also, some labels act weirdly when dragging)

I suppose I could "hide" the weekend labels using a custom formater and checking the X value but this would probably leave a blank, but existing, column in the graph and this is why I need to truly remove these dates.

I'll probably have to leave the weekends turned on and do checks/maths so that adding 2 days to a 5 workdays task doesn't "draw" the task over the weekend but actually adds 4 days to compensate (modulo for the win) but that's not ideal...

Should I report this (kinda) weird behavior between draggable-points and xAxis breaks as a bug ? Technically, the points don't change value (I mean, in this demo, using the buttons and console, you see that the xmax-xmin for each point stays the same) but, when drag-dropped onto a weekend, they disappear. That's what I'm trying to avoid.

tl;dr: The breaks act as black-holes when a point is dragged near them (you can't drag a to less than... half a week of distance between your mouse and the break).

Edit: bug report


Solution

  • You can use breaks to hide weekends on the chart. Below you can find an example how to use breaks, but you can also create a function which would insert a break in every weekend:

    xAxis: [{
        breaks: [{
            from: Date.UTC(2018, 11, 8),
            to: Date.UTC(2018, 11, 10),
            breakSize: 0
        }]
    }, {
        visible: false
    }]
    

    Live demo: https://jsfiddle.net/BlackLabel/se1vL6mx/

    API: https://api.highcharts.com/gantt/xAxis.breaks