Chartjs hide data point labels - chart.js

Question

I created graph using chartjs. It works fine, only issue is it shows data labels (numbers) on each point. I want to hide them, but cannot find how. Can anyone help me solve this issue ? I tried setting pointRadius = 0, but it did not do what I want.
Also if I can not hide them is there a way I can change their color ?
Chart Image
const ctx = document.getElementById('timelineChart');
const chartColors = {
red: '#C82846',
green: '#7DC36E',
blue: '#249FBA',
darkblue: '#249FBA'
};
const config = {
plugins: [new BandsPlugin()],
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "April", "May", "June", "July",
"January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
borderColor: chartColors.green,
fill: false,
type: 'line',
id: 'y-axis-1',
pointRadius: 0,
data: [
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor()
],
}, {
type: 'bar',
id: 'y-axis-0',
borderWidth: 1,
borderColor: chartColors.green,
backgroundColor: chartColors.blue,
data: [
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor()
],
fill: false,
}]
},
options: {
pointRadius: 1,
pointHoverRadius: 1,
legend: {
display: false
},
elements: {
line: {
tension: 0,
},
point: { radius: 0 }
},
responsive: true,
title: {
display: false,
text: 'Timeline Chart'
},
tooltips: {
mode: 'label',
},
hover: {
mode: 'dataset'
},
scales: {
xAxes: [{
barThickness: 15,
display: true,
scaleLabel: {
show: false,
labelString: 'Month'
},
ticks: {
beginAtZero: true
},
afterTickToLabelConversion: function (data) {
const xLabels = data.ticks;
xLabels.forEach(function (labels, i) {
if (i % 2 === 1) {
xLabels[i] = '';
}
});
}
}],
yAxes: [{
id: 'y-axis-0',
display: true,
position: 'left',
scaleLabel: {
show: false,
labelString: 'Value'
},
ticks: {
suggestedMin: -100,
suggestedMax: 100,
max: 100,
min: 0,
stepSize: 100,
},
},
{
id: 'y-axis-1',
position: 'right',
ticks: {
suggestedMin: -100,
suggestedMax: 100,
max: 100,
min: -100,
stepSize: 100,
},
scaleLabel: {
show: false,
labelString: 'Value'
},
}]
},
bands: {
yValue: 50,
bandLine: {
stroke: 0.5,
colour: 'black',
type: 'dashed',
},
belowThresholdColour: [
chartColors.red,
chartColors.blue
]
}
}
};
const timelineChart = new Chart(ctx, config);

Answer 1

I had the same issue and came across this post. I'm guessing you have datalabels plugin installed (I did). Add this to your chart options:
plugins: {
datalabels: {
display: false,
},
}
Hope this helps