candlestick.component.css

.dropdown:hover .dropdown-content { display: block; border-radius: 5px;}

::ng-deep .chart {
    background-color: rgb(68, 117, 117) !important;
    color:  rgb(252, 252, 252) !important;
    }

    .btn:hover{
        font-weight:700;
    }

candlestick.component.html

<div id="dash" (window:resize) = "windowSize($event)" class = "ui-fluid" style="margin:50px">

  <p-card header="Select/Add Stock: " [style]="{width: '20%',float: 'left'}">
      <div class="wrapper-1">
              <div>
                  <select
                    [(ngModel)] = "defaultStock"
                    (ngModelChange) = 'catcher($event)'>
                      <option
                        *ngFor="let s of stocks"
                        [value]="s.symbol">
                        <p >{{s.name}}</p>
                      </option>
                  </select>
              </div>
              <br>
                <div>
                  <button  (click)='showLine()' class="btn" style="background-color:rgb(18, 55, 68); color:white">LineChart</button><br><br>
                </div>
                <div>
                  <button  (click)='showCandle()' class="btn" style="background-color:rgb(18, 55, 68); color:white">CandlestickChart</button><br><br>
                </div>
                <div>
                  <button  (click)='checkAnother()' class="btn" style="background-color:rgb(18, 55, 68); color:white">Check Another</button><br><br>
                </div>
          </div>
            <div>

              <form (submit) = 'addStock()'>
                    <div class="form-group">
                      <label for="symbol">Symbol</label>
                      <input type="text" [(ngModel)]="symbol" name="symbol" class="form-control">
                    </div>

                    <div class="form-group">
                      <label for="name">Name</label>
                      <input type="text"  [(ngModel)]="name" name="name" class="form-control">
                    </div>

                    <button type="submit"  class="btn" style="background-color:rgb(18, 55, 68); color:white">Submit</button>

              </form>
            </div>
    </p-card>


  <p-card [styleClass]="'chart'" [style]="{width: '78%',float: 'right'}">
    <div>
      <p class="lead" style="text-align: center;font-size: small; font-family:Oswald">Displaying stock performance of: {{defaultStock}}</p>

      <p class="lead" style="text-align: center; font-size: small; font-family:Oswald;">The max closing price for <b>{{currStock}}</b> stock is: {{max}} at {{maxTime}}</p>
      <p class="lead" style="text-align: center; font-size: small; font-family:Oswald;">The min closing price for <b>{{currStock}}</b> stock is: {{min}} at {{minTime}}</p>

      <div *ngIf="no==0; else graph">
        <p class="lead" style="text-align: center; font-size: large; font-family:Oswald;"><b>Pick a stock to continue</b></p>
        <div style="text-align: center;"><img src="../../../assets/images/loading.gif" /></div>
      </div>




      <ng-template #graph>
        <div class= "ui-fluid" style="margin-left: 40px; margin-right: 30px;">
          <p-card [styleClass]="'chart'" [style]="{width: '78%'}">
        <google-chart #chart
        [title]="title"
        [type]="type"
        [data]= "data"
        [columns] = "columns"
        [options]="options"
        [width]="width"
        [height]="height">
      </google-chart>
    </p-card>
    </div>



    </ng-template>

  </div>

candlestick.component.ts

import { HostListener, Component, OnInit } from '@angular/core';
import { LiveMarketDataService } from '../../services/live-market-data.service';
import { Router } from '@angular/router';
import * as tf from '@tensorflow/tfjs';

@Component({
  selector: 'app-candlestick',
  templateUrl: './candlestick.component.html',
  styleUrls: ['./candlestick.component.css']
})
export class CandlestickComponent implements OnInit {
  selectedStock: string = '';
  @HostListener('window:resize', ['$event'])

