I am getting TS2339: Property 'chart' does not exist on type 'Window'?

Question

I am getting this warning when i am using window.onload, But when i am not using it this warning not occur but i chart not appear on screen. i am trying to use chart.js, It appear only when i am using window.onload I am looking for a way by which i can execute this code after window load.

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { WeatherService } from '../weather.service'; 
import { Chart } from 'chart.js';
 @Component({
 selector: 'app-graph-panel-2',
templateUrl: './graph-panel-2.component.html',
styleUrls: ['./graph-panel-2.component.css']
 })
export class GraphPanel2Component implements OnInit {
         chart=[];

 constructor(private _weather: WeatherService) { }

 ngOnInit() {

  var res = {"message":"","cod":"200","city_id":2643743,"calctime":0.0875,"cnt":3,"list":[{"main":{"temp":279.946,"temp_min":279.946,"temp_max":279.946,"pressure":1016.76,"sea_level":1024.45,"grnd_level":1016.76,"humidity":100},"wind":{"speed":4.59,"deg":163.001},"clouds":{"all":92},"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10n"}],"rain":{"3h":2.69},"dt":1485717216},{"main":{"temp":282.597,"temp_min":282.597,"temp_max":282.597,"pressure":1012.12,"sea_level":1019.71,"grnd_level":1012.12,"humidity":98},"wind":{"speed":4.04,"deg":226},"clouds":{"all":92},"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10n"}],"rain":{"3h":0.405},"dt":1485745061},{"main":{"temp":279.38,"pressure":1011,"humidity":93,"temp_min":278.15,"temp_max":280.15},"wind":{"speed":2.6,"deg":30},"clouds":{"all":90},"weather":[{"id":701,"main":"Mist","description":"mist","icon":"50d"},{"id":741,"main":"Fog","description":"fog","icon":"50d"}],"dt":1485768552}]};
  /*
this._weather.dailyForecast()
  .subscribe(res => {
    console.log(res)
  })
  */
    let temp_max = res['list'].map(res => res.main.temp_max);
    let temp_min = res['list'].map(res => res.main.temp_min);
    let alldates = res['list'].map(res => res.dt)

    let weatherDates = []
    alldates.forEach((res) => {
        let jsdate = new Date(res * 1000)
        weatherDates.push(jsdate.toLocaleTimeString('en', { year: 'numeric', month: 'short', day: 'numeric' }))
    })


    window.onload = function(){
    var canvas = document.getElementById("canvas");
    this.chart = new Chart(canvas, {
      type: 'bar',
      data: {
        labels: weatherDates,
        datasets: [
          { 
            label: "Max",
            data: temp_max,
            borderColor: "#3cba9f",
            backgroundColor: "#3cba9f",
            fill: true
          },
          { 
            label: "Min",
            data: temp_min,
            borderColor: "#ffcc00",
            backgroundColor: "#e54e89",
            fill: true
          },
        ]
      },
      options: {
        legend: {
          display: true
        },
        scales: {
          xAxes: [{
            display: false
          }],
          yAxes: [{
            display: false
          }],
        }
      }
    });
    }

}

}

Answer 1

in case you trying to follow this tutorial:

i found some things that doesnt run for me.

For make things running i changed the code as following:

    import { Component, ElementRef, OnInit } from '@angular/core';
import { WeatherService } from './weather.service';
import { Chart } from 'chart.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  chart = [];

  constructor(private _weather: WeatherService, private element: ElementRef) { }

  ngOnInit() {

    let ctx = this.element.nativeElement.querySelector('#canvas').getContext('2d');
    let chart = new Chart(ctx, {
      // The type of chart we want to create
      type: 'line',

      // The data for our dataset
      data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
          label: "My First dataset",
          backgroundColor: 'rgb(255, 99, 132)',
          borderColor: 'rgb(255, 99, 132)',
          data: [0, 10, 5, 2, 20, 30, 45],
        }]
      },

      // Configuration options go here
      options: {}
    });

  }
}

Hope that helps