chart.js Failed to create chart: can't acquire context from the given item

Question

I never got into node so I am pretty sure I am doing something massively wrong here since I cannot find any info at all by googling.

I have a django site and I wanted a JS charting library, I chose chart.js.

I installed and like the docs, but after that I am unsure of what to do so I tried to fill in the blanks and follow their guide as much as possible. Here is what my html looks like....

<script src="/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>

I am just trying to get an example working. I put the node_modules directory that was downloaded via npm somewhere where my server would serve them up....and verified they are being served, but then I get this error when I try to build a chart. I took all the chart codes from their docs so I am pretty sure that part is right, but I can't see why I am getting this error.

Nicosia

Answer 1

You are not passing the 2d context of the canvas (ctx) when calling the constructor. From the documentation:

To create a chart, we need to instantiate the Chart class. To do this, we need to pass in the node, jQuery instance, or 2d context of the canvas of where we want to draw the chart.

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

Make sure to declare the canvas tag in html before the script that creates the Chart.js object. Otherwise, the script executes and tries to find a reference to a canvas that doesn't exist. In the script, any of the following formats may be used to get a reference to the canvas, which is then passed to the Chart.js constructor.

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 */}
});

Edulcorate

Another reason for this could be that you included Script before your canvas tag, add scripts after you have added the canvas html tag. – Physiotherapy

Answer 2

Another reason to get the same error, is if the element referred by the id is not a <canvas>. I had a <div> element in my HTML source, and of course it did not work.

Clef

I had this exact typo! – Dislodge

Wow, thanks, man. I was really confused why it didn't work, until I removed the div and put the id in the canvas tag. – Interscholastic

Likewise if you've simply omitted the canvas element from your page!! Oh dea. – Ratel

με την primeng που εχει p-chart tags ξερεις πως μπορει να δουλεψει; γτ μου πεταει Failed to create chart: can't acquire context from the given item – Creamy

Answer 3

I am a bit late to the party but if other developers reach this post, make sure you don't reference document or window. The angular team doesn't encourage accessing the dom variable directly. Use ElementRef instead

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 as suggested by @mavroprovato

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

Crochet

Looks like querySelector is selecting the parent element of the chart. ie: <div #myCanvas> <canvas id="canvas">{{ chart }}</canvas> </div> – Riproaring

Answer 4

Also, the javascript code must be after the declaration of the canvas.

Basrhin

Answer 5

Had this error cause I was trying to set the chart on constructor instead of ngAfterContentInit

I personally have no problem with giving the canvas id as string for context

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

Slug

This worked for me but I used ngAfterViewInit – Shively

Answer 6

I'm using Chart.JS with Angular 9.

This usually happens if there is an ID mismatch with the instantiation of the chart. Make sure you have an ID attribute in canvas element like this -

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

and you have this correctly while instantiating the chart -

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

On another screen, I faced the same issue due to the presence of *ngIf on the parent element of <canvas>.

To overcome this, you can either remove the *ngIf from the parent or initialize the chart variable at the beginning with an empty array - myChart: [].

Landsman

Answer 7

you can use

add this in your template
<canvas #myCanvas width="500" height="300"></canvas>

add this to your component

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

when ready to draw call this

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

Trait

This implementation worked. Thank you. – Imperforate

Answer 8

In my case, I was using ngIf on canvas and then I moved it to its parent div. In both cases I was getting this error: chart.js Failed to create chart: can't acquire context from the given item.

Even after applying all the above methods, I wasn't able to solve it. So I changed ngIf to ngStyle with display: (condition)? none: block. And it worked for me.

Phytogenesis

Answer 9

Also faced this issue, mine was solved by putting the chart creation in a DOMContentLoaded addEventListener. Of course the CDN and canvas prerequisites have to be met before doing this

document.addEventListener("DOMContentLoaded", function () {

    const ctx = document.getElementById("myChart")

    const myChart = new Chart(ctx, {
        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,
                },
            },
        },
    });
});

Supremacist

Thanks a lot, this is the only solution that worked for me. – Extortionary

