We can make creating charts on a web page easy with Chart.js. In this article, weâll look at how to create charts with Chart.js.
Tooltips
We can change the tooltips with the option.tooltips
 properties.
They include many options like the colors, radius, width, text direction, alignment, and more.
For example, we can write:
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: '# of Votes',
data: [12.35748, 19, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderWidth: 1
}]
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
let label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += Math.round(tooltipItem.yLabel * 100) / 100;
return label;
}
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
to round the numbers to 2 digits.
We have the tooltipItem.yLabel
 property with the y-axis value.
Now weâll see that the Red barâs tooltip shows a number with 2 decimal digits when we hover on it.
Label Color Callback
We can also change the label color callback.
For example, we can write:
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: '# of Votes',
data: [12.35748, 19, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderWidth: 1
}]
},
options: {
tooltips: {
callbacks: {
labelColor(tooltipItem, chart) {
return {
borderColor: 'rgb(255, 0, 0)',
backgroundColor: 'rgb(255, 0, 0)'
};
},
labelTextColor(tooltipItem, chart) {
return 'lightgray';
}
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
We have the options.tooltips.callbacks
 property with the labelColor
 method to return an object with the borderColor
 and the backgroundColor
 properties.
borderColor
 has the border color of the tooltip.
And backgroundColor
 has the background color of the tooltip.
Also, the labelTextColor
 is a method that returns the color of the tooltip label text.
The tooltipItem
 object has many properties.
They include the label
 property with the label string.
value
 has the value.
xLabel
 and yLabel
 have the x and y label values.
datasetIndex
 has the index of the dataset that the item comes from.
index
 has the index of the data item in the dataset.
x
 and y
 are the x and y position of the matching point.
External (Custom) Tooltips
We can customize our tooltip with the custom
 method:
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: '# of Votes',
data: [12.35748, 19, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderWidth: 1
}]
},
options: {
tooltips: {
enabled: false,
custom(tooltipModel) {
var tooltipEl = document.getElementById('chartjs-tooltip');
if (!tooltipEl) {
tooltipEl = document.createElement('div');
tooltipEl.id = 'chartjs-tooltip';
document.body.appendChild(tooltipEl);
}
if (tooltipModel.body) {
tooltipEl.innerHTML = tooltipModel.body[0].lines
}
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
We create a tooltip element and then set the innerHTML
 to the body[0].lines
 propertyâs value.
Now we should see the label value displayed below the graph.
Conclusion
There are many ways to customize labels of a graph.
Share