How to style GANTT chart (mermaid)?

Description of issue

Hello,

I have recently started experimenting with GANTT charts in Obsidian. It seems useful since you can create internal links, as per this post:

I understand from reading past posts that we may have the possibility to alter the dimensions of the GANTT in the future, or zoom in, etc.

Currently, I am fine with the display, since at this stage I would like it to be a part of some activity reports when exporting PDF. This is what it looks like:

What I have tried so far

I tried applying styling according to instructions here:

but with no success, since this does not seem to work with GANTT charts.

I also tried applying some CSS snippets, but I have 0 experience with CSS, HTML, etc. I took some inspiration from this post:

But was not successful in applying the styling as per the mermaid documentation:

I then thought about changing the Obsidian appearance, thinking that would affect the styling of the GANTT chart, and therefore making the rendered image in the PDF more readable. And voila!

image

As you can see, it helped fix the appearance upon exporting to PDF.

Remaining question

However, it would be nice not to have to change the Obsidian appearance every time I want to export. So the question remains: How do I style the GANTT chart? I can break down my question as follows:

  1. Could someone provide a working CSS snippet for changing the following:
    1.1 grid.tick
    1.2 grid.path
    1.3 .taskText
    1.4 .taskTextOutsideRight
    1.5 .taskTextOutsideLeft
    1.6 todayMarker
  2. Is it possible to change the section colors or task colors? If so, can this be done through a CSS snippet?
  3. Is it possible to change the styling of specific sections, tasks, milestones, etc.?

Thank you very much for having the patience to read through this.

3 Likes