Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬 Register for the Oct 27 webinar.

Graph div overlap to top sticky

Hi,

I’m using django_plotly_dash for a web application.

I have a div with the filters and another one with loading and graphics.

According to the filters, up to 15 charts can be generated, I am looking for a way to configure the div filter as sticky top, I tried

style = {"position": "sticky", "top": 0}

and it seems to work, but the graphics are above that div, it doesn’t even allow you to see all the options of the Dropdowns.

I do not know what I’m doing wrong. I tried the z index, but was unsuccessful.

I checked this post, but couldn’t fix it.

Thanks for your help.

My code is:

# Dash

from django_plotly_dash import DjangoDash

import dash_core_components as dcc

import dash_html_components as html

import dash_bootstrap_components as dbc

from dash.dependencies import Input, Output

# Plotly

import plotly.graph_objects as go

# Pandas

import pandas as pd

# Files System Paths

from os import path

folder_name = "input"

file_name = "data_daily_avg.csv"

data_path = path.join(path.dirname(__file__), folder_name, file_name)

df = pd.read_csv(data_path, header=[0,1,2], index_col=0, parse_dates=True)

df.index.freq = 'D'

all_variables = df.columns.get_level_values(0).unique()

variables = [{"label":v, "value":v} for v in all_variables]

variables.insert(0, {"label":"All", "value":"All"})

all_stations = df.columns.get_level_values(2).unique()

stations = [{"label":s, "value":s} for s in all_stations]

stations.insert(0, {"label":"All", "value":"All"})

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css', dbc.themes.BOOTSTRAP]

app = DjangoDash(__name__.split(".")[-1], external_stylesheets=external_stylesheets)

app.layout = html.Div([html.Div([dcc.Dropdown(id='variables',

                                              options=variables,

                                              multi=True,

                                              value=None,

                                              placeholder="Selecciona las variables a graficar",),

                                 dcc.Dropdown(id='stations',

                                              options=stations,

                                              multi=True,

                                              value=None,

                                              placeholder="Selecciona las estaciones a graficar",),

                                 dcc.RangeSlider(id='year-slider',

                                                 min=df.index.year.min(),

                                                 max=df.index.year.max(),

                                                 value=[df.index.year.max() - 2, df.index.year.max()],

                                                 marks={str(year): str(year) for year in df.index.year.unique()},

                                                 step=None,)],

                                 style={"position":"sticky", "top":0},

                                 title="Filtros"),

                       html.Div([dcc.Loading(id="loading",

                                             children=[html.Div(id='graphs'),],

                                             type="graph",

                                             fullscreen=True,)],),

],)

@app.callback(

    Output('loading', 'children'),

    [Input('variables', 'value'),

    Input('stations', 'value'),

    Input('year-slider', 'value')])

def update_figure(variables, stations, selected_year):

    if variables and stations and selected_year:

        filtered_df = df[str(selected_year[0]) : str(selected_year[1])]

        if "ALL" in str(variables).upper():

            variables = filtered_df.columns.get_level_values(0).unique()

        if "ALL" in str(stations).upper():

            stations = filtered_df.columns.get_level_values(2).unique()

        figs=[]

        for v in variables:

            fig = go.Figure()

            m = filtered_df[v].columns.get_level_values(0).unique()[0]

            for s in stations:

                fig.add_trace(go.Scatter(x=filtered_df.index,

                                        y=filtered_df[v][m, s],

                                        mode="lines",

                                        name=s))

            fig.update_layout(title=dict(text=f"Variable: {v}",

                                        y=0.95,

                                        x=0.5,

                                        xanchor="center",

                                        yanchor="top"),

                            xaxis=dict(title="Tiempo",

                                        gridcolor="white",

                                        gridwidth=2,),

                            yaxis=dict(title=f"{m}",

                                        gridcolor="white",

                                        gridwidth=2,),

                            legend=dict(orientation="h",

                                        title_text="Estaciones",

                                        yanchor="bottom",

                                        y=1.02,

                                        xanchor="right",

                                        x=1

                                        ),

                            plot_bgcolor='rgb(243, 243, 243)',

                            paper_bgcolor='rgb(243, 243, 243)',

                            transition_duration=700,

                            )

            figs.append(html.Div(dcc.Graph(figure=fig)))

        return figs