Search code examples
rmermaid

How to change label width in mermaid Gantt chart

I'm trying to use DiagrammeR to create a Gantt chart, as per this answer.

But if the section names are too long they spill into the chart. Here's an example.

library(DiagrammeR)
mermaid("
  gantt
  dateFormat  YYYY-MM-DD
  title Project timeline

  section A ridiculously long section name
  create data structures                      :done,     frame1,     2019-01-01, 2019-02-28

  section Another long section name
  refactor mistakes in data structures        :active,     frame2,     after frame1, 12w

  section Section 3
  Write code                                  :active,     first_1,    after frame1, 2019-06-30
  Party                                       :crit,       first_2,    after first_1,  7d
  ")

enter image description here

Anyone know how to adjust the width of the section label column? ?mermaid offers no explanation. And this help page (https://mermaidjs.github.io/gantt.html) only says "TBD" in the syntax sections.

Solution

  • I was able to expand the "section" column by adding this configuration to my mermaidjs gantt chart:

    %%{init: { 'gantt': {'leftPadding': 200} } }%%

    Here is a sample gantt chart with the configuration applied:

    %%{init: { 'gantt': {'leftPadding': 200} } }%%
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section I'm a really long section
    A task           :a1, 2024-09-15, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2024-09-18  , 12d
    another task      : 24d