CODEWITHSUNDEEP
rmermaid
dww
dww

Reputation: 31454

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.

Upvotes: 15

Views: 3367

Answers (3)

0x574F4F54
0x574F4F54

Reputation: 440

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

Upvotes: 6

Arnaud Gueras
Arnaud Gueras

Reputation: 2062

I didn't find any correct answer about this question. Then I found an ugly workaround. I add a task that start 1 or more days before and it's length is the days that start before

.:01/01/2022, 2d

Change the date and number of days to enlarge the title column.

It's ugly I know, but it works.

Upvotes: 5

David
David

Reputation: 9965

You can add a `<br>` in the title of the section to force a line break:

section A ridiculously <br> long section <br> name

Upvotes: 5

Related Questions