angular - Property 'getContext' does not exist on type 'HTMLElement'

Question

I am doing a project in Angular8 and creating charts using ChartJS. After running the project, it will show the charts. But it will give an error saying:

Property 'getContext' does not exist on type 'HTMLElement'.

How do I get rid of this error?

Here is my code:

chart.component.html

<div id="container" style="width:350px;height:250px">
  <canvas id="myChart" width=300 height=300></canvas>   
</div>

chart.component.ts

import {Component, OnInit} from '@angular/core';
import {Chart} from 'chart.js';
import {ChartService} from '../charts/chart.service';
import {HttpClient} from '@angular/common/http';

// import {DATA} from '../CHART/CHARTS.MODEL';

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

  constructor(
    private ChartItems: ChartService,
    private httpClient: HttpClient
  ) {   }

  ngOnInit() {
    this.getChartDetails();
}

  getChartDetails() {
    this.ChartItems.getChart().subscribe(data => {
      console.log(data);
      const chartLable = [];
      const chartDetails = [];

      for (let i = 0; i < data.chartDetails[0].chartData.length; i++) {
        chartLable.push(data.chartDetails[0].chartData[i].x);
        chartDetails.push(data.chartDetails[0].chartData[i].y);
      }

 

      const ctx = document.getElementById('myChart').getContext('2d');
      const myChart = new Chart(ctx, {
          type: 'bar',
          data: {
              labels: chartLable,
              datasets: [{
                  label: '# of Votes',
                  data: chartDetails,
                  backgroundColor: [
                      'rgba(255, 99, 132, 0.2)',
                      'rgba(54, 162, 235, 0.2)',
                      'rgba(255, 206, 86, 0.2)',
                  ],
                  borderColor: [
                      'rgba(255, 99, 132, 1)',
                      'rgba(54, 162, 235, 1)',
                      'rgba(255, 206, 86, 1)',
                  ],
                  borderWidth: 1
              }]
          },
          options: {
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero: true
                      }
                  }]
              }
          }
      });
  }
  );
 
}}

chart.service.ts

import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Observable} from 'rxjs';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    })
};

@Injectable({
  providedIn: 'root'
})
export class ChartService {

  httpOptions: any;
  baseUrl: any;
  headers: any;
  constructor( private http: HttpClient ) {
      this.headers = new Headers( { 'content-type': 'application/json'} );
      // this.httpOptions = new RequestOptions( { headers: this.headers } );
}

  getChart() {
    console.log('SUCCESS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
    return this.http.get('https://api.myjson.com/bins/8au55',"");

}
}

Answer 1

I would try:

const canvas = <HTMLCanvasElement> document.getElementById('myChart');
const ctx = canvas.getContext('2d');

the purpose of Typescript is to avoid wrong types. By default document.getElementById returns a HTMLElementtype which is a generic type. In order to make your app understand it is a canvas element you need to cast it using <CastedToType> syntax.