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!