Skip to main content

Table

Table-style traces offer a lot of information but also require a lot of grid cells to work together in order to display a table. An example table is best used to get an overview of necessary elements. Click the Type popup menu in the Structure > Traces tab, hover over the Table icon and select the then-appearing tiny chart icon with the alternate text See a basic example.

Styling for tables is available in the Style > Traces tab and customizable under the selected table trace.

Some common styling elements have been described above and are available by following their links, the table-specific styling is described below.

Name

Sets the trace name. The trace name appears as the legend item and on hover.

In the Name text box, the name can be entered and formatted. This is automatically reflected in the Structure > Traces[link] section and in the legend[link] of the chart. The trace name can be also edited directly by double-clicking the trace name in the chart legend.

HTML tags and CSS formatting can be used to enrich text styling.

Features of all header rows -if multiple are present- are set concurrently.

Height

Irrespective of the font size, determine the height of the header rows in the table. Regardless of the size specified, header rows will not shrink below the size needed to display the headers. When the header content is wrapping and this creates different headers of different height needs, each header row is individually shrunk or expanded to accommodate all text.

Fill Color

This should specify the background color of the header row, using the default color picker[link] but is currently not honored (bug)[link]

Typeface

Font Size

Set the font size in pixels.

Text Alignment

Sets the horizontal alignment of the text content within the hover label box. Has an effect only if the hover label text spans two or more lines. Alignment of Hover/Tooltip can be set to Auto, Left or Right.

Font Color

This should specify the color of the font, but is currently defunct (bug)[link].

Border Width

The size of borders between header cells is specified in (fractional) pixels.

Border Color

The size of the space between header cells specified in pixels.

Cells

Cells are a separate part in the Table-type trace and have their own separate settings.

Height

Determines the height of the rows in the table, specified in pixels. Rows will shrink below the size needed to display the cells if Font Size is taken too big. When the cell content is wrapping and this creates different cell height needs, only table rows where text wrapping occurs in a cell are protected from clipping. (bug[link]

Fill Color

This should specify the background color of the table rows, using the default color picker[link] but is currently not honored (bug)[link]

Typeface

HTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system in which it operates. Plotly has a set of standard fonts available on all platforms, containing Arial, Balto, Courier New, Droid Sans, Droid Serif, Droid Sans Mono, Gravitas One, Old Standard TT, Open Sans, Overpass, PT Sans Narrow, Raleway and Times New Roman.

Font Size

Set the font size in pixels.

Text Alignment

Sets the horizontal alignment of the text content within the hover label box. Has an effect only if the hover label text spans two or more lines. Alignment of Hover/Tooltip can be set to Auto, Left or Right.

Font Color

This specifies the color of the font used in the cells and is set using the default color picker[link].

Border Width

The size of borders between header cells is specified in (fractional) pixels. When chosen too big in combination with font size and cell height, can obscure cell content.

Border Color

The size of the space between cells specified in (fractional) pixels.

Hover/Tooltip

Text Alignment

[Has no effect as there does not seem to be a hover option]

Sets the horizontal alignment of the text content within the hover label box. Has an effect only if the hover label text spans two or more lines. Alignment of Hover/Tooltip can be set to Auto, Left or Right.