Chart.js is not displayed on Android

Question

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 is not displayed in android emulator. ionic cordova run android --emulator.

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

But in the web view (ionic cordova run browser) and iPhone (Ionic View App) it displays perfectly.

html template

<canvas #elChart></canvas>

scss

canvas {
    width: 100% !important;
}

Component.ts (I tried setar Responsive and maintainAspectRatio as true or 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,
        },
      }

    });
  }

Answer 1

I resolved temporarily with the Volume #4570 Chart.js but hopefully help me solve the problem completely by making Chart.js work normally.

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

1- Wrap your canvas within a div (add the styles you may need to div)

<div><canvas height="400" id="myChart" width="400"></canvas></div>

2- Remove any "animation" (although you can change the code of item 3 / to use the endAnimation event to track when performing the temporal correction) - Add these options:

options: { animation:{duration:0}, ..... }

3- Add the following code (simple but can be improved to the end of animation if necessary):

(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() + '" />';

Follow the Issue #5184 Chart.js on Github