Chart not showing in Android 8.0/Android O

[yuenghole]

Hi,

I just tested the Chart.js in the preview of Android 8.0/Android O and find out that the chart is not displaying. But it is displaying in android 7 and below.

Please advice.

Thanks.

[etimberg]

@yuenghole are there any console messages or other errors? What browser were you using?

[yuenghole]

Hi, it is an android APP and I was testing it with preview version of OS android O in android studio emulators, hence there is no console messages or errors shown. FYI, I am using Chart.js v2.6 and the Android O preview version can be downloaded at https://developer.android.com/preview/download.html or if using Android Studio 2.4 and above, it can be downloaded at the Virtual Device Manager.

May find the screenshot as follow for references:

[yuenghole]

The only error I can see after I ADB in Android Studio is at follow:

[etimberg]

@yuenghole i don't suppose it's possible to get the line where that error is occuring? Sounds like something is trying to look for clientX on an event

[yuenghole]

oic, thanks.

By the way, I also raised this issue to google at https://issuetracker.google.com/issues/64317427, for them to investigate why is it not showing in Android O.

Thanks2

[etimberg]

This might be possibly resolved in #4591

[yuenghole]

Tried to grab the latest from Master branch and tested again on Android O emulator, the chart still not displaying.

[yuenghole]

Hi, may I know anymore suggestion? and when will the Chart,js v2.7 wil be released so that I can try again? thank you.

[etimberg]

@yuenghole I don't have any more ideas nor do I have a release date for 2.7 ☹️

[etimberg]

@yuenghole did v2.7 work for you?

[yityrar]

Hi - also found same problems on: Android Nougat v7.1.1, Android Oreo v8.0 ( the Android Nougat v7.0 is OK )

Tried new Chart.js version 2.7 and have same issue with chart not rendering ..

[yityrar]

@yuenghole @etimberg : Following on .. the feedback comments from Google re the issue posted above state: "Issue seems to be resolved in API 26 - Hence closing this issue." - not quite !! .. bug still there on Android v7.1.1 and v8.0 (API 26 revision: 6:5554).

However, hope that the following helps someone (the following is a workaround where this is not perhaps a bug in Chart.js, but on Android)

Workaround Solution - displays the chart but actions will be lost (mouse click, hover over etc):

1/ Wrap your canvas within a Div (add any styles to the div you may need)
<div><canvas height="400" id="myChart" width="400"></canvas></div>

2/ Suggest removing any 'animation' (although you could alter the code below in item 3/ to use the endAnimation event to track when to carry out the temp fix) - Add into your options:
options: { animation:{duration:0}, ..... }

3/ Add the following code - have made this simple, but could be improved re end of animation if required:

<script>
var __allChart=[]; //array to hold the charts when they are created
var __allChartCanvasId=[]; //IDs of the canvas - in step with chart array

//... Create the charts and add them to the array making a note of the canvas IDs 


//... All charts have been created (Android - the charts will be invisible but created behind the scenes)

function fixCharts() {
   var chart=null; var elt = null;
   for(var i=0; i<__allChart.length; i++) {
       chart = __allChart[i];
       //chart should have already been created behind the scenes - if animation mode, call the below after animation complete
       //Now get the canvas wrapper div, get the canvas image chart as a Base64Image, then rewrite the contents of the wrapper DIV to remove the canvas
       elt = $('#' + __allChartCanvasId[i]); //jquery syntax
       elt.parent().html('<img style="max-height:100%;height:auto;width:100%;max-width:100%;margin:auto;display:inline;" src="' + chart.toBase64Image() + '" />');
   };
}
setTimeout("fixCharts();",500); //allow some time after chart creation to get the base64 images
</script> 

Hope that this helps someone - ( note this is not at present required in IOS as charts seem to render OK )

[etimberg]

@yityrar is this still occurring on newer chrome builds?

[yityrar]

@etimberg - The latest Virtual Device tested was the API_26_-_Oreo_8.0_Revision_6 where this still had the anom. Have not had chance to test the Android 8.1 Oreo (API 27) yet released late last month.

[thetazzbot]

@yityrar As of 4/2018 this is still not working on API 27 Nexus 7 and 10 tablet emulators in Android Studio.

[phpfs]

Any updates to this?
Is it a problem on Google's side?

I am still experiencing this issue with API 26 :(

[gabrielmaldi]

Can confirm this is still an issue in Android 9 Pie WebView Chrome 66.0.3359.158.

A workaround (albeit not desirable since it disables hardware acceleration) is webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null).

#5676

[gabrielmaldi]

FYI Chart.js now works just fine in Android Web View version 68.0.3440.91.

I think this issue may now be closed.

[geraldo29]

anyone found a possible solution? I just tried it on API 28 and android 9 and not working. tried also on api 26,27

[gabrielmaldi]

@geraldo29 what version of the Android Web View did you use to test?

[phpfs]

Sometimes doesn‘t work with android emulator, but for me always on native devices :)

[geraldo29]

yes, i tried it on my native device and it worked perfectly. thanks

[khasty1]

confirmed, works on native device not in emulator

[simonbrunel]

@yuenghole @yityrar @thetazzbot @phpfs @geraldo29 @khasty1 Can we close this issue? If not, can someone provide instructions how to reproduce the issue and project files needed to debug easily.

[gabrielmaldi]

As far as I'm concerned, this is a dupe of #5676. There, I confirmed it was an issue with the Android WebView (https://bugs.chromium.org/p/chromium/issues/detail?id=872622) which has now been fixed (at least as of version 68.0.3440.91).

[etimberg]

Since there's been no movement on this for over a year, and this looks like an Android WebView issue I'm closing this

[rasheeek]

Still the same issue in android api 27

[LeeLenaleee]

this is a problem in android itself that chart.js cant do anything about it, when I test it with the most default docs page of mozilla (https://developer.mozilla.org/nl/docs/Web/API/Canvas_API) it also doesnt show anything so your only options are to either update or use a normal browser and not a webview