DashCoreComponents.dcc_checklistMethod
dcc_checklist(;kwargs...)

A Checklist component. Checklist is a component that encapsulates several checkboxes. The values and labels of the checklist are specified in the options property and the checked items are specified with the value property. Each checkbox is rendered as an input with a surrounding label. Keyword arguments:

  • id (String; optional): The ID of this component, used to identify dash components

in callbacks. The ID needs to be unique across all of the components in an app.

  • className (String; optional): The class of the container (div)
  • inputClassName (String; optional): The class of the <input> checkbox element
  • inputStyle (Dict; optional): The style of the <input> checkbox element
  • labelClassName (String; optional): The class of the <label> that wraps the checkbox input

and the option's label

  • labelStyle (Dict; optional): The style of the <label> that wraps the checkbox input

and the option's label

  • loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

  • is_loading (Bool; optional): Determines if the component is loading or not
  • prop_name (String; optional): Holds which property is loading
  • component_name (String; optional): Holds the name of the component that is loading
  • options (optional): An array of options. options has the following type: Array of lists containing elements 'label', 'value', 'disabled'.

Those elements have the following types:

  • label (String | Real; required): The checkbox's label
  • value (String | Real; required): The value of the checkbox. This value

corresponds to the items specified in the value property.

  • disabled (Bool; optional): If true, this checkbox is disabled and can't be clicked on.s
  • persisted_props (Array of a value equal to: 'value's; optional): Properties whose user interactions will persist after refreshing the

component or the page. Since only value is allowed this prop can normally be ignored.

  • persistence (Bool | String | Real; optional): Used to allow user interactions in this component to be persisted when

the component - or the page - is refreshed. If persisted is truthy and hasn't changed from its previous value, a value that the user has changed while using the app will keep that change, as long as the new value also matches what was given originally. Used in conjunction with persistence_type.

  • persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored:

memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit.

  • style (Dict; optional): The style of the container (div)
  • value (Array of String | Reals; optional): The currently selected value
DashCoreComponents.dcc_confirmdialogMethod
dcc_confirmdialog(;kwargs...)

A ConfirmDialog component. ConfirmDialog is used to display the browser's native "confirm" modal, with an optional message and two buttons ("OK" and "Cancel"). This ConfirmDialog can be used in conjunction with buttons when the user is performing an action that should require an extra step of verification. Keyword arguments:

  • id (String; optional): The ID of this component, used to identify dash components

in callbacks. The ID needs to be unique across all of the components in an app.

  • cancel_n_clicks (Real; optional): Number of times the popup was canceled.
  • cancel_n_clicks_timestamp (Real; optional): Last time the cancel button was clicked.
  • displayed (Bool; optional): Set to true to send the ConfirmDialog.
  • message (String; optional): Message to show in the popup.
  • submit_n_clicks (Real; optional): Number of times the submit button was clicked
  • submit_n_clicks_timestamp (Real; optional): Last time the submit button was clicked.
DashCoreComponents.dcc_confirmdialogproviderMethod
dcc_confirmdialogprovider(;kwargs...)
dcc_confirmdialogprovider(children::Any;kwargs...)
dcc_confirmdialogprovider(children_maker::Function;kwargs...)

A ConfirmDialogProvider component. A wrapper component that will display a confirmation dialog when its child component has been clicked on.

For example:

dcc.ConfirmDialogProvider(
    html.Button('click me', id='btn'),
    message='Danger - Are you sure you want to continue.'
    id='confirm')

Keyword arguments:

  • children (Bool | Real | String | Dict | Array; optional): The children to hijack clicks from and display the popup.
  • id (String; optional): The ID of this component, used to identify dash components

in callbacks. The ID needs to be unique across all of the components in an app.

  • cancel_n_clicks (Real; optional): Number of times the popup was canceled.
  • cancel_n_clicks_timestamp (Real; optional): Last time the cancel button was clicked.
  • displayed (Bool; optional): Is the modal currently displayed.
  • loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

  • is_loading (Bool; optional): Determines if the component is loading or not
  • prop_name (String; optional): Holds which property is loading
  • component_name (String; optional): Holds the name of the component that is loading
  • message (String; optional): Message to show in the popup.
  • submit_n_clicks (Real; optional): Number of times the submit was clicked
  • submit_n_clicks_timestamp (Real; optional): Last time the submit button was clicked.
DashCoreComponents.dcc_datepickerrangeMethod
dcc_datepickerrange(;kwargs...)

A DatePickerRange component. DatePickerRange is a tailor made component designed for selecting timespan across multiple days off of a calendar.

The DatePicker integrates well with the Python datetime module with the startDate and endDate being returned in a string format suitable for creating datetime objects.

This component is based off of Airbnb's react-dates react component which can be found here: https://github.com/airbnb/react-dates Keyword arguments:

  • id (String; optional): The ID of this component, used to identify dash components

in callbacks. The ID needs to be unique across all of the components in an app.

  • calendar_orientation (a value equal to: 'vertical', 'horizontal'; optional): Orientation of calendar, either vertical or horizontal.

Valid options are 'vertical' or 'horizontal'.

  • className (String; optional): Appends a CSS class to the wrapper div component.
  • clearable (Bool; optional): Whether or not the dropdown is "clearable", that is, whether or

not a small "x" appears on the right of the dropdown that removes the selected value.

  • day_size (Real; optional): Size of rendered calendar days, higher number

means bigger day size and larger calendar overall

  • disabled (Bool; optional): If True, no dates can be selected.
  • display_format (String; optional): Specifies the format that the selected dates will be displayed

valid formats are variations of "MM YY DD". For example: "MM YY DD" renders as '05 10 97' for May 10th 1997 "MMMM, YY" renders as 'May, 1997' for May 10th 1997 "M, D, YYYY" renders as '07, 10, 1997' for September 10th 1997 "MMMM" renders as 'May' for May 10 1997

  • end_date (String; optional): Specifies the ending date for the component.

Accepts datetime.datetime objects or strings in the format 'YYYY-MM-DD'

  • end_date_id (String; optional): The HTML element ID of the end date input field.

Not used by Dash, only by CSS.

  • end_date_placeholder_text (String; optional): Text that will be displayed in the second input

box of the date picker when no date is selected. Default value is 'End Date'

  • first_day_of_week (a value equal to: 0, 1, 2, 3, 4, 5, 6; optional): Specifies what day is the first day of the week, values must be

from [0, ..., 6] with 0 denoting Sunday and 6 denoting Saturday

  • initial_visible_month (String; optional): Specifies the month that is initially presented when the user

opens the calendar. Accepts datetime.datetime objects or strings in the format 'YYYY-MM-DD'

  • is_RTL (Bool; optional): Determines whether the calendar and days operate

from left to right or from right to left

  • loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

  • is_loading (Bool; optional): Determines if the component is loading or not
  • prop_name (String; optional): Holds which property is loading
  • component_name (String; optional): Holds the name of the component that is loading
  • max_date_allowed (String; optional): Specifies the highest selectable date for the component.

Accepts datetime.datetime objects or strings in the format 'YYYY-MM-DD'

  • min_date_allowed (String; optional): Specifies the lowest selectable date for the component.

Accepts datetime.datetime objects or strings in the format 'YYYY-MM-DD'

  • minimum_nights (Real; optional): Specifies a minimum number of nights that must be selected between

