CODEWITHSUNDEEP
plotly
Jan Krakora
Jan Krakora

Reputation: 2610

Change visibility of a shape in Plotly

How can I change visibility of a shape? Let's say I have 5 shapes in my plot and I would like to hide the first one.

var update = {
    'shapes[0]': {
        'visible': false
    }
}
Plotly.relayout(graphElement, update);

I tried this, but it creates a new (invisible shape) and put it at the beginning of shapes instead of update.

Upvotes: 0

Views: 3755

Answers (1)

Naren Murali
Naren Murali

Reputation: 56755

You almost had it, as per the function reference in Plotly.js Function Reference, object properties should we written as below.

// update only values within nested objects
var update = {
    title: 'some new title', // updates the title
    'xaxis.range': [0, 5],   // updates the xaxis range
    'yaxis.range[1]': 15     // updates the end of the yaxis range
};
Plotly.relayout(graphDiv, update)

As you can see there is never a depth greater than 1. So we need to update that particular shape like so.

var update = {
    'shapes[1].visible': false
}
Plotly.relayout(div, update);

Here we select the first object of the array shapes, select the visible property and set the value to false.

Please refer the below working example and let know if your issue is resolved completely.

var d3 = Plotly.d3

function normal_array(mean, stddev, size) {
  var arr = new Array(size),
    i;
  // from https://bl.ocks.org/nrabinowitz/2034281
  var generator = (function() {
    return d3.random.normal(mean, stddev);
  }());

  for (i = 0; i < arr.length; i++) {
    arr[i] = generator();
  }
  return arr;
}

var x0 = normal_array(2, 0.45, 300);
var y0 = normal_array(2, 0.45, 300);

var x1 = normal_array(6, 0.4, 200);
var y1 = normal_array(6, 0.4, 200)

var x2 = normal_array(4, 0.3, 200);
var y2 = normal_array(4, 0.3, 200);


var data = [{
  x: x0,
  y: y0,
  mode: 'markers'
}, {
  x: x1,
  y: y1,
  mode: 'markers'
}, {
  x: x2,
  y: y2,
  mode: 'markers'
}, {
  x: x1,
  y: y0,
  mode: 'markers'
}];

var layout = {
  margin: {
    t: 10,
    r: 10,
    b: 20,
    l: 10
  },
  shapes: [{
      type: 'circle',
      xref: 'x',
      yref: 'y',
      x0: d3.min(x0),
      y0: d3.min(y0),
      x1: d3.max(x0),
      y1: d3.max(y0),
      opacity: 0.2,
      fillcolor: 'blue',
      line: {
        color: 'blue'
      }
    },
    {
      type: 'circle',
      xref: 'x',
      yref: 'y',
      x0: d3.min(x1),
      y0: d3.min(y1),
      x1: d3.max(x1),
      y1: d3.max(y1),
      opacity: 0.2,
      fillcolor: 'orange',
      line: {
        color: 'orange'
      }
    },
    {
      type: 'circle',
      xref: 'x',
      yref: 'y',
      x0: d3.min(x2),
      y0: d3.min(y2),
      x1: d3.max(x2),
      y1: d3.max(y2),
      opacity: 0.2,
      fillcolor: 'green',
      line: {
        color: 'green'
      }
    },
    {
      type: 'circle',
      xref: 'x',
      yref: 'y',
      x0: d3.min(x1),
      y0: d3.min(y0),
      x1: d3.max(x1),
      y1: d3.max(y0),
      opacity: 0.2,
      fillcolor: 'red',
      line: {
        color: 'red'
      }
    }
  ],
  height: 400,
  width: 480,
  showlegend: false
}

Plotly.newPlot('myDiv', data, layout);
$('.toggle').on("click", function(e) {
  e.preventDefault();
  var div = document.getElementById('myDiv');
  var update = {
    'shapes[1].visible': false
  }
  Plotly.relayout(div, update);
});
.toggle {
  position: fixed;
  top: 0px;
  left: 0px;
}
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>

  <div id="myDiv" style="width: 480px; height: 400px;">
    <!-- Plotly chart will be drawn inside this DIV -->
  </div>
  <button class="toggle">Hide First Trace</button>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>

Upvotes: 1

Related Questions