Plotly.js: update text of each node using restyle

Question

Is it possible to update the text inside the treemap plot using restyle function? I know it's possible via 'react' function, but this function will redraw the entire diagram (I don't want this to happen). This what I have so far: https://codepen.io/elv1s42/pen/yLydprX

var labels = ["P1", "P2", "P3", "P4"]; 
var parents = ["", "P1", "P1", "P2"];
var data = [{
      type: "treemap",
      labels: labels,
      parents: parents,
      marker: { colors: ['green', 'blue', 'red', 'yellow']},
      text: ['text1', 'text2', 'text3<br>text3', 'text4'],
      textinfo: "label text"
    }];
var layout = {};
Plotly.newPlot('myDiv', data, layout)
function changeText(){
    var upd = { 
      marker: {colors: ['white', 'orange', 'green', 'red']},
      //text: ['t1', 't2', 't3', 't4'] // how to update the text?
    };
    Plotly.restyle('myDiv', upd);
}

<head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
  <button onclick='changeText()'>Change my plot!</button>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

Evgenii Kosiakov · Accepted Answer · 2020-02-03 07:55:21Z

2

I don't like answering my own questions, but the issue was resolved by https://github.com/etpinard from GitHub here: https://github.com/plotly/plotly.js/issues/4535

So the working solution is to use nested arrays for the text field:

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

The CodePen example from the question is fixed now.

answered Feb 3, 2020 at 7:55

Evgenii Kosiakov

63512 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Plotly.js: update text of each node using restyle

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related