I simply want to change orientation of the legend block to horizontal, but it always displays in vertical. Here's the relevant piece of code:
newData.traces = newData.traces
.filter(trace => trace.name === 'Self Pay' || trace.name === 'Bank Loan')
.map(trace => {
return {
...trace,
mode: 'lines+markers',
fillcolor: colors[trace.name].fill,
fill: 'tozeroy',
line: {
color: colors[trace.name].line
}
};
});
newData.layout = {
...newData.layout,
yaxis: {
...newData.layout.yaxis,
title: 'TOTAL SAVINGS (1K)'
},
xaxis: {
...newData.layout.xaxis,
title: 'YEARS SINCE INSTALLATION'
},
legend: {
orientation: 'h',
y: 1.30,
x: 0.25
},
paper_bgcolor: 'transparent',
plot_bgcolor: 'transparent'
};
console.log("newData.layout: ", newData.layout);
newData.traces = newData.traces.filter(t => data.modeStatus[t.name]);
Plotly.newPlot($(chart).attr('id'), newData.traces, newData.layout, {displayModeBar: false});
As you can see, the way I generate the layout object is a bit convoluted, but legend
object clearly has orientation: 'h'
, so it's supposed to show the legend horizontally, right?
Here's a screenshot of the relevant chart and the output in the console:
Any idea what could possible cause such a problem? I'm pretty sure that at one point it was working correctly, but then for some unknown reason it kept rendering the legend block vertically.
Here's a picture of the desired result: