Plotly.js: Update treemap text for each node

[elv1s42]

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.

[archmoj]

Seems like a bug to me.
@etpinard what do you think?

[etpinard]

Do you have a codepen showing the problem @archmoj ?

[archmoj]

@etpinard here is demo using sunburst.

[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.

[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]

For more info on our restyle/update call signature, please refer to https://plot.ly/javascript/plotlyjs-function-reference/#plotlyrestyle

[elv1s42]

Hi @etpinard!
Thank you very much, using nested array did the trick.
This is my treemap which is working fine now: https://codepen.io/elv1s42/pen/yLydprX