Dash Core Components
Dash ships with supercharged components for interactive user interfaces.
A core set of components, written and maintained by the Dash team,
is available in the dash-core-components library.
For production Dash apps, the Dash Core Components styling & layout should be managed with Dash Enterprise Design Kit.
The source is on GitHub in the plotly/dash repo.
import dash_core_components as dcc
print(dcc.__version__)
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Dropdown(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value='MTL'
)
])
if __name__ == '__main__':
app.run_server(debug=True)
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Dropdown(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
multi=True,
value="MTL"
)
])
if __name__ == '__main__':
app.run_server(debug=True)
**
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Slider(
min=-5,
max=10,
step=0.5,
value=-3
)
])
if __name__ == '__main__':
app.run_server(debug=True)
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Slider(
min=0,
max=9,
marks={i: 'Label{}'.format(i) for i in range(10)},
value=5,
)
])
if __name__ == '__main__':
app.run_server(debug=True)
**
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.RangeSlider(
count=1,
min=-5,
max=10,
step=0.5,
value=[-3, 7]
)
])
if __name__ == '__main__':
app.run_server(debug=True)
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.RangeSlider(
marks={i: 'Label{}'.format(i) for i in range(-5, 7)},
min=-5,
max=6,
value=[-3, 4]
)
])
if __name__ == '__main__':
app.run_server(debug=True)
**
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Input(
placeholder='Enter a value...',
type='text',
value=''
)
])
if __name__ == '__main__':
app.run_server(debug=True)
**
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Textarea(
placeholder='Enter a value...',
value='This is a TextArea component',
style={'width': '100%'}
)
])
if __name__ == '__main__':
app.run_server(debug=True)
**
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Checklist(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value=['MTL', 'SF']
)
])
if __name__ == '__main__':
app.run_server(debug=True)
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Checklist(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value=['MTL', 'SF'],
labelStyle={'display': 'inline-block'}
)
])
if __name__ == '__main__':
app.run_server(debug=True)
**
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.RadioItems(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value='MTL'
)
])
if __name__ == '__main__':
app.run_server(debug=True)
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.RadioItems(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value='MTL',
labelStyle={'display': 'inline-block'}
)
])
if __name__ == '__main__':
app.run_server(debug=True)
**
import dash
import dash_html_components as html
import dash_core_components as dcc
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
html.Div(dcc.Input(id='input-box', type='text')),
html.Button('Submit', id='button'),
html.Div(id='output-container-button',
children='Enter a value and press submit')
])
@app.callback(
dash.dependencies.Output('output-container-button', 'children'),
[dash.dependencies.Input('button', 'n_clicks')],
[dash.dependencies.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_server(debug=True)
**
import dash
import dash_core_components as dcc
import dash_html_components as html
from datetime import date
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.DatePickerSingle(
id='date-picker-single',
date=date(1997, 5, 10)
)
])
if __name__ == '__main__':
app.run_server(debug=True)
**
import dash
import dash_core_components as dcc
import dash_html_components as html
from datetime import date
app = dash.Dash(__name__)
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_server(debug=True)
**
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Markdown('''
#### Dash and Markdown
Dash supports [Markdown](http://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](http://commonmark.org/help), inline `code` snippets, lists,
quotes, and more.
''')
])
if __name__ == '__main__':
app.run_server(debug=True)
**
import dash
from dash.dependencies import Output, Input
import dash_html_components as html
import dash_core_components as dcc
app = dash.Dash(prevent_initial_callbacks=True)
app.layout = html.Div(
[html.Button("Download Text", id="btn_txt"), dcc.Download(id="download-text-index")]
)
@app.callback(Output("download-text-index", "data"), Input("btn_txt", "n_clicks"))
def func(n_clicks):
if n_clicks is None:
raise dash.exceptions.PreventUpdate
else:
return dict(content="Hello world!", filename="hello.txt")
if __name__ == "__main__":
app.run_server(debug=True)
**
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.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')
])
@app.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_server(debug=True)
**
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
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'
)
])
if __name__ == '__main__':
app.run_server(debug=True)
**
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.ConfirmDialog(
id='confirm',
message='Danger danger! Are you sure you want to continue?'
)
])
if __name__ == '__main__':
app.run_server(debug=True)
**
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
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_server(debug=True)
**
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Store(id='my-store', data={'my-data': 'data'})
])
if __name__ == '__main__':
app.run_server(debug=True)
The store must be used with callbacks
**
import dash_design_kit as ddk
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Loading([
# ...
])
])
if __name__ == '__main__':
app.run_server(debug=True)
**