import { DashboardComponent } from './Dashboard/dashboard.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';

import { AppComponent } from './app.component';

import stock from 'highcharts/modules/stock.src';
import more from 'highcharts/highcharts-more.src';


export function highchartsModules() {
  // apply Highcharts Modules to this array
  return [stock, more];
}

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
  ],
  imports: [
    BrowserModule,
    ChartModule
  ],

  providers: [
    {
      provide: HIGHCHARTS_MODULES,
      useFactory: highchartsModules
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {


}

import { Component, OnInit } from '@angular/core';
import { Chart, StockChart } from 'angular-highcharts';

@Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent {

    stock: StockChart;

    constructor() { }


    ngAfterViewInit() {
        this.stock = new StockChart({
            rangeSelector: {
                selected: 1
            },
            title: {
                text: 'AAPL Stock Price'
            },
            series: [{
                // tooltip: {
                //   valueDecimals: 2
                // },
                name: 'AAPL',
                data: [
                    [1293580800000, 46.47],
                    [1293667200000, 46.24],
                    [1293753600000, 46.08],
                    /* Jan 2011 */
                    [1294012800000, 47.08],
                    [1294099200000, 47.33],
                    [1294185600000, 47.71],
                    [1294272000000, 47.68],
                    [1294358400000, 48.02],
                    [1294617600000, 48.92],
                    [1294704000000, 48.81],
                    [1294790400000, 49.20],
                    [1294876800000, 49.38],
                    [1294963200000, 49.78],
                    [1295308800000, 48.66],
                    [1295395200000, 48.41],
                    [1295481600000, 47.53],
                    [1295568000000, 46.67],
                    [1295827200000, 48.21],
                    [1295913600000, 48.77],
                    [1296000000000, 49.12],
                    [1296086400000, 49.03],
                    [1296172800000, 48.01],
                    [1296432000000, 48.47]

                ]
            }]
        });
    }
}

<div [chart]="stock"></div>

{
  "name": "angular-io-example",
  "version": "1.0.0",
  "private": true,
  "description": "Example project from an angular.io guide.",
  "scripts": {
    "ng": "ng",
    "build": "ng build --prod",
    "start": "ng serve",
    "test": "ng test",
    "lint": "tslint ./src/**/*.ts -t verbose",
    "e2e": "ng e2e"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/animations": "~5.0.0",
    "@angular/common": "~5.0.0",
    "@angular/compiler": "~5.0.0",
    "@angular/compiler-cli": "~5.0.0",
    "@angular/core": "~5.0.0",
    "@angular/forms": "~5.0.0",
    "@angular/http": "~5.0.0",
    "@angular/platform-browser": "~5.0.0",
    "@angular/platform-browser-dynamic": "~5.0.0",
    "@angular/platform-server": "~5.0.0",
    "@angular/router": "~5.0.0",
    "@angular/upgrade": "~5.0.0",
    "@types/jquery": "^3.3.4",
    "angular-highcharts": "^6.1.3",
    "angular-in-memory-web-api": "~0.5.0",
    "angular2-highcharts": "^0.5.5",
    "bootstrap": "^4.1.1",
    "core-js": "^2.4.1",
    "highcharts": "^6.1.0",
    "jquery": "^3.3.1",
    "rxjs": "^5.5.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.6.5",
    "@types/highcharts": "^5.0.22",
    "@types/jasmine": "~2.8.0",
    "@types/jasminewd2": "^2.0.3",
    "@types/node": "^6.0.45",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.3",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "lodash": "^4.16.2",
    "phantomjs-prebuilt": "^2.1.7",
    "protractor": "~5.1.0",
    "ts-node": "^3.3.0",
    "tslint": "^3.15.1",
    "typescript": "2.4.2"
  },
  "repository": {}
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>


  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
    crossorigin="anonymous">

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
    crossorigin="anonymous">

   <!--Implementing High Stock Charts -->
  <!--<script src="https://code.highcharts.com/stock/highstock.js"></script>
  <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>-->

</head>

<body>
  <app-root></app-root>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
    crossorigin="anonymous"></script>
</body>

</html>