Q:

Google Candlestick Chart object mapping

I recently installed Angular Google Charts and their data format doesn't match mine. Is there a way I can match both models or their chart can't handle it?
Example of google charts:
  @ViewChild('chart', { static: true })
  public chart: GoogleChartComponent;
  public changingChart = {
    title: 'Changing Chart',
    type: 'CandlestickChart',
    data: [ // Note this
      ['Mon', 20, 28, 38, 45],
      ['Tue', 31, 38, 55, 66],
      ['Wed', 50, 55, 77, 80],
      ['Thu', 77, 77, 66, 50],
      ['Fri', 68, 66, 22, 15]
    ],
    options: {
      animation: {
        duration: 250,
        easing: 'ease-in-out',
        startup: true
      }
    }
  };

My model:
export interface BinanceKline {
  openTime: Date;
  open: number;
  high: number;
  low: number;
  close: number;
  volume: number;
  closeTime: Date;
}

All I want to is load the data from this service function into the Google candlestick chart:
  getAllKlines(symbol: string, interval: KlineInterval) {
    return this.httpClient.get<BinanceKline[]>(`${this.actionUrl}/${symbol}/${interval}`);
  }

A:

If you look at their documentation:

Col 0: String (discrete) used as a group label on the X axis, or number, date, datetime, or timeofday (continuous) used as a value on the X axis.
Col 1: Number specifying the low/minimum value of this marker. This is the base of the candle's center line. The column label is used as the series label in the legend (while the labels of the other columns are ignored).
Col 2: Number specifying the opening/initial value of this marker. This is one vertical border of the candle. If less than the column 3 value, the candle will be filled; otherwise it will be hollow.
Col 3: Number specifying the closing/final value of this marker. This is the second vertical border of the candle. If less than the column 2 value, the candle will be hollow; otherwise it will be filled.
Col 4: Number specifying the high/maximum value of this marker. This is the top of the candle's center line.
Col 5 [Optional]: A tooltip or style column for the candlestick.

You see that the fields are as following:

Label (could be a date)
Low
Open
Close
High
Tooltip (optional)

You can add data that by defining chartData = []; into your typescript file, pushing data into it and using it as a data source.
<google-chart [data]="chartData" ...></google-chart>

And wherever you fetch data, push it into your chartData.
getData() {
    this.chartData = [];

    this.service.getData()
        .pipe(takeUntil(destroySubscription$)
        .subscribe(data => {
            for (let i = 0; i < data.length; i++) {
                this.chartData.push([
                    "Label",
                    data[i].low,
                    data[i].open,
                    data[i].close,
                    data[i].high
                ]);
            }
        });
}

