CODEWITHSUNDEEP
javascriptplotly.js
David
David

Reputation: 33

Dynamically Toggle Visibility of Shapes in Plotly.js

I am creating an array of plotly.js shapes which work great. I have added a custom data attribute of 'custType' : '1' or 'custType' : '2' based on the type of shape. The number of each shape type will not be consistent so I need to be able to update the visibility dynamically.

I have tried this... to no avail

var update = [];
for(x=0; x<data.layout.shapes.length; x++){
        if(data.layout.shapes[x].custType == '1'){
                    update.push({'shapes[' + x + '].visible':false})
            }               
}
                
Plotly.relayout('main', update);

Upvotes: 2

Views: 1583

Answers (1)

mit
mit

Reputation: 1340

update has to be an object instead of an array, like

{
  "shapes[0].visible": false,
  "shapes[1].visible": false
}

See the snippet below.

const trace = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  type: 'scatter'
};

const data = [trace];

const layout = {
    shapes: [
        {
            type: 'rect',
            x0: 1,
            x1: 2,
            y0: 10,
            y1: 12,
            fillcolor: '#d3d3d3',
            line: {
                width: 0
            }
        },
        {
            type: 'rect',
            x0: 3,
            x1: 4,
            y0: 12,
            y1: 14,
            fillcolor: '#d3d3d3',
            line: {
                width: 0
            }
        }
    ]
}

Plotly.newPlot('myDiv', data, layout);

function update() {
  const update = {};
  for(let i = 0; i < layout.shapes.length; i++){
    update['shapes[' + i + '].visible'] = false;
  }
  Plotly.relayout('myDiv', update); 
}
<head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
  <button type="button" onClick="update()">Update</button>
</body>

Upvotes: 3

Related Questions