mermaid.ganttConfig custom colors based on RAG status

[alex-papaioannou]

Proposal

mermaid.ganttConfig should add custom colors for each RAG status. e.g. It will help immensely to be able to have something like:
mermaid.ganttConfig = {
completedStatusColor: blue
activeOnTrackStatusColor: green
activeAtRiskStatusColor: yellow
delayedStatusColor: red
notStartedStatusColor: gray

titleTopMargin: 25, // Margin top for the text over the diagram
barHeight: 20, // The height of the bars in the graph
barGap: 4, // The margin between the different activities in the gantt diagram
topPadding: 75, // Margin between title and gantt diagram and between axis and gantt diagram.
rightPadding: 75, // The space allocated for the section name to the right of the activities
leftPadding: 75, // The space allocated for the section name to the left of the activities
gridLineStartPadding: 10, // Vertical starting position of the grid lines
fontSize: 12, // Font size
sectionFontSize: 24, // Font size for sections
numberSectionStyles: 1, // The number of alternating section styles
axisFormat: '%d/%m', // Date/time format of the axis
tickInterval: '1 week', // Axis ticks
topAxis: true, // When this flag is set, date labels will be added to the top of the chart
displayMode: 'compact', // Turns compact mode on
weekday: 'sunday', // On which day a week-based interval should start
};

Colors

• fillcolor

Screenshots

n/a

[bhofmei]

Its not as convenient, but this can be overcome with CSS classes for the 6 current tag combinations. These are the class names to use.

• No tag: .task0, .task1, .task2, .task3
• Active: .active0, .active1, .active2, .active3
• Active Critical: .activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3
• Critical: .crit0, .crit1, .crit2, .crit3
• Done: .done0, .done1, .done2, .done3
• Done Critical: .doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3

You would set fill and stroke for these objects and you'll need to include !important.