Dash Core Components

Dash ships with supercharged components for interactive user interfaces.

This core set of components is available in theDashCoreComponents library.

The dcc module is part of Dash and you’ll find the source for it in the Dash GitHub repo.

Tip: In production Dash apps, we recommend using Dash Enterprise Design Kit to manage the styling and layout of Dash Core Components.

    using Pkg
    Pkg.status("Dash")

using Dash

app = dash()

app.layout = html_div(style = Dict("height" => "150px")) do
    dcc_dropdown(
        options = [
            (label = "New York City", value = "NYC"),
            (label = "Montreal", value = "MTL"),
            (label = "San Francisco", value = "SF")
        ],
        value = "MTL",
    )
end

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

app = dash()

app.layout = dcc_dropdown(
    options=[
        Dict("label" =>  "New York City", "value" =>  "NYC"),
        Dict("label" =>  "Montréal", "value" =>  "MTL"),
        Dict("label" =>  "San Francisco", "value" =>  "SF")
    ],
    multi=true,
    value="MTL"
)

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

**

This example has not been ported to Julia yet - showing the Python version instead.

Visit the old docs site for Julia at: https://community.plotly.com/c/dash/julia/20

from dash import Dash, dcc, html

app = Dash(__name__)

app.layout = html.Div([
    dcc.Slider(-5, 10, 1, value=-3)
])

if __name__ == '__main__':
    app.run(debug=True)
using Dash

app = dash()

app.layout = html_div() do
    dcc_slider(
        min=1,
        max=10,
        step=nothing,
        value=1,
        marks=Dict([i => ("Label$(i)") for i = 1:10]),
    )
end

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

**

using Dash

app = dash()

app.layout = html_div() do
    dcc_rangeslider(
        count=1,
        min=-5,
        max=10,
        step=0.5,
        value=[-3, 7]
    )
end

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

app = dash()

app.layout = html_div() do
    dcc_rangeslider(
        count=1,
        min=-5,
        max=6,
        step=0.5,
        value=[-3, 4],
        marks=Dict([i => ("Label$(i)") for i = -5:7]),
    )
end

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

**

using Dash

app = dash()

app.layout = html_div() do
    dcc_input(
        placeholder="Enter a value...",
        type="text",
        value=""
    )
end

run_server(app, "0.0.0.0", debug=true)
app.layout = dcc_input(
  placeholder = "Enter a value...",
  type = "text",
  value = "",
)

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

**

using Dash

app = dash()

app.layout = html_div() do
    dcc_textarea(
        placeholder="Enter a value...",
        value="This is a TextArea component",
        style=Dict("width" => "100%")
    )
end

run_server(app, "0.0.0.0", debug=true)
app.layout = dcc_textarea(
  placeholder = "Enter a value...",
  value="This is a TextArea component",
  style=Dict("width" => "100%")
)

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

**

using Dash

app = dash()

app.layout =  dcc_checklist(
  options =[
    Dict("label" => "New York City", "value" => "NYC"),
    Dict("label" => "Montréal", "value" => "MTL"),
    Dict("label" => "San Francisco", "value" => "SF")
  ],
  value=["MTL", "SF"]
)

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

app = dash()

app.layout = dcc_checklist(
  options =[
    Dict("label" => "New York City", "value" => "NYC"),
    Dict("label" => "Montréal", "value" => "MTL"),
    Dict("label" => "San Francisco", "value" => "SF")
  ],
  value=["MTL", "SF"],
  labelStyle=Dict("display" => "inline-block")
)

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

**

using Dash

app = dash()

app.layout = dcc_radioitems(
  options =[
    Dict("label" => "New York City", "value" => "NYC"),
    Dict("label" => "Montréal", "value" => "MTL"),
    Dict("label" => "San Francisco", "value" => "SF")
  ],
  value="MTL"
)

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

app = dash()

