Apexcharts.js: Pie chart not displaying or android browser

[filipinyo]

Explanation

• I'm expecting a normal sized pie chart on the chrome browser on the mobile phone.
• Instead I'm getting tiny version of the chart. I've looked up the demos on the phone and even on the official site the charts aren't being rendered.

The chart correctly resizes itself on desktop, but on android chrome browser it's "squashed"
I'm using these responsive options:

responsive: [ { breakpoint: 1199, options: { chart: { width: 200, height: 260 }, legend: { position: 'bottom' } } }, { breakpoint: 992, options: { chart: { width: 280, height: 280 }, legend: { position: 'bottom' } } }, { breakpoint: 480, options: { chart: { width: 250 }, legend: { position: 'bottom' } } }, { breakpoint: 320, options: { chart: { width: 200 }, legend: { position: 'bottom' } } }]

Charts I'm using:
"apexcharts": "^3.6.4",
"vue-apexcharts": "^1.3.1"

Otherwise I really like the library 👍

[junedchhipa]

You're right. There is some issue on android device for pie/donut charts.
I will take a look soon.

[filipinyo]

Sorry to bother you. I know you have a lot of work, but did you manage to figure out what could be causing this? Or do you know when the update for this will be available?

[junedchhipa]

@filipinyo Sorry for the delay.
Unfortunately, I didn't found a fix for this yet as the problem doesn't throw any error.
Nonetheless, I will dig more and try to release a fix soon.
Thanks in advance for your patience.

[filipinyo]

Hey @junedchhipa any news about the issue? :)

[ericvipo]

Hey @junedchhipa any news about the issue? :)

Hi bro, same error u.u
do you found any solution or hack for fix it?
greetings

[filipinyo]

@ericvipo sorry dude no :/ It's been over 2 months though :(

[junedchhipa]

I tried debugging on the android browser, but as I have very less experience in testing on android devices, I would appreciate if someone would help in this regard.

[lmuller18]

I have tested a few mobile Android browsers and confirmed that my pie charts work in Firefox, but not in Samsung Browser, Chrome, or Chrome Canary. Hopefully knowing that it works in Firefox's Android app can help narrow down the compatibility issue.

[nmummau]

Here is some direction to debug Android devices through Chrome dev tools. I am getting errors in the console (which might be of value to @junedchhipa since you previously said "doesn't throw any error.")

Debugging Android Devices on Ubuntu development computer

1. Install adb on development computer by running sudo apt install adb.
2. Connect Android Device to same wifi network as development computer is connected to.
3. Connect Android Device to development computer via USB.
4. Enable USB debugging on Android Device.
5. Run adb devices on development computer.\
   You will see output:

* daemon not running; starting now at tcp:5037
* daemon started successfully

1. Run adb devices again to confirm you see your USB.
   You may need to grant permission on the Android device.
2. Get local IP of device (e.g. 192.168.1.102)
3. Run the following two commands on development machine adb tcpip 5555
4. adb connect 192.168.1.102:5555\
   You will see output:

connected to 192.168.1.173:5555

1. Disconnect USB (optional)
2. In Chrome on development machine open dev tools
3. In upper right click the kebab button to "Customize and Control Dev Tools" then go to "More tools > Remote Devices"
4. You will then see the device you connected to via adb. From there you can inspect element by clicking "Inspect".
5. View error logs from apexcharts

I figured a screenshot would be of more value than pasting a bunch of logs here. It's clear the errors are from apexcharts. In my app (hard to see because the chart isn't rendering), there are cards containing pie charts. See second image where they are visible on desktop.

Pixel XL, Android version 10, Chrome 77.0.3865.92

Ubuntu 18.04.3 LTS, 77.0.3865.90

[filipinyo]

6 months and no progress? :/

[brandonburkett]

Hit this today. I can confirm the logs I see via BrowserStack are the same as @nmummau posted above: Negative values on android chrome.

Oddly, Samsung browser seemed to work fine (was testing android 4.4)

Any workaround?

(edit w/ errors)

Error: <foreignObject> attribute height: A negative value is not valid. ("-111.14634146341464")
Error: <svg> attribute height: A negative value is not valid. ("-111.14634146341464")

(edit 2)
Note that radial charts work fine in chrome + android.

[brandonburkett]

Sorry for all the comment spam, but found a fix (see my comment above for previous tests).

Adding legend bottom to the options object fixed it for me. Seems to be an issue with the floating right legend.

legend: {
  position: 'bottom',
},

Tested with the following on BrowserStack (no errors:

• android 5 + chrome
• android 4.4.4 + chrome
• android 9 + chrome

Hope it helps.

[Mkennethsmith]

Sorry for all the comment spam, but found a fix (see my comment above for previous tests).

Adding legend bottom to the options object fixed it for me. Seems to be an issue with the floating right legend.

legend: {
  position: 'bottom',
},

Tested with the following on BrowserStack (no errors:

• android 5 + chrome
• android 4.4.4 + chrome
• android 9 + chrome

Hope it helps.

Similar issue with stacked bar charts on Android 9 Chrome, only able to resolve by removing the legend entirely for mobile view. Seems adding the legend, squishes all of the actual graph content by a factor of the size of the legend.

See Apex charts own demo of Vue Js stacked bar charts, on Android 9.

Charts libraries:
"apexcharts": "^3.10.1",
"vue-apexcharts": "^1.5.1"

[junedchhipa]

Version 3.11.2 improves the sizing for pie charts.
The next patch release will also fix the issue when legend takes up most of the space.