In the above image I will not able to show the datalabels on my dots where tooltips are shown. Instead of tooltips I want only values shown there and my code is in this. I will not get any idea for how to show datalabels on my line chart dots.
This is my script by which I make the line chart accordingly to the database values.
$('canvas.LineChart').each(function(cnvindx, cnvobj) {
var proc_id = $(cnvobj).data('proc_id');
var dcharry = [];
var labelChartArr = [];
var ctxs = cnvobj;
var dataChart = {
datasets: [],
labels: []
};
var optionsChart = {
title: {
display: true,
text: "Offered Call's Hourly",
position: 'top'
},
legend: {
display: true,
position: 'top',
align: 'start',
},
tooltips: {
enabled: false
},
plugins: {
datalabels: {
anchor: 'end',
align: 'end',
labels: {
value: {
color: 'blue'
}
}
}
}
};
var myLineChart = new Chart(ctxs, {
type: 'line',
data: dataChart,
options: optionsChart
});
myLineChart.data.datasets[0] = { };
myLineChart.data.labels = [];
myLineChart.update();
if(msg.myLineChart != undefined) {
myLineChart.data.datasets[0].data = [];
myLineChart.data.datasets[0].label = ["Offered Call's"];
myLineChart.data.datasets[0].fill = [false];
myLineChart.data.datasets[0].borderColor = [Offered_Call_COLOR];
myLineChart.data.datasets[0].backgroundColor = [];
$.each(msg.multiplebarchart, function(indx, hourData) {
//setting line data
myLineChart.data.datasets[0].data.push(
hourData['Offered_Call']);
//setting X axis label
myLineChart.data.labels.push(hourData['HOUR1']);
//setting background color
myLineChart.data.datasets[0].backgroundColor.push(
Offered_Call_COLOR);
});
myLineChart.update();
myLineChart.render({
duration: 500,
lazy: false,
});
}
});
Since your config aint working I assume you are using chart.js V3 in which case you put the options in the wrong spot, you are placing them in the V2 spots.
If you put it like this it will work:
options: {
plugins: {
tooltip: {
enabled: false
}
}
}
For all changes between V2 and V3 you can read the migration guide