0
146
ViewsChartjs not giving 'xLabel' properly on tooltip
I have a line chart where data is displayed as point elements depending on the X axes (time axis) label.
// Config chart
const config = {
type: "line",
data: {
labels: ['ene.', 'feb', 'mar.', 'abr.', 'may.', 'jun.', 'jul.', 'ago.', 'sep.', 'oct.', 'nov.', 'dic.'],
datasets // ex --> [{ x: 'jun.', y: 90 }]
},
options: {
tooltips: {
callbacks: {
title: function(context) {
console.log(context); // Returning wrong xLabel
}
}
}
}
}
The problem is when it shows the tooltip of, for example, June it takes it as index 3 so the title tooltip (xlabel) is shown as "April".
How could I get the proper label on the tooltip, not depending on the index?
·
Juan Pablo Isaza
1 answers
Answer question0
For V2 this behaviour wont get fixed anymore. But you can get the correct labels by using the second argument in the callback which provides you with the data:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [{
x: "Red",
y: 5
}, {
x: "Blue",
y: 5
}, {
x: "Purple",
y: 5
}, {
x: "Orange",
y: 5
}],
pointBackgroundColor: 'pink',
borderColor: 'pink',
fill: false
}]
},
options: {
tooltips: {
mode: 'point',
callbacks: {
title: (ctx, data) => (data.datasets[ctx[0].datasetIndex].data[ctx[0].index].x)
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
·
Juan Pablo Isaza
Report
Answer question