Adding scatter chart serie to candlestick chart in Angular Google Charts

Question

I'm using Angular Google Charts to display candlesticks charts. Currently it looks as the following:

I want to add points representing buy and sell orders for my backtesting. Just like that:

Notice the red/green dots. Basically the guy did it with an additional serie:

I have two static layers, the first one for the candles (Candle Series), and the second for the backtest results (Bubble Series)

Google's charts are allowing me to use Scatter charts that represent those points. However, I don't know how to add a new scatter chart serie into my candlestick chart. Have someone done it yet? Code below.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { KlineInterval } from 'src/app/core/types/bot';
import { DatePipe } from '@angular/common';
import { BinanceKline } from 'src/app/core/types/binance';
import { BinanceService } from 'src/app/core/services/binance.service';

@Component({
  selector: 'app-backtesting',
  templateUrl: './backtesting.component.html',
  styleUrls: ['./backtesting.component.css']
})
export class BacktestingComponent implements OnInit, OnDestroy {
  binances$: Observable<BinanceKline[]>;

  private componentDestroyed$ = new Subject<boolean>();

  // Angular Google Charts
  chartDrawn = false;
  chartData = [];
  chartOptions = {
    tooltip: { isHtml: true },
    title: 'Backtesting',
    height: 500,
    chartArea: { width: '80%', height: '80%' },
    legend: { position: 'bottom', textStyle: { color: 'black', fontSize: 16 } },
    series: {
      0: { color: 'black', visibleInLegend: true },
      3: { color: 'red', visibleInLegend: true }
    }
  };
  chartColumnNames = ['Label', 'Low', 'Open', 'Close', 'High', { type: 'string', role: 'tooltip', p: { html: true } }];

  constructor(private binanceService: BinanceService) { }

  ngOnInit() {
    this.getAllKlines();
  }

  ngOnDestroy() {
    this.componentDestroyed$.next(true);
    this.componentDestroyed$.complete();
  }

  private customTooltip(candlestick: BinanceKline): string {
    let pipe = new DatePipe('en-US');
    let openTime = pipe.transform(candlestick.openTime, 'HH:mm');
    let closeTime = pipe.transform(candlestick.closeTime, 'HH:mm');

    return `<div style="font-size: 14px; white-space: nowrap; padding: 10px;">
    <b>Open Time:</b> ${openTime}<br /><b>Close Time:</b> ${closeTime}<br />
    <b>Open:</b> ${candlestick.open.toFixed(2)}<br /><b>Close:</b> ${candlestick.close.toFixed(2)}<br />
    <b>High:</b> ${candlestick.high.toFixed(2)}<br /><b>Low:</b> ${candlestick.low.toFixed(2)}<br />
    <b>VOL:</b> ${candlestick.volume.toFixed(2)}
    </div>`;
  }

  private getAllKlines() {
    this.binances$ = this.binanceService.getAllKlines("TRXUSDT", KlineInterval.OneHour);

    this.chartDrawn = false;
    this.chartData = [];

    this.binances$
      .pipe(takeUntil(this.componentDestroyed$))
      .subscribe(candlesticks => {
        for (let i = 0; i < candlesticks.length; i++) {
          this.chartData.push([
            null,
            candlesticks[i].low,
            candlesticks[i].open,
            candlesticks[i].close,
            candlesticks[i].high,
            this.customTooltip(candlesticks[i])
          ]);
        }

        this.chartDrawn = true;
      });
  }
}

<section id="backtesting">
  <div class="container">
    <div class="row">

      <ng-container *ngIf="chartDrawn">
        <div class="col-lg-12">
          <google-chart class="mb-1" type="CandlestickChart" [data]="chartData" [options]="chartOptions"
            [columnNames]="chartColumnNames">
          </google-chart>
        </div>
      </ng-container>

    </div>
  </div>
</section>

ZetaPR ZetaPR · Accepted Answer · 2020-01-27T14:58:19

Google Angular Charts provides a way of creating Combination charts. Combination chart helps in rendering series as different type in the same chart. The following types are available: line, area, bars, candlesticks and stepped area. Following the next documentation here:

https://developers.google.com/chart/interactive/docs/gallery/combochart

I think that the proper combination would be Candlesticks + Line charts, then you may change the lines in the chart to not being shown if needed.

You may find a JS tutorial on how to combine this two here

Adding scatter chart serie to candlestick chart in Angular Google Charts

1 Answers