Black Lives Matter. Please consider donating to Black Girls Code today.

How to include a Source/Footer on a Table Image?

Hi there,

I am having a hard time figuring out how to include a source/footer for a table. I’ve built my table based on the code provided in the examples here https://plot.ly/python/table/.

Any help is greatly appreciated.

Hi @reggiebizzle,

Could you add and image/screenshot of the kind of table footer you’re looking for? And could you explain the problem you’re seeing if you add the footer as the last row in the table.

-Jon

Hi Jon,

Thanks for your response. Here’s a photo of my table and as you can see to the lower left side I’d like to be able to reference the source of my table contents. Not exactly sure how to do such, I couldn’t find an explanation in the documentation.

Hi @reggiebizzle,

I’d recommend handling this with an annotation (See https://plot.ly/python/text-and-annotations/#simple-annotation). Here’s an example:

import plotly.graph_objs as go

trace = go.Table(
    header=dict(values=['A Scores', 'B Scores'],
                line = dict(color='#7D7F80'),
                fill = dict(color='#a1c3d1'),
                align = ['left'] * 5),
    cells=dict(values=[[100, 90, 80, 90],
                       [95, 85, 75, 95]],
               line = dict(color='#7D7F80'),
               fill = dict(color='#EDFAFF'),
               align = ['left'] * 5))

layout = go.Layout(
    width=500,
    height=300,
    annotations=[
        go.layout.Annotation(
            showarrow=False,
            text='Source: www.google.com',
            xanchor='right',
            x=1,
            yanchor='top',
            y=0.05
        )])
data = [trace]
fig = go.FigureWidget(data=data, layout=layout)
fig

newplot%20(6)

Hope that helps!
-Jon

1 Like

Hi Jon, is there a way to snap the annotation to the bottom of the table?
I’m not sure if it’s my autosize=True in the go.Layout, but for different tables (of different lengths), I want to automatically attach the annotation to the bottom. The Annotation you suggest manually specifies the x and y relative to the figure height? How can I automate the x and y, relative to my table height?
I currently get around this because I only have 3 tables and I decide on the y annotation height, depending on the table height, which I name annotation_y.

Thanks!

table_data= go.Table(
columnwidth = columnwidth,
header=dict(
values=header_values,
line_color=‘black’, fill_color=‘white’,
align=[‘left’, ‘center’], font=dict(color=‘black’, size=[11, 10]),
height=20
),
cells=dict(
values=[df[df.columns[0]], df[df.columns[2]]],
line_color=‘white’, fill_color=[[rowOddColor,rowEvenColor]*(n+1)],
align=[‘left’, ‘center’], font=dict(color=font_color, size=8),
height=16
)
)

layout = go.Layout(width=1000, 
				height=500, 
				autosize=True, 
				annotations=[
		        go.layout.Annotation(
		            showarrow=False,
		            text="Annotation",
		            xanchor='left',
		            x=0.05,
		            yanchor='top',
		            y=annotation_y,
		            font=dict(color='black', size=11)
		        )]
				)

fig = go.Figure(data=[table_data], layout=layout)

fig.add_layout_image(
    go.layout.Image(
        source=pic_source,
        xref="paper", yref="paper",
        x=0.605, y=0.985,
        sizex=0.1, sizey=0.1
    )
)