✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Vue & uirevision

I have a vue web app with multiple tabs on a single screen. Currently when the user zooms/pans/etc. on the plotly.js line chart the changes are not preserved. I want the state of the chart to be preserved when the user switches between tabs.

Currently I included uirevision property in the plot’s tag, and set it equal to true, but changes to the graph are being not preserved like I want.

<template>
    <v-card>
        <v-skeleton-loader type="card" :loading="getIsIncomingData['data'] && isObjectEmpty(getSelectedData['data'])">
            <v-card v-if="getSelectedGraphData('data').length !== 0">
                <h3> Graph </h3>
                <vue-plotly :data="getSelectedGraphData('data')" :layout="{ xaxis: {tickformat: '%b %e %H:%M:%S'}, uirevision: 'true', legend: {orientation:'h'}, showlegend: true}" :options="{ responsive:true}"/>
            </v-card>
            <v-card v-for="(item, index) in getSelectedTableData('data')" :key="index">
      </v-card>
</template>

Any ideas on why the uirevision is not working properly would be greatly appreciated, or alternative ways to preserve the zoom/pan/etc. Thanks!