title: Data column(s) for axis #0 cannot be of type string (sometimes) - Google Charts
body: <p>I'm getting into Angular Google Charts lately but there is an issue that I couldn't handle.</p>
  
  <p>On my chart page, there are 2 select buttons and based on the selection, it queries data from the database and renders the chart. The problem is that it sometimes renders it and sometimes it shows the following error:</p>
  
  <blockquote>
    <p>Data column(s) for axis #0 cannot be of type string</p>
  </blockquote>
  
  <p>Any ideas why this is happening?</p>
  
  <pre><code>export interface BinanceKline {
    openTime: Date;
    open: number;
    high: number;
    low: number;
    close: number;
    volume: number;
    closeTime: Date;
  }
  </code></pre>
  
  <p>Server output:</p>
  
  <pre><code>[
    {
      "openTime": "2019-10-20T06:00:00Z",
      "open": 7910.87,
      "high": 7940.47,
      "low": 7902,
      "close": 7928.05,
      "volume": 504.719646,
      "closeTime": "2019-10-20T06:59:59.999Z"
    },
    {
      "openTime": "2019-10-20T07:00:00Z",
      "open": 7928.05,
      "high": 7935.94,
      "low": 7900.22,
      "close": 7905.17,
      "volume": 751.587636,
      "closeTime": "2019-10-20T07:59:59.999Z"
    }
  ]
  </code></pre>
  
  <p>Code here:</p>
  
  <p>home.component.ts</p>
  
  <pre><code>import { Component, OnInit, OnDestroy } from '@angular/core';
  import { combineLatest, Subject, ReplaySubject, Observable } from 'rxjs';
  import { takeUntil, tap } from 'rxjs/operators';
  
  import { CryptoPairService } from 'src/app/core/services/crypto-pair.service';
  import { TimeIntervalService } from 'src/app/core/services/time-interval.service';
  import { BinanceService } from 'src/app/core/services/binance.service';
  
  import { CryptoPair } from 'src/app/core/types/crypto-pair';
  import { TimeInterval } from 'src/app/core/types/time-interval';
  import { BinanceKline } from 'src/app/core/types/binance';
  import { DatePipe } from '@angular/common';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
  })
  export class HomeComponent implements OnInit, OnDestroy {
    cryptoPairs$: Observable&lt;CryptoPair[]&gt;;
    timeIntervals$: Observable&lt;TimeInterval[]&gt;;
    binances$: Observable&lt;BinanceKline[]&gt;;
  
    private completedFunctionOne$ = new ReplaySubject(0);
    private completedFunctionTwo$ = new ReplaySubject(0);
    private componentDestroyed$ = new Subject&lt;boolean&gt;();
  
    // Selected items
    symbolSelected: any;
    intervalSelected: any;
  
    // Pagination
    page = 1;
    pageSize = 10;
  
    // Angular Google Charts
    chartData = [];
    chartOptions = {
      tooltip: { isHtml: true },
      title: 'Chart',
      height: 500,
      chartArea: { width: '80%', height: '80%' },
      legend: 'none',
      // candlestick: {
      //   fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
      //   risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
      // }
    };
    chartColumnNames = ['Label', 'Low', 'Open', 'Close', 'High', { type: 'string', role: 'tooltip', p: { html: true } }];
  
    constructor(
      private cryptoPairService: CryptoPairService,
      private timeIntervalService: TimeIntervalService,
      private binanceService: BinanceService) { }
  
    ngOnInit() {
      setTimeout(async () =&gt; {
        this.getAllCryptoPairs();
        this.getAllTimeIntervals();
      }, 1000);
  
      combineLatest([this.completedFunctionOne$, this.completedFunctionTwo$])
        .pipe(takeUntil(this.componentDestroyed$))
        .subscribe(() =&gt; this.getAllKlines());
    }
  
    ngOnDestroy() {
      this.componentDestroyed$.next(true);
      this.componentDestroyed$.complete();
    }
  
    private getAllCryptoPairs() {
      this.cryptoPairs$ = this.cryptoPairService.getAllCryptoPairs().pipe(
        tap(result =&gt; {
          if (result.length) {
            this.symbolSelected = (result as CryptoPair[])[0].symbol;
          }
          this.completedFunctionOne$.next(1);
        }));
    }
  
    private getAllTimeIntervals() {
      this.timeIntervals$ = this.timeIntervalService.getAllTimeIntervals().pipe(
        tap(result =&gt; {
          if (result.length) {
            this.intervalSelected = (result as TimeInterval[])[0].interval;
          }
          this.completedFunctionTwo$.next(1);
        }));
    }
  
    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 `&lt;div style="font-size: 14px; white-space: nowrap; padding: 10px;"&gt;
      &lt;b&gt;Open Time:&lt;/b&gt; ${openTime}&lt;br /&gt;&lt;b&gt;Close Time:&lt;/b&gt; ${closeTime}&lt;br /&gt;
      &lt;b&gt;Open:&lt;/b&gt; ${candlestick.open.toFixed(2)}&lt;br /&gt;&lt;b&gt;Close:&lt;/b&gt; ${candlestick.close.toFixed(2)}&lt;br /&gt;
      &lt;b&gt;High:&lt;/b&gt; ${candlestick.high.toFixed(2)}&lt;br /&gt;&lt;b&gt;Low:&lt;/b&gt; ${candlestick.low.toFixed(2)}&lt;br /&gt;
      &lt;b&gt;VOL:&lt;/b&gt; ${candlestick.volume.toFixed(2)}
      &lt;/div&gt;`;
    }
  
    private getAllKlines() {
      if (this.symbolSelected &amp;&amp; this.intervalSelected) {
        this.binances$ = this.binanceService.getAllKlines(this.symbolSelected, this.intervalSelected);
  
        this.chartData = [];
  
        this.binances$
          .pipe(takeUntil(this.componentDestroyed$))
          .subscribe(candlesticks =&gt; {
            for (let i = 0; i &lt; candlesticks.length; i++) {
              this.chartData.push([
                null,
                candlesticks[i].low,
                candlesticks[i].open,
                candlesticks[i].close,
                candlesticks[i].high,
                this.customTooltip(candlesticks[i])
              ]);
            }
          });
      }
    }
  }
  </code></pre>
  
  <p>home.component.html</p>
  
  <pre><code>&lt;section id="home"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lg-2"&gt;
          &lt;div class="form-group"&gt;
            &lt;select class="custom-select" [(ngModel)]="symbolSelected" (ngModelChange)="getAllKlines()"&gt;
              &lt;ng-container *ngIf="cryptoPairs$ | async as cryptoPairs; else loading"&gt;
                &lt;option *ngFor="let option of cryptoPairs" [ngValue]="option.symbol"&gt;{{ option.description }}&lt;/option&gt;
              &lt;/ng-container&gt;
            &lt;/select&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-2"&gt;
          &lt;div class="form-group"&gt;
            &lt;select class="custom-select" [(ngModel)]="intervalSelected" (ngModelChange)="getAllKlines()"&gt;
              &lt;ng-container *ngIf="timeIntervals$ | async as timeIntervals; else loading"&gt;
                &lt;option *ngFor="let option of timeIntervals" [ngValue]="option.interval"&gt;{{ option.description }}&lt;/option&gt;
              &lt;/ng-container&gt;
            &lt;/select&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;ng-template #loading&gt;
        &lt;option&gt;Loading...&lt;/option&gt;
      &lt;/ng-template&gt;
  
      &lt;ng-container *ngIf="symbolSelected &amp;&amp; intervalSelected"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-lg-12"&gt;
            &lt;ng-container *ngIf="binances$ | async as binances; else loading2"&gt;
              &lt;ng-container *ngIf="binances.length; else nocontent"&gt;
                &lt;google-chart class="mb-1" type="CandlestickChart" [data]="chartData" [options]="chartOptions"
                  [columnNames]="chartColumnNames"&gt;
                &lt;/google-chart&gt;
  
                &lt;div class="table-responsive"&gt;
                  &lt;table class="table table-hover table-sm text-center"&gt;
                    &lt;thead&gt;
                      &lt;tr&gt;
                        &lt;th class="text-center"&gt;Open time&lt;/th&gt;
                        &lt;th class="text-center"&gt;Open&lt;/th&gt;
                        &lt;th class="text-center"&gt;High&lt;/th&gt;
                        &lt;th class="text-center"&gt;Low&lt;/th&gt;
                        &lt;th class="text-center"&gt;Close&lt;/th&gt;
                        &lt;th class="text-center"&gt;VOL&lt;/th&gt;
                        &lt;th class="text-center"&gt;Close time&lt;/th&gt;
                      &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;
                      &lt;tr
                        *ngFor="let binance of binances | reverse | slice: (page - 1) * pageSize:(page - 1) * pageSize + pageSize"&gt;
                        &lt;td&gt;{{ binance.openTime | date: "yyyy/MM/dd HH:mm" }}&lt;/td&gt;
                        &lt;td&gt;{{ binance.open | number: '1.2-2' }}&lt;/td&gt;
                        &lt;td&gt;{{ binance.high | number: '1.2-2' }}&lt;/td&gt;
                        &lt;td&gt;{{ binance.low | number: '1.2-2' }}&lt;/td&gt;
                        &lt;td&gt;{{ binance.close | number: '1.2-2' }}&lt;/td&gt;
                        &lt;td&gt;{{ binance.volume | number: '1.2-2' }}&lt;/td&gt;
                        &lt;td&gt;{{ binance.closeTime | date: "yyyy/MM/dd HH:mm" }}&lt;/td&gt;
                      &lt;/tr&gt;
                    &lt;/tbody&gt;
                  &lt;/table&gt;
                &lt;/div&gt;
  
                &lt;pagination [boundaryLinks]="true" [totalItems]="binances?.length" [(ngModel)]="page"
                  [itemsPerPage]="pageSize" previousText="&amp;lsaquo;" nextText="&amp;rsaquo;" firstText="&amp;laquo;"
                  lastText="&amp;raquo;"&gt;
                &lt;/pagination&gt;
              &lt;/ng-container&gt;
            &lt;/ng-container&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-template #nocontent&gt;
        &lt;p&gt;&lt;em&gt;No content...&lt;/em&gt;&lt;/p&gt;
      &lt;/ng-template&gt;
  
      &lt;ng-template #loading2&gt;
        &lt;p&gt;&lt;em&gt;Loading...&lt;/em&gt;&lt;/p&gt;
      &lt;/ng-template&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>