Aaron
Aaron

Reputation: 461

How can I cut the large space at the bottom of the subplot in plotly?

I'm using plotly to generate interactive plots. In my case I'll have one table and a plot in one figure. enter image description here

import matplotlib
matplotlib.use('Agg')
import plotly.offline as offline
from plotly import tools
import plotly.graph_objs as go

trace1=go.Scatter(x=[1, 2, 3], y=[1, 3, 5], name='abc', mode = 'lines+markers', xaxis='x1', yaxis='y1', showlegend=True)
trace2=go.Scatter(x=[1, 2, 3], y=[1, 2, 3], name='cba', mode = 'lines+markers', xaxis='x1', yaxis='y1', showlegend=True)
trace3=go.Table(
        domain=dict(x=[0, 1], y=[0, 0.5]),
        header=dict(values=['', 'fields1', 'fields2', 'fields3']),
        cells=dict(values=[[['row1'], ['row2'], ['row3']], [['11'], ['12'], ['13']], [['21'], ['22'], ['23']], [['31'], ['32'], ['33']]], font = dict(color = '#506784', size = 11))
        )
axis=dict(
    showline=True,
    zeroline=False,
    showgrid=True,
    mirror=True,
    ticklen=4,
    gridcolor='#ffffff',
    tickfont=dict(size=10)
)

param1 = dict(
    xaxis1=dict(axis, **dict(domain=[0, 1], anchor='y1', showticklabels=False)),
    yaxis1=dict(axis, **dict(domain=[0.55, 1], anchor='x1', tickprefix='$', hoverformat='.2f')),
        )
layout1 = dict(
    title='Bitcoin mining stats for 180 days',
    margin = dict(t=100),
    showlegend=False,
    plot_bgcolor='rgba(228, 222, 249, 0.65)'
)
layout1.update(param1)
fig1=dict(data=[trace1, trace2, trace3], layout=layout1)
offline.plot(fig1, auto_open=False, output_type='file', filename='abc.html')

How can I remove the space below the table? Can the size of the fiture be changed automatically according to the actual size of the elements?

Upvotes: 3

Views: 2123

Answers (1)

Dmitriy Kisil
Dmitriy Kisil

Reputation: 2998

Looking at your domain parameter, especially where you set yaxis:

domain=dict(x=[0, 1], y=[0, 0.5]),

and

yaxis1=dict(axis, **dict(domain=[0.55, 1],

By code you say that the table will be drawn between 0% to 50% on the yaxis. And graph - between 55% to 100%. But look! You table is too small to fill that gap(50%).

So you have to options to solve the problem:

  1. Increase amount of data in your table. Then size of table increase and gap will decrease and will disappear afterwards;

  2. Or turn table to bottom and increase graph size(for example 0-15% to table and 15-100% for graph by yaxis) and result should be something like this (full code below): 100% your graph

Code:

import matplotlib
matplotlib.use('Agg')
import plotly.offline as offline
from plotly import tools
import plotly.graph_objs as go

trace1=go.Scatter(x=[1, 2, 3], y=[1, 3, 5], name='abc', mode = 'lines+markers', xaxis='x1', yaxis='y1', showlegend=True)
trace2=go.Scatter(x=[1, 2, 3], y=[1, 2, 3], name='cba', mode = 'lines+markers', xaxis='x1', yaxis='y1', showlegend=True)
trace3=go.Table(
        #Set space for table from 0% to 15%
        domain=dict(x=[0, 1], y=[0, 0.15]),
        header=dict(values=['', 'fields1', 'fields2', 'fields3']),
        cells=dict(values=[[['row1'], ['row2'], ['row3']], [['11'], ['12'], ['13']], [['21'], ['22'], ['23']], [['31'], ['32'], ['33']]], font = dict(color = '#506784', size = 11))
        )
axis=dict(
    showline=True,
    zeroline=False,
    showgrid=True,
    mirror=True,
    ticklen=4,
    gridcolor='#ffffff',
    tickfont=dict(size=10)
)

param1 = dict(
    xaxis1=dict(axis, **dict(domain=[0, 1], anchor='y1', showticklabels=False)),
    #Set space to graph from 15% to 100%
    yaxis1=dict(axis, **dict(domain=[0.15, 1], anchor='x1', tickprefix='$', hoverformat='.2f')),
        )
layout1 = dict(
    title='Bitcoin mining stats for 180 days',
    margin = dict(t=100),
    showlegend=False,
    plot_bgcolor='rgba(228, 222, 249, 0.65)',
    autosize=True,
)
layout1.update(param1)
fig1=dict(data=[trace1, trace2, trace3], layout=layout1)
offline.plot(fig1, auto_open=False, output_type='file', filename='abc.html')

Also you able to set xaxis parameters to get more nice plot (set space for plot from 25% to 75%): enter image description here

Upvotes: 2

Related Questions