Not showing Ionic Android

[rodrigocichetto]

App developed in Ionic.

cli packages: (/usr/lib/node_modules)

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.4
    Cordova Platforms  : android 6.3.0 browser 5.0.1 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.9.3
    npm  : 5.6.0
    OS   : Linux 4.10

Chart.js not showing in android emulator. ionic cordova run android --emulator

Note: Android 6 (api 23) works, Android 7 (api 25) and 8 (api 26) does not work.

But in the web view (ionic cordova run browser) and iPhone (Ionic View App) it's showing perfectly

html template

<canvas #elChart></canvas>

scss

canvas {
    width: 100% !important;
}

component.ts (I tried responsive and maintainAspectRatio with true, false)

ngOnInit() {
    this.chart = new Chart(this.elChart.nativeElement, {
      type: this.typeChart,
      data: {
        datasets: [{
          data: this.dataChart,
          backgroundColor: this.colorsChart,
          borderWidth: 0
        }],
        labels: this.labelsChart
      },
      options: {
        responsive: false,
        maintainAspectRatio: false,
        legend: {
          display: false,
        },
      }

    });
  }

[rodrigocichetto]

I resolved temporarily with the issue #4570 but I would like that help me solve the problem completely, making Chart.js work normally.

[ghost]

Hi, How did you solve it?

[rodrigocichetto]

@samdonoso I resolved temporarily with issue #4570 Chart.js but I waiting that help me solve the problem completely, making Chart.js work normally.

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:

(jQuery)

$('#myChart').parent().html('<img style="max-height:100%;height:auto;width:100%;max-width:100%;margin:auto;display:inline;" src="' + chart.toBase64Image() + '" />');

(javascript)

document.getElementById('myChart').parentElement.innerHTML = '<img style="max-height:100%;height:auto;width:100%;max-width:100%;margin:auto;display:inline;" src="' + chart.toBase64Image() + '" />';

[thetazzbot]

I have a Pixel and the chart works fine. I have tested this on the Android Simulator for a Nexus 5 phone and the chart worked. I used API P for the Nexus 5. However, on the Nexus 7 and 10 tablets it does not work (no chart showing) using the API 27. This is really unfortunate for our new app that has the chart as its central theme. Sigh.

[DeanDavis]

Kind of a "me also" but I can't get chart.js to run on Android as well.
And it is a straight Cordova build, not Ionic.

[benmccann]

Please ask questions on StackOverflow: https://stackoverflow.com/questions/tagged/chart.js

[DeanDavis]

I'm not sure why this was closed.
The report is Chart.js doesn't work in a Cordova wrapper on Android API 25 and above.
I don't see how it was resolved.

[benmccann]

This seems like a duplicate of #4570. Let's track it there

Also, there's no information suggesting there's a bug in Chart.js as opposed to a bug in Cordova, Android, etc. or what you would like changed