Add/Embed graph to a map

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.

Any idea how I might get this done? Thanks!

hi @pittip66
:wave: welcome to the community.

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

I believe the easiest would be just to add the chart on top using CSS :slight_smile:

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.

Thanks tphil10,
the css z-index approach does the job for me, re my app!

1 Like