Estoy tratando de hacer un gráfico usando chart.js y para eso estoy recuperando datos de Firebase Realtime Database. Puedo obtener los datos y colocarlos en el gráfico, el problema es que el gráfico se muestra en la pantalla justo después de cambiar el tamaño de la ventana o alt+tab. Estoy usando este código para eso:
var rent_data = []; auth.onAuthStateChanged(function(user) { if (user != null) { const db1 = ...; db1.once('value').then(function (snapshot) { snapshot.forEach(function(childSnaphot){ rent_data.push(childSnaphot.val()) }) }) var ctx = document.getElementById('chart'); var labelms = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'] var config = { type: 'line', data: { labels: labelms, datasets: [{ label: '# of Votes', data: rent_data, backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] } } var chart2 = new Chart (ctx, config); }})Al código le faltan algunas partes, como la autenticación en Firebase, pero no creo que sea crucial ya que funciona después del cambio de tamaño.
Traté de poner chart.update() después de var chart pero no hace nada.
Algunas imágenes solo para mostrar la salida:
Gráfico después de cambiar el tamaño
Soy nuevo en javascript y tal vez me estoy perdiendo algo simple que aún no sé. En otras preguntas, vi algo relacionado con las funciones asíncronas, pero no me di cuenta de dónde debo usarlas.
¡Gracias por adelantado!
