Horizontal Legend below the chart

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.

@prog8

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

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

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.

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

@etpinard

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

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

@n-riesco

@n-riesco I'd vote for

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

similar to bar orientation.

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

Merge pull request #535 from n-riesco/legend-orientation

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.

@cpsievert

@cpsievert ^^ ?

Is there any update on this?

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

legend is coverd by x-axies label

@marwin1991

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

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

this helps

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

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?

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

Quiet warning

Navigation Menu

Repository navigation

Horizontal Legend below the chart #53

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Horizontal Legend below the chart #53

Description

Activity

etpinard commented on Dec 1, 2015

prog8 commented on Dec 1, 2015

czellweg commented on Dec 2, 2015

prog8 commented on Dec 2, 2015

n-riesco commented on Apr 26, 2016

etpinard commented on Apr 26, 2016

mdtusz commented on Apr 26, 2016

ptoche commented on Sep 15, 2018

alexcjohnson commented on Sep 15, 2018

mikkokotila commented on Jan 12, 2019

marwin1991 commented on Jan 12, 2019

mikkokotila commented on Jan 12, 2019

marwin1991 commented on Jan 12, 2019

usser123 commented on Apr 23, 2020

MikkoHaavisto commented on Apr 3, 2021

nicolaskruchten commented on Apr 4, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions