CODEWITHSUNDEEP
gantt-chartmermaid
Quinten
Quinten

Reputation: 41523

Color specific node in Gantt Mermaid diagram

I would like to color a specific node in a Gantt chart using mermaid. It is easy to color a specific node in a flowchart, but it is not clear to me how to do this in a Gantt chart. I would like to color the node "Color this node to green" to green. Here is some reproducible code:

gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        Color this node to green    :24d

Output:

enter image description here

So I was wondering if anyone knows how to color a specific node in a Gantt chart mermaid?

Upvotes: 1

Views: 392

Answers (1)

Rafa Campos
Rafa Campos

Reputation: 1

This is working for me:

---
config:
  themeCSS: '
    rect#a1 {fill: #015F70;}
    rect#a2 {fill: #CC0000;}
    rect#b1 {fill: #0000CC;}
    rect#b2 {fill: #00CC00;}
  '
---
gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :a2, after a1, 20d
    section Another
        Task in Another :b1, 2014-01-12, 12d
        Color this node to green    :b2, after b1, 24d

Output

As you can see, I'm just defining the themeCSS and then referring to each box by its id. You can also use CSS selectors to catch several boxes:

rect[id*=my_box] {fill: #015F70;}

So it will take my_box, my_box_1, etc.

Upvotes: 0

Related Questions