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

How to remove annotations and gaps between figures in dash app?

I am making a dash app that will contain 10 dcc graphs. I want to make these graphs look like text areas, but since I want to add hover events on them to display other graphs later, and since dcc.textarea does not support hover event, I had to opt this way. So, here’s the code:

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go

app = dash.Dash()

divs=[]
for i in range(10):
    divs.append(
            dcc.Graph(
                figure=go.Figure(
                    data=[go.Bar(
                                x=[10],
                                y=['Block {}'.format(i+1)],
                                orientation = 'h',
                                text=['Block {}'.format(i+1)],
                                textposition = 'inside',
                                marker = dict(color = 'rgb(158,202,225)'),
                            )
                        ],
                    layout=go.Layout(
                        xaxis=dict(showticklabels=False, fixedrange=True),
                        yaxis=dict(showticklabels=False, fixedrange=True),
                    )
                ),
                hoverData='',
                style={'width': 400, 'height':250, 'padding': 1},
                id='graph-'+format(i)
            ),
        )

app.layout = html.Div(divs)

if __name__ == '__main__':
    app.run_server(debug=True)

The problem is, there’s a lot of space/gap between the graphs, which I don’t want as I want to emulate the look and feel of text boxes basically. Also, when I hover over one these graphs, it shows the following annotations that I’ve highlighted in red.

How do I remove these 3 things from the plot to make to appear like textareas?

I tried margin=dict(t=5) in go.Layout to remove the gaps between the figures, but it just increased the heights of the individual figures!!

Also, if I change the height from 250 to 200, it weirdly appears much thinner, less than half the original height. Although this isn’t related to the question above, I’d like to know the cause of this weird behavior.

Hmm… This is weird…
Are you using any CSS files to style your app? These may contain some spacing shennanigans between Divs

@Blaceus No, I’m not using any external CSS. The code I wrote above is all I have.