the startDate and the endDate

  • month_format (String; optional): Specifies the format that the month will be displayed in the calendar,

valid formats are variations of "MM YY". For example: "MM YY" renders as '05 97' for May 1997 "MMMM, YYYY" renders as 'May, 1997' for May 1997 "MMM, YY" renders as 'Sep, 97' for September 1997

  • number_of_months_shown (Real; optional): Number of calendar months that are shown when calendar is opened
  • persisted_props (Array of a value equal to: 'startdate', 'enddate's; optional): Properties whose user interactions will persist after refreshing the

component or the page.

  • persistence (Bool | String | Real; optional): Used to allow user interactions in this component to be persisted when

the component - or the page - is refreshed. If persisted is truthy and hasn't changed from its previous value, any persisted_props that the user has changed while using the app will keep those changes, as long as the new prop value also matches what was given originally. Used in conjunction with persistence_type and persisted_props.

  • persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored:

memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit.

  • reopen_calendar_on_clear (Bool; optional): If True, the calendar will automatically open when cleared
  • show_outside_days (Bool; optional): If True the calendar will display days that rollover into

the next month

  • start_date (String; optional): Specifies the starting date for the component.

Accepts datetime.datetime objects or strings in the format 'YYYY-MM-DD'

  • start_date_id (String; optional): The HTML element ID of the start date input field.

Not used by Dash, only by CSS.

  • start_date_placeholder_text (String; optional): Text that will be displayed in the first input

box of the date picker when no date is selected. Default value is 'Start Date'

  • stay_open_on_select (Bool; optional): If True the calendar will not close when the user has selected a value

and will wait until the user clicks off the calendar

  • style (Dict; optional): CSS styles appended to wrapper div
  • updatemode (a value equal to: 'singledate', 'bothdates'; optional): Determines when the component should update

its value. If bothdates, then the DatePicker will only trigger its value when the user has finished picking both dates. If singledate, then the DatePicker will update its value as one date is picked.

  • with_full_screen_portal (Bool; optional): If True, calendar will open in a full screen overlay portal, will

take precedent over 'withPortal' if both are set to true, not supported on vertical calendar

  • with_portal (Bool; optional): If True, calendar will open in a screen overlay portal,

not supported on vertical calendar

DashCoreComponents.dcc_datepickersingleMethod
dcc_datepickersingle(;kwargs...)

A DatePickerSingle component. DatePickerSingle is a tailor made component designed for selecting a single day off of a calendar.

The DatePicker integrates well with the Python datetime module with the startDate and endDate being returned in a string format suitable for creating datetime objects.

This component is based off of Airbnb's react-dates react component which can be found here: https://github.com/airbnb/react-dates Keyword arguments:

  • id (String; optional): The ID of this component, used to identify dash components

in callbacks. The ID needs to be unique across all of the components in an app.

  • calendar_orientation (a value equal to: 'vertical', 'horizontal'; optional): Orientation of calendar, either vertical or horizontal.

Valid options are 'vertical' or 'horizontal'.

  • className (String; optional): Appends a CSS class to the wrapper div component.
  • clearable (Bool; optional): Whether or not the dropdown is "clearable", that is, whether or

not a small "x" appears on the right of the dropdown that removes the selected value.

  • date (String; optional): Specifies the starting date for the component, best practice is to pass

value via datetime object

  • day_size (Real; optional): Size of rendered calendar days, higher number

means bigger day size and larger calendar overall

  • disabled (Bool; optional): If True, no dates can be selected.
  • display_format (String; optional): Specifies the format that the selected dates will be displayed

valid formats are variations of "MM YY DD". For example: "MM YY DD" renders as '05 10 97' for May 10th 1997 "MMMM, YY" renders as 'May, 1997' for May 10th 1997 "M, D, YYYY" renders as '07, 10, 1997' for September 10th 1997 "MMMM" renders as 'May' for May 10 1997

  • first_day_of_week (a value equal to: 0, 1, 2, 3, 4, 5, 6; optional): Specifies what day is the first day of the week, values must be

from [0, ..., 6] with 0 denoting Sunday and 6 denoting Saturday

  • initial_visible_month (String; optional): Specifies the month that is initially presented when the user

opens the calendar. Accepts datetime.datetime objects or strings in the format 'YYYY-MM-DD'

  • is_RTL (Bool; optional): Determines whether the calendar and days operate

from left to right or from right to left

  • loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

  • is_loading (Bool; optional): Determines if the component is loading or not
  • prop_name (String; optional): Holds which property is loading
  • component_name (String; optional): Holds the name of the component that is loading
  • max_date_allowed (String; optional): Specifies the highest selectable date for the component.

Accepts datetime.datetime objects or strings in the format 'YYYY-MM-DD'

  • min_date_allowed (String; optional): Specifies the lowest selectable date for the component.

Accepts datetime.datetime objects or strings in the format 'YYYY-MM-DD'

  • month_format (String; optional): Specifies the format that the month will be displayed in the calendar,

valid formats are variations of "MM YY". For example: "MM YY" renders as '05 97' for May 1997 "MMMM, YYYY" renders as 'May, 1997' for May 1997 "MMM, YY" renders as 'Sep, 97' for September 1997

  • number_of_months_shown (Real; optional): Number of calendar months that are shown when calendar is opened
  • persisted_props (Array of a value equal to: 'date's; optional): Properties whose user interactions will persist after refreshing the

component or the page. Since only date is allowed this prop can normally be ignored.

  • persistence (Bool | String | Real; optional): Used to allow user interactions in this component to be persisted when

the component - or the page - is refreshed. If persisted is truthy and hasn't changed from its previous value, a date that the user has changed while using the app will keep that change, as long as the new date also matches what was given originally. Used in conjunction with persistence_type.

  • persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored:

memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit.

  • placeholder (String; optional): Text that will be displayed in the input

box of the date picker when no date is selected. Default value is 'Start Date'

  • reopen_calendar_on_clear (Bool; optional): If True, the calendar will automatically open when cleared
  • show_outside_days (Bool; optional): If True the calendar will display days that rollover into

the next month

  • stay_open_on_select (Bool; optional): If True the calendar will not close when the user has selected a value

and will wait until the user clicks off the calendar

  • style (Dict; optional): CSS styles appended to wrapper div
  • with_full_screen_portal (Bool; optional): If True, calendar will open in a full screen overlay portal, will

take precedent over 'withPortal' if both are set to True, not supported on vertical calendar

  • with_portal (Bool; optional): If True, calendar will open in a screen overlay portal,

not supported on vertical calendar

DashCoreComponents.dcc_downloadMethod
dcc_download(;kwargs...)

A Download component. The Download component opens a download dialog when the data property changes. Keyword arguments:

  • id (String; optional): The ID of this component, used to identify dash components in callbacks.
  • base64 (Bool; optional): Default value for base64, used when not set as part of the data property.
  • data (optional): On change, a download is invoked.. data has the following type: lists containing elements 'filename', 'content', 'base64', 'type'.

Those elements have the following types:

  • filename (String; required): Suggested filename in the download dialogue.
  • content (String; required): File content.
  • base64 (Bool; optional): Set to true, when data is base64 encoded.
  • type (String; optional): Blob type, usually a MIME-type.
  • type (String; optional): Default value for type, used when not set as part of the data property.
DashCoreComponents.dcc_dropdownMethod
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): The ID of this component, used to identify dash components

