Implement ng2-charts in an Angular-Seed

Question

I was unable to to compile a Production AOT build ("npm run build.prod.rollup.aot") in Angular Seed - after implementing ng2-charts in my app (when I run "npm run start.deving - I could've seen the chart, but it would fail for Karma UnitTesting - in the ***.spec.ts file).

Answer 1

The following solution did the work for me (after installing ng2-chart & charts.js via npm):

import ChartsModule in your main module (e.g. "home.module.ts"):

import { ChartsModule } from 'ng2-charts/ng2-charts';

Then - provide it to let other components (that are inside this module) use this module (do the same in your equivalent "...spec.ts" file (e.g. "home.component.spec.ts"):

@NgModule({
imports:[ChartsModule,...]
)}

• Fix Karma UnitTesting & AOT compilation by amending the following to your project.config.ts

--

this.ROLLUP_NAMED_EXPORTS = [
  ...this.ROLLUP_NAMED_EXPORTS,
  {'node_modules/ng2-charts/ng2-charts.js': ['ChartsModule']}
]

let additionalPackages: ExtendPackages[] = [

  // required for dev build 
  {
    name: 'ng2-charts/ng2-charts',
    // Path to the package's bundle
    path: 'node_modules/ng2-charts/bundles/ng2-charts.umd.min.js'
  }, 

Just to make sure, I've added the actual chart implementation component (e.g. "line-chart.component.ts"):

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'line-chart',
  templateUrl: './line-chart.component.html',
  styleUrls: ['line-chart.component.css'],
})
export class LineChartComponent {
  // lineChart
  public lineChartData:Array<any> = [
    {data: [28, 48, 40, 19, 110, 27, 120, 28, 48, 40, 19, 110, 27, 60, 120, 28, 48, 40, 19, 110, 27, 120, 28, 48, 40, 19, 110, 27, 60, 120], label: ''}
  ];
  public lineChartLabels:Array<any> = ['', '', '', '', '', '', '','', '', '', '', '', '', '','', '', '', '', '', '', '','', '', '', '', '', '', '', '', ''];
  public lineChartOptions:any = {
    scales: { // remove grid lines
      xAxes: [{
          display: false,
          gridLines: {
              display:false
          }
      }],
      yAxes: [{
          display: false,
          gridLines: {
              display:false
          }
      }]
    },    
    responsive: true,
    legend: {display:false}
  };
  public lineChartColors:Array<any> = [
    {
      backgroundColor: 'transparent',
      borderColor: '#9C0100',
      pointBackgroundColor: '#7E0001',
      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);
  }
}

and use it in each component (that is part of the module):

<line-chart></line-chart>

Answer 2

I'm not using ng2-charts in my Angular 6.1 website; however, I am using chart.js by itself in mgechev/angular-seed. I decided I don't need or want the extra ng2-charts wrapper. In the end, you're really just using chart.js anyway.

As of writing this response, Chart.js developers have some work to do to make exporting its members compliant with newer standards.

To get Chart.js to work, all you need to do is:

1. Update project.config.ts to include ROLLUP_NAMED_EXPORTS

   this.ROLLUP_NAMED_EXPORTS = [
     ...this.ROLLUP_NAMED_EXPORTS,
     { 'node_modules/chart.js/src/chart.js': ['Chart'] }
   ];
   

2. Update project.config.ts to include additional packages

   // Add packages
   const additionalPackages: ExtendPackages[] = [
    { name: 'chart.js', path: 'node_modules/chart.js/dist/Chart.bundle.min.js' },
   
     ...
   
   ];
   

3. In your component

   import { Chart } from 'chart.js';
   
   ...
   
   export class MyComponent implements OnInit {
   
   @ViewChild('myChart') myChartRef: ElementRef;
   chartObj: Chart;
   
   ...
   }
   

   Then load chart configuration in ngOnInit() per Chart.js documentation

4. HTML will look something like this:

   <div class="chart-container">
      <canvas #myChart></canvas>
   </div>