I'm trying to build Plotly chart where it shouldn't reset chart when dynamically adding data. I'm using buddy.works as deploy engine and i have limited ram so had to use " plotly.js-basic-dist-min" this is what I'm trying to achieve https://codepen.io/plotly/pen/ebMJEW .
but I'm facing problem while using dist-min version. as uirevision works fine on
import Plot from 'react-plotly.js';
but it doesn't work for
import createPlotlyComponent from "react-plotly.js/factory"; var Plotly = require('plotly.js-basic-dist-min')
do i need to pass any other options? or is there any mistakes in my code?
here's full code
`import React, { useEffect, useState } from 'react';
import './App.css';
import createPlotlyComponent from "react-plotly.js/factory";
var Plotly = require('plotly.js-basic-dist-min')
function App() {
const Plot = createPlotlyComponent(Plotly);
const [data, setData] = useState<any>({
x:[],
y:[],
type:'scatter'
})
useEffect(()=>{
let x:any=[]
let y:any=[]
let i=1;
let inval = setInterval(()=>{
x= [...x, i]
y= [...y, Math.floor(Math.random() * 10) + 1]
setData({
x:x,
y:y,
type:'scatter'
})
i++
}, 5000)
return ()=>{
clearInterval(inval);
}
},[])
return (
<div className="App">
<Plot
data={[data]}
config={{ scrollZoom: false, responsive: true, displaylogo: false}}
useResizeHandler={true}
style={{ width: "100%", height: "100%" }}
layout={{
title: 'User Zoom Persists<br>When uirevision Unchanged',
uirevision:'true',
xaxis: {autorange: true},
yaxis: {autorange: true}
}}
/>
</div>
);
}
export default App;
I'm trying to build Plotly chart where it shouldn't reset chart when dynamically adding data. I'm using buddy.works as deploy engine and i have limited ram so had to use " plotly.js-basic-dist-min" this is what I'm trying to achieve https://codepen.io/plotly/pen/ebMJEW .
but I'm facing problem while using dist-min version. as uirevision works fine on
import Plot from 'react-plotly.js';
but it doesn't work for
import createPlotlyComponent from "react-plotly.js/factory"; var Plotly = require('plotly.js-basic-dist-min')
`