uirevision in Plotly.react in JavaScript

Persist user interactions using uirevision with Plotly.react or Dash.

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.

Persist User Changes

Adding a uirevision attribute and then keeping it the same during the next call to Plotly.react ensures that user interactions persist.

const rand = () => Math.random();
var x = [1, 2, 3, 4, 5];
const new_data = (trace) => Object.assign(trace, {y: x.map(rand)});

// add random data to three line traces
var data = [
	{mode:'lines', line: {color: "#b55400"}},
	{mode: 'lines', line: {color: "#393e46"}},
	{mode: 'lines', line: {color: "#222831"}}
].map(new_data);

var layout = {
	title: {text: 'User Zoom Persists<br>When uirevision Unchanged'},
	uirevision:'true',
	xaxis: {autorange: true},
	yaxis: {autorange: true}
};

Plotly.react('myDiv', data, layout);

var myPlot = document.getElementById('myDiv');

var cnt = 0;
var interval = setInterval(function() {
	data = data.map(new_data);

	// user interaction will mutate layout and set autorange to false
	// so we need to reset it to true
	layout.xaxis.autorange = true;
	layout.yaxis.autorange = true;

	// not changing uirevision will ensure that user interactions are unchanged
	// layout.uirevision = rand();

	Plotly.react('myDiv', data, layout);
	if(cnt === 100) clearInterval(interval);
}, 2500);
 Click to copy

Reset User Changes

Changing the uirevision attribute during a Plotly.react call will reset previous user interactions in the updated plot.

const rand = () => Math.random();
var x = [1, 2, 3, 4, 5];
const new_data = (trace) => Object.assign(trace, {y: x.map(rand)});

// add random data to three line traces
var data = [
	{mode:'lines', line: {color: "#b55400"}},
	{mode: 'lines', line: {color: "#393e46"}},
	{mode: 'lines', line: {color: "#222831"}}
].map(new_data);

var layout = {
	title: {text: 'User Zoom Resets<br>When uirevision Changes'},
	uirevision:'true',
	xaxis: {autorange: true},
	yaxis: {autorange: true}
};

Plotly.react('myDiv', data, layout);

var myPlot = document.getElementById('myDiv');

var cnt = 0;
var interval = setInterval(function() {
	data = data.map(new_data);

	// user interaction will mutate layout and set autorange to false
	// so we need to reset it to true
	layout.xaxis.autorange = true;
	layout.yaxis.autorange = true;

	// a new random number should ensure that uirevision will be different
	// and so the graph will autorange after the Plotly.react
	layout.uirevision = rand();

	Plotly.react('myDiv', data, layout);
  if(cnt === 100) clearInterval(interval);
}, 2500); Click to copy