Update treemap text for each node

Hello!

I’m working with the treemap diagram and I need to update color and text for each node without re-drawing the entire diagram. I only was able to update the color and I’m not sure how to update the text. This is my CodePen example: https://codepen.io/elv1s42/pen/yLydprX

I’ve tried both update and restyle functions and read the documentation here: https://plot.ly/javascript/plotlyjs-function-reference/#plotlyreact but didn’t find the examples of how text can be updated.

    var upd = { 
      marker: {colors: ['white', 'orange', 'green', 'red']},
      text: ['t1', 't2', 't3', 't4'] // how to update the text?
    };
    Plotly.update('myDiv', upd);
    //Plotly.restyle('myDiv', upd);

Please help me to resolve the issue. Thank you.

[etpinard]

So @elv1s42

    var upd = { 
      marker: {colors: ['white', 'orange', 'green', 'red']}, // N.B. here you're replacing all of `marker`, no need to nest
      text: [['t1', 't2', 't3', 't4']] // N.B. nested array
    };
    Plotly.update('myDiv', upd);
    //Plotly.restyle('myDiv', upd);

should work.

---

To improve performance, I suggest calling

    var upd = { 
      'marker.colors': [['white', 'orange', 'green', 'red']],
      text: [['t1', 't2', 't3', 't4']]
    };
    Plotly.update('myDiv', upd);
    //Plotly.restyle('myDiv', upd);

that way, you only update the marker colors and the text (as opposed to all the marker attributes and the text).

[etpinard]

Here’s a working version: https://codepen.io/etpinard/pen/BaygOXo?editors=0010

Remember that the outer array in restyle/update calls maps to trace indices and the inner array maps to data indices.