Mobile Responsive

@hailhost could you please attach a screenshot so that we see exactly what you see?

Thank you for your response, please see below:

ss1: https://snipboard.io/vorcFu.jpg
ss2: https://snipboard.io/Upimdn.jpg
ss3: https://snipboard.io/dVgHzF.jpg

@hailhost it looks perfectly fine on the phone and on phone simulators. What phone and browser combination are you using?

The screenshots are provided directly from an iPhone, I’ve also tested from various Android devices. If you also use the Chrome mobile inspect tool, you’d see similar results.
Mainly the legend wouldn’t be seen.

Here’s another screenshot taken from Chrome tool
https://snipboard.io/tq5SrN.jpg

@hailhost this is how its supposed to work. That’s how it becomes responsive, otherwise you’d get a horizontal scrollbar. Please check https://developers.google.com/chart/interactive/docs/gallery/piechart

@rozroz, If you check the screenshot the legend is not visible/truncated. Is there no solution for this? E.g. bring the legend to the bottom of the pie chart when it goes mobile?

@hailhost if you check the link, the charts behave in the same manner – that’s how the API behaves. Nothing we can do at the plugin end. You can use media queries in the CSS to change the position of the legend.

I think the only way to get the legend to be readable on phone would be to vertically stack it under the chart, however when you select place legend under chart (or above) it displays it side by side with a tab and you can only read the first few letters of each label. Does anyone know how to stack it vertically the same way it appears to the side of the chart but under it? Failing that are there any mobile responsive chart plugins someone could recommend? I guess last option with this plugin is to take a screenshot of the legend and just add it as a picture but it loses the click ability.

I’d be amazed if google who are all strictly pro mobile haven’t made this work for phones.

@dubaidogfish @hailhost you are welcome to reproduce this on a jsfiddle and let us know if you find any difference from the behavior you see in the plugin.

Googling around yesterday the Google charts in general are not responsive. No idea how one might stack the legend labels vertically when under the chart. If i find any alternative that looks good on phone will let you know.

I’m also wondering how to stack the legend underneath the chart (instead of laying out horizontally).
Currently, our vertical axis data is getting cut off.

Has anyone discovered how to do this?

In conclusion, the API does not support this. The only workaround is to use custom CSS.

Marking this as Resolved.

Any CSS help would be greatly appreciated?