Multi-page apps - graphs not rendering on page load when dependent on dcc element in index


I have a simple app:

When I navigate to page 3 (test.layout) I would like the graph_4 and graph_5 (they are the same graph) there to auto-render. Now this works fine when ‘year-slider’ is in the page ‘test’.

However I would instead like to have ‘year-slider’ to be in the sidebar which exists in all pages, so I’ve put ‘year-slider’ in

When year slider is in the index however, graph_4 and graph_5 in ‘’ do not auto-render until the value of ‘year-slider’ changes. How can I keep ‘year-slider’ in the index page but still have graph_4 and graph_5 auto-render?


From my research I think I need to use a component to share the output value of ‘year-slider’ with a callback on a different page, I’ve tried doing that in the (updated) repo above but its still not storing the data.

The docs on 'sharing data between callbacks don’t mention either. Does anyone know how to get this simple example working?


Ok i’ve worked this out, its nothing to do with store.

I’ve found that for multi-page apps, if a graph on page 1 depends on a dcc element that is specified in the index page, then it won’t render automatically on page 1. To fix the issue you need to make the graph on page 1 depend on some dcc element on page 1 as well as the dcc elements in the index page.