Update animations w/ react-plotly

[BG687]

I would like to animate my stacked area chart when the data updates (so the transition from the old data to the new data is smooth). Right now, when the data updates the chart just instantly changes to reflect the new data.

I don't see an animate function on the Plotly react component or its prototype. What is the best way to go about animating these charts? Is this possible?

Thanks

[nicolaskruchten]

This isn't currently possible within react-plotly.js but we're working on adding support for it in the underlying plotly.js library: plotly/plotly.js#1849

[GrahamWilsdon]

@nicolaskruchten any update on this?

[dmt0]

@GrahamWilsdon Some transitions are possible now, see the info in the PR that closed the mentioned issue: plotly/plotly.js#3217 (comment)

[billyhunt]

Are bar chart animations available? I was having trouble getting one to work.

I am doing something like

const HistogramComponent: FunctionComponent<{
  timeAggregation: any
  unitOfTime: any
}> = () => {

  const determineTickFormat = (interval: UnitOfTime) => {
    let tickFormat = '%y/%m'

    switch (interval) {
      case 'daily':
        tickFormat = '%d/%m/%Y'
        break
      case 'weekly':
        tickFormat = '%m/%Y'
        break
      case 'monthly':
        tickFormat = '%b %Y'
        break
      case 'yearly':
      default:
        tickFormat = '%Y'
        break
    }
    return tickFormat
  }

  let data: Partial<PlotData>[]
  let layout = {}

  const transition = {
    duration: 2000,
    easing: 'cubic-in-out'
  }

  const layout = {
    autosize: true,
    transition,
    margin: {
      l: 30,
      r: 30,
      b: 30,
      t: 15
    },
    font: {
      family: 'Heebo, Overpass, sans-serif',
      color: theme.fgGrey
    },
    xaxis: {
      ticklen: 5,
      tickwidth: 1,
      tickcolor: theme.fgGreyLight,
      ticks: 'outside',
      lineWidth: 1,
      fixedrange: true // disables zooming on x axis
    },
    yaxis: {
      lineWidth: 1,
      zerolinecolor: theme.fgGreyLight,
      fixedrange: true // disables zooming on y axis
    }
  }

  return (
    <StyledPlot
      data={data}
      layout={layout}
      useResizeHandler={true}
      config={config}
    />
  )
}

[nicolaskruchten]

No, bar chart animations are not merged yet... coming soon!

[CarlosAmaral]

@nicolaskruchten Do we already have Bar chart animations?

[nicolaskruchten]

Bar chart transitions are supported in recent versions of Plotly.js, yes.

[CarlosAmaral]

@nicholas-esterer I used the same code as @billyhunt. Didn't work. Do you have an example that you can share? Thank you!

[nicolaskruchten]

@CarlosAmaral which version of plotly.js are you using? Try 1.54.2 :)

[CarlosAmaral]

@nicholas-esterer I did that. Same outcome. No animation.

[nicolaskruchten]

Can you provide a full running example in a codepen or something for me to help you debug?

[qidian99]

Is there any example of animating the scatter plot?

[CarlosAmaral]

@nicolaskruchten https://264b4.codesandbox.io/ sorry for the delay

[nicolaskruchten]

@CarlosAmaral thanks! What part of this is meant to be animated?

[CarlosAmaral]

Thank you, @nicolaskruchten. Good question, the bars going up for example?

[nicolaskruchten]

You mean an on-load transition where the bars grow from zero? Or in response to user input or... ?

[CarlosAmaral]

@nicolaskruchten yes, on loading, just making the bars go from zero to their value.

[joan780]

@nicolaskruchten I run into the same problem. Is there any update?

[CarlosAmaral]

It actually works if you switch data. In my case: I was expecting an animation when opening a modal, probably it rendered before.

[joan780]

I also need animation when the chart is loading at first. Do you happen to have examples to share?

[CarlosAmaral]

@joan780 No, that's something that I wasn't yet able to accomplish but I'm looking into that.

[joan780]

@CarlosAmaral I just figured out a way of doing it but probably not a best practice though. Here it is -
https://codesandbox.io/s/red-shape-bb5y8?file=/src/plotly/plotly.js
Would like feedback about it!

[tony]

@joan780 When I try the example, I get this:

TypeError: Cannot read property 'document' of undefined

Not sure if it's related to the code itself, or codesandbox

[AlexBlack2202]

any update on this?

[openSourcerer9000]

Is there any example of animating the scatter plot?

Following this - it would be great to have a starting place to go off