Canvas is not defined for simple chart

by

1👍

✅

You also need to get the canvas like
var canvas = document.getElementById('myChart')

👍:1

You need to set the canvas variable before you use it. Add the following:

<script>
//Add the following line
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");

👍:1

You need to put the script AFTER the element exists. You need to define canvas….

<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<!-- Need to put canvas before the script -->
<div id="parent">
  <canvas id="myChart"></canvas>
</div>
<script>
var canvas = document.getElementById("myChart");  // <-- need to define canvas
var ctx = canvas.getContext("2d");
var parent = document.getElementById('parent');
canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;

var chart = new Chart(ctx, {
  type: 'line',
  options: {
      legend: {
      display: false
    },
    responsive: true,
    maintainAspectRatio: false
  },
  data: {
    labels: [3,4],
    datasets: [{
        label: 'Test 01',
        data: [1,2],
      }
    ]
  }
});
</script>

Leave a comment