[Chartjs]-Html chart does not fit a small Android WebView

by

1👍

If the chart is the only thing you load up in webview. You can use setLoadWithOverviewMode when getting the settings for the webview to enable your webview to go into Overview mode which means the html content’s width will be set to fit your screen. you can checkout the full detail here

The code would be like this.
(Remember to set it before you load your HTML content into webview)

webView.getSettings().setJavaScriptEnabled(true); //enable it since you're using js to create your chart
webView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT); 
webView.getSettings().setDomStorageEnabled(true); //incase you're using some DOM in your js
webView.getSettings().setLoadWithOverviewMode(true); //This code load your webview into overview mode, fit your html to the screen width

and afterwards, finally load your HTML to your webview

-1👍

    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setLoadWithOverviewMode(true);
    webView.getSettings().setUseWideViewPort(true);
    webView.getSettings().setDomStorageEnabled(true);

-1👍

you can use this code to show a circle diagram from Chart.js

webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setDomStorageEnabled(true);

webView.setWebViewClient(new WebViewClient(){

    @Override
    public boolean shouldOverrideUrlLoading (WebView view, String url) {

        progDailog.show();
        view.loadUrl(url);

        return true;
    }

    @Override
    public void onPageFinished(WebView view, final String url) {
        progDailog.dismiss();
    }
});

webView.loadUrl(url);

Leave a comment