Chart.Js looping datasets using foreach - php

Question

i want to loop datasets of Chart.Js using foreach in PHP, instead of looping the data once every datasets, what i get is this
My question is : how to render it properly? because i've quite frustrated by this.
Here is my controller :
$volumeTotalSAP = MonthlyPerModel::whereYear('tgl' , '=' , Carbon::now())->where('plant','=', 'SAP')->get();
if($volumeTotalSAP->isEmpty()){
$dateModelSAP[] = 'Data Tidak Ditemukan';
$modelNameSAP[] = [];
$volumeModelSAP[] = [];
$datasetSAP[] = [];
}else{
foreach ($volumeTotalSAP as $modelsap) {
$dateModelSAP[] = Carbon::parse($modelsap->tgl)->isoFormat('MMMM');
$modelNameSAP = $modelsap->model;
$volumeModelSAP = $modelsap->volume;
$datasetSAP[] = [
'label' => $modelNameSAP,
'data' => $volumeModelSAP,
'backgroundColor' => '#'.str_pad(dechex(mt_rand(0, 0xFFFFFF)), 6, '0', STR_PAD_LEFT),
];
}
};
Here is my script to the Chart:
var dateModelSAP = JSON.parse('{!! json_encode($dateModelSAP) !!}');
var datasetSAP = [{
label: JSON.parse('{!! json_encode($modelNameSAP) !!}'),
data: JSON.parse('{!! json_encode($volumeModelSAP) !!}'),
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)'
}];
const ctxTotalModelSAP = document.getElementById('chartTotalPerModelSAP');
var TotalModelSAP = new Chart(
ctxTotalModelSAP,
config = {
type: 'bar',
data : {
labels: dateModelSAP,
datasets: datasetSAP
},
plugins: [ChartDataLabels],
options: {
plugins: {
legend:{
position: 'bottom'
}
},
layout: {
padding : {
top: 30
}
},
responsive: true,
scales: {
x:{
stacked: true,
},
y: {
stacked: true,
beginAtZero: true
}
}
}
}
);
Any suggestions helps! Thank you!