Plot.ly refuses to change orientation of the legend of my chart

562 views Asked by At

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:

screenshot of chart

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:

the desired result

0

There are 0 answers