in callbacks. The ID needs to be unique across all of the components in an app.

  • className (String; optional): className of the dropdown element
  • clearable (Bool; optional): Whether or not the dropdown is "clearable", that is, whether or

not a small "x" appears on the right of the dropdown that removes the selected value.

  • disabled (Bool; optional): If true, this dropdown is disabled and the selection cannot be changed.
  • loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

  • is_loading (Bool; optional): Determines if the component is loading or not
  • prop_name (String; optional): Holds which property is loading
  • component_name (String; optional): Holds the name of the component that is loading
  • multi (Bool; optional): If true, the user can select multiple values
  • optionHeight (Real; optional): height of each option. Can be increased when label lengths would wrap around
  • options (optional): An array of options {label: [string|number], value: [string|number]},

an optional disabled field can be used for each option. options has the following type: Array of lists containing elements 'label', 'value', 'disabled', 'title'. Those elements have the following types:

  • label (String | Real; required): The dropdown's label
  • value (String | Real; required): The value of the dropdown. This value

corresponds to the items specified in the value property.

  • disabled (Bool; optional): If true, this option is disabled and cannot be selected.
  • title (String; optional): The HTML 'title' attribute for the option. Allows for

information on hover. For more information on this attribute, see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/titles

  • persisted_props (Array of a value equal to: 'value's; optional): Properties whose user interactions will persist after refreshing the

component or the page. Since only value is allowed this prop can normally be ignored.

  • persistence (Bool | String | Real; optional): Used to allow user interactions in this component to be persisted when

the component - or the page - is refreshed. If persisted is truthy and hasn't changed from its previous value, a value that the user has changed while using the app will keep that change, as long as the new value also matches what was given originally. Used in conjunction with persistence_type.

  • persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored:

memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit.

  • placeholder (String; optional): The grey, default text shown when no option is selected
  • search_value (String; optional): The value typed in the DropDown for searching.
  • searchable (Bool; optional): Whether to enable the searching feature or not
  • style (Dict; optional): Defines CSS styles which will override styles previously set.
  • 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.

DashCoreComponents.dcc_graphMethod
dcc_graph(;kwargs...)

A Graph component. Graph can be used to render any plotly.js-powered data visualization.

You can define callbacks based on user interaction with Graphs such as hovering, clicking or selecting Keyword arguments:

  • id (String; optional): The ID of this component, used to identify dash components

in callbacks. The ID needs to be unique across all of the components in an app.

  • animate (Bool; optional): Beta: If true, animate between updates using

plotly.js's animate function

  • animation_options (Dict; optional): Beta: Object containing animation settings.

Only applies if animate is true

  • className (String; optional): className of the parent div
  • clear_on_unhover (Bool; optional): If True, clear_on_unhover will clear the hoverData property

when the user "unhovers" from a point. If False, then the hoverData property will be equal to the data from the last point that was hovered over.

  • clickAnnotationData (Dict; optional): Data from latest click annotation event. Read-only.
  • clickData (Dict; optional): Data from latest click event. Read-only.
  • config (optional): Plotly.js config options.

See https://plotly.com/javascript/configuration-options/ for more info.. config has the following type: lists containing elements 'staticPlot', 'plotlyServerURL', 'editable', 'edits', 'autosizable', 'responsive', 'queueLength', 'fillFrame', 'frameMargins', 'scrollZoom', 'doubleClick', 'doubleClickDelay', 'showTips', 'showAxisDragHandles', 'showAxisRangeEntryBoxes', 'showLink', 'sendData', 'linkText', 'displayModeBar', 'showSendToCloud', 'showEditInChartStudio', 'modeBarButtonsToRemove', 'modeBarButtonsToAdd', 'modeBarButtons', 'toImageButtonOptions', 'displaylogo', 'watermark', 'plotGlPixelRatio', 'topojsonURL', 'mapboxAccessToken', 'locale', 'locales'. Those elements have the following types:

  • staticPlot (Bool; optional): No interactivity, for export or image generation
  • plotlyServerURL (String; optional): Base URL for a Plotly cloud instance, if showSendToCloud is enabled
  • editable (Bool; optional): We can edit titles, move annotations, etc - sets all pieces of edits

unless a separate edits config item overrides individual parts

  • edits (optional): A set of editable properties. edits has the following type: lists containing elements 'annotationPosition', 'annotationTail', 'annotationText', 'axisTitleText', 'colorbarPosition', 'colorbarTitleText', 'legendPosition', 'legendText', 'shapePosition', 'titleText'.

Those elements have the following types:

  • annotationPosition (Bool; optional): The main anchor of the annotation, which is the

text (if no arrow) or the arrow (which drags the whole thing leaving the arrow length & direction unchanged)

  • annotationTail (Bool; optional): Just for annotations with arrows, change the length and direction of the arrow
  • annotationText (Bool; optional)
  • axisTitleText (Bool; optional)
  • colorbarPosition (Bool; optional)
  • colorbarTitleText (Bool; optional)
  • legendPosition (Bool; optional)
  • legendText (Bool; optional): Edit the trace name fields from the legend
  • shapePosition (Bool; optional)
  • titleText (Bool; optional): The global layout.title
  • autosizable (Bool; optional): DO autosize once regardless of layout.autosize

(use default width or height values otherwise)

  • responsive (Bool; optional): Whether to change layout size when the window size changes
  • queueLength (Real; optional): Set the length of the undo/redo queue
  • fillFrame (Bool; optional): If we DO autosize, do we fill the container or the screen?
  • frameMargins (Real; optional): If we DO autosize, set the frame margins in percents of plot size
  • scrollZoom (Bool; optional): Mousewheel or two-finger scroll zooms the plot
  • doubleClick (a value equal to: false, 'reset', 'autosize', 'reset+autosize'; optional): Double click interaction (false, 'reset', 'autosize' or 'reset+autosize')
  • doubleClickDelay (Real; optional): Delay for registering a double-click event in ms. The

minimum value is 100 and the maximum value is 1000. By default this is 300.

  • showTips (Bool; optional): New users see some hints about interactivity
  • showAxisDragHandles (Bool; optional): Enable axis pan/zoom drag handles
  • showAxisRangeEntryBoxes (Bool; optional): Enable direct range entry at the pan/zoom drag points

(drag handles must be enabled above)

  • showLink (Bool; optional): Link to open this plot in plotly
  • sendData (Bool; optional): If we show a link, does it contain data or just link to a plotly file?
  • linkText (String; optional): Text appearing in the sendData link
  • displayModeBar (a value equal to: true, false, 'hover'; optional): Display the mode bar (true, false, or 'hover')
  • showSendToCloud (Bool; optional): Should we include a modebar button to send this data to a

Plotly Cloud instance, linked by plotlyServerURL. By default this is false.

  • showEditInChartStudio (Bool; optional): Should we show a modebar button to send this data to a

Plotly Chart Studio plot. If both this and showSendToCloud are selected, only showEditInChartStudio will be honored. By default this is false.

  • modeBarButtonsToRemove (Array; optional): Remove mode bar button by name.

