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

Created on 31 Jan 2018 · 6Comments · Source: mermaid-js/mermaid

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:
kijeloles_650

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

Source

pongraczi

👍1

All 6 comments

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.

CraigDamlo on 31 Jan 2018

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 on 31 Jan 2018

👍1

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?

kijeloles_653

pongraczi on 31 Jan 2018

👍1

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 :)
kijeloles_654