Dash Layout

This is the 1st chapter of the Dash Fundamentals. The next chapter covers Dash callbacks.

This tutorial will walk you through a fundamental aspect of Dash apps, the app layout, through six self-contained apps.

For production Dash apps, we recommend styling the app layout with Dash Enterprise Design Kit.


Dash apps are composed of two parts. The first part is the "layout", which describes what the app looks like. The second part describes the interactivity of the app and will be covered in the next chapter.

Note: Throughout this documentation,

Julia code examples are meant to be saved as files and executed using julia app.jl You can also use Jupyter with the JupyterDash library.

If you're using Dash Enterprise's Data Science Workspaces, copy & paste the below code into your Workspace (see video).

Find out if your company is using Dash Enterprise

To get started, create a file named app.jl , copy the code below into it, and then run it with julia app.jl.

using Dash

app = dash()

app.layout = html_div() do
    html_h1("Hello Dash"),
    html_div("Dash: A web application framework for your data."),
    dcc_graph(
        id = "example-graph-1",
        figure = (
            data = [
                (x = ["giraffes", "orangutans", "monkeys"], y = [20, 14, 23], type = "bar", name = "SF"),
                (x = ["giraffes", "orangutans", "monkeys"], y = [12, 18, 29], type = "bar", name = "Montreal"),
            ],
            layout = (title = "Dash Data Visualization", barmode="group")
        )
    )
end

run_server(app, "0.0.0.0", debug=true)

Hello Dash

