chart.js No se pudo crear el gráfico: no se puede adquirir el contexto del elemento dado

Nunca entré en el nodo, así que estoy bastante seguro de que estoy haciendo algo muy mal aquí, ya que no puedo encontrar ninguna información en Google.

Tengo un sitio de django y quería una biblioteca de gráficos JS, elegí chart.js.

Instalé y me gustaron los documentos, pero después de eso no estoy seguro de qué hacer, así que traté de completar los espacios en blanco y seguir su guía tanto como sea posible. Así es como se ve mi html …

<script src="https://stackoverflow.com/public/node_modules/chart.js/dist/Chart.js"></script>

<canvas id="myChart" width="400" height="400"></canvas>

<script>    
    var ctx = document.getElementById("myChart");
    console.log(ctx);

    var options = {}

    var data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "My First dataset",
                fill: false,
                lineTension: 0.1,
                backgroundColor: "rgba(75,192,192,0.4)",
                borderColor: "rgba(75,192,192,1)",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
                data: [65, 59, 80, 81, 56, 55, 40],
                spanGaps: false,
            }
        ]
    };

    var myChart = new Chart({
        type: 'line',
        data: data,
        options: options
    })
</script>

Solo estoy tratando de hacer que un ejemplo funcione. Puse el directorio node_modules que se descargó a través de npm en algún lugar donde mi servidor los sirva… y verifiqué que se están sirviendo, pero luego aparece este error cuando intento crear un gráfico. Tomé todos los códigos de gráficos de sus documentos, por lo que estoy bastante seguro de que esa parte es correcta, pero no puedo ver por qué recibo este error.

Otra razón para obtener el mismo error es si el elemento al que hace referencia el id no es un <canvas>. Tuve un <div> en mi fuente HTML y, por supuesto, no funcionó.

No está pasando el contexto 2d del lienzo (ctx) al llamar al constructor. Desde el documentación:

Para crear un gráfico, necesitamos instanciar la clase Chart. Para hacer esto, debemos pasar el nodo, la instancia de jQuery o el contexto 2d del lienzo donde queremos dibujar el gráfico.

<canvas id="myChart" width="400" height="400"></canvas>

Asegúrate de declarar la etiqueta del lienzo en html antes de el script que crea el objeto Chart.js. De lo contrario, el script se ejecuta e intenta encontrar una referencia a un lienzo que no existe. En la secuencia de comandos, se puede usar cualquiera de los siguientes formatos para obtener una referencia al lienzo, que luego se pasa al constructor de Chart.js.

var ctx = document.getElementById('myChart'); // node
var ctx = document.getElementById('myChart').getContext('2d'); // 2d context
var ctx = $('#myChart'); // jQuery instance
var ctx = 'myChart'; // element id

var myChart = new Chart(ctx, {
  type: 'line',
  data: {/* Data here */},
  options: {/* Options here */}
}

Llego un poco tarde a la fiesta, pero si otros desarrolladores llegan a esta publicación, asegúrese de no hacer referencia al documento o la ventana. El equipo angular no fomenta el acceso directo a la variable dom. Usar ElementoRef en cambio

import { Component, OnInit, ElementRef } from '@angular/core';
@Component({
  selector: 'my-compo',
  templateUrl: 'mycompo.html',
})
export class MyCompo implements OnInit {
   myChart:any;
   constructor(private elementRef: ElementRef) {
   }

  ngOnInit(){
   this.chartit();
  }

  chartit(){
     let htmlRef = this.elementRef.nativeElement.querySelector(`#yourCavasId`);
     this.myChart = new Chart(htmlRef, {
        //your data here
     });
  }

}

HTML como lo sugiere @mavroprovato

<canvas id="yourCavasId" ></canvas>

Además, el script java debe estar después de la declaración del lienzo.

Tuve este error porque estaba tratando de configurar el gráfico en constructor en vez de ngAfterContentInit

Yo personalmente no tengo ningún problema en dar la identificación de lienzo como cadena para el contexto

this.chart = new Chart('myChartId', {...})

puedes usar

agrega esto en tu plantilla
<canvas #myCanvas width="500" height="300"></canvas>

agrega esto a tu componente

@ViewChild('myCanvas') canvasRef: ElementRef;
  constructor()

cuando esté listo para dibujar llame a esto

 this.ctx = this.canvasRef.nativeElement.getContext('2d');
         this.chart = new Chart(this.ctx, {....})

Estoy usando Chart.JS con Angular 9.

Esto suele suceder si hay una discrepancia de ID con la creación de instancias del gráfico. Asegúrese de tener un atributo de ID en canvas elemento como este –

<canvas id="myCanvasId">{{ myChart }}</canvas>

y tiene esto correctamente al instanciar el gráfico:

this.myChart = new Chart('myCanvasId', {
....
}

En otra pantalla, me enfrenté al mismo problema debido a la presencia de *ngIf en el elemento padre de <canvas>.

Para superar esto, puede eliminar el *ngIf desde el padre o inicialice la variable del gráfico al principio con una matriz vacía – myChart: [].