Modebar - two buttons not showing

Dash Python
1

Hello,

I have a problem with modebar:

  • two buttons are not showing ‘hoverClosestCartesian’ and ‘hoverCompareCartesian’

no_buttons
no_buttons3125×441 60.3 KB

Index.py:

import dash
import dash_auth
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
from dash.exceptions import PreventUpdate
from dash.dependencies import Input, Output
from database.data_companies import generate_unique_companies
from database.company_order_dynamics import company_order_dynamics_graph
from layouts.page_content import page_content
from layouts.sidebar import sidebar
import time

# Keep this out of source code repository - save in a file or a database
VALID_USERNAME_PASSWORD_PAIRS = {
    'hello': 'world'
}

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.config.suppress_callback_exceptions = True

auth = dash_auth.BasicAuth(
    app,
    VALID_USERNAME_PASSWORD_PAIRS
)

# APP LAYOUT
app.layout = html.Div([
    dcc.Location(
        id='url',
        refresh=False
    ),
    sidebar,
    page_content
])

# PAGE DYNAMICS
page_dynamics = html.Div([
    dcc.Dropdown(
        id='dropdown-1',
        options = generate_unique_companies()
    ),
    html.Br(),
    dbc.Spinner(
        size='lg',
        children=(
            html.Div(
                id='div-1'
                )
                )
    ),  
])


@app.callback(
    Output('page-content', 'children'),
    Input('url', 'pathname')
)
def display_page(pathname):
    if pathname == '/general':
        return page_dynamics

@app.callback(
    Output(component_id='div-1', component_property='children'),
    Input(component_id='dropdown-1', component_property='value')
)
def show_first_graph(company_name):
    if company_name is None:
        raise PreventUpdate
    else:
        return html.Div([dcc.Graph(
                figure=company_order_dynamics_graph(company_name),
                config = {'modeBarButtonsToAdd':['toggleSpikelines', 'hoverClosestCartesian','hoverCompareCartesian']}
            )])

if __name__ == '__main__':
    app.run_server(debug=True, host = '0.0.0.0', port = 8080)

company_order_dynamics.py

import pandas as pd
import plotly.graph_objects as go
from database.database_connection import engine

    connection = engine.connect()
    sql_query = pd.read_sql_query(f"SELECT date_entered, ifsapp.Customer_Order_Line_API.Get_Sale_Price_Total(ORDER_NO, LINE_NO, REL_NO, LINE_ITEM_NO) FROM IFSAPP.customer_order_join WHERE customer_name = '{company_name}' AND contract = 'Z01'", engine)
    company_data = pd.DataFrame(sql_query)
    connection.close()

    # Preprocessing
    company_data = company_data.rename(columns={'IFSAPP.CUSTOMER_ORDER_LINE_API.GET_SALE_PRICE_TOTAL(ORDER_NO,LINE_NO,REL_NO,LINE_ITEM_NO)':'value'})
    company_data['date_entered'] = pd.to_datetime(company_data['date_entered'], format='%Y-%m-%d').dt.date
    company_data['date_entered'] = pd.to_datetime(company_data['date_entered'], format='%Y-%m-%d')
    company_data = company_data.set_index('date_entered')
    company_data = company_data.resample('W').sum()
    company_data['year'] = company_data.index.year
    company_data['cw'] = company_data.index.isocalendar().week
    company_data['cum_value'] = company_data.groupby(company_data.index.year)['value'].cumsum()
    company_data = company_data.drop(company_data[company_data['cw'] == 53].index)

    # Creating graph
    traces = []
    for year in company_data['year'].unique():
        company_data_year = company_data[company_data['year']==year]
        traces.append(go.Scatter(
            x = company_data_year['cw'],
            y = company_data_year['cum_value'],
            name = str(year),
            mode='lines+markers'
        ))

    fig = go.Figure(
        data=traces,
        layout=go.Layout(
            title='Wpływ zamówień',
            template='plotly_white',
            hovermode='x'
        )
    )

    
    fig.update_yaxes(title='Wartość netto w walucie zamówienia')
    fig.update_xaxes(dtick=1, title='Numer tygodnia', range=(1,52))

    return fig

I am using following libraries:
rotli==1.0.9
certifi==2021.5.30
charset-normalizer==2.0.3
chart-studio==1.1.0
click==8.0.1
cx-Oracle==8.2.1
dash==1.21.0
dash-auth==1.4.1
dash-bootstrap-components==0.12.2
dash-core-components==1.17.1
dash-html-components==1.1.4
dash-table==4.12.0
Flask==2.0.1
Flask-Compress==1.10.1
Flask-SeaSurf==0.3.0
future==0.18.2
greenlet==1.1.0
idna==3.2
itsdangerous==2.0.1
Jinja2==3.0.1
MarkupSafe==2.0.1
numpy==1.21.1
pandas==1.3.1
plotly==5.1.0
python-dateutil==2.8.2
pytz==2021.1
requests==2.26.0
retrying==1.3.3
six==1.16.0
SQLAlchemy==1.4.22
tenacity==8.0.1
ua-parser==0.10.0
urllib3==1.26.6
Werkzeug==2.0.1

2

Hi @gumis_rulez, welcome to the community !

Check out this thread - What happened to the buttons that let me select between closes and all labels?