Dash: A web application framework for your data.
$ julia app.jl
[ Info: Listening on: 0.0.0.0:8050

Visit http://127.0.0.1:8050/ in your web browser. You should see an app that looks like the one above.

Note:

  1. The layout is composed of a tree of "components" such as html_div and dcc_graph.
  2. The DashHtmlComponents function has a component for every HTML tag. The html_h1("Hello Dash") component generates a <h1>Hello Dash</h1> HTML element in your app.
  3. Not all components are pure HTML. DashCoreComponents describe higher-level components that are interactive and are generated with JavaScript, HTML, and CSS through the React.js library.

  4. Each component is described entirely through keyword attributes. Dash is declarative: you will primarily describe your app through these attributes.

  5. The children property is special. By convention, it's always the first attribute which means that you can omit it: html_h1(children="Hello Dash") is the same as html_h1("Hello Dash"). It can contain a string, a number, a single component, or a list of components.
  6. The fonts in your app will look a little bit different than what is displayed here. This app is using a custom CSS stylesheet and Dash Enterprise Design Kit to modify the default styles of the elements. You can learn more about custom CSS in the CSS tutorial.

Making Your First Change

Dash includes "hot-reloading". This feature is activated by default when you run your app withrun_server(app, "0.0.0.0", debug=true). This means that Dash will automatically refresh your browser when you make a change in your code.

Give it a try: change the title "Hello Dash" in your app or change the x or the y data. Your app should auto-refresh with your change.

Don't like hot-reloading? You can turn this off withrun_server(app, "0.0.0.0", debug=true, dev_tools_hot_reload=false). Learn more in Dash Dev Tools documentation Questions? See the community forum hot reloading discussion.

Sign up for Dash Club → Two free cheat sheets plus updates from Chris Parmer and Adam Schroeder delivered to your inbox every two months. Includes tips and tricks, community apps, and deep dives into the Dash architecture. Join now.

More about HTML Components

DashHtmlComponents contains a component class for every HTML tag as well as keyword arguments for all of the HTML arguments.

Let's customize the text in our app by modifying the inline styles of the components. Create a file named app.jl with the following code:

using Dash

app = dash()

app.layout = html_div(style = Dict("backgroundColor" => "#111111")) do
    html_h1(
        "Hello Dash",
        style = Dict("color" => "#7FDBFF", "textAlign" => "center"),
    ),
    html_div(
        "Dash: A web application framework for Julia",
        style = Dict("color" => "#7FDBFF"),
    ),
    dcc_graph(
        id = "example-graph-2",
        figure = (
            data = [
                (
                    x = ["giraffes", "orangutans", "monkeys"],
                    y = [20, 14, 23],
                    type = "bar",
                    name = "SF",
                ),
                (
                    x = ["giraffes", "orangutans", "monkeys"],
                    y = [12, 18, 29],
                    type = "bar",
                    name = "Montreal",
                ),
            ],
            layout = (
                title = "Dash Data Visualization",
                barmode = "group",
                plot_bgcolor = "#111111",
                paper_bgcolor = "#111111",
                font = Dict("color" => "#7FDBFF"),
            ),
        ),
    )
end

run_server(app, "0.0.0.0", debug=true)

Hello Dash

Dash: A web application framework for your data.

In this example, we modified the inline styles of the html_div and html_h1components with the style property.

html_h1(
    "Hello Dash",
    style = Dict("color" => "#7FDBFF", "textAlign" => "center"),
)

The above code is rendered in the Dash app as <h1 style="text-align: center; color: #7FDBFF">Hello Dash</h1>.

There are a few important differences between the DashHtmlComponents and the HTML attributes:

  1. The style property in HTML is a semicolon-separated string. In Dash, you can just supply a dictionary.
  2. The keys in the style dictionary are camelCased. So, instead of text-align, it's textAlign.
  3. The HTML class attribute is className in Dash.
  4. The children of the HTML tag is specified through the children keyword argument. By convention, this is always the first argument and so it is often omitted.

Besides that, all of the available HTML attributes and tags are available to you within your Julia context.


Reusable Components

By writing our markup in Julia, we can create complex reusable components like tables without switching contexts or languages.

Here's a quick example that generates a Table from a DataFrame. Create a file named app.jl with the following code:

using Dash
using DataFrames, CSV

csv_data = download("https://raw.githubusercontent.com/plotly/datasets/master/2011_us_ag_exports.csv")
df3 = CSV.read(csv_data, DataFrame)

function generate_table(dataframe, max_rows = 10)
    html_table([
        html_thead(html_tr([html_th(col) for col in names(df3)])),
        html_tbody([
            html_tr([html_td(dataframe[r, c]) for c in names(dataframe)]) for r = 1:min(nrow(dataframe), max_rows)
        ]),
    ])
end

app = dash()

app.layout = html_div() do
    html_h4("US Agriculture Exports (2011)"),
    generate_table(df3, 10)
end

run_server(app, "0.0.0.0", debug=true)

US Agriculture Exports (2011)

Unnamed: 0statetotal exportsbeefporkpoultrydairyfruits freshfruits proctotal fruitsveggies freshveggies proctotal veggiescornwheatcotton
0Alabama1390.6334.410.64814.06817.125.115.58.914.3334.970317.61
1Alaska13.310.20.100.190000.611.56000
2Arizona1463.1771.317.90105.4819.34160.27147.5239.4386.917.348.7423.95
3Arkansas3586.0253.229.4562.93.532.24.76.884.47.111.4569.5114.5665.44
4 California16472.88228.711.1225.4929.952791.85944.68736.4803.21303.52106.7934.6249.31064.95
5Colorado1851.33261.4661471.945.712.217.9945.173.2118.27183.2400.50
6Connecticut259.621.10.16.99.494.28.913.14.36.911.16000
7Delaware282.190.40.6114.72.30.511.537.612.420.0326.922.90
8Florida3764.0942.60.956.966.31438.2933.11371.36171.9279450.863.51.878.24
9Georgia2860.843118.9630.438.3874.6158.9233.515995.8154.7757.865.41154.07

More about Visualization

The DashCoreComponents library includes a component called dcc_graph.

dcc_graph renders interactive data visualizations using the open source plotly.js JavaScript graphing library. Plotly.js supports over 35 chart types and renders charts in both vector-quality SVG and high-performance WebGL.

The figure argument in thedcc_graph component is the same figure argument that is used by plotly.py, Plotly's open source Julia graphing library. Check out the plotly.py documentation and gallery to learn more.

Here's an example that creates a scatter plot from a DataFrame. Create a file named app.jl with the following code:

using Dash
using DataFrames, CSV, PlotlyJS, RDatasets

iris = dataset("datasets", "iris")

p1 = Plot(iris, x=:SepalLength, y=:SepalWidth, mode="markers", marker_size=8, group=:Species)

app = dash()

app.layout = html_div() do
    html_h4("Iris Sepal Length vs Sepal Width"),
    dcc_graph(
        id = "example-graph-3",
        figure = p1,
    )
end

run_server(app, "0.0.0.0", debug=true)
2345678910002345678910k234564050607080
continentAsiaEuropeAfricaAmericasOceaniagdp per capitalife expectancy

These graphs are interactive and responsive. Hover over points to see their values, click on legend items to toggle traces, click and drag to zoom, hold down shift, and click and drag to pan.

Markdown

While Dash exposes HTML through DashHtmlComponents, it can be tedious to write your copy in HTML. For writing blocks of text, you can use the dcc_markdown component in DashCoreComponents. Create a file named app.jl with the following code:

using Dash

app = dash()
markdown_text = "
### Dash and Markdown

Dash apps can be written in Markdown.
Dash uses the [CommonMark](http://commonmark.org/)
specification of Markdown.
Check out their [60 Second Markdown Tutorial](http://commonmark.org/help/)
if this is your first introduction to Markdown!
"

app.layout = html_div() do
    dcc_markdown(markdown_text)
end

run_server(app, "0.0.0.0", debug=true)

Dash and Markdown

Dash apps can be written in Markdown. Dash uses the CommonMark specification of Markdown. Check out their 60 Second Markdown Tutorial if this is your first introduction to Markdown!

Core Components

DashCoreComponents includes a set of higher-level components like dropdowns, graphs, markdown blocks, and more.

Like all Dash components, they are described entirely declaratively. Every option that is configurable is available as a keyword argument of the component.

We'll see many of these components throughout the tutorial. You can view all of the available components in the Dash Core Components overview.

Here are a few of the available components. Create a file named app.jl with the following code:

using Dash

app = dash()

dropdown_options = [
    Dict("label" => "New York City", "value" => "NYC"),
    Dict("label" => "Montreal", "value" => "MTL"),
    Dict("label" => "San Francisco", "value" => "SF"),
]
app.layout = html_div(style = Dict("columnCount" => 2)) do
    html_label("Dropdown"),
    dcc_dropdown(options = dropdown_options, value = "MTL"),
    html_label("Multi-Select Dropdown"),
    dcc_dropdown(
        options = dropdown_options,
        value = ["MTL", "SF"],
        multi = true,
    ),
    html_label("Radio Items"),
    dcc_radioitems(options = dropdown_options, value = "MTL"),
    html_label("Checkboxes"),
    dcc_checklist(options = dropdown_options, value = ["MTL", "SF"]),
    html_label("Text Input"),
    dcc_input(value = "MTL", type = "text"),
    html_label("Slider"),
    dcc_slider(
        min = 0,
        max = 9,
        marks = Dict([i => (i == 1 ? "Label $(i)" : "$(i)") for i = 1:6]),
        value = 5,
    )
end

run_server(app, "0.0.0.0", 8000, debug = true)
Montréal
×

Montréal 
San Francisco 
×



Label 12345

Help

Dash components are declarative: every configurable aspect of these components is set during instantiation as a keyword argument.

Call ? in your Julia REPL on any of the components to learn more about a component and its available arguments.

  help?> dcc_dropdown

  dcc_dropdown(;kwargs...)

  | A Dropdown component.
  | Dropdown is an interactive dropdown element for selecting one or more
  | items.
  | The values and labels of the dropdown items are specified in the `options`
  | property and the selected item(s)
  | are specified with the `value` property.
  | Use a dropdown when you have many options (more than 5) or when you are
  | constrained for space. Otherwise, you can use RadioItems or a Checklist,
  | which have the benefit of showing the users all of the items at once.

  | Keyword arguments:
  | - id (String; optional)
  | - className (String; optional)
  | - disabled (Bool; optional): If true, this dropdown is disabled
  | - multi (Bool; optional): If true, the user can select multiple values
  | - options (optional)
  | - placeholder (String; optional): The grey, default text shown when no option is selected
  | - value (String | Real | Array of String | Reals; optional): The value of the
  | input. If `multi` is false (the default)then value is just a string that
  | corresponds to the values provided in the `options` property. If `multi` is true,
  | then multiple values can be selected at once, and value is an array of items
  | with values corresponding to those in the `options` prop.

Summary

The layout of a Dash app describes what the app looks like. The layout is a hierarchical tree of components, or a list of components (in Dash 2.17 and later).

The DashHtmlComponents library provides classes for all of the HTML tags and the keyword arguments describe the HTML attributes like style, class, and id. The DashCoreComponents library generates higher-level components like controls and graphs.

For reference, see:

The next part of the Dash Fundamentals covers how to make these apps interactive. Dash Fundamentals Part 2: Basic Callbacks