Plotly Dash API文档

Question

I recently started working on my very first dashboard application using dash .

The tutorials are comprehensible, however, I have a hard time handling the front end details because I cannot find an API reference. Specifically, each element accepts a style argument that let's us modify some CSS details, like text alignment, fonts etc. I have seen some examples in the tutorials but I would love to have an exhaustive list of everything I can pass there.

As an example, I want to create a table but the columns are too close together. I need to control the spacing between them and I imagine there should be an argument like padding , spacing , borderSize ... you get the point. Where can I find these details?

Answer 1

It could be possible to edit some styling by passing some keywords to the Dash component. It depends on the component itself.

For example, if you are using DataTable from dash-table-experiment :

import dash_table_experiments as dt
help(dt.DataTable)

you can see that the API of this component allows you to set things like column_widths (list; optional) and min_width (number; optional).

If you need some more complex styling (eg a yellow background with linear gradient for all even table cells) I'm afraid you'll have to know some CSS.

A few additional resources:

• Currently the Dash styleguide is based on the Skeleton CSS framework
• Each dcc.Graph is composed by a figure and a layout. Here is the plotly.js figure reference
• For things like showing/hiding legends, traces, etc, have a look at the plotly.js configuration options

Answer 2

• For HTML: https://github.com/plotly/dash-html-components
• For component: https://github.com/plotly/dash-core-components

Seems the dash project didn't create the user-friendly API document (I guess it was related to their business strategy).

The only way to get the help is the dash community and git-code project.

Answer 3

if you want help with python objects in dash then just use:

help(html.Div)

to get a list of argument parameters.

If you want to know what can be placed in the style parameter the answer is any and all css can be generated. You can customize the look anyway you want here is the syntax...

style={
 'border':'1px solid #333', 
 'margin':'10px', 
 'padding':'10px', 
 'background-color':'#888',
 'position':'absolute',
},

The style parameter excepts a dictionary object. In order for your CSS to be rendered it needs to be in the syntax above, which will create a python dictionary object.