javascript - Failed to use Chart.js using Angular2 -

hello im trying use 1 of charts http://www.chartjs.org cant make works.. installed npm install chart.js --save documentation requires , use code creat chart.

.ts

 import { component } '@angular/core';  @component({   selector: 'app-root',   templateurl: './app.component.html',   styleurls: ['./app.component.css'] })   export class appcomponent  {  constructor(){  var linechartdata: [12, 19, 3, 5, 2, 3]; var linechartlabels: string[] = ["red", "blue", "yellow", "green", "purple", "orange"];  var  linechartoptions: = {     responsive: true,     animation: false,      beginatzero:true    }; var linechartcolors: array<any> = [     { // grey       backgroundcolor: 'rgba(33,150,243,0.2)',       bordercolor: 'rgba(33,150,243,1)',       pointbackgroundcolor: 'rgba(33,150,243,1)',       pointbordercolor: '#fff',       pointhoverbackgroundcolor: '#fff',       pointhoverbordercolor: 'rgba(33,150,243,0.8)'     },     { // dark grey       backgroundcolor: 'rgba(76,175,80,0.2)',       bordercolor: 'rgba(76,175,80,1)',       pointbackgroundcolor: 'rgba(76,175,80,1)',       pointbordercolor: '#fff',       pointhoverbackgroundcolor: '#fff',       pointhoverbordercolor: 'rgba(76,175,80,1)'     },     { // grey       backgroundcolor: 'rgba(244,67,54,0.2)',       bordercolor: 'rgba(244,67,54,1)',       pointbackgroundcolor: 'rgba(244,67,54,1)',       pointbordercolor: '#fff',       pointhoverbackgroundcolor: '#fff',       pointhoverbordercolor: 'rgba(244,67,54,0.8)'     },     { // grey       backgroundcolor: 'rgba(103,58,183,0.2)',       bordercolor: 'rgba(103,58,183,1)',       pointbackgroundcolor: 'rgba(103,58,183,1)',       pointbordercolor: '#fff',       pointhoverbackgroundcolor: '#fff',       pointhoverbordercolor: 'rgba(103,58,183,0.8)'     },     { // grey       backgroundcolor: 'rgba(255,152,0,0.2)',       bordercolor: 'rgba(255,152,0,1)',       pointbackgroundcolor: 'rgba(255,152,0,1)',       pointbordercolor: '#fff',       pointhoverbackgroundcolor: '#fff',       pointhoverbordercolor: 'rgba(255,152,0,0.8)'     },     { // grey       backgroundcolor: 'rgba(96,125,139,0.2)',       bordercolor: 'rgba(96,125,139,1)',       pointbackgroundcolor: 'rgba(96,125,139,1)',       pointbordercolor: '#fff',       pointhoverbackgroundcolor: '#fff',       pointhoverbordercolor: 'rgba(96,125,139,0.8)'     }       ];    var linechartlegend: boolean = true;   var linecharttype: string = 'line';   }  } 

.html

    <script src="node_modules/chart.js/src/chart.js"></script>  <canvas basechart height="200"         [datasets]="linechartdata"         [labels]="linechartlabels"         [options]="linechartoptions"         [colors]="linechartcolors"         [legend]="linechartlegend"         [charttype]="linecharttype"   ></canvas> 

.module

    import { browsermodule } '@angular/platform-browser'; import { ngmodule } '@angular/core'; import { chartsmodule } 'ng2-charts/ng2-charts';  import { appcomponent } './app.component';  @ngmodule({   declarations: [     appcomponent   ],   imports: [     browsermodule,     chartsmodule   ],   providers: [],   bootstrap: [appcomponent] }) export class appmodule { } 

updated code, page blank, have no errors in console message :

angular running in development mode. call enableprodmode() enable production mode.

chart.js needs wrapped work typescript. using import {chart} 'chart.js'; won't work. try different npm library one:

https://www.npmjs.com/package/ng2-charts

i've had success it. should fix issue.

you won't need import chart @ all.

just include cart in html. this:

 <canvas basechart height="200"         [datasets]="linechartdata"         [labels]="linechartlabels"         [options]="linechartoptions"         [colors]="linechartcolors"         [legend]="linechartlegend"         [charttype]="linecharttype"   ></canvas> 

then access in component. this:

linechartdata: array<any>; linechartlabels: string[] = [..data..       ];    linechartoptions: = {     responsive: true,     animation: false,    };   linechartcolors: array<any> = [     { // grey       backgroundcolor: 'rgba(33,150,243,0.2)',       bordercolor: 'rgba(33,150,243,1)',       pointbackgroundcolor: 'rgba(33,150,243,1)',       pointbordercolor: '#fff',       pointhoverbackgroundcolor: '#fff',       pointhoverbordercolor: 'rgba(33,150,243,0.8)'     },     { // dark grey       backgroundcolor: 'rgba(76,175,80,0.2)',       bordercolor: 'rgba(76,175,80,1)',       pointbackgroundcolor: 'rgba(76,175,80,1)',       pointbordercolor: '#fff',       pointhoverbackgroundcolor: '#fff',       pointhoverbordercolor: 'rgba(76,175,80,1)'     },     { // grey       backgroundcolor: 'rgba(244,67,54,0.2)',       bordercolor: 'rgba(244,67,54,1)',       pointbackgroundcolor: 'rgba(244,67,54,1)',       pointbordercolor: '#fff',       pointhoverbackgroundcolor: '#fff',       pointhoverbordercolor: 'rgba(244,67,54,0.8)'     },     { // grey       backgroundcolor: 'rgba(103,58,183,0.2)',       bordercolor: 'rgba(103,58,183,1)',       pointbackgroundcolor: 'rgba(103,58,183,1)',       pointbordercolor: '#fff',       pointhoverbackgroundcolor: '#fff',       pointhoverbordercolor: 'rgba(103,58,183,0.8)'     },     { // grey       backgroundcolor: 'rgba(255,152,0,0.2)',       bordercolor: 'rgba(255,152,0,1)',       pointbackgroundcolor: 'rgba(255,152,0,1)',       pointbordercolor: '#fff',       pointhoverbackgroundcolor: '#fff',       pointhoverbordercolor: 'rgba(255,152,0,0.8)'     },     { // grey       backgroundcolor: 'rgba(96,125,139,0.2)',       bordercolor: 'rgba(96,125,139,1)',       pointbackgroundcolor: 'rgba(96,125,139,1)',       pointbordercolor: '#fff',       pointhoverbackgroundcolor: '#fff',       pointhoverbordercolor: 'rgba(96,125,139,0.8)'     }       ];    linechartlegend: boolean = true;   linecharttype: string = 'line';