All modebar button names at https://github.com/plotly/plotly.js/blob/master/src/components/modebar/buttons.js Common names include: sendDataToCloud; (2D) zoom2d, pan2d, select2d, lasso2d, zoomIn2d, zoomOut2d, autoScale2d, resetScale2d; (Cartesian) hoverClosestCartesian, hoverCompareCartesian; (3D) zoom3d, pan3d, orbitRotation, tableRotation, handleDrag3d, resetCameraDefault3d, resetCameraLastSave3d, hoverClosest3d; (Geo) zoomInGeo, zoomOutGeo, resetGeo, hoverClosestGeo; hoverClosestGl2d, hoverClosestPie, toggleHover, resetViews.

  • modeBarButtonsToAdd (Array; optional): Add mode bar button using config objects
  • modeBarButtons (Bool | Real | String | Dict | Array; optional): Fully custom mode bar buttons as nested array,

where the outer arrays represents button groups, and the inner arrays have buttons config objects or names of default buttons

  • toImageButtonOptions (optional): Modifications to how the toImage modebar button works. toImageButtonOptions has the following type: lists containing elements 'format', 'filename', 'width', 'height', 'scale'.

Those elements have the following types:

  • format (a value equal to: 'jpeg', 'png', 'webp', 'svg'; optional): The file format to create
  • filename (String; optional): The name given to the downloaded file
  • width (Real; optional): Width of the downloaded file, in px
  • height (Real; optional): Height of the downloaded file, in px
  • scale (Real; optional): Extra resolution to give the file after

rendering it with the given width and height

  • displaylogo (Bool; optional): Add the plotly logo on the end of the mode bar
  • watermark (Bool; optional): Add the plotly logo even with no modebar
  • plotGlPixelRatio (Real; optional): Increase the pixel ratio for Gl plot images
  • topojsonURL (String; optional): URL to topojson files used in geo charts
  • mapboxAccessToken (Bool | Real | String | Dict | Array; optional): Mapbox access token (required to plot mapbox trace types)

If using an Mapbox Atlas server, set this option to '', so that plotly.js won't attempt to authenticate to the public Mapbox server.

  • locale (String; optional): The locale to use. Locales may be provided with the plot

(locales below) or by loading them on the page, see: https://github.com/plotly/plotly.js/blob/master/dist/README.md#to-include-localization

  • locales (Dict; optional): Localization definitions, if you choose to provide them with the

plot rather than registering them globally.

  • extendData (Array | Dict; optional): Data that should be appended to existing traces. Has the form

[updateData, traceIndices, maxPoints], where updateData is an object containing the data to extend, traceIndices (optional) is an array of trace indices that should be extended, and maxPoints (optional) is either an integer defining the maximum number of points allowed or an object with key:value pairs matching updateData Reference the Plotly.extendTraces API for full usage: https://plotly.com/javascript/plotlyjs-function-reference/#plotlyextendtraces

  • figure (optional): Plotly figure object. See schema:

https://plotly.com/javascript/reference

config is set separately by the config property. figure has the following type: lists containing elements 'data', 'layout', 'frames'. Those elements have the following types:

  • data (Array of Dicts; optional)
  • layout (Dict; optional)
  • frames (Array of Dicts; optional)
  • hoverData (Dict; optional): Data from latest hover event. Read-only.
  • loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

  • is_loading (Bool; optional): Determines if the component is loading or not
  • prop_name (String; optional): Holds which property is loading
  • component_name (String; optional): Holds the name of the component that is loading
  • prependData (Array | Dict; optional): Data that should be prepended to existing traces. Has the form

[updateData, traceIndices, maxPoints], where updateData is an object containing the data to prepend, traceIndices (optional) is an array of trace indices that should be prepended, and maxPoints (optional) is either an integer defining the maximum number of points allowed or an object with key:value pairs matching updateData Reference the Plotly.prependTraces API for full usage: https://plotly.com/javascript/plotlyjs-function-reference/#plotlyprependtraces

  • relayoutData (Dict; optional): Data from latest relayout event which occurs

when the user zooms or pans on the plot or other layout-level edits. Has the form {<attr string>: <value>} describing the changes made. Read-only.

  • responsive (a value equal to: true, false, 'auto'; optional): If True, the Plotly.js plot will be fully responsive to window resize

and parent element resize event. This is achieved by overriding config.responsive to True, figure.layout.autosize to True and unsetting figure.layout.height and figure.layout.width. If False, the Plotly.js plot not be responsive to window resize and parent element resize event. This is achieved by overriding config.responsive to False and figure.layout.autosize to False. If 'auto' (default), the Graph will determine if the Plotly.js plot can be made fully responsive (True) or not (False) based on the values in config.responsive, figure.layout.autosize, figure.layout.height, figure.layout.width. This is the legacy behavior of the Graph component.

Needs to be combined with appropriate dimension / styling through the style prop to fully take effect.

  • restyleData (Array; optional): Data from latest restyle event which occurs

when the user toggles a legend item, changes parcoords selections, or other trace-level edits. Has the form [edits, indices], where edits is an object {<attr string>: <value>} describing the changes made, and indices is an array of trace indices that were edited. Read-only.

  • selectedData (Dict; optional): Data from latest select event. Read-only.
  • style (Dict; optional): Generic style overrides on the plot div
DashCoreComponents.dcc_inputMethod
dcc_input(;kwargs...)

An Input component. A basic HTML input control for entering text, numbers, or passwords.

Note that checkbox and radio types are supported through the Checklist and RadioItems component. Dates, times, and file uploads are also supported through separate components. Keyword arguments:

  • id (String; optional): The ID of this component, used to identify dash components

in callbacks. The ID needs to be unique across all of the components in an app.

  • autoComplete (String; optional): This attribute indicates whether the value of the control can be automatically completed by the browser.
  • autoFocus (a value equal to: 'autoFocus', 'autofocus', 'AUTOFOCUS' | Bool; optional): The element should be automatically focused after the page loaded.

autoFocus is an HTML boolean attribute - it is enabled by a boolean or 'autoFocus'. Alternative capitalizations autofocus & AUTOFOCUS are also acccepted.

  • className (String; optional): The class of the input element
  • debounce (Bool; optional): If true, changes to input will be sent back to the Dash server only on enter or when losing focus.

If it's false, it will sent the value back on every change.

  • disabled (a value equal to: 'disabled', 'DISABLED' | Bool; optional): If true, the input is disabled and can't be clicked on.

disabled is an HTML boolean attribute - it is enabled by a boolean or 'disabled'. Alternative capitalizations DISABLED

  • inputMode (a value equal to: "verbatim", "latin", "latin-name", "latin-prose", "full-width-latin", "kana", "katakana", "numeric", "tel", "email", "url"; optional): Provides a hint to the browser as to the type of data that might be

entered by the user while editing the element or its contents.

  • list (String; optional): Identifies a list of pre-defined options to suggest to the user.

The value must be the id of a <datalist> element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the type attribute's value is hidden, checkbox, radio, file, or a button type.

  • loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

  • is_loading (Bool; optional): Determines if the component is loading or not
  • prop_name (String; optional): Holds which property is loading
  • component_name (String; optional): Holds the name of the component that is loading
  • max (String | Real; optional): The maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value.
  • maxLength (String | Real; optional): If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored. It can exceed the value of the size attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior (i.e. the user can enter an unlimited number of characters). The constraint is evaluated only when the value of the attribute has been changed.
  • min (String | Real; optional): The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (max attribute) value.
  • minLength (String | Real; optional): If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter. For other control types, it is ignored.
  • multiple (Bool; optional): This Boolean attribute indicates whether the user can enter more than one value. This attribute applies when the type attribute is set to email or file, otherwise it is ignored.
  • n_blur (Real; optional): Number of times the input lost focus.
  • n_blur_timestamp (Real; optional): Last time the input lost focus.
  • n_submit (Real; optional): Number of times the Enter key was pressed while the input had focus.
  • n_submit_timestamp (Real; optional): Last time that Enter was pressed.
  • name (String; optional): The name of the control, which is submitted with the form data.
  • pattern (String; optional): A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored. The regular expression language is the same as JavaScript RegExp algorithm, with the 'u' parameter that makes it treat the pattern as a sequence of unicode code points. The pattern is not surrounded by forward slashes.
  • persisted_props (Array of a value equal to: 'value's; optional): Properties whose user interactions will persist after refreshing the

