Add tick interval option to Gantt charts

Problem and why

I have recently started using mermaid to create Gantt charts for project management. One frustration is that I can’t control how the x axis ticks are drawn. I would like to see weekly ticks on every Friday, but my Gantt chart renders weekly ticks on Sunday instead.

Solution

A simple solution is to allow the user to pass an optional setting to set the scale of the x axis using d3 time intervals. This solution can support other time intervals such as hours, days, weeks, months, etc.

Alternatives

I have not considered any alternatives at this time. I have however looked through the mermaid docs to see if there is an existing way of doing this. I have not found any such method.

Proposed sample

Here is a screenshot of a sample Gantt chart with the current rendering capabilities, and with the proposed changes using the d3.timeFriday interval.

[DarkNami]

I have implemented tickInterval in mermaid. But I can’t speak English very well, so I can’t finish section of ‘Content of a pull request’ in CONTRIBUTING.md. ‘Add documentation for it’ is hard for me.

Supported: minute, hour, day, week, month

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    axisFormat  %m-%d
    tickInterval 1day
    excludes    weekends
    section Section
    A task           :a1, 2022-10-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2022-10-20  , 12d
    another task      : 24d

[hikerpig]

I’ve implemented an axisInterval in my pintora’s gantt diagram

It would be useful if mermaid has this - or named tickInterval whatever, too.

axisInterval  1w %% week
axisInterval  1M %% month