I am updating a chart.js Chart object with Chart().update() but the label keeps flickering even after mouse cursor stopped hovering. I have tried chart.destroy() but it made it worse by not showing at all. It starts when the mouse is hovered, but persists when the mouse cursor moved out of the chart.
gif of the label flickering
const color_red = 'rgb(255, 99, 132)';
const color_blue = 'rgb(54, 162, 235)';
const color_white = 'rgba(0, 0, 0, 0.1)'
const config = {
type: 'line',
data: futuresData,
options: {
responsive: false,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Line Chart'
}
},
tooltips: {
mode: 'index',
intersect: false,
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
},
};
const context = document.getElementById('canvas').getContext('2d');
var lineChart = new Chart(document.getElementById('canvas').getContext('2d'), config);
ws.onmessage = ({data}) => {
json_data = JSON.parse(data);
// CHARTING
config.data.datasets[0].data = [];
config.data.datasets[1].data = [];
// BTCUSD
for (const [tenor, basis] of Object.entries(json_data.futuresMarket.BTCUSD.basis)) {
config.data.datasets[0].data.push({x: parseInt(tenor) , y: basis});
console.log({x: parseInt(tenor) , y: basis});
};
// ETHUSD
for (const [tenor, basis] of Object.entries(json_data.futuresMarket.ETHUSD.basis)) {
config.data.datasets[1].data.push({x: parseInt(tenor) , y: basis});
console.log({x: parseInt(tenor) , y: basis});
};
console.log(`BTCUSD ${config.data.datasets[0].data}`);
console.log(`ETHUSD ${config.data.datasets[0].data}`);
lineChart.update();
};````