component or the page. Since only value is allowed this prop can normally be ignored.

  • persistence (Bool | String | Real; optional): Used to allow user interactions in this component to be persisted when

the component - or the page - is refreshed. If persisted is truthy and hasn't changed from its previous value, a value that the user has changed while using the app will keep that change, as long as the new value also matches what was given originally. Used in conjunction with persistence_type.

  • persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored:

memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit.

  • placeholder (String | Real; optional): A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. Note: Do not use the placeholder attribute instead of a <label> element, their purposes are different. The <label> attribute describes the role of the form element (i.e. it indicates what kind of information is expected), and the placeholder attribute is a hint about the format that the content should take. There are cases in which the placeholder attribute is never displayed to the user, so the form must be understandable without it.
  • readOnly (Bool | a value equal to: 'readOnly', 'readonly', 'READONLY'; optional): This attribute indicates that the user cannot modify the value of the control. The value of the attribute is irrelevant. If you need read-write access to the input value, do not add the "readonly" attribute. It is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type (such as button or submit).

readOnly is an HTML boolean attribute - it is enabled by a boolean or 'readOnly'. Alternative capitalizations readonly & READONLY are also acccepted.

  • required (a value equal to: 'required', 'REQUIRED' | Bool; optional): This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the type attribute is hidden, image, or a button type (submit, reset, or button). The :optional and :required CSS pseudo-classes will be applied to the field as appropriate.

required is an HTML boolean attribute - it is enabled by a boolean or 'required'. Alternative capitalizations REQUIRED are also acccepted.

  • selectionDirection (String; optional): The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. On platforms on which it's possible this value isn't known, the value can be "none"; for example, on macOS, the default direction is "none", then as the user begins to modify the selection using the keyboard, this will change to reflect the direction in which the selection is expanding.
  • selectionEnd (String; optional): The offset into the element's text content of the last selected character. If there's no selection, this value indicates the offset to the character following the current text input cursor position (that is, the position the next character typed would occupy).
  • selectionStart (String; optional): The offset into the element's text content of the first selected character. If there's no selection, this value indicates the offset to the character following the current text input cursor position (that is, the position the next character typed would occupy).
  • size (String; optional): The initial size of the control. This value is in pixels unless the value of the type attribute is text or password, in which case it is an integer number of characters. Starting in, this attribute applies only when the type attribute is set to text, search, tel, url, email, or password, otherwise it is ignored. In addition, the size must be greater than zero. If you do not specify a size, a default value of 20 is used.' simply states "the user agent should ensure that at least that many characters are visible", but different characters can have different widths in certain fonts. In some browsers, a certain string with x characters will not be entirely visible even if size is defined to at least x.
  • spellCheck (a value equal to: 'true', 'false' | Bool; optional): Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked.
  • step (String | Real; optional): Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this attribute is not set to any, the control accepts only values at multiples of the step value greater than the minimum.
  • style (Dict; optional): The input's inline styles
  • type (a value equal to: "text", 'number', 'password', 'email', 'range', 'search', 'tel', 'url', 'hidden'; optional): The type of control to render.
  • value (String | Real; optional): The value of the input
DashCoreComponents.dcc_intervalMethod
dcc_interval(;kwargs...)

An Interval component. A component that repeatedly increments a counter n_intervals with a fixed time delay between each increment. Interval is good for triggering a component on a recurring basis. The time delay is set with the property "interval" in milliseconds. Keyword arguments:

  • id (String; optional): The ID of this component, used to identify dash components

in callbacks. The ID needs to be unique across all of the components in an app.

  • disabled (Bool; optional): If True, the counter will no longer update
  • interval (Real; optional): This component will increment the counter n_intervals every

interval milliseconds

  • max_intervals (Real; optional): Number of times the interval will be fired.

If -1, then the interval has no limit (the default) and if 0 then the interval stops running.

  • n_intervals (Real; optional): Number of times the interval has passed
DashCoreComponents.dcc_linkMethod
dcc_link(;kwargs...)
dcc_link(children::Any;kwargs...)
dcc_link(children_maker::Function;kwargs...)

A Link component. Link allows you to create a clickable link within a multi-page app.

For links with destinations outside the current app, html.A is a better component to use. Keyword arguments:

  • children (a list of or a singular dash component, string or number; optional): The children of this component
  • id (String; optional): The ID of this component, used to identify dash components

in callbacks. The ID needs to be unique across all of the components in an app.

  • className (String; optional): Often used with CSS to style elements with common properties.
  • href (String; required): The URL of a linked resource.
  • loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

  • is_loading (Bool; optional): Determines if the component is loading or not
  • prop_name (String; optional): Holds which property is loading
  • component_name (String; optional): Holds the name of the component that is loading
  • refresh (Bool; optional): Controls whether or not the page will refresh when the link is clicked
  • style (Dict; optional): Defines CSS styles which will override styles previously set.
  • target (String; optional): Specifies where to open the link reference.
  • title (String; optional): Adds the title attribute to your link, which can contain supplementary

information.

DashCoreComponents.dcc_loadingMethod
dcc_loading(;kwargs...)
dcc_loading(children::Any;kwargs...)
dcc_loading(children_maker::Function;kwargs...)

A Loading component. A Loading component that wraps any other component and displays a spinner until the wrapped component has rendered. Keyword arguments:

  • children (Array of a list of or a singular dash component, string or numbers | a list of or a singular dash component, string or number; optional): Array that holds components to render
  • id (String; optional): The ID of this component, used to identify dash components

in callbacks. The ID needs to be unique across all of the components in an app.

  • className (String; optional): Additional CSS class for the spinner root DOM node
  • color (String; optional): Primary colour used for the loading spinners
  • debug (Bool; optional): If true, the spinner will display the componentname and propname

while loading

  • fullscreen (Bool; optional): Boolean that makes the spinner display full-screen
  • loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

  • is_loading (Bool; optional): Determines if the component is loading or not
  • prop_name (String; optional): Holds which property is loading
  • component_name (String; optional): Holds the name of the component that is loading
  • parent_className (String; optional): Additional CSS class for the outermost dcc.Loading parent div DOM node
  • parent_style (Dict; optional): Additional CSS styling for the outermost dcc.Loading parent div DOM node
  • style (Dict; optional): Additional CSS styling for the spinner root DOM node
  • type (a value equal to: 'graph', 'cube', 'circle', 'dot', 'default'; optional): Property that determines which spinner to show

one of 'graph', 'cube', 'circle', 'dot', or 'default'.

DashCoreComponents.dcc_locationMethod
dcc_location(;kwargs...)

A Location component. Update and track the current window.location object through the window.history state. Use in conjunction with the dash_core_components.Link component to make apps with multiple pages. Keyword arguments:

  • id (String; required): The ID of this component, used to identify dash components

