Displaying Charts - Angular 2

Question

I am trying to display charts i.e Line chart in my angular 2 application. But i am very new to how charts are being displayed. I am following the documentation from valor software but i am not getting a good result. There is an error showing up in my console . I have imported the ChartsModule in my app.module.ts. What must i do right to the line chart?

dashboard.html

<div class="row">
  <div class="col-md-6">
    <div style="display: block;">
    <canvas baseChart width="400" height="400"
                [datasets]="lineChartData"
                [labels]="lineChartLabels"
                [options]="lineChartOptions"
                [colors]="lineChartColors"
                [legend]="lineChartLegend"
                [chartType]="lineChartType"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></canvas>
    </div>
  </div>
  <div class="col-md-6" style="margin-bottom: 10px">
    <table class="table table-responsive table-condensed">
      <tr>
        <th *ngFor="let label of lineChartLabels">{{label}}</th>
      </tr>
      <tr *ngFor="let d of lineChartData">
        <td *ngFor="let label of lineChartLabels; let j=index">{{d && d.data[j]}}</td>
      </tr>
    </table>
    <button (click)="randomize()">CLICK</button>
  </div>
</div>

dashboardComponent

@Component({
  selector: 'line-chart-demo',
  templateUrl: './dashboard.html'
})
export class LineChartDemoComponent {
  // lineChart
  public lineChartData:Array<any> = [
    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
    {data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
  ];
  public lineChartLabels:Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  public lineChartOptions:any = {
    responsive: true
  };
  public lineChartColors:Array<any> = [
    { // grey
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    },
    { // dark grey
      backgroundColor: 'rgba(77,83,96,0.2)',
      borderColor: 'rgba(77,83,96,1)',
      pointBackgroundColor: 'rgba(77,83,96,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(77,83,96,1)'
    },
    { // grey
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    }
  ];
  public lineChartLegend:boolean = true;
  public lineChartType:string = 'line';

  public randomize():void {
    let _lineChartData:Array<any> = new Array(this.lineChartData.length);
    for (let i = 0; i < this.lineChartData.length; i++) {
      _lineChartData[i] = {data: new Array(this.lineChartData[i].data.length), label: this.lineChartData[i].label};
      for (let j = 0; j < this.lineChartData[i].data.length; j++) {
        _lineChartData[i].data[j] = Math.floor((Math.random() * 100) + 1);
      }
    }
    this.lineChartData = _lineChartData;
  }

  // events
  public chartClicked(e:any):void {
    console.log(e);
  }

  public chartHovered(e:any):void {
    console.log(e);
  }
}

angular-cli.json

"scripts": [
        "../node_modules/chart.js/src/chart.js"

       ],

error

Uncaught ReferenceError: require is not defined
    at eval (eval at webpackJsonp.1166.module.exports (addScript.js:9), <anonymous>:4:38)
    at eval (<anonymous>)
    at webpackJsonp.1166.module.exports (addScript.js:9)
    at Object.519 (chart.js?7d5f:1)
    at __webpack_require__ (bootstrap 48f1b30…:52)
    at Object.1215 (addScript.js:10)
    at __webpack_require__ (bootstrap 48f1b30…:52)
    at webpackJsonpCallback (bootstrap 48f1b30…:23)
    at scripts.bundle.js:1

Answer 1

initially you have to install chart.js

npm install ng2-charts chart.js --save

once it's done need to import it in your app.module.ts file
import { ChartsModule } from 'ng2-charts';
@NgModule( declarations: [],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ChartsModule,

])

These charts are depend on C3 so have to include it also

 npm install c3

Final thing which you have missed it you also have to add style under angular.cli.json

"styles": [
    "../node_modules/c3/c3.min.css"
  ],

Answer 2

1. Include <script src="node_modules/chart.js/src/chart.js"></script> in your dashboard.html.

2. Add <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script> to your index.html file.