CODEWITHSUNDEEP
pythonplotlyplotly-dashplotly-express
Saad Saleem
Saad Saleem

Reputation: 53

How to adjust plotly express area chart size?

I've created a plotly express area chart on Dash app. The chart works fine however the 1st point and the last point on x-axis seems to be getting out of the chart and can been seen only in half (as shown in the attach screenshot). I've also tried changing the width and height values for graph but nothing seems to work. I'm new to python and dash so any help would be appreciated, also posted my first question on stack overflow so apologies if I have missed anything or not done it properly.

Area chart

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.express as px
import pandas as pd
import pyodbc
import dash_bootstrap_components as dbc
from datetime import datetime as dt
from app import app




page2 = html.Div(
    [

     
        dbc.Row(
            [
                dbc.Col(
                        # dbc.Card(
                                    html.Div(

                                        id="opportunity_heatmap",
                                        className="chart_div pretty_container",
                                        children = [
                                            dcc.Graph(id='my_graph',
                                                    
                                                      config={
                                                        'staticPlot': False,     # True, False
                                                        'scrollZoom': True,      # True, False
                                                        'doubleClick': 'reset',  # 'reset', 'autosize' or 'reset+autosize', False
                                                        'showTips': True,       # True, False
                                                        'displayModeBar': 'hover',  # True, False, 'hover'
                                                        'watermark': False,
                                                        # 'modeBarButtonsToRemove': ['pan2d','select2d'],
                                                    },
                                                )
                                            ]
                                    ),
                                # color="light", inverse=True),
                    md=12,
                ),
             
            ],
            no_gutters=True,
        ),

    
          

    ]
)




@app.callback(
    Output('my_graph','figure'),
    [Input('my_dropdown','value')]
)

def build_graph(trendGraph):

    dff=SQL_data
 



fig = px.area(dff, x="DeploymentDate", y="DeploymentID",  text='DeploymentID', color = 'DeploymentType' ,template='plotly_white'
                    ,category_orders={'DeploymentDate':['January-2019','February-2019','March-2019','April-2019','May-2019','June-2019','July-2019','August-2019','September-2019','October-2019','November-2019','December-2019','January-2020','February-2020','March-2020','April-2020','May-2020','June-2020','July-2020','August-2020','September-2020','October-2020','November-2020','December-2020','January-2021','February-2021']})

fig.update_layout(yaxis={'title':'No. of deployments'},
                    title={'text':'Deployments Trend',
                    'font':{'size':28},'x':0.5,'xanchor':'center'},
                    autosize=True,)
    
    return fig


def get_page2():
    return page2

Upvotes: 5

Views: 1416

Answers (1)

EricLavault
EricLavault

Reputation: 16035

What is drawn on the plot cannot overflow the grid layout, otherwise when zooming in we would see not only the text values but also the entire figure extending outside the grid.

The only way to show these values then is to zoom out a little, which means initializing the figure x_range accordingly. The idea is to take the min and max values from the corresponding dataframe column, and extend that range as needed.

For example here adding 4 years allow to display the y values entirely (general use case with years on the x axis, @see https://plotly.com/python/filled-area-plots/) :

fig = px.area(
    df,
    x='year',
    y=y,
    color="continent",
    line_group="country",
    text=y,
    range_x=[df['year'].min()-2, df['year'].max()+2]
)

Upvotes: 2

Related Questions