Creare grafici in Angular CLI con Angular Highcharts

Come prima azione occorre installare Angular Highcharts, le informazioni sono nella pagina alla seguente URL:

https://www.npmjs.com/package/angular-highcharts

In sostanza occorre effettuare l’installazione con il comando

npm i angular-highcharts highcharts

N.B. ho aggiunto highcharts per installare angular-highcharts e highcharts

Una volta effettuata l’installazione occorre importare il modulo installato inserendo i riferimenti nel file app.module.ts:

// app.module.ts
import { ChartModule } from 'angular-highcharts';

@NgModule({
  imports: [
    ChartModule // add ChartModule to your imports
  ]
})
export class AppModule {}

Per l’utilizzo qui di seguito un esempio:

// chart.component.ts
import { Chart } from 'angular-highcharts';

@Component({
  template: `
    <button (click)="add()">Add Point!</button>
    <div [chart]="chart"></div>
  `
})
export class ChartComponent {
  chart = new Chart({
    chart: {
      type: 'line'
    },
    title: {
      text: 'Linechart'
    },
    credits: {
      enabled: false
    },
    series: [
      {
        name: 'Line 1',
        data: [1, 2, 3]
      }
    ]
  });

  // add point to chart serie
  add() {
    this.chart.addPoint(Math.floor(Math.random() * 10));
  }
}