---

title: Javascript Graphing Library uirevision with Plotly.react | Examples | Plotly

name: uirevision in Plotly.react

permalink: javascript/uirevision/

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

layout: user-guide

thumbnail: thumbnail/uirevision.gif

language: plotly_js

page_type: example_index

has_thumbnail: true

display_as: file_settings

order: 21

---

{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","uirevision" | sort: "order" %}

{% include auto_examples.html examples=examples %}

---

name: Persist User Changes

plot_url: https://codepen.io/plotly/embed/ebMJEW/?height=550&theme-id=15263&default-tab=result

language: plotly_js

suite: uirevision

order: 1

sitemap: false

arrangement: horizontal

display_as: basic

markdown_content: |

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: 'User Zoom Persists<br>When uirevision Unchanged',

uirevision:'true',

xaxis: {autorange: true},

yaxis: {autorange: true}

};

Plotly.react(graphDiv, data, layout);

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

var cnt = 0;

var interval = setInterval(function() {

data = data.map(new_data);

// user interation 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(graphDiv, data, layout);

if(cnt === 100) clearInterval(interval);

}, 2500);

---

name: Reset User Changes

plot_url: https://codepen.io/plotly/embed/REMrgv/?height=550&theme-id=15263&default-tab=result

language: plotly_js

suite: uirevision

order: 2

sitemap: false

arrangement: horizontal

display_as: basic

markdown_content: |

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: 'User Zoom Resets<br>When uirevision Changes',

uirevision:'true',

xaxis: {autorange: true},

yaxis: {autorange: true}

};

Plotly.react(graphDiv, data, layout);

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

var cnt = 0;

var interval = setInterval(function() {

data = data.map(new_data);

// user interation 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(graphDiv, data, layout);

if(cnt === 100) clearInterval(interval);

}, 2500);