Uncaught Error: Can't resolve all parameters for Chart: (?, ?) in Ionic


#1

I have implemented chart in my ionic2 application. But when I try to run the application, I am getting an error Uncaught Error: Can't resolve all parameters for Chart: (?, ?) . Could you please help me with this issue? I have used chart.js library.

Code

export class ChartPage {
  @ViewChild('barCanvas') barCanvas:ElementRef;     
  barChart: any;
  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad() {

  this.barChart = new Chart(this.barCanvas.nativeElement, {

      type: 'bar',
      data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
              label: '# of Votes',
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255,99,132,1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero:true
                  }
              }]
          }
      }

  });
  }

#2

have you improted the chart?
import { Chart } from 'chart.js';


#3

Yes, I have imported


#4

are you sure it is installed? check your package.json and run npm install


#5
"@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/sqlite": "^4.5.2",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic-native/toast": "^4.5.2",
    "@ionic/pro": "1.0.16",
    "@ionic/storage": "2.1.3",
    **"chart.js": "^2.7.1",**
    "cordova-android": "~6.3.0",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-ionic-webview": "^1.1.16",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-whitelist": "^1.3.1",
    "cordova-plugin-x-toast": "^2.6.0",
    "cordova-sqlite-storage": "^2.1.3",
    "ionic-angular": "3.9.2",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "rxjs": "5.5.2",

#6

try using 2.7.0 and run npm install in console


#7

No. Its not working in 2.7.0


#8

try doing this:


#9

I have followed the same documentation. Also the source code contains the same error when I run the code


#10

maybe new ionic is somehow incompatible with chart.js, what is your ionic info output?


#11
 @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.5
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v6.10.3
    npm               : 3.10.10
    OS                : Windows 8.1

Environment Variables:

    ANDROID_HOME : C:\Users\cool\AppData\Local\Android\Sdk

Misc:

    backend : pro

which library is good for implementing chart?chart.js or ng2-charts?


#12

this my output, maybe try changing something?
i have often problems with new ionic CLI so maybe try this first

    @ionic/cli-utils  : 1.12.0
    ionic (Ionic CLI) : 3.12.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.2.3 browser 5.0.0 ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.1

System:

    Android SDK Tools : 26.0.2
    Node              : v6.11.0
    npm               : 5.3.0
    OS                : Windows 10

#13

No change even after changing versions


#14

Anyone is able to find any solution for this?


#15

Did you solved this problem at last?
I am facing same problem.


#16

I had faced the similar issue when i tried to import chart.js in app.module and importing in providers
removing the import in providers resolved my issue, hope it helps someone