How to Display value in chart js Incline [closed] - laravel

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 days ago.
Improve this question
how to display the point value incline.
I have a problem with ChartJS: I am using Laravel and wanna to show the point value as incline. can you all help a beginner like me
enter image description here
here is my code : im using PHP
enter image description here
$chartjs = app()->chartjs
->name('projectSummaryByTeam')
->type('line')
->size(['width' => 350, 'height' => 200])
->labels($graphInfo[0])
->datasets([
[
"label" => "Acumulative (Plan)",
'data' => $graphInfo[1],
'type' => 'line',
'borderColor' => "blue",
'backgroundColor' => "blue",
'pointBackgroundColor' => "blue",
'pointBorderColor' => "blue",
'yAxisID' => 'first-y-axis',
'order' => 1,
'fill' => false,
],
[
"label" => "Acumulative (Actual)",
'data' => $graphInfo[2],
'type' => 'line',
'backgroundColor' => $graphActualLineColour,
'borderColor' => $graphActualLineColour,
'pointBackgroundColor' => $graphActualLineColour,
'pointBorderColor' => $graphActualLineColour,
'yAxisID' => 'first-y-axis',
'order' => 2,
'fill' => false,
],
])
here is the next..
the option that work as the animation and display the data
->optionsRaw("
{
plugins: {
colorschemes: {
scheme: 'tableau.Tableau10'
},
datalabels: {
display: false
}
},
tooltips: {
mode: 'index',
callbacks: {
label: function (tooltipItem, data) {
var tooltipValue = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
return parseInt(tooltipValue).toLocaleString();
}
}
},
animation: {
duration: 0,
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.textAlign = 'top';
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.textBaseline = 'bottom';
// Loop through each data in the datasets
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = parseInt(dataset.data[index]).toLocaleString();
ctx.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
},
scales: {
xAxes: [{
gridLines: {
color: [$arra],
}
}],
yAxes: [
{
id: 'first-y-axis',
type: 'linear',
gridLines: {
display:false
},
ticks: {
beginAtZero: true,
userCallback: function(value, index, values) {
return value.toLocaleString(); // this is all we need
},
},
},
]
}
}"
);