As seen the image above, the hovertext at times goes outside the colored background box.
This does not happen for all the points in the plot.
Following is my code
let traces = [];
let categories = [];
let stocks = this.props.eqdata;
let BETATOSIZE = 6
PlotlyCore.register(PlotlyScatter)
for (let i = 0; i < stocks.length; i += 1) {
if (categories.indexOf(stocks[i].Industry) === -1) {
traces.push({x: [],
y: [],
mode: 'markers',
name: stocks[i].Industry,
text: [],
showlegend: false,
marker: {
sizemode: 'diameter',
size: [],
}
});
categories.push(stocks[i].Industry);
}
traces[categories.indexOf(stocks[i].Industry)].x.push(stocks[i].vol);
traces[categories.indexOf(stocks[i].Industry)].y.push(stocks[i].returns20);
traces[categories.indexOf(stocks[i].Industry)].text.push("Industry: ".concat(stocks[i].Industry, "<br>TICKER: ", stocks[i].variable, "<br>1M BETA: ",stocks[i].beta1M) ) ;
traces[categories.indexOf(stocks[i].Industry)].marker.size.push(Math.abs(stocks[i].beta1M)*BETATOSIZE) ;
}
let layout = Object.assign({},PlotlyLayout)
layout.xaxis= {title: '1 Month Volatility', showgrid: false, }
layout.yaxis= {title: '1 Month Returns', showgrid: false, }
// hide the modebar (hover bar) buttons, plotly logo. show plotly tooltips
let defaultPlotlyConfiguration = { modeBarButtonsToRemove: ['sendDataToCloud', 'pan2d', 'zoomIn2d', 'zoomOut2d', 'zoom2d', 'toggleSpikelines' ,'autoScale2d', 'hoverClosestCartesian', 'hoverCompareCartesian', 'lasso2d', 'select2d'], displaylogo: false, showTips: true };
PlotlyCore.plot('plot', traces, layout, defaultPlotlyConfiguration);
PlotlyLayout is exported as follows
export const PlotlyLayout = {
margin: {t:0,},
padding: {r: '1em', t:'1em', },
width: 500,
height: 500,
autosize: true ,
paper_bgcolor: themeColors.dark,
plot_bgcolor: themeColors.dark,
font: {color: '#BDBDD7'},
yaxis: {showgrid: false, },
hovermode: 'closest', // so the hover shows the closest data and not the entire x axis data
}
Any idea how I can fix this please?
Thanks