Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change label width in mermaid Gantt chart

Tags:

r

mermaid

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.

like image 495
dww Avatar asked Jan 27 '26 00:01

dww


1 Answers

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
like image 141
0x574F4F54 Avatar answered Jan 29 '26 17:01

0x574F4F54



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!