# Connect Different Traces Dots

**URL:** <https://community.plotly.com/t/connect-different-traces-dots/7984>\
**Category:** plotly.js\
**Created:** [January 26, 2018, 2:17pm UTC](https://community.plotly.com/t/connect-different-traces-dots/7984 "2018-01-26T14:17:47Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![darkeh](https://avatars.discourse-cdn.com/v4/letter/d/f4b2a3/32.png) [@darkeh](https://community.plotly.com/u/darkeh)\
**Post date:** [January 26, 2018, 2:17pm UTC](https://community.plotly.com/t/connect-different-traces-dots/7984/1 "2018-01-26T14:17:47Z")

</div>

Hi community,  
Wondering if you could help me.  
I have incoming data from multiple documents and I am using plotly to graph them. I would like to see it as a line graph but it shows as dots, probably because it is coming from different documents.

My js part:  
simpleChart(data) {

const element = this.el.nativeElement

const data = [{  
x: [data.time] ,  
y: [data.Temperature]

}]

const style = {  
margin: { t: 0 }  
}  
Plotly.plot(element, data, style);  
}

 ![43](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/1/16e8eea75dba1b0433548451e55fb4c437ac044e.png)

This is probably more a js issue rather than plotly but would love to have some help.

Best Regards

---

<div class="post-metadata">

**Author:** ![lennyk](https://avatars.discourse-cdn.com/v4/letter/l/cab0a1/32.png) [@lennyk](https://community.plotly.com/u/lennyk)\
**Post date:** [January 28, 2018, 10:21am UTC](https://community.plotly.com/t/connect-different-traces-dots/7984/2 "2018-01-28T10:21:56Z")

</div>

Add mode: ‘lines’ into the data

---

<div class="post-metadata">

**Author:** ![darkeh](https://avatars.discourse-cdn.com/v4/letter/d/f4b2a3/32.png) [@darkeh](https://community.plotly.com/u/darkeh)\
**Post date:** [January 29, 2018, 3:10pm UTC](https://community.plotly.com/t/connect-different-traces-dots/7984/3 "2018-01-29T15:10:12Z")

</div>

> [@lennyk](#):
>
> mode: ‘lines’

the traces disappear if I had that ☹

---

<div class="post-metadata">

**Author:** ![darkeh](https://avatars.discourse-cdn.com/v4/letter/d/f4b2a3/32.png) [@darkeh](https://community.plotly.com/u/darkeh)\
**Post date:** [January 29, 2018, 4:18pm UTC](https://community.plotly.com/t/connect-different-traces-dots/7984/4 "2018-01-29T16:18:29Z")

</div>

It acts as if each element inside the array is one individual trace. But I want the temperature array to be one trace…

---

<div class="post-metadata">

**Author:** ![lennyk](https://avatars.discourse-cdn.com/v4/letter/l/cab0a1/32.png) [@lennyk](https://community.plotly.com/u/lennyk)\
**Post date:** [January 29, 2018, 7:01pm UTC](https://community.plotly.com/t/connect-different-traces-dots/7984/5 "2018-01-29T19:01:40Z")

</div>

So you want 1 single line graph of temperatures ? what way is data.temperature structured

---

<div class="post-metadata">

**Author:** ![darkeh](https://avatars.discourse-cdn.com/v4/letter/d/f4b2a3/32.png) [@darkeh](https://community.plotly.com/u/darkeh)\
**Post date:** [January 30, 2018, 12:48pm UTC](https://community.plotly.com/t/connect-different-traces-dots/7984/6 "2018-01-30T12:48:20Z")

</div>

Data.temperature comes from a google database firestore and it is mapped by map()

---

<div class="post-metadata">

**Author:** ![darkeh](https://avatars.discourse-cdn.com/v4/letter/d/f4b2a3/32.png) [@darkeh](https://community.plotly.com/u/darkeh)\
**Post date:** [February 5, 2018, 4:55pm UTC](https://community.plotly.com/t/connect-different-traces-dots/7984/7 "2018-02-05T16:55:30Z")

</div>

When changing the data to mode: lines  
Data is found but not plotted

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

---

<div class="post-metadata">

**Author:** ![MQDev](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mqdev/32/15669_2.png) [@MQDev](https://community.plotly.com/u/MQDev)\
**Post date:** [September 21, 2021, 3:49pm UTC](https://community.plotly.com/t/connect-different-traces-dots/7984/8 "2021-09-21T15:49:16Z")

</div>

Have you already tried:  
`mode: 'lines+markers'` ?

I think it can help you.