Plotting lines+markers Angular JS

I have having issues plotting 2 line+marks traces.
This is the code:

simpleChart(temp, hum, time, data) {


  var trace1 = {
  x: time,
  y: hum,
  mode: 'lines+markers'

var trace2 = {
  mode: 'lines+markers'

//const lineDiv = document.getElementById('line-chart');
  //const element = this.el.nativeElement

  const datag = [trace1, trace2]

  const style = {
    margin: { t: 0 }
Plotly.plot('myDiv', datag, style);

Data from X and Y match but for some reason they are categorised in different traces.
2 Lines+marks are desired, if I change the mode to Lines the graph appears empty.

That’s correct. Line traces with only a single point won’t show up (you can’t draw a line with a single point).

You should try to concatenate your data arrays into a coordinate arrays of more than one value.

any tips on how to do that considering the code I provided ?

Judging by the number of traces, looks like you’re calling your simpleChart more than once, correct?

If so, something like:

var x = [];
var y0 = [];
var y1 = [];

for (var i = 0; i < N; i++) {
  x = x.concat(time);
  y0 = y0.concat(hum);
  y1 = y1.concat(temp);

Plotly.plot(lineDiv, [{
  x: x,
  y: y0
}, {
  x: x,
  y: y1

should get you close.

No, its just that Data is coming from multiple documents so plotly does not join them.
Still having issues while trying your solution, cannot resolve ‘N’ .

That would be the number of documents in your case.