Moving objects (bar chart) using Dash (Python)

Question

I want to move a bar car to the middle of a page. I've created bar chart with the following code:

# -*- 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=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        style={
            'height': 500,
            'width': 900,
            'display': 'inline-block'},
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }

        }

    )
])

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

And I want to move this chart to the middle of the page. Is there a way I can specify specific coordinates as to where an the bar chart should go?

Answer 1

If you only want to center the graph you must set margin-left and margin-right to auto and you need to specify display to block in the style dictionary of your graph.

Like so:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        style={
            'height': 500,
            'width': 900,
            "display": "block",
            "margin-left": "auto",
            "margin-right": "auto",
            },
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }

        }

    )
])

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

Resulting in this layout:

If you want everything centered you can specify margin as auto and set width to 50% on the parent div element like so:

# -*- 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=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        style={
            'height': 500,
            'width': 900,
            },
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }

        }

    )
],style = {'margin':'auto','width': "50%"})

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

resulting in this layout: