Python adding titles to x & y axis dash app

Question

I am attempting to create a dash app for creating a scatter plot of some data.. Would someone be able to give me a tip for showing titles on the x & y axis of the plot? It seems like most documentation I am finding online seems like its for IPython. Layouts are defined in this format:

layout = dict(
        title= 'Rank',
        ticklen= 5,
        gridwidth= 2,
    )

But my dash app looks more like this format: EDIT to include all code below

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
import numpy as np

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)



df = pd.read_csv('boilerData.csv', index_col='Date', parse_dates=True)
df = df.fillna(method = 'ffill').fillna(method = 'bfill')

app.layout = html.Div([

    html.H1('Heating System Temperature Data Visulation'), 
    html.Center('The purpose of the scatter plot below is to prove if a temperature reset strategy is implemented on the hydronic heating system. At various outside air temperature conditions, the hot water temperature should fluctuate to save energy.'),

    dcc.Graph(
        id='hwst-vs-oat',
        figure={
            'data': [
                go.Scatter(
                    x = df.OAT,
                    y = df.HWST,
                    mode = 'markers',
                    marker = dict(
                        color = '#FFBAD2',
                        line = dict(width = 1)
                    )
                )
            ],
            'layout':{
            'title':'Scatter Plot of OAT versus HWST',
            'xaxis':{
                'title':'whatever you want x to be'
            },
            'yaxis':{
                 'title':'whatever you want y to be'
            }
        }
    )
])


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

Any tips help thank you.

Brent Brent · Accepted Answer · 2019-06-13T14:48:39

should be able to do something like this

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
import plotly.graph_objs as go
import numpy as np

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)



df = pd.read_csv('boilerData.csv', index_col='Date', parse_dates=True)
df = df.fillna(method = 'ffill').fillna(method = 'bfill')


app.layout = html.Div([

    html.H1('Heating System Temperature Data Visulation'), 
    html.Center('The purpose of the scatter plot below is to prove if a temperature reset strategy is implemented on the hydronic heating system. At various outside air temperature conditions, the hot water temperature should fluctuate to save energy.'),

    dcc.Graph(
        id='hwst-vs-oat',
        figure={
            'data': [
                go.Scatter(
                    x = df.OAT,
                    y = df.HWST,
                    mode = 'markers',
                    marker = dict(
                        color = '#FFBAD2',
                        line = dict(width = 1)
                    )
                )
            ],
            'layout':{
                'title':'Scatter Plot of OAT versus HWST',
                'xaxis':{
                    'title':'whatever you want x to be'
                },
                'yaxis':{
                    'title':'whatever you want y to be'
                }
            }
        }  
    )
])

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

Python adding titles to x & y axis dash app

1 Answers