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.