Is there a way to obtain the height and width of a dash html div? I have a dcc.Graph figure housed within a html.Div element, and even though I have specified the dimensions of the Graph figure, I checked the end coordinates using EventListener and it seems smaller. For instance, in the image, I clicked at almost the bottom right of the div, and the height displayed is much less even though the width is correct.
This was the code I used to create this application:
from dash import Dash, html, dcc, Input, Output, State
import plotly.graph_objects as go
import pandas as pd
import json
from dash_extensions import EventListener
base_url = "https://raw.githubusercontent.com/plotly/datasets/master/ply/sandal"
dataframe = pd.read_csv(base_url + '-ply.csv')
app = Dash(
__name__,
external_stylesheets=[
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css",
]
)
app.layout = html.Div(
[
html.Div(
className='col-6',
children=EventListener(
html.Div([
dcc.Graph(
id='graph',
),
],
style={
'border-width': '1px',
'border-style': 'solid',
'border-color': 'black'
}
),
events=[{"event": "click", "props": ['x', 'y']}],
logging=True,
id="event_listener"
)
),
html.Div(
id='out_0',
className='col-2'
),
html.Div(
id='out_1',
className='col-2'
),
],
className='row'
)
@app.callback(
Output('graph', 'figure'),
Output('out_0', 'children'),
Output('out_1', 'children'),
Input('graph', 'clickData'),
Input('event_listener', 'n_events'),
State('event_listener', 'event'),
)
def update(click_data, _n_events, event):
df = dataframe
fig = go.Figure(data=go.Mesh3d(
x=df.x, y=df.y, z=df.z,
i=df.i, j=df.j, k=df.k,
facecolor=df.facecolor),
layout=dict(
scene={
"xaxis": {
'showgrid': False,
'zeroline': False,
'visible': False,
"range": [df.x.min(), df.x.max()]
},
"yaxis": {
'showgrid': False,
'zeroline': False,
'visible': False,
"range": [df.y.min(), df.y.max()]
},
"zaxis": {
'showgrid': False,
'zeroline': False,
'visible': False,
"range": [df.z.min(), df.z.max()]
},
},
autosize=False,
width=750, height=1000,
scene_camera=dict(
up=dict(x=0, y=1, z=0),
center=dict(x=0, y=0, z=0),
eye=dict(x=df.x.mean(), y=0, z=5),
projection=dict(type='perspective')),
scene_aspectmode="data",
clickmode="event+select",
margin={'l': 0, 't': 0})
)
return [
fig,
html.Pre([html.H5('click data mesh'), json.dumps(click_data, indent=3)]),
html.Pre([html.H5('event listener'), json.dumps(event, indent=3)]),
]
if __name__ == "__main__":
app.run(debug=True)
Is there a way to accurately obtain the dimensions of the graph div?
