Este suele ser un problema simple de resolver con una var global. Pero nooooo... Todo el código funciona, se lee el csv, se crean las matrices con los valores correctos (x,y), se dibuja un gráfico predeterminado, pero las vars de la función newPlot no actúan como globales y están vacías, por lo que la trama es un valor predeterminado vacío de 6x6 sin rastros. Los newPlot vars son globales. ¿Es plotly.js diferente? La línea 63 es la culpable. Este código es más o menos un clon de: plotlyHover
<!DOCTYPE html> <html lang="en" > <head> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> </head> <div id="myDiv"></div> <div id="hoverinfo" style="margin-left:80px;"></div> <!-- cloudcover.csv looks like this. Time,CloudCover 2022-04-06 10:07:09,0 2022-04-06 11:07:18,100.0 2022-04-06 12:08:17,100.0 2022-04-06 13:09:16,96.0 2022-04-06 14:10:15,66.0 2022-04-06 15:11:14,7.0 --> <script> var traces = []; var layout = {}; var config = {}; const CSV = "cloudcover.csv"; Plotly.d3.csv(CSV, function(rows) { let x = []; let y = []; let row; let i = 0; while (i < rows.length) { row = rows[i]; x.push(row["Time"]); y.push(row["CloudCover"]); i += 1; }; traces = [{ x: x, y: y, line: { color: "#387fba" }, width: 16, }]; layout = { title: 'Cloudcover', yaxis: { range: [0, 100] }, xaxis: { tickformat: "%H:%M:%S" } }; config = { responsive: true }; }); Plotly.newPlot('myDiv', traces, layout, config, { showSendToCloud: true }); var myPlot = document.getElementById('myDiv') hoverInfo = document.getElementById('hoverinfo') myPlot.on('plotly_hover', function(data) { var infotext = data.points.map(function(d) { return (d.data.name + ': x= ' + dx + ', y= ' + dytoPrecision(3)); }); hoverInfo.innerHTML = infotext.join('<br/>'); }) myPlot.on('plotly_unhover', function(data) { hoverInfo.innerHTML = ''; }); </script> </body> </html>