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.
