✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Side by side chart auto css

side by side chart worked for a while,then i was doing some r&d and created an asset folder and style.css to colour my dropdown but didn’t worked so i deleted the folder and tried to revert my actions but it crashed my application, even though i reverted my code there is a space between my charts.

import dash

import dash_core_components as dcc

import dash_html_components as html

import plotly.graph_objs as go

from dash.dependencies import Output, Input, State

import numpy as np

import pandas as pd

import plotly.figure_factory as ff

from pandas import read_excel

import plotly.io as pio

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

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

# app = dash.Dash()

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

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

# app.css.config.serve_locally = False

# app.scripts.config.serve_locally = True

# app = dash.Dash()

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

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

file_name = 'samplePop1.csv'

df = pd.read_csv(file_name)

print(df.head())

colors = {'BLACK' : '#000000','TEXT' :  '#696969','PLOT_COLOR' : '#C0C0C0','WHITE' : '#FFFFFF','GOLD' : '#EEBC35' ,

    'BROWN' : '#53354D' ,'GREEN' : '#42CE90' ,'RED' : '#F87861' ,'YELLOW' : '#F1F145' ,'SKY_BLUE' : '#A3DBE1' ,'SILVER': '#CCCCCC' ,'LIGHT_BLACK' : '#374649'

    }

#status options for dropdown

status_options = []

for status in df['Status'].unique():

    status_options.append({'label':str(status),'value':status})

# print(status_options)

#Pie chart static function

def pop_pie():

    pie_data = df.groupby('Status')['Population Census 1991'].count()

    pie_dataframe = pie_data.to_frame().reset_index()

    trace1 = go.Pie(

                labels = pie_dataframe['Status'].tolist(),

                values= pie_dataframe['Population Census 1991'].tolist(),

                textinfo='label+percent',

                name='population 1991 status wise',pull=[0,0,0,0,0,0,0,0,0]

                )

    data = [trace1]

    layout = go.Layout(

        title='District wise chart',

        height=450,

        width = 680,

        paper_bgcolor=colors['LIGHT_BLACK'],

        plot_bgcolor=colors['LIGHT_BLACK'],

        font ={'color' : colors['WHITE'], 'size' : 12},

        legend=dict(

                x=-0.5, y=1.2,

                bgcolor='rgba(255, 255, 255, 0)',

                bordercolor='rgba(255, 255, 255, 0)',

                # orientation="h",

                font=dict( 

                    family="Arial", 

                    size=8, color="white" )

                )

    )

    fig = go.Figure(data=data,layout=layout)

    return fig

app.layout = html.Div([

                html.Div(className="row",

                children=[

                    html.Div(

                        className="one row",

                        children=[

                            html.H1("Test Dashboard",

                                style = {

                                    'textAlign' : 'center',

                                    'color' : colors['SILVER']

                                }

                            )]),

                    html.Div(

                        className="six row",

                        children=[

                            html.Img(

                                src="https://i.imgur.com/CIxE22f.png",

                                    style={

                                        'height': '9%',

                                        'width': '9%',

                                        'float': 'right',

                                        'position': 'relative',

                                        'margin-top': '-91px',

                                    }

                            )])

        ],style={'backgroundColor': colors['LIGHT_BLACK']}),

        html.Div( [ 

            html.Div(className="row",

                children=[

                    html.Div(

                        className="three columns",

                        children=[

                            html.Div(

                                children = dcc.Dropdown(id='status_picker',options=status_options,

                                placeholder="Select Status",

                                    style = {'color' : colors['LIGHT_BLACK'],"background-color": colors['LIGHT_BLACK']},

                                    multi=True,

                                    clearable=True,

                                    searchable=True

                                    )

                                    ,style={"background-color": colors['LIGHT_BLACK']}

                                    # ,style={'backgroundColor': colors['LIGHT_BLACK']}

        )] ),

                    html.Div(

                        className="nine columns",

                        children=[

                            html.Div('Developed by Centroxy Solution pvt.ltd',

                                style = {

                                    'textAlign' : 'right',

                                    'color' : colors['SILVER'],

                                    "background-color": colors['LIGHT_BLACK']

                                }

                            )

                        ]

                    )]

        )],style={'backgroundColor': colors['LIGHT_BLACK']}),

    html.Div( [

        html.Div( className="row",

            children=[

                html.Div(

                    className="six columns",

                    children=[

                        html.Div(

                            children = dcc.Graph(id='Bar-Chart')

                )]),

                html.Div(

                    className="six columns",

                    children=[

                        html.Div(

                            children=dcc.Graph(id='pie-chart', figure=pop_pie())

                )] ) 

        ])])])

        