in callbacks. The ID needs to be unique across all of the components in an app.

  • hash (String; optional): hash in window.location - e.g., "#myhash"
  • href (String; optional): href in window.location - e.g., "/my/full/pathname?myargument=1#myhash"
  • pathname (String; optional): pathname in window.location - e.g., "/my/full/pathname"
  • refresh (Bool; optional): Refresh the page when the location is updated?
  • search (String; optional): search in window.location - e.g., "?myargument=1"
DashCoreComponents.dcc_logoutbuttonMethod
dcc_logoutbutton(;kwargs...)

A LogoutButton component. Logout button to submit a form post request to the logout_url prop. Usage is intended for dash-deployment-server authentication.

DDS usage:

dcc.LogoutButton(logout_url=os.getenv('DASH_LOGOUT_URL'))

Custom usage:

  • Implement a login mechanism.
  • Create a flask route with a post method handler.

@app.server.route('/logout', methods=['POST'])

  • The logout route should perform what's necessary for the user to logout.
  • If you store the session in a cookie, clear the cookie:

rep = flask.Response(); rep.set_cookie('session', '', expires=0)

  • Create a logout button component and assign it the logout_url

dcc.LogoutButton(logout_url='/logout')

See https://dash.plotly.com/dash-core-components/logout_button for more documentation and examples. Keyword arguments:

  • id (String; optional): Id of the button.
  • className (String; optional): CSS class for the button.
  • label (String; optional): Text of the button
  • loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

  • is_loading (Bool; optional): Determines if the component is loading or not
  • prop_name (String; optional): Holds which property is loading
  • component_name (String; optional): Holds the name of the component that is loading
  • logout_url (String; optional): Url to submit a post logout request.
  • method (String; optional): Http method to submit the logout form.
  • style (Dict; optional): Style of the button
DashCoreComponents.dcc_markdownMethod
dcc_markdown(;kwargs...)
dcc_markdown(children::Any;kwargs...)
dcc_markdown(children_maker::Function;kwargs...)

A Markdown component. A component that renders Markdown text as specified by the GitHub Markdown spec. These component uses react-markdown under the hood. Keyword arguments:

  • children (String | Array of Strings; optional): A markdown string (or array of strings) that adhreres to the CommonMark spec
  • id (String; optional): The ID of this component, used to identify dash components

in callbacks. The ID needs to be unique across all of the components in an app.

  • className (String; optional): Class name of the container element
  • dangerously_allow_html (Bool; optional): A boolean to control raw HTML escaping.

Setting HTML from code is risky because it's easy to inadvertently expose your users to a cross-site scripting (XSS) (https://en.wikipedia.org/wiki/Cross-site_scripting) attack.

  • dedent (Bool; optional): Remove matching leading whitespace from all lines.

Lines that are empty, or contain only whitespace, are ignored. Both spaces and tab characters are removed, but only if they match; we will not convert tabs to spaces or vice versa.

  • highlight_config (optional): Config options for syntax highlighting.. highlight_config has the following type: lists containing elements 'theme'.

Those elements have the following types:

  • theme (a value equal to: 'dark', 'light'; optional): Color scheme; default 'light'
  • loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

  • is_loading (Bool; optional): Determines if the component is loading or not
  • prop_name (String; optional): Holds which property is loading
  • component_name (String; optional): Holds the name of the component that is loading
  • style (Dict; optional): User-defined inline styles for the rendered Markdown
DashCoreComponents.dcc_radioitemsMethod
dcc_radioitems(;kwargs...)

A RadioItems component. RadioItems is a component that encapsulates several radio item inputs. The values and labels of the RadioItems is specified in the options property and the seleced item is specified with the value property. Each radio item is rendered as an input with a surrounding label. Keyword arguments:

  • id (String; optional): The ID of this component, used to identify dash components

in callbacks. The ID needs to be unique across all of the components in an app.

  • className (String; optional): The class of the container (div)
  • inputClassName (String; optional): The class of the <input> radio element
  • inputStyle (Dict; optional): The style of the <input> radio element
  • labelClassName (String; optional): The class of the <label> that wraps the radio input

and the option's label

  • labelStyle (Dict; optional): The style of the <label> that wraps the radio input

and the option's label

  • loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

  • is_loading (Bool; optional): Determines if the component is loading or not
  • prop_name (String; optional): Holds which property is loading
  • component_name (String; optional): Holds the name of the component that is loading
  • options (optional): An array of options. options has the following type: Array of lists containing elements 'label', 'value', 'disabled'.

Those elements have the following types:

  • label (String | Real; required): The radio item's label
  • value (String | Real; required): The value of the radio item. This value

corresponds to the items specified in the value property.

  • disabled (Bool; optional): If true, this radio item is disabled and can't be clicked on.s
  • persisted_props (Array of a value equal to: 'value's; optional): Properties whose user interactions will persist after refreshing the

component or the page. Since only value is allowed this prop can normally be ignored.

  • persistence (Bool | String | Real; optional): Used to allow user interactions in this component to be persisted when

the component - or the page - is refreshed. If persisted is truthy and hasn't changed from its previous value, a value that the user has changed while using the app will keep that change, as long as the new value also matches what was given originally. Used in conjunction with persistence_type.

  • persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored:

memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit.

  • style (Dict; optional): The style of the container (div)
  • value (String | Real; optional): The currently selected value
DashCoreComponents.dcc_rangesliderMethod
dcc_rangeslider(;kwargs...)

A RangeSlider component. A double slider with two handles. Used for specifying a range of numerical values. Keyword arguments:

  • id (String; optional): The ID of this component, used to identify dash components

in callbacks. The ID needs to be unique across all of the components in an app.

  • allowCross (Bool; optional): allowCross could be set as true to allow those handles to cross.
  • className (String; optional): Additional CSS class for the root DOM node
  • count (Real; optional): Determine how many ranges to render, and multiple handles

will be rendered (number + 1).

  • disabled (Bool; optional): If true, the handles can't be moved.
  • dots (Bool; optional): When the step value is greater than 1,

you can set the dots to true if you want to render the slider with dots.

  • drag_value (Array of Reals; optional): The value of the input during a drag
  • included (Bool; optional): If the value is true, it means a continuous

value is included. Otherwise, it is an independent value.

  • loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

  • is_loading (Bool; optional): Determines if the component is loading or not
  • prop_name (String; optional): Holds which property is loading
  • component_name (String; optional): Holds the name of the component that is loading
  • marks (optional): Marks on the slider.

The key determines the position (a number), and the value determines what will show. If you want to set the style of a specific mark point, the value should be an object which contains style and label properties.. marks has the following type: Dict with Strings as keys and values of type String | lists containing elements 'label', 'style'. Those elements have the following types:

  • label (String; optional)
  • style (Dict; optional)
  • max (Real; optional): Maximum allowed value of the slider
  • min (Real; optional): Minimum allowed value of the slider
  • persisted_props (Array of a value equal to: 'value's; optional): Properties whose user interactions will persist after refreshing the

component or the page. Since only value is allowed this prop can normally be ignored.

  • persistence (Bool | String | Real; optional): Used to allow user interactions in this component to be persisted when

the component - or the page - is refreshed. If persisted is truthy and hasn't changed from its previous value, a value that the user has changed while using the app will keep that change, as long as the new value also matches what was given originally. Used in conjunction with persistence_type.

  • persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored:

memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit.

  • pushable (Bool | Real; optional): pushable could be set as true to allow pushing of

surrounding handles when moving an handle. When set to a number, the number will be the minimum ensured distance between handles.

  • step (Real; optional): Value by which increments or decrements are made
  • tooltip (optional): Configuration for tooltips describing the current slider values. tooltip has the following type: lists containing elements 'always_visible', 'placement'.

Those elements have the following types:

  • always_visible (Bool; optional): Determines whether tooltips should always be visible

(as opposed to the default, visible on hover)

  • placement (a value equal to: 'left', 'right', 'top', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'; optional): Determines the placement of tooltips

See https://github.com/react-component/tooltip#api top/bottom{*} sets the origin of the tooltip, so e.g. topLeft will in reality appear to be on the top right of the handle

  • updatemode (a value equal to: 'mouseup', 'drag'; optional): Determines when the component should update its value

property. If mouseup (the default) then the slider will only trigger its value when the user has finished dragging the slider. If drag, then the slider will update its value continuously as it is being dragged. Note that for the latter case, the drag_value property could be used instead.

  • value (Array of Reals; optional): The value of the input
  • vertical (Bool; optional): If true, the slider will be vertical
  • verticalHeight (Real; optional): The height, in px, of the slider if it is vertical.
DashCoreComponents.dcc_sliderMethod
dcc_slider(;kwargs...)

A Slider component. A slider component with a single handle. Keyword arguments:

  • id (String; optional): The ID of this component, used to identify dash components

in callbacks. The ID needs to be unique across all of the components in an app.

  • className (String; optional): Additional CSS class for the root DOM node
  • disabled (Bool; optional): If true, the handles can't be moved.
  • dots (Bool; optional): When the step value is greater than 1,

you can set the dots to true if you want to render the slider with dots.

  • drag_value (Real; optional): The value of the input during a drag
  • included (Bool; optional): If the value is true, it means a continuous

value is included. Otherwise, it is an independent value.

  • loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

  • is_loading (Bool; optional): Determines if the component is loading or not
  • prop_name (String; optional): Holds which property is loading
  • component_name (String; optional): Holds the name of the component that is loading
  • marks (optional): Marks on the slider.

The key determines the position (a number), and the value determines what will show. If you want to set the style of a specific mark point, the value should be an object which contains style and label properties.. marks has the following type: Dict with Strings as keys and values of type String | lists containing elements 'label', 'style'. Those elements have the following types:

  • label (String; optional)
  • style (Dict; optional)
  • max (Real; optional): Maximum allowed value of the slider
  • min (Real; optional): Minimum allowed value of the slider
  • persisted_props (Array of a value equal to: 'value's; optional): Properties whose user interactions will persist after refreshing the

component or the page. Since only value is allowed this prop can normally be ignored.

  • persistence (Bool | String | Real; optional): Used to allow user interactions in this component to be persisted when

the component - or the page - is refreshed. If persisted is truthy and hasn't changed from its previous value, a value that the user has changed while using the app will keep that change, as long as the new value also matches what was given originally. Used in conjunction with persistence_type.

  • persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored:

memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit.

  • step (Real; optional): Value by which increments or decrements are made
  • tooltip (optional): Configuration for tooltips describing the current slider value. tooltip has the following type: lists containing elements 'always_visible', 'placement'.

Those elements have the following types:

  • always_visible (Bool; optional): Determines whether tooltips should always be visible

(as opposed to the default, visible on hover)

  • placement (a value equal to: 'left', 'right', 'top', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'; optional): Determines the placement of tooltips

See https://github.com/react-component/tooltip#api top/bottom{*} sets the origin of the tooltip, so e.g. topLeft will in reality appear to be on the top right of the handle

  • updatemode (a value equal to: 'mouseup', 'drag'; optional): Determines when the component should update its value

property. If mouseup (the default) then the slider will only trigger its value when the user has finished dragging the slider. If drag, then the slider will update its value continuously as it is being dragged. If you want different actions during and after drag, leave updatemode as mouseup and use drag_value for the continuously updating value.

  • value (Real; optional): The value of the input
  • vertical (Bool; optional): If true, the slider will be vertical
  • verticalHeight (Real; optional): The height, in px, of the slider if it is vertical.
DashCoreComponents.dcc_storeMethod
dcc_store(;kwargs...)

A Store component. Easily keep data on the client side with this component. The data is not inserted in the DOM. Data can be in memory, localStorage or sessionStorage. The data will be kept with the id as key. Keyword arguments:

  • id (String; required): The ID of this component, used to identify dash components

in callbacks. The ID needs to be unique across all of the components in an app.

  • clear_data (Bool; optional): Set to true to remove the data contained in data_key.
  • data (Dict | Array | Real | String | Bool; optional): The stored data for the id.
  • modified_timestamp (Real; optional): The last time the storage was modified.
  • storage_type (a value equal to: 'local', 'session', 'memory'; optional): The type of the web storage.

memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit.

DashCoreComponents.dcc_tabMethod
dcc_tab(;kwargs...)
dcc_tab(children::Any;kwargs...)
dcc_tab(children_maker::Function;kwargs...)

A Tab component. Part of dcc.Tabs - this is the child Tab component used to render a tabbed page. Its children will be set as the content of that tab, which if clicked will become visible. Keyword arguments:

  • children (a list of or a singular dash component, string or number; optional): The content of the tab - will only be displayed if this tab is selected
  • id (String; optional): The ID of this component, used to identify dash components

in callbacks. The ID needs to be unique across all of the components in an app.

  • className (String; optional): Appends a class to the Tab component.
  • disabled (Bool; optional): Determines if tab is disabled or not - defaults to false
  • disabled_className (String; optional): Appends a class to the Tab component when it is disabled.
  • disabled_style (Dict; optional): Overrides the default (inline) styles when disabled
  • label (String; optional): The tab's label
  • loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

  • is_loading (Bool; optional): Determines if the component is loading or not
  • prop_name (String; optional): Holds which property is loading
  • component_name (String; optional): Holds the name of the component that is loading
  • selected_className (String; optional): Appends a class to the Tab component when it is selected.
  • selected_style (Dict; optional): Overrides the default (inline) styles for the Tab component when it is selected.
  • style (Dict; optional): Overrides the default (inline) styles for the Tab component.
  • value (String; optional): Value for determining which Tab is currently selected
DashCoreComponents.dcc_tabsMethod
dcc_tabs(;kwargs...)
dcc_tabs(children::Any;kwargs...)
dcc_tabs(children_maker::Function;kwargs...)

A Tabs component. A Dash component that lets you render pages with tabs - the Tabs component's children can be dcc.Tab components, which can hold a label that will be displayed as a tab, and can in turn hold children components that will be that tab's content. Keyword arguments:

  • children (Array of a list of or a singular dash component, string or numbers | a list of or a singular dash component, string or number; optional): Array that holds Tab components
  • id (String; optional): The ID of this component, used to identify dash components

in callbacks. The ID needs to be unique across all of the components in an app.

  • className (String; optional): Appends a class to the Tabs container holding the individual Tab components.
  • colors (optional): Holds the colors used by the Tabs and Tab components. If you set these, you should specify colors for all properties, so:

colors: { border: '#d6d6d6', primary: '#1975FA', background: '#f9f9f9' }. colors has the following type: lists containing elements 'border', 'primary', 'background'. Those elements have the following types:

  • border (String; optional)
  • primary (String; optional)
  • background (String; optional)
  • content_className (String; optional): Appends a class to the Tab content container holding the children of the Tab that is selected.
  • content_style (Dict; optional): Appends (inline) styles to the tab content container holding the children of the Tab that is selected.
  • loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

  • is_loading (Bool; optional): Determines if the component is loading or not
  • prop_name (String; optional): Holds which property is loading
  • component_name (String; optional): Holds the name of the component that is loading
  • mobile_breakpoint (Real; optional): Breakpoint at which tabs are rendered full width (can be 0 if you don't want full width tabs on mobile)
  • parent_className (String; optional): Appends a class to the top-level parent container holding both the Tabs container and the content container.
  • parent_style (Dict; optional): Appends (inline) styles to the top-level parent container holding both the Tabs container and the content container.
  • persisted_props (Array of a value equal to: 'value's; optional): Properties whose user interactions will persist after refreshing the

component or the page. Since only value is allowed this prop can normally be ignored.

  • persistence (Bool | String | Real; optional): Used to allow user interactions in this component to be persisted when

the component - or the page - is refreshed. If persisted is truthy and hasn't changed from its previous value, a value that the user has changed while using the app will keep that change, as long as the new value also matches what was given originally. Used in conjunction with persistence_type.

  • persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored:

memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit.

  • style (Dict; optional): Appends (inline) styles to the Tabs container holding the individual Tab components.
  • value (String; optional): The value of the currently selected Tab
  • vertical (Bool; optional): Renders the tabs vertically (on the side)
DashCoreComponents.dcc_textareaMethod
dcc_textarea(;kwargs...)

A Textarea component. A basic HTML textarea for entering multiline text. Keyword arguments:

  • id (String; optional): The ID of this component, used to identify dash components

in callbacks. The ID needs to be unique across all of the components in an app.

  • accessKey (String; optional): Defines a keyboard shortcut to activate or add focus to the element.
  • autoFocus (String; optional): The element should be automatically focused after the page loaded.
  • className (String; optional): Often used with CSS to style elements with common properties.
  • cols (String | Real; optional): Defines the number of columns in a textarea.
  • contentEditable (String | Bool; optional): Indicates whether the element's content is editable.
  • contextMenu (String; optional): Defines the ID of a <menu> element which will serve as the element's context menu.
  • dir (String; optional): Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
  • disabled (String | Bool; optional): Indicates whether the user can interact with the element.
  • draggable (a value equal to: 'true', 'false' | Bool; optional): Defines whether the element can be dragged.
  • form (String; optional): Indicates the form that is the owner of the element.
  • hidden (String; optional): Prevents rendering of given element, while keeping child elements, e.g. script elements, active.
  • lang (String; optional): Defines the language used in the element.
  • loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

  • is_loading (Bool; optional): Determines if the component is loading or not
  • prop_name (String; optional): Holds which property is loading
  • component_name (String; optional): Holds the name of the component that is loading
  • maxLength (String | Real; optional): Defines the maximum number of characters allowed in the element.
  • minLength (String | Real; optional): Defines the minimum number of characters allowed in the element.
  • n_blur (Real; optional): Number of times the textarea lost focus.
  • n_blur_timestamp (Real; optional): Last time the textarea lost focus.
  • n_clicks (Real; optional): Number of times the textarea has been clicked.
  • n_clicks_timestamp (Real; optional): Last time the textarea was clicked.
  • name (String; optional): Name of the element. For example used by the server to identify the fields in form submits.
  • persisted_props (Array of a value equal to: 'value's; optional): Properties whose user interactions will persist after refreshing the

component or the page. Since only value is allowed this prop can normally be ignored.

  • persistence (Bool | String | Real; optional): Used to allow user interactions in this component to be persisted when

the component - or the page - is refreshed. If persisted is truthy and hasn't changed from its previous value, a value that the user has changed while using the app will keep that change, as long as the new value also matches what was given originally. Used in conjunction with persistence_type.

  • persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored:

memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit.

  • placeholder (String; optional): Provides a hint to the user of what can be entered in the field.
  • readOnly (Bool | a value equal to: 'readOnly', 'readonly', 'READONLY'; optional): Indicates whether the element can be edited.

readOnly is an HTML boolean attribute - it is enabled by a boolean or 'readOnly'. Alternative capitalizations readonly & READONLY are also acccepted.

  • required (a value equal to: 'required', 'REQUIRED' | Bool; optional): Indicates whether this element is required to fill out or not.

required is an HTML boolean attribute - it is enabled by a boolean or 'required'. Alternative capitalizations REQUIRED are also acccepted.

  • rows (String | Real; optional): Defines the number of rows in a text area.
  • spellCheck (a value equal to: 'true', 'false' | Bool; optional): Indicates whether spell checking is allowed for the element.
  • style (Dict; optional): Defines CSS styles which will override styles previously set.
  • tabIndex (String | Real; optional): Overrides the browser's default tab order and follows the one specified instead.
  • title (String; optional): Text to be displayed in a tooltip when hovering over the element.
  • value (String; optional): The value of the textarea
  • wrap (String; optional): Indicates whether the text should be wrapped.
DashCoreComponents.dcc_uploadMethod
dcc_upload(;kwargs...)
dcc_upload(children::Any;kwargs...)
dcc_upload(children_maker::Function;kwargs...)

An Upload component. Upload components allow your app to accept user-uploaded files via drag'n'drop Keyword arguments:

  • children (a list of or a singular dash component, string or number | String; optional): Contents of the upload component
  • id (String; optional): The ID of this component, used to identify dash components

in callbacks. The ID needs to be unique across all of the components in an app.

  • accept (String; optional): Allow specific types of files.

See https://github.com/okonet/attr-accept for more information. Keep in mind that mime type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows. In some cases there might not be a mime type set at all. See: https://github.com/react-dropzone/react-dropzone/issues/276

  • className (String; optional): HTML class name of the component
  • className_active (String; optional): HTML class name of the component while active
  • className_disabled (String; optional): HTML class name of the component if disabled
  • className_reject (String; optional): HTML class name of the component if rejected
  • contents (String | Array of Strings; optional): The contents of the uploaded file as a binary string
  • disable_click (Bool; optional): Disallow clicking on the component to open the file dialog
  • disabled (Bool; optional): Enable/disable the upload component entirely
  • filename (String | Array of Strings; optional): The name of the file(s) that was(were) uploaded.

Note that this does not include the path of the file (for security reasons).

  • last_modified (Real | Array of Reals; optional): The last modified date of the file that was uploaded in unix time

(seconds since 1970).

  • loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.

Those elements have the following types:

  • is_loading (Bool; optional): Determines if the component is loading or not
  • prop_name (String; optional): Holds which property is loading
  • component_name (String; optional): Holds the name of the component that is loading
  • max_size (Real; optional): Maximum file size in bytes. If -1, then infinite
  • min_size (Real; optional): Minimum file size in bytes
  • multiple (Bool; optional): Allow dropping multiple files
  • style (Dict; optional): CSS styles to apply
  • style_active (Dict; optional): CSS styles to apply while active
  • style_disabled (Dict; optional): CSS styles if disabled
  • style_reject (Dict; optional): CSS styles if rejected