Plotly.js: 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]

:arrow_up: agreed, but only for the sake of consistency with the existing style.

[ptoche]

I came here after receiving the following message:

Warning message:
plotly.js does not (yet) support horizontal legend items 
You can track progress here: 
https://github.com/plotly/plotly.js/issues/53

I do not usually receive this warning message. In a ggplot2 object processed by plotly I set guides(colour = guide_legend(ncol=1)), clearly requesting a vertical legend (not a single-line horizontal legend), which works as expected. I came to this issue as directed by the warning message and see this issue is now closed: Is this warning still relevant? Thanks.

[alexcjohnson]

@cpsievert ^^ ?

[mikkokotila]

Is there any update on this?

EDITED: Amazing. It's working as per the above format.

[marwin1991]

legend is coverd by x-axies label

[mikkokotila]

@marwin1991 Try something like this > {legend: {x: 0.35, y: 5, orientation: 'h'},

[marwin1991]

                    legend : {
                        orientation: 'h',
                        y:-0.15
                    },

this helps

[usser123]

Horizontal legend is not working for me. Is this a bug ?