Horizontal Legend below the chart

[prog8]

Horizontal Legend below the chart

[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.

[etpinard]

@n-riesco I'd vote for

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

similar to bar orientation.

[marwin1991]

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

this helps

[marwin1991]

legend is coverd by x-axies label

[usser123]

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

[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?

[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'
    }
}

[mdtusz]

⬆️ 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.

[mikkokotila]

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

[MikkoHaavisto]

When I set the legend to 'h', but it only moves the legend title to the side, the variable legends are still vertically aligned. I couldn't get one below the other.

Is this feature working for someone?

[nicolaskruchten]

Yes, this works for me: https://codepen.io/nicolaskruchten/pen/JjENwZZ?editors=0010 ... it looks like this: