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',"");
}
}
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.
Try this:
const canvas = document.getElementById('myChart') as HTMLCanvasElement;
const ctx = canvas.getContext('2d');
const canvas = document.getElementsByTagName('canvas')[0]; will return an HTMLCanvasElement, but
const canvas = document.getElementById('someId'); will return an HTMLElement object instead of HTMLCanvasElement, which has no 'getContext' method.
simply cast canvas as HTMLCanvasElement inline as follows
const canvas = document.getElementById('myChart');
const ctx = (canvas as HTMLCanvasElement).getContext('2d');
cheers.
Best to use runtime type validation which TS understands.
const canvas = document.querySelector('#my-canvas')
if (!(canvas instanceof HTMLCanvasElement)) return
canvas.getContext(...)
This handles the case where the element you query for has the wrong tag name.
<div id="my-canvas" />
<canvas id="my-canvas1" />