Mermaid: Pie Chart is cut off/clipped

liviu.gelea · November 15, 2022, 4:40pm

Steps to reproduce

Be on Windows 10
enable 125% scaling
create mermaid chart using markdown code:

pie showData
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

Expected result

Chart should fit the page

Actual result

rightmost part of chart is clipped

Environment

Operating system: windows 10
Debug info:

SYSTEM INFO:
	Obsidian version: v1.0.3
	Installer version: v0.15.9
	Operating system: Windows 10 Pro 10.0.19045
	Login status: not logged in
	Insider build toggle: off
	Live preview: on
	Legacy editor: off
	Base theme: dark
	Community theme: none
	Snippets enabled: 0
	Restricted mode: on

RECOMMENDATIONS:
	none

Additional information

WhiteNoise · November 15, 2022, 5:26pm

This happens at 100% too. I am sorry but we are not gonna do anything about this until mermaid implements a way to specify size and position.

github.com/mermaid-js/mermaid

Let the user decide the size and alignment of the produced diagram in the code (no css/json)

opened 06:12PM - 14 Sep 22 UTC

WhiteNoiseDev

Type: Enhancement Status: Triage

**Is your feature request related to a problem? Please describe.** There is no …way to specify the size and position (page alignment, left, centered) of a produced diagram within the diagram description/code itself. The diagram size can either be absolute (in px), or relative to the page width(in %), or unbounded. **Describe the solution you'd like** align centered size 800px 600px size 90% **Additional context** Right now, only some graph type support some limited configuration regarding their size via directives, some others use json/cli, and some other are sizable only via obscure CSS. Mermaid cannot be embedded in other tools to create user definable graphs without this, The user end up having a graph that is too big, too small, not aligned as they would like etc.

liviu.gelea · November 19, 2022, 8:58am

Makes sense.
Would it help if size was predictable? Allowing you to instead scale graphs based on expected graph size instead of forcing it?
Just asking because I’m taking this to the mermaid team and want to understand all options.
Any further detail you have that may help in my request for them is highly appreciated.

WhiteNoise · November 19, 2022, 5:14pm

If you are in touch with the mermaid developers show them my FR.
I guess if mermaid produced a graph of fixed size, we could handle the resizing, position on our end.
We need something that works consistently and in the same way across all graphs.

liviu.gelea · November 20, 2022, 7:33pm

Thanks for your answer. I’m in no way in touch with mermaid developers, but I’m willing to put some time in ensuring all details and options are on the table, including looking into some open source volunteering. Will see if I can get anything done.
I originally missed your feature request. Just seen it now.
Thanks again and all the best.

WhiteNoise · June 29, 2023, 7:45pm

There is a specific issue upstream about pie charts:

github.com/mermaid-js/mermaid

Pie Chart gets cut off

opened 06:31PM - 11 Feb 23 UTC

adarsh-sgh

Type: Bug / Error Good first issue! Status: Triage Graph: Pie fosshack

### Description [This Pie Diagram](https://mermaid.live/view#pako:eNpNjrEOgkAQR…H9lszUFjQ2NhWhHLKg022y4VS5yd-RuL8QQ_l2QmNi-eTOZGbtgBCscrUDqw1SzMpAnVauDgE3QSHRsDfAkKTiB45YS3s4tYQWHsix3cL2c4A9igW5vruszeQBC7cXJJhAaji9C8svqcdbQvn2HlcYsBebRsEpt-RnZ_aAYqyE2-9vv6QJH9vcQVuXBQ5LlA-mYQ4o) when opened in window of width < 600px gets trimmed . <pre> mermaid pie showData title is Mermaid awesome ? "YES": 5000 "OFC YES": 5000 </pre> ### Steps to reproduce 1. Open the [Live Editor link](https://mermaid.live/view#pako:eNpNjrEOgkAQRH9lszUFjQ2NhWhHLKg022y4VS5yd-RuL8QQ_l2QmNi-eTOZGbtgBCscrUDqw1SzMpAnVauDgE3QSHRsDfAkKTiB45YS3s4tYQWHsix3cL2c4A9igW5vruszeQBC7cXJJhAaji9C8svqcdbQvn2HlcYsBebRsEpt-RnZ_aAYqyE2-9vv6QJH9vcQVuXBQ5LlA-mYQ4o) in a seperate window. 2. resize it using dev tools to size <= 600px 3. refresh the page 4. it should show portions of diagram trimmed off as shown in screenshot below ### Screenshots <img width="689" alt="image" src="https://user-images.githubusercontent.com/63918341/218274556-d19340f9-3390-4486-a3c3-664233e45349.png"> ### Code Sample ```text https://mermaid.live/view#pako:eNpNjrEOgkAQRH9lszUFjQ2NhWhHLKg022y4VS5yd-RuL8QQ_l2QmNi-eTOZGbtgBCscrUDqw1SzMpAnVauDgE3QSHRsDfAkKTiB45YS3s4tYQWHsix3cL2c4A9igW5vruszeQBC7cXJJhAaji9C8svqcdbQvn2HlcYsBebRsEpt-RnZ_aAYqyE2-9vv6QJH9vcQVuXBQ5LlA-mYQ4o mermaid pie showData title is Mermaid awesome ? "YES": 5000 "OFC YES": 5000 ``` ### Setup **Desktop** - OS and Version: Macos Ventura - Browser and Version: Chrome 109.0 ### Additional Context _No response_

SlyCooperKing · August 8, 2023, 4:02pm

I also brought this up here Beginner Questions · mermaid-js · Discussion #4441 (github.com)

WhiteNoise · August 11, 2023, 1:48pm

In this BR there are two mixed issues. One is specifically tied to the pie chart, the other is more broadly the inability for user to specify the graph size and alignment.

Jopp · August 22, 2023, 8:59am

In my theme Dune I reworked mermaid diagrams.
Now diagrams display full width and don’t get cut anymore, I improved diagram readability for both dark add light theme, added diagram zoom and much more. Read more in my documentation here