Pie charts do not show legends on mobile browsers

[fseesink]

Describe the bug
When viewing webpages with Mermaid pie charts on desktop browsers, you see the legend with labels to the right of the pie chart. When you do the same on mobile browsers, you do not, even when there is plenty of width to do so (e.g., turning your phone to landscape mode). This makes pie charts a bit useless when viewed on mobile devices, as all you see are percentages. I potentially get why in portrait mode on mobile phones, but even there pie charts remain useless without a legend. Either that or put the labels in the pie pieces with the percentages.

I experienced this with every mobile browser on my iPhone Xs, including Safari, Firefox, and Chrome. I suspect it may be the same for Android.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://mermaid-js.github.io/mermaid/#/pie?id=pie-chart-diagrams with any mobile browser
2. Look at the pie charts

Expected behavior
I expect to see legends to the right of the pie chart, just as I do when visiting the same page with any desktop browser.

Screenshots
Taken on my iPhone using Safari (but results are same in all mobile browsers)

Smartphone (please complete the following information):

• Device: iPhone Xs
• OS: iOS 14.5.1
• Browsers == stock Safari, Firefox Focus 8.1.7, Firefox Daylight 33.1 (4629), Chrome 90.0.4430.78

[DanielFlaum]

I can confirm that this behavior appears on an Android device as well.

• Device: Sony Xperia XA2 Ultra
• OS: Android 9, Build 50.2.A.3.77
• Browser: Firefox 88.1.3

[fseesink]

Hey Daniel,

I fee a bit sheepish here. I just noticed and have verified that the issue around the pie charts not showing the legend on mobile is when it's in portrait mode. That is, if I take out my phone, hold it as usual (portrait) and load a page with a pie chart, I get no legend. If I turn my phone to landscape, the page still shows no legend. But if I THEN reload the page (while the phone is still in landscape), it does show the legend.

So stupid me. The Mermaid-js library likely loads the graph with/without legend based on the browser dimensions at the time of page load. But it doesn't change simply by reorienting the phone. You have to reload the page. 🤦‍♂️

I still think it'd be nice if Mermaid would do something different, like maybe put the legend below the pie chart when in small portrait mode. But that's really an issue for the Mermaid folks to deal with.

[jackycute]

I'm having same issue here.

It seems the pie chart renders as the element width, and if that width isn't wide enough the charts still shows but been cutoff. I think it would be better if the pie chart can render more responsive or having internal minimal width to downsize the chart in order to view the whole graph.
Thank you!

[TweedleDim]

Still no workaround for this issue ? Indeed having the legend below the pie would be nice.