I have created a simple line chart in chartjs. when I hover with the mouse over a single datapoint, a box pops up that tells me the data's value, the x-axis value and the name of the statistic. The black box doesn't appear at once, there is a fade-in. I would like the box to appear immediately without fade-in, so I'm basically trying to se the animation time to 0. How do I do this?
Below is how the graph is being written right now:
chart_code = new Chart(ctx, {
type: 'line',
data: {
labels: ['A','B','C','D','E'],
datasets: [{
label: 'Teststatistic',
data: [50,40,30,20,50],
backgroundColor: ['rgba(0, 105, 146, 1)'],
borderColor: ['rgba(0, 105, 146, 1)'],
borderWidth: 3,
fill: false,
pointStyle: 'rect',
pointRadius: 5
}]
},
options: {
responsive: false,
plugins: {
legend: {
display: false,
boxWidth: 80,
boxHeight: 80
}
},
scales: {
x: {
ticks: {
maxRotation: 0,
minRotation: 0
}
}
}
}
}
You can set animation to false in the tooltip config like so:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
plugins: {
tooltip: {
animation: 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>