[Solved]-Charts.js does not render chart until I open the console-Chart.js

import { component, oninit } from '@angular/core';
import {router, activatedroute,params} from '@angular/router';
import {chart} from 'chart.js'

import {weatherservice} from '../../services/weather.service';
import {weather} from '../../models/weather';

@component({
  selector: 'app-viewcities',
  templateurl: './chart.component.html',
  styleurls: ['./chart.component.css'],
  providers:[]
})

export class chartcomponent implements oninit {
  chart = [];

  public title: string;
  public weathers: weather[];
  public weatherscity: weather[];
  public identity;
  public token;
  public url: string;
  public page;
  public prev_page;
  public next_page;
  public citypassed;
  public temperature=[];
  public dates=[];
  labels: any = [];
  data: any = [];

  constructor(    
    private _route:activatedroute,
    private _router:router,
    private _weatherservice:weatherservice) { }

    ngoninit() {
      //this.showcityweather();
      this.alertmessage();
    }

    alertmessage(){
      alert("by now the chart is not rendered until the console it´s open or you change the zoom(ctrl)+scroll down/up")
    }

    showcityweather(){
      var localstorageretrieve=localstorage.getitem("citytoview");

      var city=localstorageretrieve;

      this._weatherservice.showwheatherbycity(city).subscribe(
        response=>{if(!response){
          this._router.navigate(['/']);
        }else{
          this.weatherscity = response;
          console.log(this.weatherscity)
          //loop the object and add the data to the chart's array
          for(let i=0;i<this.weatherscity.length;i++){
            this.temperature.push(this.weatherscity[i].temperature)
            this.dates.push(this.weatherscity[i].date)          }
        }},
        error => {
          let errormessage = <any>error;
          if (errormessage !== null) {
            let body = json.parse(error._body); 
            console.log(body);
            }
          }
      )
    }
    showchart = false;
    ngafterviewinit() {
      this.showcityweather();
      this.chart=new chart('canvas',{
        type:'bar',
        data:{
          labels:this.dates,
          datasets:[{
            label: 'temp. in cº',
           data:this.temperature,
           backgroundcolor: [


            ],
            bordercolor: [


            ],
           borderwidth: 5
          }]
        },
        options: {
          scales: {
              yaxes: [{
                  ticks: {
                      beginatzero:false
                  }
              }]
          }
      }
      })
      settimeout(() => {
      this.showchart = true;
      },100)
      }
  }

<div class="chart" *ngif="showchart">
    <canvas #canvas id="canvas">{{ chart }}</canvas>
</div>