✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Plotly - Show Legend Outside Graph without Blank Space

I’m using Plotly to render dashboards on a product that we are developing. The charts in the dashboard can resize in terms of height and width.

The code for setting the legends are as follows:

layout.legend = {
x: 0.5,
y: 1.15,
orientation: ‘h’,
xanchor:‘center’,
yanchor:‘top’,
font: {
size: this.legendFontSize,
},
};

The problem that I’m experiencing is with Plotly the legend Y position is a static value. Each chart height and legend font-size requires a unique Y position in order to make the chart look neat and professional. See below example where Y = 1.15. For a height of 400x it looks fine, however, the moment the chart height increases to 800px, there is a massive white space whereby the Y need to be manually adjusted through trial and error.

Other charting libraries like chart.js and apexcharts automatically adjust the legend without this problem. Is there any workaround in Plotly?