Comments (16)
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.
from plotly.js.
@n-riesco I'd vote for
layout: {
legend : {
orientation: 'h' | 'v'
}
}
similar to bar orientation
.
from plotly.js.
legend : {
orientation: 'h',
y:-0.15
},
this helps
from plotly.js.
legend is coverd by x-axies label
from plotly.js.
Horizontal legend is not working for me. Is this a bug ?
from plotly.js.
@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.
from plotly.js.
Is it planned to make legends more customizable in nearest future? If yes do you know any estimates?
from plotly.js.
Yes but this doesn't change the legend layout. Legend entries are always one below another. They are never in the same line.
from plotly.js.
@etpinard @mdtusz I'm thinking of the following API for this feature:
layout: {
legend : {
orientation: 'horizontal' | 'vertical'
}
}
from plotly.js.
⬆️ agreed, but only for the sake of consistency with the existing style.
from plotly.js.
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.
from plotly.js.
@cpsievert ^^ ?
from plotly.js.
Is there any update on this?
EDITED: Amazing. It's working as per the above format.
from plotly.js.
@marwin1991 Try something like this > {legend: {x: 0.35, y: 5, orientation: 'h'},
from plotly.js.
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?
from plotly.js.
Yes, this works for me: https://codepen.io/nicolaskruchten/pen/JjENwZZ?editors=0010 ... it looks like this:
from plotly.js.
Related Issues (20)
- Feature Request: Remove label gap in treemap
- Adding a negative `zorder` to one scatter trace could impact drawing order of other scatter traces and put all of them behind bars!
- Consolidate and add deprecation notice to figure factory
- Unified hover on splom shows duplicate point when setting `hoversubplots: "axis"`
- hoversubplots="axis" with hovermode="x" on stacked traces, shows x-axis label on first trace
- Feature Request: GeoJSON Layer Display
- Handle empty data in heatmaps
- Documentation for heatmap, boxplot, etc
- different spacing between tick labels and axis title with multi line text
- Colorbar Orientation Change Causes Render Issue
- Support `text-shadow` in SVG text
- Support `text-overflow` in SVG text
- Support `user-select` text from the graph elements HOT 2
- Clickmode "event+select" activated and Clicking outside of Graph calls onUpdate incorrectly HOT 1
- how can we set tick for bar
- Need help with multiple axes and subplots
- Hovertemplate use html tag is not working
- [FR] Change the height of the legend graphic (specifically for fill)
- Plotly-basic.js + table HOT 2
- Display tooltips on zero value bars HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from plotly.js.