How to rotate axis labels in Gantt chart Mermaid?

Question

When having multiple tick lines (tickInterval) in a Gantt chart, results in overlapping dates on the horizontal axis. I would like to rotate these labels to make them visible. Here is some reproducible code:

gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    tickInterval 2day
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        Another task    :24d

Output:

As you can see the dates are now overlapping. So I was wondering if anyone knows how to rotate these lables in mermaid?

Answer 1

Same issue here - it is not possible natively, hence, the only workaround I found was doing it with CSS styling. In most markdown editors/viewers you can add custom css. Adding this styling should help you:

.mermaid .tick > text {rotate: -45deg; text-anchor: end !important;}

Of course, you can change the degree to fit your needs.

Exemplary implementation steps for Obsidian: Open the vault includes your markdown files with mermaid gantt diagrams. Then, create a css file for the vault and put my code there (more information: https://help.obsidian.md/Extending+Obsidian/CSS+snippets). Afterwards, axis labels are rotated for the respective vault.

It should look like this: