# Coordinating a Dash line chart with Mapbox graph

**URL:** <https://community.plotly.com/t/coordinating-a-dash-line-chart-with-mapbox-graph/55308>\
**Category:** Dash Python\
**Created:** [August 5, 2021, 1:45am UTC](https://community.plotly.com/t/coordinating-a-dash-line-chart-with-mapbox-graph/55308 "2021-08-05T01:45:24Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![azureity](https://avatars.discourse-cdn.com/v4/letter/a/8797f3/32.png) [@azureity](https://community.plotly.com/u/azureity)\
**Post date:** [August 5, 2021, 1:45am UTC](https://community.plotly.com/t/coordinating-a-dash-line-chart-with-mapbox-graph/55308/1 "2021-08-05T01:45:24Z")

</div>

I am trying to visualize workout data and I’ve uploaded some .fit files from my fitness watch. I have 2 graphs: a line plot containing speed, heart rate, running power, etc… and a Mapbox graph containing GPS coordinates.

I would like to be able to hover over parts of the heart rate line plot, then see which coordinate that part is associated with. Is there a way to coordinate the 2 charts together? Preferably without having to use the Mapbox API multiple times (don’t want to overuse my license)?

This is what it looks like so far:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/9/930f753b54fd15dc57b3dd60ab0bb7795a7eaf30.png)

I want to follow the GPS coordinates as I hover over the top line chart (and vice versa).

Code is here: [https://github.com/vzeddie/fit-data-comparer/blob/feature/mapbox/run.py#L298](https://github.com/vzeddie/fit-data-comparer/blob/feature/mapbox/run.py#L298)

---

<div class="post-metadata">

**Author:** ![RenaudLN](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/renaudln/32/9041_2.png) [@RenaudLN](https://community.plotly.com/u/RenaudLN)\
**Post date:** [August 5, 2021, 6:07am UTC](https://community.plotly.com/t/coordinating-a-dash-line-chart-with-mapbox-graph/55308/2 "2021-08-05T06:07:06Z")

</div>

Hovering the map and getting the hover on the cartesian graph is definitely doable, see [my post here](https://community.plotly.com/t/programmatically-trigger-hover-events-with-dash/42443). It might be doable to have the reverse as well I have not tried it.

---

<div class="post-metadata">

**Author:** ![azureity](https://avatars.discourse-cdn.com/v4/letter/a/8797f3/32.png) [@azureity](https://community.plotly.com/u/azureity)\
**Post date:** [August 6, 2021, 2:33am UTC](https://community.plotly.com/t/coordinating-a-dash-line-chart-with-mapbox-graph/55308/3 "2021-08-06T02:33:22Z")

</div>

Thank you! That really helps and I’ve used your code to do what I had set out to do.

I’m now looking at how to do the reverse (metrics graph hover → mapbox hover). Would you have any leads on how to do this? I’ve looked at a bunch of previous community posts and codepens but I can’t find a way that utilizes Python- only pure JS. I reckon you would set `curveNumber` and `pointNumber` ([Hover Events | JavaScript | Plotly](https://plotly.com/javascript/hover-events/)) but I’m not sure what the first parameter in `Plotly.Fx.hover()` is. I keep getting the error `_uid is undefined` when I set the first parameter to the `id` of my Mapbox graph. I can’t find documentation on what each parameter means too.

---

<div class="post-metadata">

**Author:** ![RenaudLN](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/renaudln/32/9041_2.png) [@RenaudLN](https://community.plotly.com/u/RenaudLN)\
**Post date:** [August 6, 2021, 2:49am UTC](https://community.plotly.com/t/coordinating-a-dash-line-chart-with-mapbox-graph/55308/4 "2021-08-06T02:49:45Z")

</div>

Try this:

```python
Plotly.Fx.hover(graph_id, {curveNumber: curveNumber, pointNumber:pointNumber}, "mapbox")

```

---

<div class="post-metadata">

**Author:** ![azureity](https://avatars.discourse-cdn.com/v4/letter/a/8797f3/32.png) [@azureity](https://community.plotly.com/u/azureity)\
**Post date:** [August 6, 2021, 4:00am UTC](https://community.plotly.com/t/coordinating-a-dash-line-chart-with-mapbox-graph/55308/5 "2021-08-06T04:00:04Z")

</div>

It doesn’t seem to work. This is what it looks like:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/e/e63ebf1fd04aae54536e3c1ad61305f3c2f510a1.png)

This is my HTML layout:

```auto
    app.layout = html.Div(id="outer_div", children=[
        dcc.Markdown('\n'.join(loaded_files_markdown)),
        dcc.Checklist(
            id = "yaxes_selection",
            options = [{"label": x, "value": x} for x in yaxes],
            value = ["speed"],
            labelStyle={"display": "inline-block"}
        ),
        dcc.Dropdown(
            id = "xaxis_selection",
            options = [{"label": x, "value": x} for x in xaxes],
            value = ["rel_time"]
        ),
        dcc.Graph(id="metrics_graph"),
        html.P(id="yaxes_warning", children=["OK"]),
        dcc.Graph(id="mapbox_graph"),
        html.Div(id="metrics_dummy"),
        html.Div(id="mapbox_dummy")
    ])

```

This is my callback (I used 2 `hover`s just to see if any of them would work without having to reload):

```auto
    app.clientside_callback(
        """
        function(hoverData){
            var myPlot = document.getElementById("mapbox_graph")

            if (!myPlot.children[1]) {
                return window.dash_clientside.no_update
            }
            myPlot.children[1].id = "mapbox_js"

            if (hoverData) {
                console.log(hoverData)
                Plotly.Fx.hover("mapbox_graph", {curveNumber:1, pointNumber:100}, "mapbox_graph")
                Plotly.Fx.hover("mapbox_graph", {curveNumber:1, pointNumber:100}, "mapbox")
            }
            console.log("AAAA")
            return window.dash_clientside.no_update
        }
        """,
        Output("mapbox_dummy", "data-hover"),
        [Input("metrics_graph", "hoverData")],
    )

```

I hardcoded `curveNumber` and `pointNumber` just to see if it would work but nada. What’s the difference between argument 1 and argument 3?

---

<div class="post-metadata">

**Author:** ![RenaudLN](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/renaudln/32/9041_2.png) [@RenaudLN](https://community.plotly.com/u/RenaudLN)\
**Post date:** [August 6, 2021, 4:03am UTC](https://community.plotly.com/t/coordinating-a-dash-line-chart-with-mapbox-graph/55308/6 "2021-08-06T04:03:47Z")

</div>

The first argument should be `"mapbox_js" ` which is the one you define above.

The third argument is the type of graph you’re trying to hover on. The default value is `"xy"` for cartesian graphs.

---

<div class="post-metadata">

**Author:** ![azureity](https://avatars.discourse-cdn.com/v4/letter/a/8797f3/32.png) [@azureity](https://community.plotly.com/u/azureity)\
**Post date:** [August 6, 2021, 4:10am UTC](https://community.plotly.com/t/coordinating-a-dash-line-chart-with-mapbox-graph/55308/7 "2021-08-06T04:10:10Z")

</div>

That really helps! I could not figure out what that 3rd argument was. I must’ve missed that permutation 😛

I’m getting a different error:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/b/bc8c1463ca601913fe11a2c360bf1afd94755b59.png)

I’ll try to figure this one out. Looks like with your help, I’m at least getting closer to the intended behavior. Thank you very much!

---

<div class="post-metadata">

**Author:** ![schloe](https://avatars.discourse-cdn.com/v4/letter/s/48db29/32.png) [@schloe](https://community.plotly.com/u/schloe)\
**Post date:** [June 29, 2022, 8:15am UTC](https://community.plotly.com/t/coordinating-a-dash-line-chart-with-mapbox-graph/55308/8 "2022-06-29T08:15:36Z")

</div>

I found this thread almost a year later while running into the same problem…

The following unfortunately does not work on the map. It creates a single hover label and a some point but not the one specified with `pointNumber`.

```auto
Plotly.Fx.hover(graph_id, {curveNumber: curveNumber, pointNumber:pointNumber}, "mapbox")

```

With this, i.e. second arg as an array, i also get the error shown in the pic above (Invalid LngLat object)

```auto
Plotly.Fx.hover(graph_id, [{curveNumber: curveNumber, pointNumber:pointNumber}], "mapbox")

```

Anyone has a solution here?  
Unfortunately i cannot hover via xval/yval since my coords are not unique, so matching the point only via coords is not enough.