I have a line chart that has a minimum value for the Y-axis. Sometimes the data goes under this minimum value and I don't want to stretch the chart because of this one point, but I want to have the tooltip to show the data when I move my cursor to the value in the X-axis.
I've created a codepen about the problem: codepen
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: "line",
data: {
labels: ["R", "B", "Y", "G", "P", "O"],
datasets: [
{
label: "# of Votes",
data: [12, 13, 11, 12, 9, 13]
}
]
},
options: {
scales: {
y: {
min: 10
},
},
interaction: {
intersect: false,
mode: 'nearest',
axis: 'x',
},
}
});
You can define interaction.mode: 'x' as explained here.
Please take a look at your amended code below and see how it works.
new Chart('myChart', {
type: "line",
data: {
labels: ["R", "B", "Y", "G", "P", "O"],
datasets: [{
label: "# of Votes",
data: [12, 13, 11, 12, 9, 13]
}]
},
options: {
scales: {
y: {
min: 10
}
},
interaction: {
intersect: false,
mode: 'x'
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>