rgantt-chartmermaiddiagrammer

Adding vertical line to gantt chart in DiagrammeR


How do you add a vertical line to a custom time in a gantt chart with DiagrammeR?

I actually found a workaround while writing this question, so I shortened it to one sentence and will post an answer.


Solution

  • I found the answer in a github request for this feature to be added.

    mermaid("
    %%{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,
    ")
    

    The relevant sections are

    %%{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;}'
        } }%%
    

    and

    Nov. 28                            :milestone, vert1, after work2,
    Feb. 26                            :milestone, vert2, after work3,
    

    I've noticed that even if you're only adding one vertical line, you require the final comma. Unlike the rest of the mermaid code, not adding the final comma appears to cause the line to not render.