Add vertical line to gantt plot at specified date

[wcheek]

I find that the gantt plot axis is not fine grained enough, particularly when it comes to delineating the start and end of an event. I can't see the specific date when events start and end, I can only guess.

I suppose I have two feature requests regarding this issue:

1. Add a date marker at the specified date. Maybe it can be marked special somehow from the regular ticked dates, like with a special tick.
2. Add a vertical line at the specified date. Along with feature 1), this would allow a nice way to mark and specify dates of starts and ends of events.

I'm thinking something like this:

Generated with something like this:

gantt
    title Leave Plan
    dateFormat  YYYY-MM-DD
    axisFormat %b-%d
    section Time off
    Sabbatical start -- 2022-10-03       :milestone, birth, 2022-10-03, 0d
    Time off -- 2 weeks    :first_time_off, 2022-10-03, 2w
    Time off -- 2 weeks    :second_time_off, after work1, 2w
    Time off -- 3 months    :3_months_off1, after work2, 90d
    Time off -- 3 months    :3_months_off2, after work3, 90d

    section Working
    Working -- 2 weeks     :work1, after first_time_off, 2w
    Working -- 2 weeks 		:work2, after second_time_off, 2w
    Working -- 3 months     :work3, after 3_months_off1, 90d

                                       :vert, first_line, after work2
    Nov. 28                      :specify_date, nov_28_date, 2022-11-28
    
                                      :vert, second_line, after work3
    Feb. 26                       :specify_date, feb_26_date, 2023-02-26

I can imagine the need for new keywords, similar to milestone. Here I use vert and specify_date.

[matbun]

+1
I was looking for the same feature!

[aliwinter]

+1

[aborruso]

+1!!

[palashkulsh]

+1

[gaardhus]

Also really agree that this would be useful

[p0lygun]

+1

[juneleung]

+1

[ysaereve]

+1

[StefanBrand]

You can sort-of achieve it with CSS:

%%{init: { 'themeCSS':
'rect[id^=vert] { height: calc(100% - 50px); transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; } text[id^=vert] { fill: red; y: 100%; transform: translate(-50px, 50px); font-size: 15px;}'
} }%%

gantt
    title Leave Plan
    dateFormat  YYYY-MM-DD
    axisFormat %b-%d
    section Time off
    Sabbatical start -- 2022-10-03       :milestone, birth, 2022-10-03, 0d
    Time off -- 2 weeks    :first_time_off, 2022-10-03, 2w
    Time off -- 2 weeks    :second_time_off, after work1, 2w
    Time off -- 3 months    :3_months_off1, after work2, 90d
    Time off -- 3 months    :3_months_off2, after work3, 90d

    section Working
        Working -- 2 weeks     :work1, after first_time_off, 2w
        Working -- 2 weeks 		:work2, after second_time_off, 2w
        Working -- 3 months     :work3, after 3_months_off1, 90d
        Nov. 28                            :milestone, vert1, after work2,
        Feb. 26                            :milestone, vert2, after work3,

%%{init: { 'themeCSS':
'rect[id^=vert] { height: calc(100% - 50px); transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; } text[id^=vert] { fill: red; y: 100%; transform: translate(-50px, 50px); font-size: 15px;}'
} }%%

gantt
    title Leave Plan
    dateFormat  YYYY-MM-DD
    axisFormat %b-%d
    section Time off
    Sabbatical start -- 2022-10-03       :milestone, birth, 2022-10-03, 0d
    Time off -- 2 weeks    :first_time_off, 2022-10-03, 2w
    Time off -- 2 weeks    :second_time_off, after work1, 2w
    Time off -- 3 months    :3_months_off1, after work2, 90d
    Time off -- 3 months    :3_months_off2, after work3, 90d

    section Working
        Working -- 2 weeks     :work1, after first_time_off, 2w
        Working -- 2 weeks 		:work2, after second_time_off, 2w
        Working -- 3 months     :work3, after 3_months_off1, 90d
        Nov. 28                            :milestone, vert1, after work2,
        Feb. 26                            :milestone, vert2, after work3,

Loading

[JamesAlvesISH]

@StefanBrand thanks