Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How can I use animate method ? #338

Open
zystudios opened this issue Feb 28, 2024 · 0 comments
Open

How can I use animate method ? #338

zystudios opened this issue Feb 28, 2024 · 0 comments

Comments

@zystudios
Copy link

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 });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant