I have created a visualization using dcc.Graph that displays a 256x156 px image in the background with shapes drawn over the top of it. It works great however for the image to display at its true size, i need to make the chart 500x500 due to the whitespace around it generated (its part of the SVG when looking at the console in chrome). I have layout margins and padding all set to zero, height, width set to 256, images.sizex and sizey set to 256, autosize set to false and the modeBar hidden.
Is there another setting to configure or am i stuck living with the whitespace?
'data': [{}],
'layout': {
'shapes': verticies,
'autosize': True,
'margin;': {
'l': 1,
'r': 1,
'b': 1,
't': 1,
'pad': 1},
'xaxis': {
'range': [0, dims['width']],
'showgrid': False,
'zeroline': False,
'showline': False,
'ticks': '',
'showticklabels': True},
'yaxis': {
'range': [dims['height'], 0],
'showgrid': False,
'zeroline': False,
'showline': False,
'ticks': '',
'showticklabels': True},
'width': dims['width'] * 1.8, # If i do not do this, the image will only be 126 px due to generated whitespace
'height': dims['height'] * 1.8,
'images': [{
'source': '{}'.format(encoded_image),
'xref': 'x',
'yref': 'y',
'x': 0,
'y': 0,
'sizex': dims['width'],
'sizey': dims['height'],
'sizing': 'stretch',
'layer': 'below'
}]
}