CODEWITHSUNDEEP
pythoncssplotly-dash
pilu
pilu

Reputation: 800

Plotly Dash API documentation

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?

Upvotes: 5

Views: 3179

Answers (3)

Yingyun
Yingyun

Reputation: 21

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.

Upvotes: 2

Michael Colon
Michael Colon

Reputation: 151

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.

Upvotes: 0

jackdbd
jackdbd

Reputation: 5061

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 (e.g. 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:

Upvotes: 2

Related Questions