I am trying to plot a chart of alarms generated by the machines on a time series scale and I have been able to do it successfully.

The thing I am not able to able to find is how can I have a border or change the background color of the scatter text that has been plotted? Is there any predefined tool for it? or is there a way do achieve it.

Here is my plotting code:

function Plottheeventschart(labels, ploteventlist, randomList) {

    var trace1 = {
    showarrow: true,
    x: labels,
    y: randomList,
    type: 'scatter',
    mode: 'markers+text',
    text: ploteventlist,
    textposition: 'top',
    textfont: {
        family: 'sans-serif',
        size: 15,
        color: '#ff7f0e',
        automargin: true,
    },
    marker: {
        size: 15,
    },
    name: 'Events',
    };
    
    var data = [trace1];

    var layout = {

        autosize: true,
        height: 450,
        automargin: true,
        title: 'Events',

        xaxis: {
            showgrid: true,
            showspikes: true,
            spikedash: "solid",
            spikemode: "toaxis+marker",
            spikesnap: "data",
            spikethickness: 1,
            range: [labels[labels.length-15], labels[labels.length-1]],
            rangeselector: {
                bgcolor: "#201c1c",
            rangeslider: {
                range: [labels[0], labels[labels.length]],
                thickness:0.0175,
            },
        },

        yaxis: {
            visible: false,
        },

        plot_bgcolor: "#201c1c", // inside
        paper_bgcolor: "#2e2e2e",
        font: {
            family: 'sans-serif ',
            size: 12,
            color: '#ffffff'
        },
        showlegend: false,
        margin: {
            l: 20,
            r: 20,
            b: 50,
            t: 90
        },
    };
    
    Plotly.newPlot('mydiv', data, layout, {responsive: true});

}

And here is image of plot: Plot

What I am trying to do is have the background color or text boxes for each text.