How to add highchart in angular 5

Highchart is an popular libary to implement charts in your application. Highcharts comes with both personal and commercial version.

Users can purchase based on needs.

Here the steps to implement in Angular 5 Application.

Step 1:

# install angular-highcharts and highcharts
npm i --save angular-highcharts highcharts

# install highcharts typings
npm i --save-dev @types/highcharts

Step 2:

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

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

Step 3:


// 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));
  }
}

More Information: github.com