Hi everyone. The past days I have been looking for a way to add one or more (bar) charts to a map. What I have in mind is siimilar to the attached example, ie
-The map should fill the whole screen
-There are some points of interest (eg 3 supermarkets) on the map
-Adjacent to each POI is a (bar) chart (eg showing customer numbers for each weekday)
…and then I would like to have Dash’ interactivity…
I have looked at Mixed Subplots and also at Insets (Dash 3.0). But that is not quite why I want.
Do the bar charts have to be visible at all times?
If not, one solution could be to create and display a bar chart inside a dbc.Modal each time a user clicks on one of the points of interest.
Hi Adam. an interesting idea! I guess I would like to show some of the charts when the app starts. Simply to give the user a hint, that there is more to see. And I wonder whether I am in control of the exact position. But that is smth to start with!
Thanks, Peter
Hi Emil. Having rarely worked with CSS I wonder whether interactivity could be maintained. Could you describe in a few points the process you have in mind? Thanks! Peter
Yes, the chart will stay interactive (it’s just shifted spatially, so that it will reside on top of the map). As an example, you can take a look at the infobox (and how it’s positioned) in this app,
I presume your map and that chart are each in a separate container like a html.Div()? If so @Emil and @adamschroeder are correct, CSS is the best way. For additional info, start here:
Just to get a general understanding of how html elements can stack using css z-index. You can pretty much stack whatever you want in an order and the interactivity should remain.
welcome to the community.