React's Plotly.js uirevision does not work

plotly.js
1

Plotly has the option to zoom in on the chart by dragging the box.

Each time the react component is re-rendered, Persist user changes is initialized.

In Plotly options, there is option about it. “uirevision in Plotly.react in JavaScript”

I’ve already applied it, but there’s no change.

Here is my code

const GraphContainer = styled(Plot)`
  width: 100%;
  height: 300px;
`;

.....

return (
  <>
    <GraphContainer
      data={[
        {
          x: graphData.power.x,
          y: graphData.power.y,
          name: 'Graph',
          line: {
            color: theme.colors.chart.single[1],
          },
        },
      ]}
      layout={{
        xaxis: {
          type: 'date',
          range: [
            '2021-10-21 00:00:00',
            '2021-10-21 23:59:00',
          ],
        },
        yaxis: {
          tickformat: ',.0f',
          ticksuffix: 'kW',
        },
        uirevision: 'true',
      }}
      config={{ responsive: true, displayModeBar: false }}
    />
  </>
);

Another thing what I did:

In Link, there is explanation “user interaction will mutate layout and set autorange to false, so we need to reset it to true”. According to documents, I’ve setting the layout object to state, uirevision: ‘true’, yaxis and xaxis’s autorange set to true, but not work.

Someone help me please. Thank you.

2

I have the same issue, trying to use uirevision=Truein dash callback, but the camera is reset at every step of the animation. If I don’t return the figure but show it inside the callback (fig.show()) it works as intended, that is, the camera does not get reset at each animation step. Therefore this only seems to happen when returning the figure as the output of the callback.