✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Multiple extendTraces calls cause axis data to mix

I am trying to extend the traces of 3 different graphs, I am using Plotly.extendTraces.

Below is my implementation:

Plotly.extendTraces(altitudeGraph, dataForGraph(result, 'altitudeGraph'), [0])
Plotly.extendTraces(temperatureGraph, dataForGraph(result, 'temperatureGraph'), [0]);
Plotly.extendTraces(pressureGraph, dataForGraph(result, 'pressureGraph'), [0]);

This results in the 3 graphs containing the same axis data. I have added a screenshot of what occurs.

I believe this is because Plotly.extendTraces returns a Promise. As a work around, I have tried chaining the three calls using the .then callback.

Plotly.extendTraces(altitudeGraph, dataForGraph(result, 'altitudeGraph'), [0]).then(function() {
                        debugger
			Plotly.extendTraces(temperatureGraph, dataForGraph(result, 'temperatureGraph'), [0]).then(function() {
				Plotly.extendTraces(pressureGraph, dataForGraph(result, 'pressureGraph'), [0]);
			})
		})

However, this resulted in the same issue.

I also added a debugger as seen above to see if the graph is correctly updated. This also resulted in the same issue.

Would anybody have a solution for this bug?