sample chart with highchart

dashboard.component.ts

import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
import 'highcharts/adapters/standalone-framework.src';
declare var require: any;
const Highcharts = require('highcharts/highcharts.src');

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
  private _chart: any;
  @ViewChild('chart') public chartEl: ElementRef;
  carsList: Array<any>;

  private randomValue() {
    return Math.floor(Math.random() * 10) + 0;
  }
  constructor() {
    this.carsList = ['BMW Serie 1', 'BMW Serie 2', 'BMW Serie 3', 'Angular Car', 'Angular 2 iCar'];
  }
  ngOnInit(): void {
    const me = this;

    setInterval(function () {
      if (me._chart) {
        me._chart['series'][0].addPoint([(new Date()).getTime(), me.randomValue()], true, true);
      }
    }, 2000);
  }
  public ngAfterViewInit() {
    const opts: any = {
      xAxis: {
        type: 'datetime',
        tickPixelInterval: 150,
        title: {
          text: 'Maison'
        }
      }, title: {
        text: 'Nombre de vues'
      }, credits: {
        enabled: false
      },
      legend: {
        enabled: false
      },
      yAxis: {
        title: {
          text: 'Nombre de vues'
        },
        labels: {
          formatter: function () {
            return this.value * 10;
          }
        }
      },
      series: [{
        name: 'Random data',
        data: (function () {
          // generate an array of random data
          const data = [],
            time = (new Date()).getTime();


          for (let i = -19; i <= 0; i += 1) {
            data.push({
              x: time + i * 1000,
              y: Math.floor(Math.random() * 10) + 0
            });
          }
          return data;
        }())
      }]
    };

    if (this.chartEl && this.chartEl.nativeElement) {
      opts.chart = {
        type: 'column',
        renderTo: this.chartEl.nativeElement
      };

      this._chart = new Highcharts.Chart(opts);
    }
  }

  public ngOnDestroy() {
    this._chart.destroy();
  }
}