Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gantt Chart top X Axis not working for GitHub live readme diagram #6260

Open
HariSekhon opened this issue Feb 7, 2025 · 2 comments
Open
Labels
Status: Triage Needs to be verified, categorized, etc

Comments

@HariSekhon
Copy link

I've got a couple MermaidJS Gantt Charts in my GitHub profile to show my GitHub repos dates of work and my Tech Experience years of focus.

My Tech Experience Gantt is so vertically large due to lots of bars that you can't see the X Axis at the bottom to see the dates of bars at the top.

Is there a way to put the X Axis at the top of the Gantt Chart as well?

Could this be added as a feature to make large Gantt Charts more visually practical?

https://github.com/HariSekhon#gantt-chart-of-my-experience

@github-actions github-actions bot added the Status: Triage Needs to be verified, categorized, etc label Feb 7, 2025
@HariSekhon
Copy link
Author

HariSekhon commented Feb 7, 2025

Documented here:

https://mermaid.js.org/syntax/gantt.html#configuration

But it doesn't seem to work in live GitHub MermaidJS eg.:

```mermaid
%%{ init: {
        "topAxis": true,

Which you can see here:

https://raw.githubusercontent.com/HariSekhon/HariSekhon/refs/heads/main/README.md

I've tried it with both native boolean as shown above as well as quoted string, but neither is not taking effect in my profile:

https://github.com/HariSekhon#gantt-chart-of-my-experience

@HariSekhon HariSekhon reopened this Feb 7, 2025
@HariSekhon HariSekhon changed the title Gantt Chart top additional X Axis for large Gantt Charts? Gantt Chart top X Axis not working for GitHub live readme diagram Feb 7, 2025
@BambioGaming
Copy link

Issue Confirmation: topAxis Not Working in Live Editor & Development Page

I have tested the topAxis feature in multiple environments, and I can confirm that it does not work as expected.

Steps to Reproduce

1. Mermaid Live Editor
I used the following code snippet in Mermaid Live Editor

%%{ init: {"topAxis": true } }%%
gantt
    title Test Gantt with Top Axis
    dateFormat  YYYY-MM-DD
    axisFormat  %Y-%m-%d
    section Development
    Task A :done, 2024-01-01, 2024-02-01
    Task B :active, 2024-02-01, 2024-03-01

Expected Behavior: The X-axis with dates should appear at the top of the Gantt chart.
Observed Behavior: No top axis is displayed.

Image

I have also tried your Github profile code but the result is the same.

Image

2. Mermaid Development Page
The official Mermaid documentation page suggests that topAxis is a valid feature. However, when testing the feature on the development page, it is not working.

Image

Findings

topAxis appears to be non-functional across all environments, including:

  • Mermaid Live Editor
  • Latest MermaidJS development page
  • Documentation page
  • Github MermaidJS

This suggests a potential bug in the Gantt chart rendering logic rather than an issue with platform-specific implementations.

Would appreciate any insights from the maintainers!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Triage Needs to be verified, categorized, etc
Projects
None yet
Development

No branches or pull requests

2 participants