CODEWITHSUNDEEP
rgantt-chartmermaiddiagrammer
David Robie
David Robie

Reputation: 485

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.

Upvotes: 1

Views: 20

Answers (1)

David Robie
David Robie

Reputation: 485

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.

Upvotes: 1

Related Questions