Dash Core Components

from dash import Dash, html, dcc
app = Dash()
app.layout = html.Div([
    dcc.Dropdown(['New York City', 'Montréal', 'San Francisco'], 'Montréal')
])
if __name__ == '__main__':
    app.run(debug=True)

from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
    dcc.Dropdown(['New York City', 'Montréal', 'San Francisco'], 'Montréal', multi=True)
])
if __name__ == '__main__':
    app.run(debug=True)

from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
    dcc.Slider(-5, 10, 1, value=-3)
])
if __name__ == '__main__':
    app.run(debug=True)

from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
    dcc.Slider(0, 9, marks={i: f'Label{i}' for i in range(10)}, value=5)
])
if __name__ == '__main__':
    app.run(debug=True)

from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
    dcc.RangeSlider(-5, 10, 1, count=1, value=[-3, 7])
])
if __name__ == '__main__':
    app.run(debug=True)

from dash import Dash, html, dcc
app = Dash()
app.layout = html.Div([
    dcc.RangeSlider(-5, 6,
        marks={i: f'Label{i}' for i in range(-5, 7)},
        value=[-3, 4]
    )
])
if __name__ == '__main__':
    app.run(debug=True)

from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
    dcc.Input(
        placeholder='Enter a value...',
        type='text',
        value=''
    )
])
if __name__ == '__main__':
    app.run(debug=True)

from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
    dcc.Textarea(
        placeholder='Enter a value...',
        value='This is a TextArea component',
        style={'width': '100%'}
    )
])
if __name__ == '__main__':
    app.run(debug=True)

from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
    dcc.Checklist(['New York City', 'Montréal', 'San Francisco'],
                  ['Montréal', 'San Francisco'])
])
if __name__ == '__main__':
    app.run(debug=True)

from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
    dcc.Checklist(
        ['New York City', 'Montréal', 'San Francisco'],
        ['Montréal', 'San Francisco'],
        inline=True
    )
])
if __name__ == '__main__':
    app.run(debug=True)

from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
    dcc.RadioItems(['New York City', 'Montréal', 'San Francisco'], 'Montréal')
])
if __name__ == '__main__':
    app.run(debug=True)

from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
    dcc.RadioItems(
        ['New York City', 'Montréal', 'San Francisco'],
        'Montréal',
        inline=True
    )
])
if __name__ == '__main__':
    app.run(debug=True)

from dash import Dash, html, dcc, callback, Input, Output, State, callback
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    html.Div(dcc.Input(id='input-box', type='text')),
    html.Button('Submit', id='button-example-1'),
    html.Div(id='output-container-button',
             children='Enter a value and press submit')
])
@callback(
    Output('output-container-button', 'children'),
    Input('button-example-1', 'n_clicks'),
    State('input-box', 'value'))
def update_output(n_clicks, value):
    return 'The input value was "{}" and the button has been clicked {} times'.format(
        value,
        n_clicks
    )
if __name__ == '__main__':
    app.run(debug=True)

from dash import Dash, dcc, html
from datetime import date
app = Dash()
app.layout = html.Div([
    dcc.DatePickerSingle(
        id='date-picker-single',
        date=date(1997, 5, 10)
    )
])
if __name__ == '__main__':
    app.run(debug=True)

from dash import Dash, dcc, html
from datetime import date
app = Dash()
app.layout = html.Div([
    dcc.DatePickerRange(
        id='date-picker-range',
        start_date=date(1997, 5, 3),
        end_date_placeholder_text='Select a date!'
    )
])
if __name__ == '__main__':
    app.run(debug=True)

from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
    dcc.Markdown('''
        #### Dash and Markdown
        Dash supports [Markdown](https://commonmark.org/help).
        Markdown is a simple way to write and format text.
        It includes a syntax for things like **bold text** and *italics*,
        [links](https://commonmark.org/help), inline `code` snippets, lists,
        quotes, and more.
    ''')
])
if __name__ == '__main__':
    app.run(debug=True)

