Replies: 2 comments 1 reply
-
Directed your question to Chat GPT:
const chartData = {
labels: ['A', 'B', 'C'],
datasets: [
{
label: 'Dataset 1',
data: [10, 20, 30],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
},
{
label: 'Dataset 2',
data: [15, 25, 35],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}
]
};
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
tooltips: {
callbacks: {
itemSort: function(a, b, chart) {
// Get the y-coordinate of the mouse
const mouseY = chart.tooltip._event.y;
// Calculate the y-value of each item in the tooltip
const y1 = chart.scales['y-axis-0'].getPixelForValue(a.yLabel);
const y2 = chart.scales['y-axis-0'].getPixelForValue(b.yLabel);
// Sort the items by their proximity to the mouse (based on the y-coordinate)
return Math.abs(y1 - mouseY) - Math.abs(y2 - mouseY);
}
}
}
}
}); But I think the Edit: there are multiple other things from v2, like |
Beta Was this translation helpful? Give feedback.
-
I am working with line charts using multiple datasets. I'd like tooltips to display the item index sorted by proximity to the mouse. So, for example, if you hover near a data point, that data point's label and value should be at the top of the tooltip list in index mode. Any tips on achieving this?
Below is an illustration of the behavior I'm trying to achieve:
Beta Was this translation helpful? Give feedback.
All reactions