0.5.0 no longer respects custom date definitions in Gantt diagrams

[nickwynja]

In 0.4.0, I was able to customize the date definitions in the Gantt diagram as seen below:

I did that with this snippet of code:

var mermaid_config = {
    startOnLoad:true
}
mermaid.startOnLoad = true;
mermaid.sequenceConfig = {"diagramMarginX":50,"diagramMarginY":10,"actorMargin":50,"width":150,"height":45,"boxMargin":10,"boxTextMargin":5,"noteMargin":10,"messageMargin":35, "mirrorActors":false};
mermaid.ganttConfig = {
    titleTopMargin:25,
    barHeight:20,
    barGap:4,
    topPadding:50,
    sidePadding:75,
    gridLineStartPadding:35,
    fontSize:11,
    numberSectionStyles:3,
    axisFormatter: [
        // Within a day
        ["%I:%M", function (d) {
            return d.getHours();
        }],
        // Monday a week
        ["%-m/%-d", function (d) {
            return d.getDay() == 1;
        }],
        // Day within a week (not monday)
        ["%a %d", function (d) {
            return d.getDay() && d.getDate() != 1;
        }],
        // within a month
        ["%b %d", function (d) {
            return d.getDate() != 1;
        }],
        // Month
        ["%m-%y", function (d) {
            return d.getMonth();
        }]
    ]
};

Please note the %-m/%-d formatting for "Monday a week".

In 0.5.0, this customization is no longer respected and my diagram appears like this:

Am I missing some change in the customization JS or did this just break?

[knsv]

I realize that is a bit unclear from the documentation. It was nesseccary to refactor the configuration handling in mermaid.

Initialization can be done using the mermaid.initialize method which in turn uses mermaidAPI.initialize.

initialize takes a configuration object as a parameter. The configuration object has general things in the root as startOnLoad and closeCssStyles and has sub objects with configuration specific for a diagram type named after the diagram type. Settings not part of the initialization call uses the default setting.

In your case it would look something like the code below. You could also experiment with removing settings you have not actively changed so that the default values are used in order to simplify the code.

mermaid.initialize({
               startOnLoad:true,
                sequenceDiagram:{"diagramMarginX":50,"diagramMarginY":10,"actorMargin":50,"width":150,"height":45,"boxMargin":10,"boxTextMargin":5,"noteMargin":10,"messageMargin":35, "mirrorActors":false},
                gantt: {
                    titleTopMargin:25,
                    barHeight:20,
                    barGap:4,
                    topPadding:50,
                    sidePadding:75,
                    gridLineStartPadding:35,
                    fontSize:11,
                    numberSectionStyles:3,
                    axisFormatter: [
                        // Within a day
                        ["X%I:%M", function (d) {
                            return d.getHours();
                        }],
                        // Monday a week
                        ["w. %U", function (d) {
                            return d.getDay() == 1;
                        }],
                        // Day within a week (not monday)
                        ["%a %d", function (d) {
                            return d.getDay() && d.getDate() != 1;
                        }],
                        // within a month
                        ["%b %d", function (d) {
                            return d.getDate() != 1;
                        }],
                        // Month
                        ["%m-%y", function (d) {
                            return d.getMonth();
                        }]
                    ]
                }

[nickwynja]

Thanks! The following solved this for me:

mermaid.initialize({
               startOnLoad:true,
                gantt: {
                    axisFormatter: [
                        // Monday a week
                        ["%-m/%-d", function (d) {
                            return d.getDay() == 1;
                        }]
                    ]
                }
            });