Update 'x' and 'y' values of a trace using Plotly.update()

plotly.js
1

Is it possible to update the ‘x’ and ‘y’ values of a trace using the Plotly.update function?

Codpen example here: https://codepen.io/jjengland/pen/BaNrKye

let myPlot = document.getElementById("graph");

// set up plot here...

function updateGraphPoint() {
  let x = Math.random() * 255;
  let y = Math.random() * 255;
  let z = Math.random() * 255;
  console.log(`x=${x} y=${y} z=${z}`);
  // let update = {'x': [x], 'y': [y]};
  let update = {'marker.color': `rgb(${x}, ${y}, ${z})`};
  Plotly.update(myPlot, update, {}, [0]);
}

The example works as shown. But when I switch which let update = ... line is commented out, the trace I’m trying to update disappears from the graph. And there is no indication that something went wrong in the console. How would I update the ‘x’ and ‘y’ of the trace?

I have it set up this way because I need to update the values of ‘x’ and ‘y’ by trace index in my real application.


Update: There may be a clue in the documentation for Plotly.react():

Important Note: In order to use this method to plot new items in arrays under data such as x or marker.color etc, these items must either have been added immutably (i.e. the identity of the parent array must have changed) or the value of layout.datarevision must have changed.

Though this may the complete unrelated because I am able to update marker.color using Plotly.update() without bumping the layout.datarevision.

2

Answered on StackOverflow here: javascript - Update ‘x’ and ‘y’ values of a trace using Plotly.update() - Stack Overflow

The data update object accepts an array containing an array of new x / y values for each trace you want to update. I.e. if you only want to update one trace, you still have to provide an array containing an array for that one trace: update = {'x': [[x]], 'y': [[y]]};

1 Like