Skip to content

Browser-specific rendering of Gantt chart #8136

Description

@Jmuccigr

Description

I've got a simple Gantt chart with negative (BC) dates. It seems to render fine for me in macOS Safari, whether in the Live Editor or embedded in a simple webpage, but it otherwise is rendered incorrectly.

Steps to reproduce

Use the following simple chart description in the Live Editor or a simple webpage (shown here):

<html>
<head>
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
</script>
</head>
<body>
<pre class="mermaid">
gantt
	title Course Timeline
	axisFormat  %Y
	section Lives
	AAAA         :a1, -201, 60y
	BBBB         :a2, -106, 60y
	CCCC         :a3, -90, 60y
	DDDD         :a4, -43, 51y
</pre>
</body>
</html>

In Safari, it renders correctly, but it does not work in either situation in FireFox or in Chromium. Both instead show the same error that the Live Editor does with positive dates and a marker. The more recent dates also seem to be interpreted as 2-digit abbreviations of 21st c. dates.

Screenshots

Correct in Safari

Image

Incorrect in Firefox

Image

Code Sample

gantt
	title Course Timeline
	axisFormat  %Y
	section Lives
	AAAA         :a1, -201, 60y
	BBBB         :a2, -106, 60y
	CCCC         :a3, -90, 60y
	DDDD         :a4, -43, 51y

Setup

  • Mermaid version: 11.16.0
  • Browser and Version: Safari 26.1, Firefox 154.0.1, Chromium 140.0.7339.185

Suggested Solutions

No response

Additional Context

I found this in the Obsidian plugin, so I first commented in #4437

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: TriageNeeds to be verified, categorized, etcType: Bug / ErrorSomething isn't working or is incorrect

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions