Title and Y-axis text overlap and are not fully displayed

[Hentioe]

Description

Mermaid's xychart-beta doesn't render perfectly on my page, but the same code renders fine on https://mermaid.live/.

And I noticed that the Mermaid preview of Claude AI also has the exact same problem.

Steps to reproduce

Import and initialize:

<script type="module">
  import mermaid from "/vendor/mermaid@11.4.0/mermaid.esm.min.mjs"
  mermaid.initialize({ startOnLoad: true });
</script>

The pre node in HTML:

<pre class="mermaid">xychart-beta
    title "Response Time Statistics"
    x-axis "Time (ms)" [0, 1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000]
    y-axis "Count" 0 --> 250
    line [210, 167, 209, 160, 154, 179, 1, 95, 1]
</pre>

Screenshots

Code Sample

xychart-beta
    title "Response Time Statistics"
    x-axis "Time (ms)" [0, 1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000]
    y-axis "Count" 0 --> 250
    line [210, 167, 209, 160, 154, 179, 1, 95, 1]

GitHub preview

xychart-beta
    title "Response Time Statistics"
    x-axis "Time (ms)" [0, 1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000]
    y-axis "Count" 0 --> 250
    line [210, 167, 209, 160, 154, 179, 1, 95, 1]

Loading

Setup

• Mermaid version:
• Browser and Version: [Chrome, Edge, Firefox]

Suggested Solutions

After some troubleshooting, I still don't know what the problem is. I copied out the generated SVG code and found that the SVG rendering has overlapped, which seems to have nothing to do with the external styles.

Hope to get some help, thanks!

Additional Context

No response