How to update the data of the second axes plotly javascript?

Question

Here is the code:

var trace1 = {
  x: [1, 2, 3],
  y: [40, 50, 60],
  name: 'yaxis data',
  type: 'scatter'
};

var trace2 = {
  x: [2, 3, 4],
  y: [4, 5, 6],
  name: 'yaxis2 data',
  yaxis: 'y2',
  type: 'scatter'
};

var data = [trace1, trace2];

var layout = {
  title: 'Double Y Axis Example',
  yaxis: {title: 'yaxis title'},
  yaxis2: {
    title: 'yaxis2 title',
    titlefont: {color: 'rgb(148, 103, 189)'},
    tickfont: {color: 'rgb(148, 103, 189)'},
    overlaying: 'y',
    side: 'right'
  }
};

Plotly.newPlot('myDiv', data, layout);

<head><script src="https://cdn.plot.ly/plotly-latest.min.js"></script></head>
<div id="myDiv"></div>

I just want to update the data on the second axes yaxis2. I want to avoid the data redundancy, hence I do not want to forward the other data.

Please let me know what I can do.

Is there no one who can help me with the javascript queries? I had different queries but none replied to them. Even this query is still not active I guess. Please I request you all to help me with this at least. — Jaffer Wilson
– Jaffer Wilson, Commented Mar 25, 2020 at 10:30
Are you trying to change trace2 to something else, and re-plotting the data, while not replotting the data in trace1? — Kevin Bai
– Kevin Bai, Commented Mar 25, 2020 at 14:16
@KevinBai Yes. And I do not want to pass the trace1 next time once I have plotted it. — Jaffer Wilson
– Jaffer Wilson, Commented Mar 25, 2020 at 14:20
looking at plot.ly's documentation, Plot.react plotly.com/javascript/plotlyjs-function-reference/#plotlyreact allows you to update by passing in a new array and doing a diff (so it won't redraw unchanged data). You could also use Plot.removeTrace then, Plot.addTrace to remove the data and readd it. — Kevin Bai
– Kevin Bai, Commented Mar 25, 2020 at 15:37
@KevinBai Thank you for the reference,but can you show it to me how it will work in my case? If possible then please use my example and give a demo as answer. It will help everyone who is visiting this question. — Jaffer Wilson
– Jaffer Wilson, Commented Mar 25, 2020 at 15:45

Kevin Bai · Accepted Answer · 2020-03-25 16:04:10Z

What you're looking for is Plotly.react, or Plotly.addTraces/Plotly.deleteTraces. Here are the docs.

In order to update the data, you can't mutate the data. You need to create a new immutable instance of the data (reference).

So you can either make a copy of data and by:

Plotly.react('myDiv', data.map((trace, i) => {
  if (i != 1) return trace;
  return <new trace>
})

Or, you could remove a trace and re-add it:

const newTrace = {...} // some trace object
Plotly.deleteTraces('myDiv', 1); // remove at index 1
Plotly.addTraces('myDiv', newTrace);

Below is an example of updating the plot after a 1 second timeout:

var trace1 = {
  x: [1, 2, 3],
  y: [40, 50, 60],
  name: 'yaxis data',
  type: 'scatter'
};

var trace2 = {
  x: [2, 3, 4],
  y: [4, 5, 6],
  name: 'yaxis2 data',
  yaxis: 'y2',
  type: 'scatter'
};

var data = [trace1, trace2];

var layout = {
  title: 'Double Y Axis Example',
  yaxis: {title: 'yaxis title'},
  yaxis2: {
    title: 'yaxis2 title',
    titlefont: {color: 'rgb(148, 103, 189)'},
    tickfont: {color: 'rgb(148, 103, 189)'},
    overlaying: 'y',
    side: 'right'
  }
};

Plotly.newPlot('myDiv', data, layout);

setTimeout(() => {
  const newTrace = {
    x: [2, 3, 4],
    y: [4, 10, 20],
    name: 'yaxis2 data',
    yaxis: 'y2',
    type: 'scatter'
  }
  // delete the second trace (index 1) or delete multiple traces with Plotly.deleteTraces('myDiv', [0,1])
  Plotly.deleteTraces('myDiv', 1); 
  // add a new trace
  Plotly.addTraces('myDiv', newTrace);
}, 1000)

<head><script src="https://cdn.plot.ly/plotly-latest.min.js"></script></head>
<div id="myDiv"></div>

Thank you .. I will try it later. But I guess this is what will be helpful.

Collectives™ on Stack Overflow

How to update the data of the second axes plotly javascript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related