[Chartjs]-Chart.js TypeError: context is null

by

1👍

✅

Managed to fix the issue, came from Madhawa Priyashantha’s comment on how the chart is loading before the HTML canvas is. I’ve encapsulated the previous JS code within window.onload = function(){...} to ensure the DOM loads first.

Working state of the JS, nothing else was changed:

window.onload = function() {
    var temp = [19,19,19,20,21,21,22,20,19,16,15,14];
    var humidity = [40,40,40,60,50,40,30,20,10,100,70,60]; 
    var moisture = [90,80,70,60,50,40,30,20,10,80,70,80];
    var lux = [60,60,60,70,70,70,80,80,70,70,60,50];
    var dates = ["January","February","March","April","May","June","July","August","September","October","November","December"];

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels:dates,
        datasets:[
            {
                data:temp,
                label:"Temperature",
                borderColor:"#3e95cd",
                fill:false,
                yAxisID:"Num"
            },
            {
                data:humidity,
                label:"Humidity",
                borderColor:"#8e5ea2",
                fill:false,
                yAxisID:"Per"
            },
            {
                data:moisture,
                label:"Soil Moisture",
                borderColor:"#3cba9f",
                fill:false,
                yAxisID:"Per"
            },
            {
                data:lux,
                label:"Light",
                borderColor:"#e8c3b9",
                fill:false,
                yAxisID:"Per"
            }
        ]
    },
    options: {
        scales: {
            yAxes: [{
                id:"Num",
                type:"linear",
                position:"left"
            },
            {
                id:"Per",
                type:"linear",
                position:"right"
            }]
        }
    }
    }); 
}

0👍

Check this solution,

<!DOCTYPE html>
<html>

<head>
  <title>Plant Data</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="wrapper">
    <h1>Environmental Data</h1>
    <h2>Number of people (in millions) living on earth, the last 500 years</h2>
    <canvas id="myChart" width="1600" height="900"></canvas>
  </div>
  <script type="text/javascript">
    var temp = [19, 19, 19, 20, 21, 21, 22, 20, 19, 16, 15, 14];
    var humidity = [40, 40, 40, 60, 50, 40, 30, 20, 10, 100, 70, 60];
    var moisture = [90, 80, 70, 60, 50, 40, 30, 20, 10, 80, 70, 80];
    var lux = [60, 60, 60, 70, 70, 70, 80, 80, 70, 70, 60, 50];
    var dates = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: dates,
        datasets: [{
            data: temp,
            label: "Temperature",
            borderColor: "#3e95cd",
            fill: false,
            yAxisID: "Num"
          },
          {
            data: humidity,
            label: "Humidity",
            borderColor: "#8e5ea2",
            fill: false,
            yAxisID: "Per"
          },
          {
            data: moisture,
            label: "Soil Moisture",
            borderColor: "#3cba9f",
            fill: false,
            yAxisID: "Per"
          },
          {
            data: lux,
            label: "Light",
            borderColor: "#e8c3b9",
            fill: false,
            yAxisID: "Per"
          }
        ]
      },
      options: {
        scales: {
          yAxes: [{
              id: "Num",
              type: "linear",
              position: "left"
            },
            {
              id: "Per",
              type: "linear",
              position: "right"
            }
          ]
        }
      }
    });
  </script>
</body>

</html>

Leave a comment