Open zystudios opened 6 months ago
Plotly.animate("myDiv", { data: finalData }, { ...animationConfig });
Plotly.animate can be used with some css transtion effects, but there is no such method in react-plotly.js, how can I use this method ?thank you!
Here is a demo use animate
const animationConfig = { transition: { duration: 1000, easing: "cubic-in-out" }, frame: { duration: 1000 } }; // Initial Plot for Animation const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const initialData = [ { x: numbers, y: [0, 0, 0, 0, 0, 0, 0, 0, 0], name: "square", type: "bar" }, { x: numbers, y: [0, 0, 0, 0, 0, 0, 0, 0, 0], name: "cube", type: "bar" } ]; Plotly.newPlot("myDiv", initialData); // Final Plot with Animation const squares = numbers.map((x) => x * x); const cubes = numbers.map((x) => x * x * x); const trace1 = { x: numbers, y: squares, name: "square", type: "bar" }; const trace2 = { x: numbers, y: cubes, name: "cube", type: "bar" }; const finalData = [trace1, trace2]; Plotly.animate("myDiv", { data: finalData }, { ...animationConfig });
Plotly.animate can be used with some css transtion effects, but there is no such method in react-plotly.js, how can I use this method ?thank you!
Here is a demo use animate