The "line" graphic appears when the page loads, but not when I come from another page
Expected behavior
Hi,
I have specific problem for "line" chart, I don't have this bug with other (like "doughut" and "bar") in Rails project
When I just reload the page, all the chart are present without problem. But when I go to an another page, to simulate my user comportement, and come back to my chart page, the "line" chart is the only one not to be displayed.
I've no error in console, but the canvas get some style by default: "[...] height: 0px; width: 0px;" while I have specified a height and width by default in the previous div. i already try to fix some size with important style etc, without effect.
Here the code of my chart
var labels = ["TEST" , "TEST2", "TEST3"];
var data3 = {
labels: labels,
datasets: [
{
label: 'Solde intermédiaire comptes cumulés',
data: [1,2, 12],
yAxisID: 'y',
borderColor: '#00B38F',
backgroundColor: '#00B38F'
},
{
label: 'Incidents cumulés',
data: [3,4],
yAxisID: 'y1',
borderColor: '#285AC8',
backgroundColor: '#285AC8'
},
{
label: 'Jeux d’argent cumulés',
data: [5,6],
yAxisID: 'y',
borderColor: '#F04438',
backgroundColor: '#F04438'
}
]
};
var config3 = {
type: 'line',
data: data3,
options: {
maintainAspectRatio: false,
interaction: {
mode: 'index',
intersect: false,
},
stacked: false,
plugins: {
title: {
display: false,
text: ''
},
legend: {
position : 'bottom',
labels: {
fontSize: 8,
}
}
},
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
title: {
display: true,
text: "Montant en euro €",
color: '#667085',
font: {
family: 'Karla',
size: 12,
lineHeight: 1.2
},
ticks: {
font: {
size: 8,
lineHeight: 1.2
},
}
}
},
y1: {
type: 'linear',
display: true,
position: 'right',
// grid line settings
grid: {
drawOnChartArea: false,
color: '#F2F4F7' // only want the grid lines for one axis to show up
},
title: {
display: true,
text: "Nombre d'incidents cumulés",
color: '#667085',
font: {
size: 12,
lineHeight: 1.2
},
ticks: {
font: {
size: 8,
lineHeight: 1.2
},
}
}
},
x: {
grid: {
display: false
}
}
}
},
};
var ctx = document.getElementById('myChart3');
var myChart3 = new Chart(ctx, config3);
I've just one install in my project, and again, all the other chart work fine.
Any idea ? Am I missing something?
Thanks =)
Current behavior
The "line" chart does not appear after going to other pages and come back
Reproducible sample
can't
Optional extra steps/info to reproduce
No response
Possible solution
No response
Context
No response
chart.js version
v3.8.0
Browser name and version
No response
Link to your project
No response