Adding hover text over bubble chart in plotly.js

plotly.js
1

i am writing this code for flask webapp,where this provided data will get as fetch response from the flask function as json data and display bubble chart in webapp using plotlyjs

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <div id="bubble-chart" style="width: 800px; height: 400px;"></div>

    <script>

var xdat = [900, 920, 940, 960, 980, 1000, 1020, 1040, 1060, 1080, 1100];
var ydat = [3, 10, 102, 369, 241, 476, 47, 53, 20, 13, 67];
var sizdat = [16150, 29750, 79050, 79900, 98600, 193800, 23800, 45900, 18700, 8500, 76500];

// Scale the marker sizes based on sizdat
var sizdatScaled = sizdat.map(function(value) {
    return Math.sqrt(value); // Scaled based on the square root for visibility
});

// Define the maximum and minimum marker sizes
var maxMarkerSize = 40; // Adjust as needed
var minMarkerSize = 4;  // Adjust as needed

// Normalize the scaled sizdat values to fit within the marker size limits
var sizdatNormalized = sizdatScaled.map(function(value) {
    return minMarkerSize + (maxMarkerSize - minMarkerSize) * (value - Math.min(...sizdatScaled)) / (Math.max(...sizdatScaled) - Math.min(...sizdatScaled));
});

// Create hover text based on sizdat
var hoverText = sizdat.map(function(value) {
    return 'SizDat: ' + value; // Customize the hover text as needed
});

// Create the trace for the bubble chart
var trace = {
    x: xdat,
    y: ydat,
    mode: 'markers',
    marker: {
        size: sizdatNormalized,
        sizemode: 'diameter',
        color: 'blue',
        opacity: 0.5,
        line: {
            width: 1,
        },
        hoverinfo: 'text',
        text: hoverText, // Use the hover text here
    },
    hovertemplate: "<b>X: %{x}</b><br>" +
        "<b>Y: %{y}</b><br>" +
        "<b>Size: %{marker.size}</b><br>" + // Include %{marker.size} for displaying size values
        "<extra></extra>"
};

var data = [trace];

// Create the bubble chart
var layout = {
    title: 'Bubble Chart with Scaled Marker Sizes',
    xaxis: {
        title: 'X-axis Label',
    },
    yaxis: {
        title: 'Y-axis Label',
    },
};

Plotly.newPlot('bubble-chart', data, layout);

</script>
</body>
</html>

this chart is displaying correctly.here sizdat is third dimension has small and very large values so to fit according to chart size ,it is normalized and chart displays hover text of xdata,ydata and sizdatNormalized values.But i need xdat,ydat and sizdat values to be displayed on hover on bubble i.e., instead of sizdatNormalizd data it should display sizdat data of original values that is before normalised values that is given starting as sizdat values