✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Incorrect display of added charts in subsequent rows

Hello.
I made an app that displays the charts added by the dropdown menu. Works fine when I want to display 2 charts, but when I add a third chart and more, charts are displayed incorrectly.
Like this:

How can i fix this?
Code below:

import dash

import dash_core_components as dcc

import dash_html_components as html

from dash.dependencies import Input, Output, State, MATCH

import plotly.graph_objs as go

import numpy as np

import pandas as pd

import re

url = 'https://github.com/PerczynskiAdam/Value-investing-dash-app/blob/master/Indi_db/DB.csv'

df = pd.read_csv(url, index_col = 0, encoding = 'utf_8_sig')

sector_dict = {'GPW Informatyka': ['11B', 'ABS', 'ACP', 'ALL', 'ART', 'ASE', 'ATD', 'BBT', 'BCM',

       'CDR', 'CIG', 'CMP', 'CMR', 'CTG', 'DAT', 'DTR', 'ELZ', 'GOP',

       'IFI', 'LRK', 'LSI', 'LVC', 'MDG', 'NTT', 'OPM', 'PCG', 'PLW',

       'PRD', 'PSW', 'QNT', 'R22', 'SGN', 'SME', 'SVRS', 'TBL', 'TEN',

       'TLX', 'U2K', 'ULG', 'VVD', 'WAS', 'XTP'],

       'GPW Telekomunikacja': ['ATM', 'CPS', 'MTL', 'MXC', 'NET', 'OPL', 'PLY']}

sectors = list(sector_dict.keys())

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([

   dcc.Tabs(children = [

      dcc.Tab(label = 'Analiza branży', children = [#

         html.Div([

            html.Div([

               html.H2(children = 'Branża:',

                  style = {

                  'padding-left': '2.5%'

                  },

                  className = 'two columns'

               ),

               dcc.Dropdown(

                  id = 'sector',

                  options = [{'label': i, 'value': i} for i in sectors],

                  value = sectors[0],

                  className = 'ten columns',

                  style = {

                     'margin-top': '1.2rem',

                     'padding-left': '1%',

                     'display': 'inline-block',

                     'width': '45%'

                  }

               )

            ], className = 'row', style = {

               'margin-top': '0.5rem',

               'background-color':'#939598'

               }

            ),

            html.Div([

               dcc.Dropdown(

                  id = 'dynamic-indi',

                  options = [{'label': i, 'value':i} for i in df.columns[1:]],

                  value = ['Cena / Wartość księgowa', 'Cena / Zysk', 'ROE', 'Marża zysku operacyjnego', 'Zadłużenie ogólne'],

                  multi = True

               )

            ], style = {

               'margin-top': '0.5rem',

               'display': 'inline-block'

               }

            ),

            html.Div(

               id = 'container-tab1', 

               children = []

            )

         ], className = 'ten columns offset-by-one')

      ], selected_style = {

         'color': 'black',

         'box-shadow': '2px 4px #FF851B',

         'border-left': '1px solid #F1F2F2',

         'border-right': '1px solid #F1F2F2',

         'border-top': '1px solid #F1F2F2'

         }

      ),

   ])

])

def create_fig(indi, sect):

   filtered_df = df[df['Ticker'].isin(sector_dict[sect])]

   grouped_df = filtered_df.groupby('Ticker').tail(1)[['Ticker', '{}'.format(indi)]].dropna()#choose the latest data depends of indicator and drop rows with nan value

   grouped_df = grouped_df.sort_values('{}'.format(indi))

   trace_bar = go.Bar(

      x = grouped_df['Ticker'],

      y = grouped_df['{}'.format(indi)],

      hovertext = grouped_df.index,#That show date of used data to plot bar

      showlegend = False,

      marker_color = '#FF851B'#Color of Bars

   )

   trace_line = go.Scatter(

      x = [grouped_df['Ticker'][-1], grouped_df['Ticker'][0]],

      y = [grouped_df['{}'.format(indi)].mean(), grouped_df['{}'.format(indi)].mean()],

      mode = 'lines',

      name = 'Średnia',

      line = dict(color = '#111111', width = 3)

   )

   layout = dict(

      title = "{}".format(indi),

      legend = dict(

         x = 0.4, 

         y = 1.15),

      margin = dict(

         l = 25,

         r = 25

      ),

      xaxis = dict(

         tickangle = 90,

         tickfont = dict(

            size = 10

         )

      ),

      paper_bgcolor = '#F2F8FD',

      plot_bgcolor = '#F2F4F6'

   )

   return {

      'data': [trace_bar, trace_line],

      'layout': layout

   }

@app.callback(

   Output('container-tab1', 'children'),#where and what to change

   [Input('dynamic-indi', 'value'),

   Input('sector', 'value')]#where and how its starting

)

#function to support callback

def update_graph(indicators, sect):

   graphs = []

   if len(indicators) < 2:

      class_choice = 'twelve columns'

   else:

      class_choice = 'six columns'

   for indi in indicators:

      graphs.append(html.Div([

         dcc.Graph(

         figure = create_fig(indi, sect),

         style ={

            'margin-bottom': '0.5rem'

         }

      )], className = class_choice)

      )

   return graphs

if __name__ == '__main__':

    app.run_server(debug=True)

Thanks for ur answers :slight_smile:

I solved it.
The problem was in external css stylesheet. I found another topic with the same problem and according to answers there decided to use dash bootstrap components to solve my problem and its works very well :).
Cheers

1 Like