@app.callback(Output('Bar-Chart','figure'),

                [Input('status_picker','value')])

def update_figure(selected_status):

    print(selected_status)

    if selected_status == [] or selected_status == None:

        trace1 =go.Bar(y=df['Population Census 1991'], 

                            x=df['Name'],name ='1991',

                            marker = {'color' : colors['GREEN']}

                            # orientation='h'

                            )

        trace2 =go.Bar(y=df['Population Census 2001'], 

                            x=df['Name'],name ='2001',

                            marker = {'color' : colors['RED']}

                            # orientation='h'

                            )

        trace3 = go.Bar(y=df['Population Census 2011'], 

                            x=df['Name'],name ='2011',

                            marker = {'color' : colors['YELLOW']}

                            # orientation='h'

                            )

    else:

        filtered_df = df[df['Status'].isin(selected_status)]

        print(filtered_df)

        trace1=go.Bar(y=filtered_df['Population Census 1991'], 

                            x=filtered_df['Name'],name ='1991',

                            marker = {'color' : colors['GREEN']}

                            # orientation='h'

                            )

        trace2=go.Bar(y=filtered_df['Population Census 2001'], 

                            x=filtered_df['Name'],name ='2001',

                            marker = {'color' : colors['RED']}

                            # orientation='h'

                            )

        trace3=go.Bar(y=filtered_df['Population Census 2011'], 

                            x=filtered_df['Name'],name ='2011',

                            marker = {'color' : colors['YELLOW']}

                            # orientation='h'

                            )

    traces= [trace1,trace2,trace3]

    '''

    for status in filtered_df['Status'].unique():

        df_by_status = filtered_df[filtered_df['Status'] == selected_status]

        traces.append(

            go.Bar(y=df_by_status['Population Census 1991'], 

                        x=df_by_status['Name'],name ='1991',

                        marker = {'color' : colors['GREEN']}

                        # orientation='h'

                        ))

        traces.append(

            go.Bar(y=df_by_status['Population Census 2001'], 

                        x=df_by_status['Name'],name ='2001',

                        marker = {'color' : colors['RED']}

                        # orientation='h'

                        ))

        traces.append(go.Bar(y=df_by_status['Population Census 2011'], 

                        x=df_by_status['Name'],name ='2011',

                        marker = {'color' : colors['YELLOW']}

                        # orientation='h'

                        ))'''

    return {

        'data' : traces,

        'layout' : go.Layout(

            title='Population Census',

            height=450,

            width = 680,

            # float = 'left',

            paper_bgcolor=colors['LIGHT_BLACK'],

            plot_bgcolor=colors['LIGHT_BLACK'],

            font ={'color' : colors['WHITE']},

            xaxis_tickfont_size=14,

            yaxis=dict(showgrid=False,

                title='Population',

                titlefont_size=16,

                tickfont_size=14,

            ),

            legend=dict(

                x=0,

                y=1.0,

                bgcolor='rgba(255, 255, 255, 0)',

                bordercolor='rgba(255, 255, 255, 0)',

                orientation="h"

                ),

            barmode='group',

            bargap=0.15, # gap between bars of adjacent location coordinates.

            bargroupgap=0.1, # gap between bars of the same location coordinate.

            xaxis={'categoryorder':'total descending'})

            }

if __name__ == '__main__':

    app.run_server(port =  '8086' , debug ='True')