Unbind click event

[caalberts]

Hi, I have a single page application which contains a plotly chart with click event handler in it. I have another function which removes the chart and plot a new chart after certain events.

Plotly.newPlot(plotSpace, data, layout)
plotSpace.on('plotly_click', click => {
  listAllTransactions(town, click.points[0].data.name, click.points[0].x)
})

Each time the plot is replaced with a new one, the event handler from the previous chart is carried over to the new chart, so a click on the new chart will trigger listAllTransactions twice: first with town from the first chart and second with town from the second chart.

How can I remove the event handler from the first chart? I've tried removeEventHandler to no avail.

[caalberts]

A workaround I used was to completely remove plotSpace before recreating it for the new plot, thus removing the previous event listener.

Appreciate if anyone has a more elegant solution

[etpinard]

@caalberts Thanks for writing in.

I'd vote for making Plotly.newPlot unbind all events from the graph div (plotSpace in your case).

@mdtusz @alexcjohnson @cldougl thoughts?

[mdtusz]

👍 Plotly.newPlot should be fresh.

[cldougl]

👍 sounds like a good idea

[mdtusz]

@caalberts should be in the next release after this pr: #117

[caalberts]

👌 looking forward to it.

[mdtusz]

Fixed in #117

[chriddyp]

Is there any other way to remove or rebind existing handlers without calling newPlot? This issue was the first hit in a google search. Also this stack overflow question is linking here: http://stackoverflow.com/questions/37372193/unbind-click-events-in-plotly

[alexcjohnson]

I don't see that we document or test this anywhere, but we do support removeListener and removeAllListeners from the npm events module:

function logIt(e) { console.log(e) }

gd.on('plotly_relayout', logIt)

Plotly.relayout(gd, {'xaxis.range': [-1,5]})
// here the listener is invoked
> Object {xaxis.range: Array[2]}
> Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: div#graph.dashboard-plot.js-plotly-plot}

gd.removeListener('plotly_relayout', logIt)

Plotly.relayout(gd, {'xaxis.range': [-2,6]})
// now the listener is not invoked
> Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: div#graph.dashboard-plot.js-plotly-plot}