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.