react-plotly.js icon indicating copy to clipboard operation
react-plotly.js copied to clipboard

How can I use animate method ?

Open zystudios opened this issue 1 year ago • 0 comments

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 });

zystudios avatar Feb 28 '24 10:02 zystudios