Espero que todos estéis bien.

Me atasqué en un problema. Estoy usando plotlyjs para gráficos de barras en los que estoy usando información sobre herramientas personalizada (usando el evento de desplazamiento para crear contenido html personalizado). A continuación puedes ver:

 <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div> <div id="custom-tooltip">Custom tooltip</div>

 var trace1 = { x: ['giraffes', 'orangutans', 'monkeys'], y: [20, 14, 23], name: 'SF Zoo', type: 'bar', hoverinfo: 'none' }; var trace2 = { x: ['giraffes', 'orangutans', 'monkeys'], y: [12, 18, 29], name: 'LA Zoo', type: 'bar', hoverinfo: 'none' }; var data = [trace1, trace2]; var layout = {barmode: 'stack', showlegend: false}; Plotly.newPlot('myDiv', data, layout); var graphElem = document.getElementById('myDiv'); const tooltipElem = document.getElementById('custom-tooltip'); graphElem.on('plotly_hover', function(data){ const yaxis = data.points[0].yaxis; const xaxis = data.points[0].xaxis; console.log(data) const distY = yaxis.d2p(data.points[0].y) + yaxis._offset + 20; // const distX = xaxis.d2p(data.points[0].x) + xaxis._offset - 110; tooltipElem.innerHtml = '<h3>Custom tooltip</h3>'; console.log(distX, distY) tooltipElem.style.left = distX + "px"; tooltipElem.style.top = distY + "px"; tooltipElem.style.display = "block"; }) .on('plotly_unhover', function(data){ });

Pero no puedo encontrar una manera de colocar el div personalizado en la parte superior de la barra cada vez que se desplaza sobre cualquier barra.

Código abierto

¿Cómo puedo hacer esto?