app.layout = dcc_radioitems(
  options =[
    Dict("label" => "New York City", "value" => "NYC"),
    Dict("label" => "Montréal", "value" => "MTL"),
    Dict("label" => "San Francisco", "value" => "SF")
  ],
  value="MTL",
  labelStyle=Dict("display" => "inline-block")
)

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

**

using Dash

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash(external_stylesheets=external_stylesheets)

app.layout = html_div() do
  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")
end

callback!(
  app, 
  Output("output-container-button", "children"), 
  Input("button", "n_clicks"), State("input-box", "value")) do n_clicks, value
    return "The input value was $(value) and the button has been clicked $n_clicks times"
end

run_server(app, "0.0.0.0", debug=true)
Enter a value and press submit

**

using Dash
using Dates
app = dash()

app.layout = dcc_datepickersingle(
    id="date-picker-single",
    date=DateTime(1997, 5, 10)
)
run_server(app, "0.0.0.0", debug=true)

**

using Dash
using Dates
app = dash()

app.layout = dcc_datepickerrange(
  id="date-picker-range",
  start_date=DateTime(1997, 5, 3),
  end_date_placeholder_text="Select a date!"
)
run_server(app, "0.0.0.0", debug=true)

**

using Dash

app = dash()

app.layout = 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.
""")

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

Dash and Markdown

Dash supports Markdown.
Markdown is a simple way to write and format text.
It includes a syntax for things like bold text and italics,
links, inline code snippets, lists,
quotes, and more.

**

using Dash

app = dash(prevent_initial_callbacks=true)

app.layout = html_div(
    [
      html_button("Download Text", id="btn_txt"), 
      dcc_download(id="download-text-index")
    ]
)

callback!(
  app, Output("download-text-index", "data"), 
  Input("btn_txt", "n_clicks")) do n_clicks
    if n_clicks isa Nothing
      throw(PreventUpdate())
    else
      return (content = "Hello world!", filename="hello.txt")
    end
end

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

**

using Dash
external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash(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!(
  app, Output("tabs-content", "children"), 
  Input("tabs", "value")) do tab
    if tab == "tab-1"
      return html_div([
        html_h3("Tab content 1")
      ])
    else
      return html_div([
        html_h3("Tab content 2")
      ])
    end
end

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

**

using Dash, PlotlyJS, DataFrames

df_wide = DataFrame(
    year=1995:2012,
    world=[219, 146, 112, 127, 124, 180, 236, 207, 236, 263, 350, 430, 474, 526, 488, 537, 500, 439],
    china=[16, 13, 10, 11, 28, 37, 43, 55, 56, 88, 105, 156, 270, 299, 340, 403, 549, 499],
)

df = DataFrames.stack(df_wide, Not(:year), variable_name=:country, value_name=:y)
fig = plot(
    df, x=:year, y=:y, color=:country,
    Layout(
        title_text="US Export of Plastic Scrap",
        legend=attr(x=0, y=1)
    )
)

app = dash()
app.layout = dcc_graph(figure=fig, style=Dict("height"=>300), id="my-graph")
run_server(app, "0.0.0.0", debug=true)

**

using Dash
app = dash()
app.layout = dcc_confirmdialog(
    id="confirm",
    message="Danger danger! Are you sure you want to continue?"
)
run_server(app, "0.0.0.0", debug=true)

**

using Dash

app = dash()
app.layout = dcc_confirmdialogprovider(
    children=html_button(
      "Click Me",
    ),
    id="confirm",
    message="Danger danger! Are you sure you want to continue?"
)
run_server(app, "0.0.0.0", debug=true)

**

using Dash
app = dash()
app.layout = dcc_store(id="my-store", data=Dict("my-data" => "data"))
run_server(app, "0.0.0.0", debug=true)

The store must be used with callbacks

**

using Dash
app = dash()
app.layout = dcc_loading([
    # ...
])
run_server(app, "0.0.0.0", debug=true)

**