0
147
VisualizaçõesChartjs 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 Respostas
Responde à pergunta0
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
Relatório
Responde à pergunta