Remove all traces from plotly.js plot

Question

I have a page containing a plot.ly plot, that I want to write data to a few times, overwriting what was there before.

I can't find a way to remove all traces from my plotly.js plot, and just replotting adds the data without removing the old.

score 18 · Answer 1 · edited Oct 10 '19 at 20:27

18

There's two ways of doing this, both listing in the plotlyjs function reference page.

Option 1 (tell plotly to delete the trace(s) in question):

Plotly.deleteTraces(graphDiv, 0);

where the second argument is the trace index of the trace to delete. Note that this second argument can also be an array of indices allowing you to delete multiple traces at once.

Option 2 (tell plotly to make a new plot with new data):

 Plotly.newPlot(graphDiv, data, layout);

where the arguments are the same as for Plotly.plot. This creates a new plot drawing only the data sent in the second argument. More precisely, Plotly.newPlot is idempotent whereas Plotly.plot isn't.

edited Oct 10 '19 at 20:27

Abhilash Chandran

6,803
3
32
50

answered Aug 13 '15 at 02:19

etpinard

4,756
1
20
26

Thanks. I had seen deleteTraces, but I have a variable number of traces on the plot, so couldn't see an easy way to populate the trace index array. Also, I had tried `newPlot` in place of `plot`, but the traces are still being added, rather than replaced, and the plot title isn't updated. Does `newPlot` spawn a new plot, or remove all and add the new traces? Trying to work out what's going wrong – Ian Aug 13 '15 at 14:38
Regarding `newPlot`, there was a bug with it that affected call signatures that use a string id as the first argument. The updated version will be pushed soon. We apologize for the inconvenience. In the meantime, `Plotly.newPlot(document.getElementById('plot-id'), data, layout) should work. – etpinard Aug 13 '15 at 17:10
That link is dead – user2023861 May 03 '19 at 20:22
Option 1 doesn't work.. only removes one trace. even if you remove all traces, still leaves titles etc. use option 2 – Michael Dausmann Oct 13 '20 at 03:56

score 4 · Answer 2 · answered May 15 '18 at 13:57

4

you can remove the last trace, and the previous one, and so one until the last one :

while(graphDiv.data.length>0)
{
      Plotly.deleteTraces(graphDiv, [0]);
}

answered May 15 '18 at 13:57

Pierre GUILLAUME

450
3
24

better but does not remove titles and axes etc.. use newPlot as above – Michael Dausmann Oct 13 '20 at 03:56

score 0 · Answer 3 · answered Dec 11 '19 at 12:37

Cleaning up the chart is not enough, you must also cleanup the data too.

This is how I plot my scatter chart:

function tracciaGrafico() {
    data = [];
    trace = [];
    indexTrace = 0;

    // Cleanup only if not first start (else it is already clean, and this would raise an error):
    if (FirstStart) {
        FirstStart = false;
    } else { // Clear chart before plotting if it has already peing plotted.
        Plotly.deleteTraces('myDiv', clearData);
        clearData = [];
    }


    Squadre.forEach(function(squadra) {
        trace[indexTrace] = puntiSquadraCumulativi[squadra]; // Copy trace data from my source array
        data.push(
            {
                x: xArray, 
                y: puntiSquadraCumulativi[squadra], 
                type: "scatter", 
                name: squadra, // from "forEach"
                line: {width: 5}
            }
        ); // Add trace to data array
        clearData.push(indexTrace); // Add trace index to array I will use to clean the old chart
        indexTrace++;
    });
    Plotly.newPlot('myDiv', data); // Plot data
}

While building the chart I build an array (clearData) which then I can use to clear the chart: it just containing all the indexes of all the traces, and it is the argument of Plotly.deleteTraces('myDiv', clearData);

But maybe you actually don't want to delete traces but just update them:

https://plot.ly/javascript/plotlyjs-function-reference/#plotlyupdate

Plotly update data

High performance way to update graph with new data in Plotly?