Ctrl+K

Dash core components

Dash core components#

Documentation:
https://dash.plotly.com/dash-core-components

Dash core components are another building block of a Dash app. They are used to create the interactive elements of the app, such as buttons, sliders, and graphs. The components are created using the dash.dcc module. The most common components are:

  • dcc.Slider()

  • dcc.DatePickerSingle() and dcc.DatePickerRange()

  • dcc.Graph()

  • dcc.Markdown()

While these are the most common, there are many other components that can be used to create a web page. The full list of components can be found in the documentation link above.

Additionally, we will frequently use other components from other modules, such as dash_bootstrap_components, since those components are a bit more user-friendly, have better built-in styling options, and are easier to use in general.

Slider#

The slider component, dcc.Slider(), is used to select a value from a range of values. The min, max, step, and value properties are used to set the range of values, the step size, and the initial value, respectively.

While this component is simple to use, and regularly demonstrated in Dash tutorials, it is not a component that is actually used very often in practice. It is more common to use a dropdown or radio buttons to select a value from a list of options, or to use a date picker to select a date.

import dash
from dash import html
from dash import dcc

app = dash.Dash()

app.layout = html.Div(
    children=[
        dcc.Slider(
            min=0,
            max=100,
            step=10,
            value=50,
        ),
    ]
)

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

Date picker#

The date picker components, dcc.DatePickerSingle() and dcc.DatePickerRange(), are used to select a date or a range of dates. The date and start_date and end_date properties are used to set the initial date or range of dates.

import dash
from dash import html
from dash import dcc

app = dash.Dash()

app.layout = html.Div(
    children=[
        dcc.DatePickerSingle(
            date="2023-06-03",
        ),
        html.Br(),
        dcc.DatePickerRange(
            start_date="2023-06-01",
            end_date="2023-06-05",
        ),
    ]
)

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

Graph#

The graph component, dcc.Graph(), is used to display a plotly graph. The figure property is used to set the graph that will be displayed.

Notice here how before we even instantiate the Dash object with app = dash.Dash(), we import plotly.express as px, and then use it to create a graph: my_fig. This is a common pattern in Dash apps, where we use plotly to create the graph, and then use Dash to display it.

import dash
from dash import html
from dash import dcc
import plotly.express as px

data = px.data.gapminder()
countries = ['Canada', 'United States', 'Mexico']
subset = data.query('country in @countries')

my_fig = px.line(
    data_frame=subset,
    x='year',
    y='lifeExp',
    color='country',
)

app = dash.Dash()

app.layout = html.Div(
    children=[
        dcc.Graph(
            figure=my_fig,
        ),
    ]
)

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

Markdown#

Markdown is a relatively simple way to write text that can be formatted in a variety of ways. It is a popular way to write documentation, and is used in many places on the web, including GitHub, Stack Overflow, and Reddit.

You can find more information about markdown at the following link:
https://www.markdownguide.org/basic-syntax/

We will probably not use it much in this class, but if you are already familiar with it, it can be a useful way to write text in a Dash app.

In this example, we create a variable that holds a long string of markdown text, and then use the dcc.Markdown() component to display it.

import dash
from dash import html
from dash import dcc

app = dash.Dash()

markdown_text = '''
# Main header

## Sub header

Here is some text that is **bold** and *italic*.

## Next sub header

Here is a [link to the documentation](https://dash.plotly.com/dash-core-components).

## My list

- first item
- second item
- third item

## Some things to do

- [x] this is done
- [ ] this is not
'''

app.layout = html.Div(
	children=[
    	dcc.Markdown(markdown_text)
	]
)

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