Unbind click event

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.

[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}