from dash import Dash, dcc, html, Input, Output, callback
from dash.exceptions import PreventUpdate
app = Dash(prevent_initial_callbacks=True)
app.layout = html.Div(
    [html.Button("Download Text", id="btn_txt"), dcc.Download(id="download-text-index")]
)
@callback(Output("download-text-index", "data"), Input("btn_txt", "n_clicks"))
def func(n_clicks):
    if n_clicks is None:
        raise PreventUpdate
    else:
        return dict(content="Hello world!", filename="hello.txt")
if __name__ == "__main__":
    app.run(debug=True)

from dash import Dash, dcc, html, Input, Output, callback
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    dcc.Tabs(id="tabs", value='tab-1', children=[
        dcc.Tab(label='Tab one', value='tab-1'),
        dcc.Tab(label='Tab two', value='tab-2'),
    ]),
    html.Div(id='tabs-content')
])
@callback(Output('tabs-content', 'children'),
              Input('tabs', 'value'))
def render_content(tab):
    if tab == 'tab-1':
        return html.Div([
            html.H3('Tab content 1')
        ])
    elif tab == 'tab-2':
        return html.Div([
            html.H3('Tab content 2')
        ])
if __name__ == '__main__':
    app.run(debug=True)

from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
    dcc.Graph(
        figure=dict(
            data=[
                dict(
                    x=[1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
                    2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
                    y=[219, 146, 112, 127, 124, 180, 236, 207, 236, 263,
                    350, 430, 474, 526, 488, 537, 500, 439],
                    name='Rest of world',
                    marker=dict(
                        color='rgb(55, 83, 109)'
                    )
                ),
                dict(
                    x=[1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
                    2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
                    y=[16, 13, 10, 11, 28, 37, 43, 55, 56, 88, 105, 156, 270,
                    299, 340, 403, 549, 499],
                    name='China',
                    marker=dict(
                        color='rgb(26, 118, 255)'
                    )
                )
            ],
            layout=dict(
                title='US Export of Plastic Scrap',
                showlegend=True,
                legend=dict(
                    x=0,
                    y=1.0
                ),
                margin=dict(l=40, r=0, t=40, b=30)
            )
        ),
        style={'height': 300},
        id='my-graph-example'
    )
])
if __name__ == '__main__':
    app.run(debug=True)

from dash import Dash, dcc, html
app = Dash()
app.layout = html.Div([
    dcc.ConfirmDialogProvider(
        children=html.Button(
            'Click Me',
        ),
        id='danger-danger',
        message='Danger danger! Are you sure you want to continue?'
    )
])
if __name__ == '__main__':
    app.run(debug=True)

from dash import Dash, dcc, html, Input, Output, State, callback
app = Dash()
app.layout = html.Div([
    dcc.Store(id='my-store'),
    dcc.RadioItems(['NYC', 'MTL', 'SF'], 'NYC', id='my-store-input'),
    html.Div(id='current-store')
])
@callback(
    Output('my-store', 'data'),
    Input('my-store-input', 'value')
)
def update_store(value):
    return value
@callback(
    Output('current-store', 'children'),
    Input('my-store', 'modified_timestamp'),
    State('my-store', 'data')
)
def display_store_info(timestamp, data):
    return f"The store currently contains {data} and the modified timestamp is {timestamp}"
if __name__ == '__main__':
    app.run(debug=True)

from dash import Dash, dcc, html, Input, Output, callback
import time
app = Dash()
app.layout = html.Div(
    [
        dcc.RadioItems(
            ["Montreal", "New York", "London"], "London", id="loading-demo-dropdown"
        ),
        dcc.Loading([html.Div(id="loading-demo")]),
    ]
)
@callback(Output("loading-demo", "children"), Input("loading-demo-dropdown", "value"))
def update_loading_div(value):
    time.sleep(2)
    return f"You selected {value}"
if __name__ == "__main__":
    app.run(debug=True)