| CARVIEW |
Select Language
HTTP/2 200
accept-ranges: bytes
access-control-allow-origin: *
age: 0
cache-control: max-age=600
content-encoding: gzip
content-type: text/html; charset=utf-8
date: Wed, 30 Jul 2025 18:52:41 GMT
etag: W/"687e6266-7723"
expires: Wed, 30 Jul 2025 18:34:44 GMT
last-modified: Mon, 21 Jul 2025 15:53:10 GMT
server: Vercel
strict-transport-security: max-age=63072000
vary: Accept-Encoding
via: 1.1 varnish
x-cache: HIT
x-cache-hits: 0
x-fastly-request-id: 1f3e813c349d897f1a61882a7b2c86bdc676acfe
x-github-request-id: DCDF:13BDA9:43DA2:4CEA6:688A636A
x-origin-cache: HIT
x-proxy-cache: MISS
x-robots-tag: index
x-served-by: cache-bom-vanm7210020-BOM
x-timer: S1753901561.810066,VS0,VE206
x-vercel-cache: MISS
x-vercel-id: bom1::2jllp-1753901560788-57925ab2f774
content-length: 7882
Uirevision in plotly.react in JavaScript
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.
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);
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);