Horizontal Legend below the chart

[prog8]

I couldn't find any way to configure legend to be placed under the chart in a single line. It would be nice if Plotly makes it possible to move the legend below the chart.

[etpinard]

@prog8 correct. plotly.js legends don't offer much in terms of customization.

You can move the legend using layout.legend.x and layout.legend.y, but there's no way to place the items horizontally at the moment.

[prog8]

Is it planned to make legends more customizable in nearest future? If yes do you know any estimates?

[czellweg]

For anybody wanting to place the legend under the chart, one way to achieve this would be like so:

layout: {
....
  legend:{
    xanchor:"center",
    yanchor:"top",
    y:-0.3, // play with it
    x:0.5   // play with it
  }
}

You can also check out the effects of the x/yanchor and x/y values on https://plot.ly/plot: plot a graph, then change Layout -> Horz Position, Vert Position, Horz anchor, Vert anchor.

[prog8]

Yes but this doesn't change the legend layout. Legend entries are always one below another. They are never in the same line.

[n-riesco]

@etpinard @mdtusz I'm thinking of the following API for this feature:

layout: {
    legend : {
        orientation: 'horizontal' | 'vertical'
    }
}

[etpinard]

@n-riesco I'd vote for

layout: {
    legend : {
        orientation: 'h' | 'v'
    }
}

similar to bar orientation.

[mdtusz]

⬆️ agreed, but only for the sake of consistency with the existing style.