[Chartjs]-Chart.js not displaying on Android Webview if animation is set to false

by

5👍

✅

I tried this answer on Android WebView renders blank/white and it solved the problem. Basically we tell the WebView to avoid using hardware rendering:

webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

0👍

In addition to the accepted answer, I had to enable javascript for my webView:

        webView.getSettings().setJavaScriptEnabled(true);

0👍

Based on the previous answer here and a few others in other posts, I’ve ended up with the below code which works fine for me.

Note, my HTML is a complete “page” stored as a string. I have assets in my project under /assets/html/, which I use as my Base Url. The assets include CSS, other JS files, etc.

// Reference the webview
WebView webView = view.findViewById(R.id.webView);
// Avoid hardware rendering (force software rendering)
webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

// Reference settings so we can change some
WebSettings settings = webView.getSettings();

// Enable items needed for proper chartJS execution
settings.setJavaScriptEnabled(true);
settings.setDomStorageEnabled(true);
settings.setAllowUniversalAccessFromFileURLs(true);
settings.setAllowFileAccessFromFileURLs(true);
settings.setCacheMode(WebSettings.LOAD_NO_CACHE);

// Load the chartJS HTML (from a class property)
String html = mHtml;
// Load the HTML into the webView (note the other needed files reside: css, js, etc.)
webView.loadDataWithBaseURL("file:///android_asset/html/", html, "text/html", "UTF-8", null);
// Set to white, the default html bkg color
webView.setBackgroundColor(Color.WHITE);

Leave a comment