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.