When you hover over a specific data point on a chartjs linechart the point's value can be shown. But let's say you hover on the graph, not on a specific data point but over the "empty space". In that case there should be some function to show the values of the points vertically aligned with the pointer. Does any such solution exist?
Basically the reason I'm asking is to be able to make mobile-friendly graphs and it can be difficult/irritating for the user to try and hit the small data points with their fingers.
Yes, you can set intersect to false in the tooltip config:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'orange'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'pink'
}
]
},
options: {
plugins: {
tooltip: {
intersect: false
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>