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

Dendrogram does not fully fill the container

I am currently trying to create a very hight but narrow dendrogram, without any margins in top or bottom. The problem is that, as the dendrogram becomes higher, there appears a strange gap between the dendrogram and the top of its container, even when I explicitly set margin and padding to 0.
Down below there is a code example to create a dendrogram in which this strange gap can be seen. Do you know why this might be happening?

Thank you in advance

import matplotlib
matplotlib.use('Agg')
import pandas as pd
from  plotly.figure_factory import create_dendrogram
from  plotly.offline import plot,init_notebook_mode, plot
import numpy as np
from scipy.cluster.hierarchy import linkage, fcluster

height = 3000
width = 600
clusters = 10
dend_matrix = np.random.rand(200,2)
filename = "dummy_dendrogram.html"

# Define linkage function (we'll be using the default one for plotly). 
linkagefun=lambda x: linkage(x, 'complete')

# Create color scale from the "category20" color scale. Not working because color_scale plotly option is inoperative
colors_category20 = ['rgb(31, 119, 180)', 'rgb(174, 199, 232)', 'rgb(255, 127, 14)', 'rgb(255, 187, 120)', 'rgb(44, 160, 44)', 'rgb(152, 223, 138)', 'rgb(214, 39, 40)', 'rgb(255, 152, 150)', 'rgb(148, 103, 189)', 'rgb(197, 176, 213)', 'rgb(140, 86, 75)', 'rgb(196, 156, 148)', 'rgb(227, 119, 194)', 'rgb(247, 182, 210)', 'rgb(127, 127, 127)', 'rgb(199, 199, 199)', 'rgb(188, 189, 34)', 'rgb(219, 219, 141)', 'rgb(23, 190, 207)', 'rgb(158, 218, 229)']
colors = colors_category20[0:clusters]

# Setting figures
fig = create_dendrogram(
    dend_matrix,
    orientation='right',
    linkagefun=linkagefun,
)

fig['layout'].update({
    'width':width, 
    'height':height,
    })

fig['layout']['margin'].update({
    'r' : 300,
    'l' : 50,
    't' : 0,
    'b' : 0,
    'pad' : 0,
    'autoexpand' : False,
    })

fig['layout']['xaxis'].update({
    'showline': False,
    'showticklabels': False,
    'ticks' : '',
    'fixedrange' : True,
    'automargin' : False
    })

fig['layout']['yaxis'].update({
    'side' : 'right',
    'showline': False,
    'ticks' : '',
    'tickfont' : {
        'size' : 15,
        'color' : 'white'
        },
    'fixedrange' : True,
    'automargin' : False
    })

# Taking order for plot rows
dendro_leaves = fig['layout']['yaxis']['ticktext']

# Writing dendrogram on file
plot(fig, auto_open= True, filename=filename, config={
    "displayModeBar": "hover",
    "modeBarButtons": [["toImage"]]
})

Hi @comrade_ameba when pasted your code I did not observe any space at the top or bottom. Are you sure it’s not the container in which you put the html figure which adds the space? How are you visualizing the figure after you have created it?

Also, please consider upgrading to a more recent version of plotly, plotly.offline is not used any more in plotly 4+ versions (see https://plot.ly/python/renderers/)

Hi @Emmanuelle,
Thank you for your quick response. Maybe I have not explained it as correctly as I should have. The problem is not actually a gap, but that the dendrogram container (div class=cartesianlayer ) does not fit the top of the dendrogram container (div class=main_svg).
To try to illustrate my point, I include a screenshot of the dendrogram I obtain from the previous code

I will try also to upgrade to 4+ in time

Hello again @Emmanuelle,
I have still not been able to find any solution to this problem. Could I ask you to send me the dendrogram you obtained, as well as the script and version you executed, in order to try to compare them with mine?