Chart.js - Cannot read property 'getContext' of null

Chart.js - Cannot read property 'getContext' of null

cannot read property 'transition' of null
chart js cannot set property 'options' of undefined
cannot read property 'getbasepixel' of undefined chartjs
cannot read property 'chart' of undefined chartjs
cannot read property 'style' of undefined chartjs
chart js & react
chart js options
cannot read property getdatasetmeta of undefined

I have the following Javascript in my main.js file:

//array object of API stuff

function createChartWinLoss(wins, losses) {

  var pieData = [
    {
      value: losses,
      color: "#F7464A",
      highlight: "#FF5A5E",
      label: "Losses"
    },
    {
      value: wins,
      color: "#46BFBD",
      highlight: "#5AD3D1",
      label: "Wins"
    }
  ];

  var pieOptions = {
    segmentShowStroke : false,
    animateScale : true
  }


  var winLossChart = document.getElementById('winLossChart').getContext('2d');
  new Chart(winLossChart).Pie(pieData, pieOptions);
}

//creates the chart with test data
createChartWinLoss();

function summonerLookUp() {
  var SUMMONER_ID = "";
  var API_KEY = "keyhere";
  var sumID = $("#theKey").val();
  var div = document.getElementById('stuff');
  var combine = "";
  var array = [sumID];
  var wins;
  var losses;

  div.innerHTML = div.innerHTML + "<br />array count: " + array.length + "<br />";
  for (var i = 0; i < array.length; i++) {
    combine = "";
    SUMMONER_ID = array[i];
    getStuff(SUMMONER_ID, combine, API_KEY, div, i);
  }
}

function getStuff(SUMMONER_ID, combine, API_KEY, div, count) {
  var Topuser = SUMMONER_ID;
  $.ajax({
    url: 'https://euw.api.pvp.net/api/lol/euw/v2.5/league/by-summoner/' + SUMMONER_ID + '/entry?api_key=' + API_KEY,
    type: 'GET',
    dataType: 'json',
    async: false,
    data: {},
    success: function (json) {
      var user = Topuser;
      if (typeof json[user][0].queue != "undefined") {
        if (json[user][0].queue == "RANKED_SOLO_5x5") {
          combine = json[user][0].tier + " " + json[user][0].entries[0].division  + " - " + json[user][0].entries[0].wins + " Wins " + json[user][0].entries[0].losses + " losses";
          div.innerHTML = div.innerHTML + "<br />" + count + ": " + user + " " + combine;
          var wins = json[user][0].entries[0].wins;
          var losses = json[user][0].entries[0].losses;
          //populates chart with wins losses from api
          createChartWinLoss(wins,losses);
        }
      }
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      var user = Topuser;
      console.log(errorThrown);
      if (errorThrown === "Not Found") {
        div.innerHTML = div.innerHTML + "<br />" + count + ": " + user + " " + "UNRANKED";
      }
    }
  });
}

And the HTML is as follows:

<div class="container">
  <h2>Wins/Losses</h2>
  <canvas id="winLossChart" width="400" height="200"></canvas>
</div>

As the title suggests, I am getting Uncaught TypeError: Cannot read property 'getContext' of null and I'm not entirely sure what the issue is. If I had to guess I'd say it was trying to reference something that wasn't there but I'm not 100% sure on if I am correct and how to fix it. Any advice would be great.


The line that is throwing the error is

var winLossChart = document.getElementById('winLossChart').getContext('2d');

It is saying that document.getElementById('winLossChart') does not exist.

This would be because your script is being interpreted before the elements have finished being created in the DOM.

You could either kick off the script in a window.onload function:

window.onload = function() {
   createChartWinLoss();
}

Or you could put the script tag itself as the last element in the body element of your html file.

<body>
  <div class="container">
    <h2>Wins/Losses</h2>
    <canvas id="winLossChart" width="400" height="200"></canvas>
  </div>
  <script src="myscript.js"></script>
