search

plotly / plotly.js

Open-source JavaScript charting library behind Plotly and Dash
https://plotly.com/javascript/
MIT License
16.73k stars 1.83k forks source link

Range slider updating: plots inside range slider are not updated #5931

Open drevenmarko opened 2 years ago

drevenmarko commented 2 years ago

If we use the example with subplots: Stacked Subplots with a Shared X-Axis -> click Then we enable range slider and add few updates with Plotly.react() after 3s. Codepen example with the issue -> click

As you can see in the example plots are not updated in the range slider. Old plots stay in place and only sometimes gets updated (like in the end with only one subplot). Possible bug?

sean-mcl commented 1 year ago

I wrote an example to recreate this behaviour.

Example

Steps

  1. Create two subplots with separated y-axis and shared x-axis, each has one trace

image

  1. Delete the second trace

Expected behaviour

The range slider removes the second plot too.

image

Actually behaviour

The range slider has still the second plot.

image

HTML

<head>
  <script src="https://cdn.plot.ly/plotly-2.17.1.min.js"></script>
</head>
<body>
  <div id="graph"></div>
</body>

JavaScript

var trace1 = {
  x: [1, 2, 3],
  y: [4, 5, 6],
  xaxis: 'x',
  yaxis: 'x',
  type: 'scatter'
};

var trace2 = {
  x: [1, 2, 3],
  y: [6, 5, 4],
  xaxis: 'x',
  yaxis: 'y2',
  type: 'scatter'
};

var data = [trace1, trace2];

var layout = {
  xaxis: {
    rangeslider: {}
  },
  yaxis: {
    domain: [0, 0.4]
  },
  yaxis2:{
    domain: [0.6, 1]
  },
  grid: {
    rows: 2, 
    columns: 1
  }
};

Plotly.newPlot('graph', data, layout);

Plotly.deleteTraces('graph', 1);
Plotly.relayout('graph', {
  yaxis:{
    domain: [0, 1]
}});