How to unmount (remove, destroy) a plotly chart and its Plotly instance object

plotly.js
1

Making a React.js wrapper for Plotly, I’d like to explicitly destroy the instance when a React component is about to be unmounted.

Is there a way to do so?
I have only found Plotly methods to update its content, but not to unmount / destroy.

Please advise.

2

Plotly.purge(/* graph element or graph id */); should do the trick.

2 Likes
3

Thanks, do you mind adding this to the documentation?

Also, what is a graph ID?

4

All Plotly methods have for first argument either the div element of the plotly graph or its id. So,

<div id="graph"></div>

<script>
var graph = document.getElementById('graph')
Plotly.plot(graph, data, layout);

// is equivalent to 

Plotly.plot('graph', data, layout);

// and similarly for e.g.

Plotly.purge('graph');
</script>
5

Thanks for the headsup. I just created a ticket on the plotly documentation repo: Add info about new `Plotly` methods to reference page · Issue #395 · plotly/documentation · GitHub

Don’t hesitate to create your own ticker on the plotly documentation repo if you notice any missing / confusing docs.

1 Like
6

So, it is not Graph’s ID, it the ID of its DOM element container, to be precise with terminology.

1 Like
7

If by graph, you mean the <svg> part, than, yes, you’d be correct.

But all interactive plotly graphs are structured as:

<div>  <!-- the gd -->
  <svg></svg>  <!-- top svg element that contains cartesian axes -->
  <div></div> <!-- WebGL container that contains the <canvas> nodes required for 3D graphs -->
  <svg></svg>  <!-- bottom svg element that contains plot info like title, legends ... -->
</div>

So we can’t associated a plotly graph with one <svg> element.

1 Like