Gantt sections are not separated by colors - Fix: set numberSectionStyles to 4 instead of 3

[pongraczi]

Hi,
First, thank you for this great tool, especially with gitlab!

I found that, the gantt diagram has a bug: some sections has the same background color and cannot see the separation.
It is also visible in your gitbook demonstration and I have the same issue in my gitlab: two following sections have the same color background, hard to recognize sections on the diagram.

Please check the screenshot from your gitbook page:

Did I miss something, or is it a minor bug? Thnx

[CraigDamlo]

Yes, I've noticed that there seems to be a limit of 3 sections on the gantt charts too.

Edit: Clarification, only 3 background section colors.

[pongraczi]

Thanks Craig, I noticed it in my own chart, where I have 6 sections and the 3rd and 4th sections has the same background color. All of them under gitlab.
Otherwise zebra could be enough to be able to make difference between sections, rainbow is not necessary :)

So, the colors are rotating like this: color1, color2, color3, color1, color2, color3 etc., but maybe the color1 and color3 are the same color?

I checked the css, and it seems, the
.mermaid .section2 { fill: XXXX; }
is the same as the
.mermaid .section0 { fill: XXXX; }
so, they use the same color.

And I confirm, there are only 3 different section types and they are rotating.

Changing the section2 in the developer tools of the browser I can change the color of the section2 (3rd section), so, I got what I wanted.

So, I consider this is a bug, maybe in the generate code, maybe in the stylesheet.

[pongraczi]

More info:
It seems, by design 4 sections should be used, but somehow we got only 3 sections rotating.
Is it a misconfigured for (loop) cycle?

[pongraczi]

Ok, it seems, it easy to fix, it should be only wrong number written (3 instead of 4).

Here you can change the value to 4:
https://github.com/knsv/mermaid/blob/3fbe3a30788b6558e7a2603f3759238f3d9bc202/src/mermaidAPI.js#L218

In Gitlab you can search and change it in this file:
/opt/gitlab/embedded/service/gitlab-rails/public/assets/webpack/mermaid.17af4566a4e7f0d6b037.chunk.js

Do not forget to recreate the mermaid.17af4566a4e7f0d6b037.chunk.js.gz file to by compressing the original file into gzip.

Wipe out your browser cache and reload the page, et voilà, it just works as expected :)

[tylerlong]

Hi @pongraczi Thank you for this detailed bug report.

The default theme doesn't have this issue:

So maybe it's a theme issue.

[tylerlong]

I agree with you that numberSectionStyles should be 4 instead of 3.

I have fixed this issue. Please wait for the upcoming mermaid version 8.0