Как обеспечить, чтобы легенды занимали всю ширину? ⇐ Javascript

[Anonymous]

Я пытаюсь настроить поведение горизонтальной легенды в Plotly.js для различной ширины области просмотра.
Минимальный пример:

Код: Выделить всё

Код: Выделить всё

(function () {
const d3 = Plotly.d3;

const WIDTH_IN_PERCENT_OF_PARENT = 60;
const HEIGHT_IN_PERCENT_OF_PARENT = 80;

const gd3 = d3
.select("body")
.append("div")
.style({
width: WIDTH_IN_PERCENT_OF_PARENT + "%",
"margin-left": (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + "%",
height: HEIGHT_IN_PERCENT_OF_PARENT + "vh",
"margin-top": (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + "vh"
});

const gd = gd3.node();

const labels = ["Tatooine", "Hoth", "Endor", "Alderaan"];
const traces = [
{ name: "Luke Skywalker", color: "#1f77b4", y: [5, 10, 2, 8] },
{ name: "Leia Organa", color: "#ff7f0e", y: [9, 6, 3, 12] },
{ name: "Han Solo", color: "#2ca02c", y: [7, 9, 4, 10] },
{ name: "Chewbacca", color: "#d62728", y: [4, 8, 11, 6] },
{ name: "Darth Vader", color: "#9467bd", y: [11, 3, 9, 5] },
{ name: "Yoda", color: "#8c564b", y: [10, 12, 7, 8] },
{ name: "Boba Fett", color: "#e377c2", y: [3, 5, 9, 11] },
{ name: "Lando Calrissian", color: "#7f7f7f", y: [6, 7, 10, 4] },
{ name: "Obi-Wan Kenobi", color: "#bcbd22", y: [8, 9, 4, 7] },
{ name: "Emperor Palpatine", color: "#17becf", y: [12, 6, 5, 9] },
{ name: "Wedge Antilles", color: "#aec7e8", y: [7, 8, 5, 6] },
{ name: "Admiral Ackbar", color: "#ffbb78", y: [9, 4, 8, 10] },
{ name: "Greedo", color: "#98df8a", y: [5, 6, 7, 8] },
{ name: "Jabba the Hutt", color: "#ff9896", y: [11, 9, 4, 3] },
{ name: "Mon Mothma", color: "#c5b0d5", y: [6, 10, 8, 7] }
].map((t) => ({
type: "bar",
name: t.name,
x: labels,
y: t.y,
marker: { color: t.color, line: { width: 1.5, color: "#333" } }
}));

const layout = {
barmode: "group",
legend: {
borderwidth: 1,
orientation: "h", // horizontal
x: 0,
xanchor: "left",
y: 1.1, // a bit higher above the plot area
yanchor: "bottom"
},
margin: { t: 80, r: 40, b: 60, l: 60 },
font: { size: 16 }
};

Plotly.newPlot(gd, traces, layout);

window.onresize = function () {
Plotly.Plots.resize(gd);
};
})();

Codepen: https://codepen.io/aaron-parisi-turngate/pen/OPMBRmJ
Сделайте область просмотра уже, чтобы легенда не занимала всю ширину:
Полная ширина:


Не полная ширина:


Я напутал:

Код: Выделить всё

{
entrywidth: 0.5,
entrywidthmode: 'fraction'
}

это помогает, но тогда я теряю автоматическое обтекание на основе изменения размера, которое мне все еще нужно.
Есть ли способ сюжетно сказать: «следите за тем, чтобы легенда всегда занимала как можно больше горизонтального пространства»?>

Подробнее здесь: https://stackoverflow.com/questions/798 ... full-width