Graphs are truncated from bottom

[AniMukherjee]

Hello,

I'm using Python markdown to convert mermaid code to HTML. When I tried in simple HTML page, it is appearing fine.

When I tried to put the same in a Bootstrap Carousel, it seems to be getting truncated from bottom.

My markdown code is :

---
## Flow Diagram
```mermaid
sequenceDiagram
    autonumber
    actor C as Client
    participant S as Python Web App
    participant DB as Audit Database
    C->>S: Request for Information
    S->>DB: Runs SQL for Required Data
    note over DB: cursor from DBCP
    DB-->>S: Retrieve SQL results
    S-->>C: 200 OK Response
    note over C, S: Page with Relevant Information

---

Savings Calculator

LO Associate Count	Time Savings (in Hour)	LO Cost per Hour	Total Savings in an Year
1	2	$18.50	$8,880

```mermaid %%{ init: { 'xyChart': { 'width': 750, 'height': 350}, 'themeVariables': { 'background': 'transparent'} } }%% xychart-beta x-axis [day, week, month, quarter, year] y-axis "Savings (in $)" 10 --> 10000 bar [37, 185, 740, 2220, 8880] ``` ```

And the import I'm making in my HTML page :

<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
Am I making any mistakes here?