chartJS not showing the data - laravel

Question

I am new to Laravel and ChartJS. Working on home project for farm management. I need to show annual milk generation ( monthwise) in chart. While Trying to show data in chartJS but not able to show the same.
The code is as below.
Data for Chart
var buffalototalmilkannual = JSON.parse('{!! json_encode($annualmilkrecord) !!}');
var monthsforbuffalototalmilkannual = JSON.parse('{!! json_encode($getmonths) !!}'); // Annual dates on x axis
//console.log(buffalototalmilkannual);
Chart
$(function () {
'use strict'
var annualbuffaloidmilkCanvas = $('#buffaloidmilkchartforyear').get(0).getContext('2d')
var annualbuffaloidmilkdata = {
labels: monthsforbuffalototalmilkannual,
datasets: [
{
label: 'Total Milk Prodcued',
backgroundColor: 'rgba(40, 167, 69, 0.9)',
borderColor: 'rgba(40, 167, 69, 0.8)',
pointRadius: false,
pointColor: '#3b8bba',
pointStrokeColor: 'rgba(40, 167, 69, 1)',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(40, 167, 69, 1)',
fill: false,
tension: 0.1,
pointRadius: 3,
data: 'buffalototalmilkannual',
},
]
}
var annualbuffaloidmilkOptions =
{
maintainAspectRatio: false,
responsive: true,
legend: { display: true },
scales:
{
xAxes: [{
gridLines: {
display: true,
},
type: 'time',
time: {
unit: 'month',
tooltipFormat: 'M Y'
}
}],
yAxes: [{
gridLines: {
display: true,
},
scaleLabel: {
display: true,
labelString: 'Milk in Liter'
},
ticks: {
suggestedMin: 0,
suggestedMax: 50
}
}],
},
tooltips: {enabled: true},
}
// This will get the first returned node in the jQuery collection.
// eslint-disable-next-line no-unused-vars
var salesChart = new Chart(annualbuffaloidmilkCanvas,
{
type: 'line',
data: annualbuffaloidmilkdata,
options: annualbuffaloidmilkOptions
}
)
})
Console.log file
Array(12)
0: "12.00"
1: "11.75"
2: 0
3: 0
4: 0
5: 0
6: 0
7: 0
8: 0
9: 0
10: 0
11: 0
length: 12
Did i miss something. Same code is working in another blade file for other data.
Thanks in Advance