I would like to add a y counter label to my chart.js line v4.4.0 graph so that I don't have to hover over to view the count. The below code is currently what I have:
<canvas class="canvas" id="status-canvas" style="width: 100%; height: 40vh;"></canvas>
<script>
var ctx = document.getElementById('status-canvas').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: @Html.Raw(Json.Serialize(Model.Report.Days.Select(x => x.Description))),
datasets: [{
label: 'Trends',
data: @Html.Raw(Json.Serialize(Model.Report.Days.Select(x => x.Count))),
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
interaction: {
mode: 'nearest',
axis: 'x',
intersect: false
},
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
I've tried to reuse the following links: codepen datalabels I was expecting the below but with one line graph dataset as per my code above: sample