chart js graph not showing on canvas

Issue

this is the code I got from a tutorial from the chart.js website https://www.chartjs.org/docs/master/getting-started/usage.html I also followed this video https://www.youtube.com/watch?v=ZCYiUCcTo20 exactly, so not sure where I went wrong. Researched it a lot but couldn't find my issue specifically. Thanks in advance for any help.

import { Component, OnInit } from '@angular/core';
import { Chart } from '../../../node_modules/chart.js'

@Component({
  selector: 'app-recent-graph',
  templateUrl: './recent-graph.component.html',
  styleUrls: ['./recent-graph.component.css']
})
export class RecentGraphComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    var myChart = new Chart("myChart", {
      type: 'bar',
      data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
              label: '# of Votes',
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              y: {
                  beginAtZero: true
              }
          }
      }
  });
  }

}
'''

HTML:

 '''
<div id="divChart">
    <canvas id="myChart"></canvas>
</div>
'''

Solution

Your chart import is wrong, you have to import all the components you want to use and register them if you use brackets like so or you can ignore the treeshaking and let charts handle it if you import it like so import Chart from 'chart.js/auto'

For the treeshaking import and register see documentation

Answered By - LeeLenalee