</body>

Either solution would mean that the main entry point of your code (createChartWinLoss) would only happen after the other elements on the page, including the canvas, were created.

As a general process towards solving these kinds of problems, when you saw the exception in your Javascript console, you should have been able to open the stack trace, which would have led you to the fact that the error originated on the line var winLossChart = ..., which would have made you more likely to have been able to discover the source of the problem.

`Uncaught TypeError: Cannot read property 'length' of null` (vuejs + , `Uncaught TypeError: Cannot read property 'length' of null` (vuejs + chart.js) #​3715. Closed. gkatsanos opened this issue on Dec 17, 2016 · 14 comments. I can use the Chart.js without including it in my scripts in the angular.json, so I can only assume that there is an issue with either Chart.js in conjunction with the mdb chart module. To avoid any issues with the imports, I only included the import { MDBBootstrapModulesPro } from 'ng-uikit-pro-standard' .


I was having this same problem. The element was being returned as dispHTMLUnkownElement.

The solution was to add <!DOCTYPE html>to the top of my response and then IE picked up the element type properly.

[SOLVED] Chart.js Instantiation Error, Uncaught (in promise) TypeError: Cannot read property 'length' of null at acquireContext (bundle.js:65850) at new Chart.Controller (bundle.js:65903) Hey everyone, I've been working through this bug trying to incorporate Chart.js into a single file Vue component. I just discovered that it was an async data issue: I was trying to use data from an API call to populate my x-axis and my datasets but the chart was rendering before it had a chance to get all of the data from the call, which was provoking all kinds of errors.


Perhaps this can help someone else... You have to use destroy() method. To made that you have to change a few things in your code:

var winLossChart = "";// Here you make your chart var global
function createChartWinLoss(wins, losses) {
    var pieData = [{
        value: losses,
        color: "#F7464A",
        highlight: "#FF5A5E",
        label: "Losses"
    }, {
        value: wins,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Wins"
    }];
    var pieOptions = {
        segmentShowStroke: false,
        animateScale: true
    }
    //Here´s the change inside the function where you run destroy().
    if(typeof winLossChart.destroy != "undefined") winLossChart.destroy();
    winLossChart = document.getElementById('winLossChart').getContext('2d');
    new Chart(winLossChart).Pie(pieData, pieOptions);
}
//creates the chart with test data...

https://github.com/chartjs/Chart.js/issues/3231

Chart.js - cannot read property, Chart.js - cannot read property. I want to create a chart with multiple lines (​multiple datasets) using Django and ChartJS. I'm adding a data into the data attribute,  waitingcheung changed the title TypeError: Cannot read property 'label' of undefined [BUG] TypeError: Cannot read property 'label' of undefined Jul 26, 2017 etimberg added the Category: Support label Jul 26, 2017


Chart JS -TypeError: Cannot read property 'getBasePixel' of , Chart JS -TypeError: Cannot read property 'getBasePixel' of undefined Posted 1 year ago by kvnkrft. Surely I am not encountering a bug, but rather having  If you are using Chart.js via ReactJS (not the react-chartjs-2 lib) AND you have kept the chart objects within the component state, then ensure that any function to update the data is present within the component class.


Chart js cannot read property 'getContext' of null only AFTER new , I have two selects that set session vars and after the 2nd is selected, a chart is loaded. This works just fine until I add a new document to the  Chart JS -TypeError: Cannot read property 'getBasePixel' of undefined Posted 1 year ago by kvnkrft Surely I am not encountering a bug, but rather having issues because of my lack of experience and knowledge.


Changing chart type give: Uncaught TypeError: Cannot read , Changing chart type give: Uncaught TypeError: Cannot read property 'length' of undefined Highcharts. Thu Jun 06, 2019 11:37 am. I am initially loading the  I can confirm I have the exact same issue today, on Chart.js v2.8.0 on vanilla JS (no react) without solution yet. This comment has been minimized. Sign in to view