Answer 10

In my case, I was using ngIf on canvas and then I moved it to its parent div. In both cases I was getting this error: chart.js Failed to create chart: can't acquire context from the given item.

Even after applying all the above methods, I wasn't able to solve it. So I changed ngIf to ngStyle with display: (condition)? none: block. And it worked for me.

Maxama

I had the same situation with ngIf. Using ngClass worked for me – Urethritis

Answer 11

Just a little tip. If you fixed the issue by adding a context, but the chart still doesn't show up, then place the <canvas> element in a <div> element, otherwise it won't display.

Reference: Charts.js sets canvas width/height to 0 and displays nothing

Presentment

Please use comments section – Acetometer

Answer 12

I had the same error. The solution for me was that I had to write my code after DOMLoadedEvent like this :

document.addEventListener("DOMContentLoaded", function() { MY CODE HERE..... });

Alys

Answer 13

For Angular with SSR / SSG / ClientHydration

I had the exact same error, what fixed it in my case was doing this:

I had to move the part where i set the 2d context to the ngAfterViewInit lifecycle hook like this:

@Inject(PLATFORM_ID) private platformId: InjectionToken<object>,
@ViewChild("canvas") canvas: ElementRef<HTMLCanvasElement>
constructor(
  //...
) {
  Chart.register(...registerables)
}

ngAfterViewInit() {
  if (!this.isPlatformBrowser(this.platformId) {
    return
  }

  this.ctx = this.canvas.nativeElement.getContext("2d")

  // do stuff...
}

Important note:

If you skip the part where you check if the platform is Browser, you'll get a very nasty error during prerendering as it happens on the server:

ERROR Error: NotYetImplemented
at exports.nyi (file:///home/millenion/vlalto/front/.angular/prerender-root/c0b16b28-31d4-4fa9-bb65-78223caf3bd9/chunk-RWYXIRWD.mjs:4493:13)
at _ChartPluginComponent.ngAfterViewInit (file:///home/millenion/vlalto/front/.angular/prerender-root/c0b16b28-31d4-4fa9-bb65-78223caf3bd9/chunk-6PIITT6C.mjs:15513:42)
at callHookInternal (file:///home/millenion/vlalto/front/.angular/prerender-root/c0b16b28-31d4-4fa9-bb65-78223caf3bd9/chunk-UEI7I5J3.mjs:5753:10)
at callHook (file:///home/millenion/vlalto/front/.angular/prerender-root/c0b16b28-31d4-4fa9-bb65-78223caf3bd9/chunk-UEI7I5J3.mjs:5768:7)
at callHooks (file:///home/millenion/vlalto/front/.angular/prerender-root/c0b16b28-31d4-4fa9-bb65-78223caf3bd9/chunk-UEI7I5J3.mjs:5742:9)
at executeInitAndCheckHooks (file:///home/millenion/vlalto/front/.angular/prerender-root/c0b16b28-31d4-4fa9-bb65-78223caf3bd9/chunk-UEI7I5J3.mjs:5711:5)
at refreshView (file:///home/millenion/vlalto/front/.angular/prerender-root/c0b16b28-31d4-4fa9-bb65-78223caf3bd9/chunk-UEI7I5J3.mjs:10041:11)
at detectChangesInView$1 (file:///home/millenion/vlalto/front/.angular/prerender-root/c0b16b28-31d4-4fa9-bb65-78223caf3bd9/chunk-UEI7I5J3.mjs:10128:5)
at detectChangesInViewIfAttached (file:///home/millenion/vlalto/front/.angular/prerender-root/c0b16b28-31d4-4fa9-bb65-78223caf3bd9/chunk-UEI7I5J3.mjs:10112:3)
at detectChangesInEmbeddedViews (file:///home/millenion/vlalto/front/.angular/prerender-root/c0b16b28-31d4-4fa9-bb65-78223caf3bd9/chunk-UEI7I5J3.mjs:10085:7)

The explanation is rather simple: Canvas is not implemented server side.

Empson