Error using chartJs on laravel project - php

Question

I am trying to use chartJs to draw a bar chart on my laravel project but I have been getting this error -
"Failed to create chart: can't acquire context from the given item".
I have tried debugging and I think everything looks okay.
This is my JS file
$(document).ready(function () {
$.ajax({
url: "{{url('properties','totalTaxPaidByLga')}}",
method: "GET",
success: function(data) {
console.log(data);
var player = [];
var score = [];
for(var i in data) {
player.push("Player " + data[i].playerid);
score.push(data[i].score);
}
var chartdata = {
labels: player,
datasets : [
{
label: 'Player Score',
backgroundColor: 'rgba(200, 200, 200, 0.75)',
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: score
}
]
};
var ctx = $("#mycanvas");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata
});
},
error: function(data) {
console.log(data);
}
});
});
This is my blade file
<div id="chart-container">
<canvas id="mycanvas"> </canvas>
<p>Hi</p>
</div>
This is my controller
public function totalTaxPaidByLga(){
$query = DB::select("select SUM(a.settlement_amount) as totalTaxPaid, d.local_name from settlements as a, assessments as b,
property_details as c, locals as d
where a.assessment_ref = b.assessment_ref and
b.property_id = c.id and
c.lga_id = d.local_id
GROUP BY d.local_id");
foreach ($query as $row) {
$data[] = $row;
}
print json_encode($data);
}