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 at plotly/dash-core-components.
These docs are using version 1.17.1.
>>> import dash_core_components as dcc
>>> print(dcc.__version__)
1.17.1
import dash_design_kit as ddk
import dash_core_components as dcc
dcc.Dropdown(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value='MTL'
)
import dash_design_kit as ddk
import dash_core_components as dcc
dcc.Dropdown(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
multi=True,
value="MTL"
)
import dash_design_kit as ddk
import dash_core_components as dcc
dcc.Slider(
min=-5,
max=10,
step=0.5,
value=-3
)
import dash_design_kit as ddk
import dash_core_components as dcc
dcc.Slider(
min=0,
max=9,
marks={i: 'Label {}'.format(i) for i in range(10)},
value=5,
)
import dash_design_kit as ddk
import dash_core_components as dcc
dcc.RangeSlider(
count=1,
min=-5,
max=10,
step=0.5,
value=[-3, 7]
)
import dash_design_kit as ddk
import dash_core_components as dcc
dcc.RangeSlider(
marks={i: 'Label {}'.format(i) for i in range(-5, 7)},
min=-5,
max=6,
value=[-3, 4]
)
import dash_design_kit as ddk
import dash_core_components as dcc
dcc.Input(
placeholder='Enter a value...',
type='text',
value=''
)
import dash_design_kit as ddk
import dash_core_components as dcc
dcc.Textarea(
placeholder='Enter a value...',
value='This is a TextArea component',
style={'width': '100%'}
)
import dash_design_kit as ddk
import dash_core_components as dcc
dcc.Checklist(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value=['MTL', 'SF']
)
import dash_design_kit as ddk
import dash_core_components as dcc
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'}
)
import dash_design_kit as ddk
import dash_core_components as dcc
dcc.RadioItems(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value='MTL'
)
import dash_design_kit as ddk
import dash_core_components as dcc
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'}
)
There actually is no Button component in dash_core_components.
The regular dash_html_components.Button component does the job quite well,
but we’ve included it here because this is the one plain html component
that’s commonly used as a callback input:
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)
For more on
dash.dependencies.State
, see the tutorial on
basic callbacks
.
import dash_design_kit as ddk
import dash_core_components as dcc
from datetime import date
dcc.DatePickerSingle(
id='date-picker-single',
date=date(1997, 5, 10)
)
import dash_design_kit as ddk
import dash_core_components as dcc
from datetime import date
dcc.DatePickerRange(
id='date-picker-range',
start_date=date(1997, 5, 3),
end_date_placeholder_text='Select a date!'
)
import dash_design_kit as ddk
import dash_core_components as dcc
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.
''')
The dcc.Upload component allows users to upload files into your app
through drag-and-drop or the system’s native file explorer.
The dcc.Download component allows users to download files from your app through their browser.
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)
The Tabs and Tab components can be used to create tabbed sections in your app.
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)
The Graph component shares the same syntax as the open-source
plotly.py library. View the plotly.py docs
to learn more.
import dash_design_kit as ddk
import dash_core_components as dcc
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'
)
View the plotly.py docs.
The dcc.ConfirmDialog component send a dialog to the browser
asking the user to confirm or cancel with a custom message.
import dash_design_kit as ddk
import dash_core_components as dcc
confirm = dcc.ConfirmDialog(
id='confirm',
message='Danger danger! Are you sure you want to continue?'
)
There is also a dcc.ConfirmDialogProvider, it will automatically wrap a child component to send a dcc.ConfirmDialog when clicked.
import dash_design_kit as ddk
import dash_core_components as dcc
import dash_html_components as html
confirm = dcc.ConfirmDialogProvider(
children=html.Button(
'Click Me',
),
id='danger-danger',
message='Danger danger! Are you sure you want to continue?'
)
The store component can be used to keep data in the visitor’s browser.
The data is scoped to the user accessing the page.
Three types of storage (storage_type prop):
memory: default, keep the data as long the page is not refreshed.local: keep the data until it is manually cleared.session: keep the data until the browser/tab closes.For local/session, the data is serialized as json when stored.
import dash_design_kit as ddk
import dash_core_components as dcc
store = dcc.Store(id='my-store', data={'my-data': 'data'})
The store must be used with callbacks
The logout button can be used to perform logout mechanism.
It’s a simple form with a submit button, when the button is clicked,
it will submit the form to the logout_url prop.
Please note that no authentication is performed in Dash by default
and you have to implement the authentication yourself.
The Loading component can be used to wrap components that you want to display a spinner for, if they take too long to load.
It does this by checking if any of the Loading components’ children have a loading_state prop set where is_loading is true.
If true, it will display one of the built-in CSS spinners.
import dash_design_kit as ddk
import dash_core_components as dcc
import dash_html_components as html
loading = dcc.Loading([
# ...
])
The location component represents the location bar in your web browser. Through its href, pathname,
search and hash properties you can access different portions of your app’s url.
For example, given the url http://127.0.0.1:8050/page-2?a=test#quiz:
href = "http://127.0.0.1:8050/page-2?a=test#quiz"pathname = "/page-2"search = "?a=test"hash = "#quiz"import dash_core_components as dcc
location = dcc.Location(id='url', refresh=False)