# How to connect scatter points from different traces?

**URL:** <https://community.plotly.com/t/how-to-connect-scatter-points-from-different-traces/60179>\
**Category:** 📊 Plotly Python\
**Tags:** tips-and-tricks\
**Created:** [January 18, 2022, 10:08am UTC](https://community.plotly.com/t/how-to-connect-scatter-points-from-different-traces/60179 "2022-01-18T10:08:37Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![dataturnsmeon](https://avatars.discourse-cdn.com/v4/letter/d/4af34b/32.png) [@dataturnsmeon](https://community.plotly.com/u/dataturnsmeon)\
**Post date:** [January 18, 2022, 10:08am UTC](https://community.plotly.com/t/how-to-connect-scatter-points-from-different-traces/60179/1 "2022-01-18T10:08:37Z")

</div>

Hello 🙂

I am trying to replicate the below plot using plotly.  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/4/c/4cb41a3a15cc318ff17b569c06f6ab241cf61a45.png)

I have plotted the data points as separate traces using `go.Scatter` but I am not sure how I can show the line connecting the three points as shown in above image. Check out my below code.

```auto
high = [5,3,8,6]
mid = [3.5,2,5.5,4]
low = [2,1,3,2]

x=[10,20,30,40]

fig = go.Figure()

fig.add_trace(go.Scatter(x=x, y=high, mode='markers', name='High', marker_color='#c92a52', marker_symbol='triangle-down', marker_size=15))
fig.add_trace(go.Scatter(x=x, y=mid, mode='markers', name='Mid', marker_color='black', marker_symbol='x-thin', marker_line_width=3))
fig.add_trace(go.Scatter(x=x, y=low, mode='markers', name='Low', marker_color='#4d70c9', marker_symbol='triangle-up', marker_size=15))

fig.update_layout(template='presentation')

fig.show()

```

Output:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/d/f/dfe7f520f6232a9c785fc90cce5a524a12f16d93.png)

How can I show the line connecting the three markers (High, Mid, Low) ? Thanks in advance !

---

<div class="post-metadata">

**Author:** ![jlfsjunior](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jlfsjunior/32/16061_2.png) [@jlfsjunior](https://community.plotly.com/u/jlfsjunior)\
**Post date:** [January 18, 2022, 12:10pm UTC](https://community.plotly.com/t/how-to-connect-scatter-points-from-different-traces/60179/2 "2022-01-18T12:10:03Z")

</div>

Hi,

It is not possible to connect points in different traces to my knowledge.

There are at least two alternatives: adding the vertical segments as an extra Scatter trace or as a shape. They are both covered in the examples [here](https://plotly.com/python/shapes/).

I would go with the first approach, by modifying the 2nd example in the link I just mentioned to make vertical lines instead of a triangle and a rectangle.

Hope that this helps!

---

<div class="post-metadata">

**Author:** ![dataturnsmeon](https://avatars.discourse-cdn.com/v4/letter/d/4af34b/32.png) [@dataturnsmeon](https://community.plotly.com/u/dataturnsmeon)\
**Post date:** [February 14, 2022, 5:05am UTC](https://community.plotly.com/t/how-to-connect-scatter-points-from-different-traces/60179/3 "2022-02-14T05:05:24Z")

</div>

Thanks @jlfsjunior, I’ll try out these suggestions 🙂

---

<div class="post-metadata">

**Author:** ![atharvakatre](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/atharvakatre/32/14713_2.png) [@atharvakatre](https://community.plotly.com/u/atharvakatre)\
**Post date:** [March 10, 2022, 10:53am UTC](https://community.plotly.com/t/how-to-connect-scatter-points-from-different-traces/60179/4 "2022-03-10T10:53:02Z")

</div>

Hi @dataturnsmeon,

Interesting question!

There is a workaround or hack 🧑‍🏭 to add those individual lines between separate traces.  
Those lines are nothing but very **thin bars with individual bases**.

Just add a bar trace in your existing code with the `base` set to the values in your `low` list and `y` will be difference between `high` and `low` as it represents the bar height. You can set the bar width to be more thinner than shown in the example below by setting a lower value.

```auto
high = [5,3,8,6]
mid = [3.5,2,5.5,4]
low = [2,1,3,2]

x=[10,20,30,40]

#calculating difference between high and low for setting bar height
diff = [h - l for h, l in zip(high, low)]

fig = go.Figure()

fig.add_trace(go.Scatter(x=x, y=high, mode='markers', name='High', marker_color='#c92a52', marker_symbol='triangle-down', marker_size=15))
fig.add_trace(go.Scatter(x=x, y=mid, mode='markers', name='Mid', marker_color='black', marker_symbol='x-thin', marker_line_width=3))
fig.add_trace(go.Scatter(x=x, y=low, mode='markers', name='Low', marker_color='#4d70c9', marker_symbol='triangle-up', marker_size=15))

# adding bar trace with base starting from values in low list, also setting the bar width very low
fig.add_trace(go.Bar(x=x, y=diff, base=low, width=0.01, marker_color='black', showlegend=False))

fig.update_layout(template='presentation')

fig.show()

```

 ![newplot](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/a/f/af920f17e321b9aedbb0f58944e7ebc330885a25.png)

---

<div class="post-metadata">

**Author:** ![dataturnsmeon](https://avatars.discourse-cdn.com/v4/letter/d/4af34b/32.png) [@dataturnsmeon](https://community.plotly.com/u/dataturnsmeon)\
**Post date:** [March 11, 2022, 8:04am UTC](https://community.plotly.com/t/how-to-connect-scatter-points-from-different-traces/60179/5 "2022-03-11T08:04:12Z")

</div>

Wow, just AMAZING @atharvakatre!

This works perfectly for my use-case.

Thanks for the help 🤌