Avoid legend automatically repositioning

📊 Plotly Python
3

Hi @jmmease

Thanks for your reply (and correcting line to scatter!). I tried 'legend': {'x': 1.02} but it doesn’t seem to work - I think because it doesn’t over-ride plotly’s not wanting to let the plot area go below a certain size.

See code below which produces the following:

image
image.png534×812 20.2 KB 

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(children=[

    # basic example adapted from Dash's getting started docs - demonstrates usable able within Div
    html.Div([
        dcc.Graph(
            id='example-graph1',
            figure={
                'data': [
                    {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'scatter', 'name': 'SF'},
                    {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'scatter', 'name': u'Montréal'},
                ],
                'layout': {
                    'title': 'Dash Data Visualization',
                }
            }
        )
    ],
    style={'width': 600, 'height': 600, 'border': '5px solid red'}
    ),

    # Try setting the layout.legend.x property to 1.02
    html.Div([
        dcc.Graph(
            id='example-graph2',
            figure={
                'data': [
                    {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'scatter', 'name': 'SFABCDEFGHIJKLMNOPQRSTUVWXYZ'},
                    {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'scatter', 'name': u'Montréal'},
                ],
                'layout': {
                    'title': 'Dash Data Visualization',
                    'legend': {'x': 1.02},
                }
            }
        )
    ],
    style={'width': 600, 'height': 600, 'border': '5px solid red'}
    ),

])

if __name__ == '__main__':
    app.run_server(debug=True)