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