How can I use embedded twitter tweets as a tooltip for each plot on a scatter chart?

Viewed 28
// both being used    
//     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
[//     <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>][1] 
const externalTooltipHandler = (context) => {
//does not log anything?
    console.log(context);
    return context;
};

const chartData = {
datasets: [{
    label: ['Tweets'],
    data: [],
    backgroundColor: 'rgb(255, 255, 255)'
}],

};
const config = {
type: 'scatter',
data: chartData,
options: {
scales: {
    x: {
    type: 'linear',
    position: 'bottom'
    }
},

plugins: {
    tooltip: {
        tooltip: {
        enabled: false,
        position: 'nearest',
        external: externalTooltipHandler
        }
    }}}};  
var output = false, finalData = [];
fetch("http://localhost:3000/getdata", {method: 'POST'})
.then(data => {return data.json()})
.then(data => {
    //console.log(data);
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, config);
    for (let i = 0; i<data.length; i++){
        chartData.datasets[0].data.push({x:data[i].data.id, y: data[i].data.public_metrics.like_count})
        myChart.update();
    };
})

// Something along the lines of 
//<blockquote class="twitter-tweet" data-theme="dark">
//<a href=`https://twitter.com/x/status/${tweetID}` data-chrome="transparent"></a> 
//</blockquote>

As the question says, I'd like to display the tooltip as the embedded tweet, showing when hovered over, I've tried reconfiguring the samples here https://www.chartjs.org/docs/latest/samples/tooltip/html.html and on other stackoverflow pages, though I can't get those to work.

what it would look like: https://i.stack.imgur.com/x79aT.png

0 Answers
Related