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

Question

Is it possible to update the x and y properties of a trace using Plotly.update()?

Updating the marker.color property of the trace works well. But when I try updating the x or y properties the trace disappears from the graph. And there is no indication that something went wrong in the console. I would like to update the values by trace index and the update function looks like the right tool.

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.

Running example:

(codepen example here)

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

let trace = {
  type: 'scatter',
  x: [0.5 * 255],
  y: [0.5 * 255],
  hoverinfo: "skip",
  mode: 'markers',
  marker: {color: "DarkSlateGrey", size: 20},
};

let layout = {
  title: "The Worm Hole",
  yaxis: { range: [0, 255] },
  xaxis: { range: [0, 255] },
};

let config = {responsive: true};

Plotly.newPlot(myPlot, [trace], layout, config);

function updateGraphPoint(cmd) {
  let x = Math.random() * 255;
  let y = Math.random() * 255;
  let z = Math.random() * 255;
  let update = null;
  if (cmd === "color") {
    update = {'marker.color': `rgb(${x}, ${y}, ${z})`};
  } else if (cmd === "position") {
    update = {'x': [x], 'y': [y]};
  }
  Plotly.update(myPlot, update, {}, [0]);
}

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<button onclick="updateGraphPoint('color')">Change my color!</button>
<button onclick="updateGraphPoint('position')">Change my position!</button>
<div id="graph"></div>

Note: I also asked this question on the the plotly community forum but have not gotten any responses. Maybe someone here knows.

Answer 1

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]]};

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

let trace = {
  type: 'scatter',
  x: [0.5 * 255],
  y: [0.5 * 255],
  hoverinfo: "skip",
  mode: 'markers',
  marker: {color: "DarkSlateGrey", size: 20},
};

let layout = {
  title: "The Worm Hole",
  yaxis: { range: [0, 255] },
  xaxis: { range: [0, 255] },
};

let config = {responsive: true};

Plotly.newPlot(myPlot, [trace], layout, config);

function updateGraphPoint(cmd) {
  let x = Math.random() * 255;
  let y = Math.random() * 255;
  let z = Math.random() * 255;
  let update = null;
  if (cmd === "color") {
    update = {'marker.color': `rgb(${x}, ${y}, ${z})`};
  } else if (cmd === "position") {
    update = {'x': [[x]], 'y': [[y]]};
  }
  Plotly.update(myPlot, update, {}, [0]);
}

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<button onclick="updateGraphPoint('color')">Change my color!</button>
<button onclick="updateGraphPoint('position')">Change my position!</button>
<div id="graph"></div>