  selectChangeHandler(event: any) {
    this.selectedStock = event.target.value;

  }
  stocks = [];
  symbol: string;
  name: string;
  mySubscription: any;
  largest: Number;
  defaultStock: string;
  stockDetails = [];
  title = this.selectedStock;
  type = 'CandlestickChart';
  max: Number;
  overAllMax: Number = 0;
  overAllMin: Number = 9999999;
  min: Number;
  maxTime: string;
  minTime: string;
  currStock: string;
  data = [];
  w = document.documentElement.clientWidth;
  h = document.documentElement.clientHeight;
  columns = ['Timestamp', 'Open', 'High', 'Low', 'Close'];
  options = { candlestick: {
    fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
    risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
  },
  width: window.innerWidth*0.6,
  height: window.innerHeight*0.7,
  bar: { groupWidth: '100%' },
  animation: { duration: 500,
            startup : true},
  hAxis: {
    textStyle: {
      color: 'white'
    }
  },
  legend: {textStyle: {color: 'white'}},
  vAxis: {
    textStyle: {
      color: 'white'
    }
  },
  chartArea: {left:80,top:20,width:'70%',height:'75%'},
backgroundColor: '#000000',} ;
  width = this.w*0.60;
  height = this.h*0.70;
  count = 0;
  no = 0;
  stocker = {};

  linearModel: tf.Sequential;
  prediction: any;
  arr: any = [];
  constructor(private livemarketdataservice: LiveMarketDataService, private router: Router) {
 }

  ngOnInit(): any
{   this.stocks = [
      {symbol: "IBM", name: "IBM"},
      {symbol: "FB", name: "Facebook"},
      {symbol: "WMT", name: "Walmart"},
      {symbol: "SNAP", name: "Snap Inc"},
      {symbol: "AAPL", name: "Apple"},
      {symbol: "NFLX", name: "Netflix"},
      {symbol: "TWTR", name: "Twitter"},
      {symbol: "AMZN", name: "Amazon"},
      {symbol: "SPOT", name: "Spotify"},
      {symbol: "TSLA", name: "Tesla Inc"},
      {symbol: "DAL", name: "Delta Airlines"},
      {symbol: "MSFT", name: "Microsoft"},
      {symbol: "MA", name: "Mastercard"},
];
}
/*************************************** */
//Prediction
async train(x): Promise<any> {
      this.linearModel = tf.sequential();
      this.linearModel.add(tf.layers.dense({units: 1, inputShape: [1]}));
      this.linearModel.compile({loss: 'meanSquaredError', optimizer: 'sgd'});
      let y = [];
      for(let i = 1; i < x.length; i++)
          y.push(x[i]);
      let k = x.pop();
      const xs = tf.tensor1d(x);
      const ys = tf.tensor1d(y);

      await this.linearModel.fit(xs, ys)
      this.predict(k);
}

predict(val: number)
{
  const output = this.linearModel.predict(tf.tensor2d([val], [1, 1])) as any;
  this.prediction = Array.from(output.dataSync())[0];
}
/************** */


windowSize(event) {

  this.options.width = event.target.innerWidth*0.6;
  this.options.height = event.target.innerHeight*0.6;
}
addStock()
{
  this.stocks.push(
    {
      symbol: this.symbol,
      name: this.name
    }
  );
}

catcher(val){
  //this.windowSize();
  this.showChart(val, this.type);
}

showChart(val, type) {

      this.no++;
      this.type = type;
      this.livemarketdataservice.stockLiveData(val).subscribe(res => {

      this.currStock = val;
      this.max = 0;
      this.min = 999999;
      let timeStamp = res["Time Series (30min)"];
      let element: any;

      for(element in timeStamp)
      {
          if(this.max < parseFloat(res["Time Series (30min)"][element]["4. close"]))
          {
            this.max = parseFloat(res["Time Series (30min)"][element]["4. close"]);
            this.maxTime = element;
          }
          if(this.min > parseFloat(res["Time Series (30min)"][element]["4. close"]))
          {
            this.min = parseFloat(res["Time Series (30min)"][element]["4. close"]);
            this.minTime = element;
          }

        this.stockDetails.unshift([
        element,
        parseFloat(res["Time Series (30min)"][element]["3. low"]),
        parseFloat(res["Time Series (30min)"][element]["1. open"]),
        parseFloat(res["Time Series (30min)"][element]["4. close"]),
        parseFloat(res["Time Series (30min)"][element]["2. high"]),

      ])
      this.arr.unshift(parseFloat(res["Time Series (30min)"][element]["4. close"]));
      }
      this.data = this.stockDetails;

      //Prediction
      this.stocker[val] = this.arr;
      this.train(this.stocker[val]);
  });
}

showLine(){
  this.type = 'LineChart';
}
showCandle(){
  this.type = 'CandlestickChart';
}
checkAnother() {
      //location.reload();
      this.data = [];
      this.no = 0;
      this.stockDetails = [];
}
}