Black Lives Matter. Please consider donating to Black Girls Code today.

How to store and share graph data between layouts?


I am currently working on website that shows brainwave graphs on the website.
I have two layouts - main and sub and app.layout that contains both.

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    dcc.Store(id = 'selectedGraphFigures'),
             children = [])

@app.callback(Output('page-content', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/':
        return main.layout
    elif pathname == '/sub':
        return sub.layout
        return '404'

as you can see, I made dcc.Store to store data on very top layout.
What I did is I made callback that generate graph in main.layout and store that in dcc.Store(id = ‘selectedGraphFigures’).
And then, I tried to use that data to draw graph on sub.layout.

    Output('selectedGraphFigures', 'data'),
    [Input('new-win-btn', 'n_clicks')],
    [State('file-input', 'filename'),
      State('selected-graphs', 'data'),
      State('row-dropdown', 'value'),
      State('col-dropdown', 'value')]
def graphs_on_newWin(clicks, input_name, selected_graphs, row, col):
    if selected_graphs is not None:

        raw =, preload=True)
        picks = mne.pick_types(, meg='grad', exclude=[])
        start, stop = raw.time_as_index([0, 150])
        n_channels = row * col
        data, times = raw[picks[:n_channels], start:stop]
        ch_names = [['ch_names'][p] for p in picks[:n_channels]]
        print('selected_graphs : ', selected_graphs)
        n = []
        for i in selected_graphs:
        print('n : ', *n)
        index = len(selected_graphs)
        print('index : ', index)
        fig = subplots.make_subplots(
            rows = index,
            cols = 1,
            shared_xaxes = True,
            subplot_titles = ch_names
        for i in range(index):
            fig.append_trace(Scatter(x=times, y=data.T[:, n[i]], yaxis='y%d' % (n[i] + 1)), i+1, 1)
        for i in fig['layout']['annotations']:
            i['font'] = dict(size=12)
          height= 1500,
          # width=750, 
          # plot_bgcolor='rgb(255, 0, 0)',
        # fig['layout']['plot_bgcolor'][0].update(
        #     plot_bgcolor='rgb(255, 255, 0)',
        #     )
        print('append data to storage')
        graph_output = dcc.Graph(id = 'subplot', figure = fig)
        return graph_output
        return dash.exceptions.PreventUpdate

this callback function’s Input and States take Ids’ in main.layout and output is dcc.Store(id = ‘selectedGraphFigures’). I checked whether it really stores data with callback, and it does store data in dcc.Store.

Now the problem is that when I tried to use that data in sub.layout, it said that there is no data in the storage.
sub.layout is here.

layout = html.Div([
    html.Div(id = 'sub-graphs'),
    html.Button('dsdsdsa', id = 'sub-btn')

and this is callback function

    Output('sub-graphs', 'children'),
    [Input('selectedGraphFigures', 'data')]
def storage_to_sub(click, data):
    print("storage to sub-graph")
    return data

print(data) in this code returns None and sub.layout did not show any graphs on the page.
I also tried this also, since I thought putting dcc.Store as input might generate error.

    Output('sub-graphs', 'children'),
    [Input('sub-btn', 'n_clicks')],
    [State('selectedGraphFigures', 'data')]
def dsdsds(click, data):
    print("storage to sub-graph")
    return data

but same result for this one.

Am I doing something wrong? please tell me how to fix this.
It would be great if I click a button in main.layout, it stores data and show sub.layout with that data.
If there is other way to do this work, please feel free to give me some ideas.

when I used dcc.Link to sub.layout without target=’_blank’, it worked fine, but I want it to show in different window.
If I use it without target=’_blank’, when I go back to main.layout, the page was reset. I want my main page to stay same and show sub.layout in different window with graphs.