Gantt chart row colors

[rafmudaf]

Hi all 👋 I'm a long time fan, first time poster. In using a Gantt chart, I came across a question that was difficult to resolve, and so I wanted to put the info here for anyone else's future reference.

Here's how the Gantt chart for my work looks in the default theme:

gantt
    dateFormat  YYYY-MM-DD
    axisFormat  %Y
    todayMarker off

    section FLORIS
    1.0 - 1.1 :2019-05-07, 2020-04-27
    2.0 - 2.5 :2020-04-27, 2022-03-01
    3.0 - 3.4 :2022-03-01, 2024-04-01

    section foxes
    0.1 - 0.3 (alpha) :2022-07-01, 2023-06-02
    0.4 - 0.6 :2023-06-02, 2024-04-01

    section PyWake
    1.0 - 1.1 :2019-01-10, 2020-04-17
    2.0 - 2.5 :2020-04-17, 2024-04-01

Loading

I needed to change the color of each row to red, green, and blue so that it matches other plots referring to the same content. The Gantt chart docs Styling section suggests you can customize the following attributes: grid.tick, grid.path, .taskText, .taskTextOutsideRight, .taskTextOutsideLeft, todayMarker. These are the text, grid, and today marker, but none are the background color for each row. However, that section of the docs refers to src/diagrams/gantt/styles.js. So, I poked around there and noticed:

  .section {
    stroke: none;
    opacity: 0.2;
  }

  .section0 {
    fill: ${options.sectionBkgColor};
  }

  .section2 {
    fill: ${options.sectionBkgColor2};
  }

  .section1,
  .section3 {
    fill: ${options.altSectionBkgColor};
    opacity: 0.2;
  }

This gave me a hunch that setting sectionBkgColor, sectionBkgColor2, and altSectionBkgColor might be the ticket. It wasn't clear at this point how to set this configuration, but so I tried a variety of different things in the %%{ init: { ... } }%% block at the beginning of the diagram.

Feeling out of ideas, I went back to the beginning to learn more about themes and Googled "mermaid themes". Possibly due to my previous searches, the top hit was Mermaid Theme Configuration. The Custumizing Themes with themeVariables section has a few things to note:

• You will need to use the [base](https://mermaid.js.org/config/theming.html#available-themes) theme as it is the only modifiable theme. -> In my case, this doesn't seem to be true.
• There's a a list of theme variables that look like are common to all themes
• The example in that section says how to change theme variables: %%{ init: { theme': 'base', 'themeVariables': { ... } } }%%

Finally, trying this out with the section and alt color variables I found in the Gantt chart style definition, I was able to customize the row colors for the Gantt chart:

gantt

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'sectionBkgColor': 'green',
      'altSectionBkgColor': 'red',
      'sectionBkgColor2': 'blue',
      'taskBkgColor': 'lightgrey',
      'taskBorderColor': 'black',
      'taskTextColor': 'black'
    }
  }
}%%

    dateFormat  YYYY-MM-DD
    axisFormat  %Y
    todayMarker off

    section FLORIS
    1.0 - 1.1 :2019-05-07, 2020-04-27
    2.0 - 2.5 :2020-04-27, 2022-03-01
    3.0 - 3.4 :2022-03-01, 2024-04-01

    section foxes
    0.1 - 0.3 (alpha) :2022-07-01, 2023-06-02
    0.4 - 0.6 :2023-06-02, 2024-04-01

    section PyWake
    1.0 - 1.1 :2019-01-10, 2020-04-17
    2.0 - 2.5 :2020-04-17, 2024-04-01

Loading

And the config block is:

%%{
  init: {
    'theme': 'default',
    'themeVariables': {
      'sectionBkgColor': 'green',
      'altSectionBkgColor': 'red',
      'sectionBkgColor2': 'blue',
      'taskBkgColor': 'lightgrey',
      'taskBorderColor': 'black',
      'taskTextColor': 'black'
    }
  }
}%%

Note that altSectionBkgColor is used for the odd-indexed rows, as is clear in the Javascript styling:

  .section1,
  .section3 {
    fill: ${options.altSectionBkgColor};
    opacity: 0.2;
  }

It worked fine for me since I coincidentally only needed three rows, but individual colors for each row when there are more than three might require modifying that styling.

Apologies for being long winded, but I wanted to include the information I found along the way in case it helps.

[rafmudaf]

For any of the maintainers, is there a better place for me to add this information? Is it already in the docs and I didn't find it? If not, I'm happy to try to work it into the documentation.

[HariSekhon]

I spent ages testing out customizing my Gantt chart colours the other night - the code might give some tips if anyone finds this issue:

https://github.com/HariSekhon/HariSekhon/blob/725ae8fc6c8227b9bdcd46f2c00efc9e91fe2049/README.md#gantt-chart-of-my-experience

Issue for this:

#5915

[laguill]

Hello,
Do you think it is possible to get a gantt chart with different color per sections ?
Lets say I have 2 projects and I want to hilight predicted vs spend time per project ?

[rafmudaf]

Sorry @laguill I don't understand whether this is different than the default configuration from Mermaid. Could you create a sample Gantt chart and then describe how you'd like it to be different?

[laguill]

I would like to have a different color for Time estimate and Time spend

%%{ init: {
        'theme': 'forest',

        'themeVariables': {
          'activeTaskBkgColor': 'darkblue',
          'activeTaskBorderColor': 'lightgrey',
          'critBkgColor': 'purple',
          'critBorderColor': 'lightgrey',
          'doneTaskBkgColor': 'grey',
          'doneTaskBorderColor': 'lightgrey',
          'excludeBkgColor': '#eeeeee',
          'gridColor': 'lightgrey',
          'secondaryColor': '#006100',
          'todayLineColor': 'red'
        }
    }
}%%

gantt
    title Planning Overview
    dateFormat  YYYY-MM-DD
    axisFormat 01-%B
    tickInterval 1month
    weekday monday
    
    section Project 1
    Estimate Time 15d : p1_spend, 2024-11-18, 15d
    Time spend  18d : active, p1_spend, 2024-11-18, 18d
    Exam : crit, milestone, e1, 2024-12-06, 1d

    section Project 2
    Estimate Time 20d : p2_estimate, after e1, 20d
    Time spend  22d : p2_spend, after e1, 22d
    Exam : crit, milestone, e2, after p2_spend, 1d

Loading

[rafmudaf]

Ah I see now, thanks for the clarification. One idea that I see you've already tried is to label one category "active", "done", or "crit" and control those colors in the init.

[laguill]

Yes might be the best solutions in my case
Thanks

Also do you know if it possible to add clickable link to github file in the sections of the gantt chart ?

[rafmudaf]

Yep, you can add the following if, for example, you want to add a clickable link for the "Exam 2" section:
click e2 href "https://mermaidjs.github.io/"

I think the clickable element is on the box or shape rather than the text, but you could always make the text contain the URL so that it looks like a hyperlink. Does that get you what you want?

By the way, this is in the docs here, if you're interested to see more: https://mermaid.js.org/syntax/gantt.html#interaction.