title: Property 'getContext' does not exist on type 'HTMLElement'
body: <p>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:</p>
  <pre class="lang-none prettyprint-override"><code>Property 'getContext' does not exist on type 'HTMLElement'.
  </code></pre>
  <p>How do I get rid of this error?</p>
  <p>Here is my code:</p>
  <p>chart.component.html</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;container&quot; style=&quot;width:350px;height:250px&quot;&gt;
    &lt;canvas id=&quot;myChart&quot; width=300 height=300&gt;&lt;/canvas&gt;   
  &lt;/div&gt;
  </code></pre>
  <p>chart.component.ts</p>
  <pre class="lang-js prettyprint-override"><code>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 =&gt; {
        console.log(data);
        const chartLable = [];
        const chartDetails = [];
  
        for (let i = 0; i &lt; 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
                        }
                    }]
                }
            }
        });
    }
    );
   
  }}
  </code></pre>
  <p>chart.service.ts</p>
  <pre class="lang-js prettyprint-override"><code>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',&quot;&quot;);
  
  }
  }
  </code></pre>